Configure development environment
To start your integration with Mercado Pago's payment solutions, it is necessary to prepare your development environment with a series of basic configurations that will allow you to access Mercado Pago's functionalities from the frontend securely.
The development environment can be configured for integrations on websites or mobile applications. Select the type of integration below and follow the specific instructions for each case.
Include the MercadoPago.js Library
Client-Side
Use our official libraries to access Mercado Pago's functionalities from your frontend and securely capture the payment data.
<body>
<script src="https://sdk.mercadopago.com/js/v2"></script>
</body>
npm install @mercadopago/sdk-js
Initialize Mercado Pago Library
Client-Side
To initialize the Mercado Pago library, you will need to use your credentialsUnique access keys used to identify an integration in your account, linked to your application. For more information, access the link below.Credentials, keys that identify an integration in your account. They are directly linked to the applicationEntity registered in Mercado Pago that acts as an identifier for managing your integrations. For more information, access the link below.Application details you created.
At this stage, you should use your production Public KeyPublic key used in the frontend to access information and encrypt data. You can access it through Your integrations > Application details > Production > Production credentials., which you can access by going to the application details in Your integrations, under the title Production > Production credentials in the menu located on the left side of the screen.
Once you have located the Public KeyTesting public key, used in the frontend to access information and encrypt data, whether in the development stage or the testing stage. You can access it through Your integrations > Application details > Testing > Testing credentials., copy it and include it in the frontend. By doing this, you will be able to access the necessary data for each payment method, as well as encrypt payer and card data.
<script>
const mp = new MercadoPago("YOUR_PUBLIC_KEY");
</script>
import { loadMercadoPago } from "@mercadopago/sdk-js";
await loadMercadoPago();
const mp = new window.MercadoPago("YOUR_PUBLIC_KEY");
With these configurations, your development environment is already ready to continue with the setup of each of the payment methods you want to offer in the online store.