Add the SDK to the frontend and initialize the checkout
Client-Side
Once you have configured your backend, you need to configure the frontend to complete the payment experience on the client-side. For this, you can use the MercadoPago.js SDK, which allows you to capture payments directly on the frontend securely.
In this section, you will learn how to include and initialize it correctly, to finally render the Mercado Pago payment button.
Include the SDK with HTML/js
To include the MercadoPago.js SDK in your HTML page from a CDN (Content Delivery Network), you first need to add the <script> tag just before the </body> tag in your main HTML file, as shown in the following example.
html
<!DOCTYPE html> <html> <head> <title>My integration with Checkout Pro</title> </head> <body> <!-- Your page content --> <script src="https://sdk.mercadopago.com/js/v2"></script> <script> // Your JavaScript code will go here </script> </body> </html>
Inicializar el checkout desde la preferencia de pago
Después de incluir el SDK en tu frontend, es momento de inicializarlo y luego iniciar el Checkout.
To continue, you must use your production public key credential, which can be accessed in the Details of your application in Your integrations, under the title Production > Production credentials in the menu on the left side of the screen.
You will also need to use the payment preference ID that you obtained as a response in Create and configure a payment preference.
Next, to initialize the SDK using a CDN, you should execute this code within the <script> tag, replacing the value YOUR_PUBLIC_KEY with your key and YOUR_PREFERENCE_ID with the payment preference ID.
js
<script src="https://sdk.mercadopago.com/js/v2"></script> <script> // Configure your Mercado Pago public key const publicKey = 'YOUR_PUBLIC_KEY'; // Set the preference ID you should receive from your backend const preferenceId = 'YOUR_PREFERENCE_ID'; // Initialize the Mercado Pago SDK const mp = new MercadoPago(publicKey); // Create the payment button const checkout = mp.checkout({ preference: { id: preferenceId }, render: { container: '#wallet_container', // Use the ID of your existing div label: 'Pay with Mercado Pago' } }); </script>
Create an HTML container for the payment button
Client-Side
Finally, you will need to create a container in your HTML to define the location where the MercadoPago payment button will be displayed. The creation of the container is done by inserting an element in the HTML code of the page where the component will be rendered.
html
<!-- Container for the payment button --> <div id="wallet_container"></div>
Render the payment button
The Mercado Pago SDK will automatically render a button within this element, which will be responsible for redirecting the buyer to a purchase form in the Mercado Pago environment, as shown in the following image.
Once you have completed the configuration of your frontend, you will need to set up Notifications so that your integration receives real-time information about the events that occur in your integration.