Add checkout

First, make sure you have created the preference in your backend.

Then, you will need to install the Mercado Pago frontend SDK in your project to add the payment button.

The installation is basically done in two steps:

1. Add the Mercado Pago SDK to the project with your configured credentials
2. Start the checkout from the previously generated preference

To include the Mercado Pago.js SDK, add the code below to the project's HTML or install the library for ReactJs.

          
// SDK MercadoPago.js
<script src="https://sdk.mercadopago.com/js/v2"></script>

        

          
npm install @mercadopago/sdk-react

        

Then, initialize the integration by setting your public key using the following JavaScript code.

          
const mp = new MercadoPago('YOUR_PUBLIC_KEY');
const bricksBuilder = mp.bricks();

        

          
import { initMercadoPago, Wallet } from '@mercadopago/sdk-react'
initMercadoPago('YOUR_PUBLIC_KEY');

        

For JavaScript/HTML integrations, via CDN, you will still need to create an identifier container to define the location where the button will be inserted on the screen. The creation of the container is done by inserting an element in the HTML code of the page in which the component will be rendered.

          
 <div id="wallet_container"></div>

        

At the end of the previous step, initialize your checkout using the ID of the previously created preference with the identifier of the element where the button should be displayed, if you are using the Javascript/HTML integration, or by instantiating the component, in the case from the React library, as shown in the examples below.

          
mp.bricks().create("wallet", "wallet_container", {
   initialization: {
       preferenceId: "<PREFERENCE_ID>",
   },
customization: {
 texts: {
  valueProp: 'smart_option',
 },
 },
});

        

          
<Wallet initialization={{ preferenceId: '<PREFERENCE_ID>' }} customization={{ texts:{ valueProp: 'smart_option'}}} />

        

You will then be able to observe the payment button rendered on your page.

In the example above, a payment button will be rendered and will be responsible for opening Checkout Pro. If you want the experience with Checkout Pro to be done in an external tab, check the section Opening Schema

At the end of the payment process, it is possible to redirect the buyer to another environment of the site through the back_urls attribute that is configured when creating the preference. The back_urls will be responsible for guiding the flow back to your website when the payment is completed. It is possible to define three different return URLs that correspond to scenarios of pending payment, success, or error.

For more information, please refer to the Return URL section.

When creating a payment it is possible to receive 3 different statuses: Pending, Rejected and Approved. To keep up with updates, you need to configure your system to receive payment notifications and other status updates. See Notifications for more details.

Check out the full integration example on GitHub for PHP or NodeJS to download a basic project for quick implementation from Checkout Pro.