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?
Generate your preference
1.1 Add the SDK downloaded from Mercado Pago in your project.
1.2 Add the credentials to enable the use of the Mercado Pago SDK.
1.3 Set the preference according to your product or service.
Add the checkout to your website
Steps to integrate
Installing the Checkout Pro consists of two steps:
1. Generate your preference
Write the following code consisting of three parts:
1.1 Add the Mercado Pago SDK in your project:
<?php
// Mercado Pago SDK
require __DIR__ . '/vendor/autoload.php';
?>
// Mercado Pago SDK
const mercadopago = require ('mercadopago');
// Mercado Pago SDK
import com.mercadopago.MercadoPago;
# Mercado Pago SDK
require 'mercadopago.rb'
// Mercado Pago SDK
using MercadoPago;
1.2 Add the credentials to enable the use of the Mercado Pago SDK:
<?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.rb'
# Add Your credentials
$mp = MercadoPago.new('PROD_ACCESS_TOKEN')
// Mercado Pago SDK
using MercadoPago;
// Add Your credentials
MercadoPago.SDK.AccessToken = "PROD_ACCESS_TOKEN";
1.3 Set the preference according to your product or service:
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
// Mercado Pago SDK
require __DIR__ . '/vendor/autoload.php';
// Add Your credentials
MercadoPago\SDK::setAccessToken('PROD_ACCESS_TOKEN');
// 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();
?>
// Mercado Pago SDK
const mercadopago = require ('mercadopago');
// Add Your credentials
mercadopago.configure({
access_token: 'PROD_ACCESS_TOKEN'
});
// 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);
});
// Mercado Pago SDK
import com.mercadopago.MercadoPago;
// Add Your credentials
MercadoPago.SDK.setAccessToken("PROD_ACCESS_TOKEN");
// 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();
# Mercado Pago SDK
require 'mercadopago.rb'
# Add Your credentials
$mp = MercadoPago.new('PROD_ACCESS_TOKEN')
# Create a preference object
preference_data = {
"items": [
{
"title": "My Item",
"unit_price": 100,
"quantity": 1
}
]
}
preference = $mp.create_preference(preference_data)
# This value replaces the String "<%= @preference_id %>" in your HTML
@preference_id = preference["response"]["id"]
// Mercado Pago SDK
using MercadoPago;
// Add Your credentials
MercadoPago.SDK.AccessToken = "PROD_ACCESS_TOKEN";
// Create a preference object
Preference preference = new Preference();
// Create a preference item
preference.Items.Add(
new Item()
{
Title = "My Item",
Quantity = 1,
CurrencyId = CurrencyId.MXN,
UnitPrice = (decimal)75.56
}
);
preference.Save();
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
}
]
}'
2. Add the checkout to your website
Finally, add the following code to show the payment button of your Checkout Pro in the place you want it to appear.
<script
src="https://www.mercadopago.com.ar/integrations/v1/web-payment-checkout.js"
data-preference-id="<?php echo $preference->id; ?>">
</script>
<script
src="https://www.mercadopago.com.ar/integrations/v1/web-payment-checkout.js"
data-preference-id='<%= global.id %>'>
</script>
<script
src="https://www.mercadopago.com.ar/integrations/v1/web-payment-checkout.js"
data-preference-id="${preference.id}">
</script>
<script
src="https://www.mercadopago.com.ar/integrations/v1/web-payment-checkout.js"
data-preference-id="<%= @preference_id %>">
</script>
<script
src="https://www.mercadopago.com.ar/integrations/v1/web-payment-checkout.js"
data-preference-id="@Html.DisplayFor(model => model.id)">
</script>
Excellent! You finished your integration.
Click on the link within your site and test the integration of your Checkout Pro.