Configure development environment
To start integrating 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.
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-jsInitialize 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, unique 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 for that integration, and will allow you to develop your project with Mercado Pago's best security measures.
At this stage, you should use your test Public KeyPublic key used in the frontend to access information and encrypt data. You can access it through Your integrations in the Integration data section, going to the Credentials section located on the right side of the screen and clicking Test. Alternatively, you can go through Your integrations > Application details > Tests > Test credentials..
Once you have located the test Public KeyPublic key used in the frontend to access information and encrypt data, whether in the development or testing stage. You can access it through Your integrations in the Integration data section, going to the Credentials section located on the right side of the screen and clicking Test. Alternatively, you can go through Your integrations > Application data > Tests > Test credentials., copy it and include it in the frontend to access the necessary data to interact with our services, as well as encrypt sensitive data involved in the payments you will receive.
<script>
const mp = new MercadoPago("YOUR_PUBLIC_KEY");
</script>import { loadMercadoPago } from "@mercadopago/sdk-js";
async function initMercadoPago() {
await loadMercadoPago();
const mp = new window.MercadoPago("YOUR_PUBLIC_KEY");
}
initMercadoPago();With this, your development environment is now ready to move forward with the specific configurations of your integration.