Integrate Checkout Pro

Integrating Mercado Pago's Checkout Pro allows you to charge your customers through our web form from any device in a simple, fast and secure way.

Use our sample projects for a complete integration. You can adapt them according to your needs.

How do I integrate?

Integration

Generate your preference
1.1 Add the SDK downloaded from Mercado Pago in your project and the credentials to enable its use.
1.2 Set the preference according to your product or service.
Add the checkout to your website
2.1 Add the MercadoPago.js V2 SDK to your frontend.
2.2 Add the credentials to enable the use of the SDK and initialize the checkout with the created preference.

Steps to integrate

Installing the Checkout Pro consists of two steps:

1. Generate your preference

Server-Side

Write the following code consisting of two parts:

1.1 Add the Mercado Pago SDK in your project and the credentials to enable its use:

          
<?php
// Mercado Pago SDK
require __DIR__ .  '/vendor/autoload.php';
// Add Your credentials
MercadoPago\SDK::setAccessToken('PROD_ACCESS_TOKEN');
?>

          
// Mercado Pago SDK
const mercadopago = require ('mercadopago');
// Add Your credentials
mercadopago.configure({
  access_token: 'PROD_ACCESS_TOKEN'
});

          
// Mercado Pago SDK
import com.mercadopago.MercadoPago;
// Add Your credentials
MercadoPago.SDK.setAccessToken("PROD_ACCESS_TOKEN");

          
# Mercado Pago SDK
require 'mercadopago'
# Add Your credentials
sdk = Mercadopago::SDK.new('PROD_ACCESS_TOKEN')

          
// Mercado Pago SDK
 using MercadoPago.Config;
 // Add Your credentials
MercadoPagoConfig.AccessToken = "PROD_ACCESS_TOKEN";

          
# Mercado Pago SDK
import mercadopago
# Add Your credentials
sdk = mercadopago.SDK("PROD_ACCESS_TOKEN")

1.2 Set the preference according to your product or service:

Note that you need to configure the back_urls if you want to return to your site at the end of the payment. For more information, you can visit the Advanced integration section.

          
<?php
// Create a preference object
$preference = new MercadoPago\Preference();

// Create a preference item
$item = new MercadoPago\Item();
$item->title = 'My Item';
$item->quantity = 1;
$item->unit_price = 75.56;
$preference->items = array($item);
$preference->save();
?>

          
// Create a preference object
let preference = {
  items: [
    {
      title: 'My Item',
      unit_price: 100,
      quantity: 1,
    }
  ]
};

mercadopago.preferences.create(preference)
.then(function(response){
// This value replaces the String "<%= global.id %>" in your HTML
  global.id = response.body.id;
}).catch(function(error){
  console.log(error);
});

          
// Create a preference object
Preference preference = new Preference();

// Create a preference item
Item item = new Item();
item.setTitle("My Item")
    .setQuantity(1)
    .setUnitPrice((float) 75.56);
preference.appendItem(item);
preference.save();

          
# Create a preference request
preference_data = {
  items: [
    {
      title: 'My Item',
      unit_price: 75.56,
      quantity: 1
    }
  ]
}
preference_response = sdk.preference.create(preference_data)
preference = preference_response[:response]

# This value replaces the String "<%= @preference_id %>" in your HTML
@preference_id = preference['id']

          
// Create the preference request object
var request = new PreferenceRequest
{
    Items = new List<PreferenceItemRequest>
    {
        new PreferenceItemRequest
        {
            Title = "My Item",
            Quantity = 1,
            CurrencyId = "MXN",
            UnitPrice = 75.56m,
        },
    },
};

// Create the preference using the client
var client = new PreferenceClient();
Preference preference = await client.CreateAsync(request);

          
# Create a preference item
preference_data = {
    "items": [
        {
            "title": "My Item",
            "quantity": 1,
            "unit_price": 75.76
        }
    ]
}

preference_response = sdk.preference().create(preference_data)
preference = preference_response["response"]

          
curl -X POST \
  'https://api.mercadopago.com/checkout/preferences' \
  -H 'Content-Type: application/json' \
  -H 'cache-control: no-cache' \
  -H 'Authorization: Bearer **PROD_ACCESS_TOKEN**' \
  -d '{
    "items": [
        {
            "title": "My Item",
            "quantity": 1,
            "unit_price": 75.76
        }
    ]
}'

Accept payments only from registered users

If you want to accept payments only from registered users, with cards and money in Mercado Pago account, review this section for more information.

2. Add the Checkout Pro to your website

Client-Side

Finally, follow these steps to add the checkout to your website.

2.1. Add the MercadoPago.js V2 SDK to your project:

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

2.2. Add the SDK credentials to enable its use and initialize the checkout using the ID from the preference created earlier and the ID or selector for the element where the payment button should be displayed.

          
<script>
// Add the SDK credentials
  const mp = new MercadoPago('PUBLIC_KEY', {
        locale: 'es-AR'
  });
  
  // Initialize the checkout
  mp.checkout({
    preference: {
        id: 'YOUR_PREFERENCE_ID'
    },
    render: {
      container: '.cho-container', // Indicates where the payment button is going to be rendered
      label: 'Pagar', // Changes the button label (optional)
    }
});
</script>

This will display a payment button that will open the Checkout Pro.

You can check other ways to open the checkout in the Customizations section.

This documentation uses the new library version. To see the previous version, go to the old Integrate Checkout Pro section.

Important

Do not forget to access from another browser or log out of your Mercado Pago account before testing it. You cannot make a payment with the same account you created the payment form.

Excellent! You finished your integration.

Click on the link within your site and test the integration of your Checkout Pro.

Sample projects

Checkout Pro

Use our complete integration examples on GitHub in PHP or NodeJS to download instantly.

Next steps

RECOMMENDED

Test your integration

Check that everything works in your integration with test users.