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.
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 for that integration and will allow you to develop your project with the best security measures from Mercado Pago.
At this stage, you should use your test 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., which you can access by going to the application details in Your integrations, under the title Tests > Test 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.