Integrate Checkout Pro - Checkout Pro - Mercado Pago Developers

Integrate with Checkout Pro

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

Note
Use the implementation example to understand and learn more about the complete integration with Checkout Pro.

Step by step

Integration

Installing the Checkout Pro consists of two main steps:

  1. Generating the desired preferences;
  2. Adding the Checkout Pro to your website.

 1. Generate your preference

Server-Side

Add the Mercado Pago SDK and the needed credentials in your project to enable the use of preferences: :

          
<?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.MercadoPagoConfig;
// Add Your credentials
MercadoPagoConfig.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")

        

Then, set the preference according to your product or service:

          
<?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;
$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);
preference.appendItem(item);
preference.save();

        
          
# Create a preference request
preference_data = {
  items: [
    {
      title: 'My Item',
      unit_price: 75,
      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 = "COP",
            UnitPrice = 75m,
        },
    },
};

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

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

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
        }
    ]
}'

        
Important
The value of unit_price must be an integer.

Adapt the Checkout Pro integration to your business
Access the Preferences section to know how to add new features to the Checkout Pro according to your business model.

 2. Add the Checkout Pro to your website

Client-Side

Add the MercadoPago.js V2 SDK to your project:

html

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

Then, 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:

          
<div class="cho-container"></div>
<script>
  const mp = new MercadoPago('PUBLIC_KEY', {
    locale: 'en-US'
  });

  mp.checkout({
    preference: {
      id: 'YOUR_PREFERENCE_ID'
    },
    render: {
      container: '.cho-container',
      label: 'Pay',
    }
  });
</script>

        
Note
Remember to replace the value US for your country in the field locale.

According to the example above, a payment button will be displayed and will be responsible for opening the Checkout Pro.

You can check out other ways to open the checkout in the User interface section.

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

Sample project

Check out the full integration example available on GitHub for PHP or NodeJS to download a basic sample project for quick implementation of Checkout Pro on your website.