Integrate Checkout Pro

How do I integrate?

Integration

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:

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

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 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>

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.

Next steps

RECOMMENDED

Test your integration

Check that everything works in your integration with test users.