Error: Expected the PUBLIC_KEY to render the MercadoPago SDK React

[henq98]

Nevertheless, I get 201 from MercadoPago's API, and I can use “init_point” to pay via MercadoPago's website.

I already tried running “initMercadoPago” in the payment's and root's page files, but I'm still getting such error when the “Wallet” component should be rendered.

Packages version: "next": "^15.0.3", "react": "^18.3.1", "@mercadopago/sdk-react": "^0.0.19"

Any ideas?

[meliguicarvalho]

Hi!

Sorry, but from your description I cannot understand the problem you are facing.
If your problem is with the React SDK, please open a question, showing your implementation in detail, on the discussion page for the aforementioned SDK.
Github page link.

Thanks!

[Nahu258]

Hi! I ran into the same issue today and managed to resolve it.

Packages version: "next": "15.0.3", "react": "18.3.1", "@mercadopago/sdk-react": "0.0.20"

It turns out the problem is related to how environment variables are handled in Next.js. In this case, you need to use variables that are prefixed with NEXT_PUBLIC_ to make them accessible on the client side.

I changed this line:

initMercadoPago(process.env.PUBLIC_KEY)

To this:

initMercadoPago(process.env.NEXT_PUBLIC_PUBLIC_KEY as string)

Note: I'm using typescript as well so I needed to add as string to ensure TypeScript knows the value is a string.