Integrate Checkout Pro - Checkout Pro - Mercado Pago Developers

Integrate Checkout Pro

The integration with Checkout Pro allows you to charge via our web form from any device in a simple, fast and secure way.

In this documentation you will find all the necessary steps to integrate Checkout Pro through our SDKs. To do this, follow the steps described below.

It is also possible to perform the integration through calls via backend directly to the Preferences API . In this template, you will get the Checkout Pro link in the init_point attribute, in the API request response. From there, just use it to redirect the buyer to the checkout.

Install Mercado Pago SDK

The first step to integrate Checkout Pro is to install the Mercado Pago SDK in your project. To do this, use one of the codes available below.

To install the SDK, you must run the following code in your terminal command line using Composer:

          
php composer.phar require "mercadopago/dx-php"

        

To install the SDK, you must run the following code in your terminal command line using npm:

          
npm install Mercadopago

        
To install the SDK in your Maven project, you must add the following dependency to your pom.xml file and run the code < code>maven install in your terminal command line:
          
<dependency>
<groupId>com.mercadopago</groupId>
<artifactId>sdk-java</artifactId>
<version>2.0.0</version>
</dependency>

        

To install the SDK, you must run the following code in your terminal command line using gem:

          
gem install Mercadopago-sdk

        

To install the SDK, you must run the following code in the command line of your terminal using NuGet:

          
nuget install Mercadopago-sdk

        

To install the SDK, you must run the following code in the command line of your terminal using pip:

          
pip3 install MercadoPago

        

Create preference

Server-Side

Preferences are sets of information that allow you to configure a product or service that you want to charge, such as price and quantity, as well as other settings related to the defined payment flow.

To create a preference, use one of the SDKs available below, filling in the attributes with the respective information.

          
<?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")

        

When you finish creating the preference, you need to configure it according to your product or service. To do so, use one of the codes available below, filling in the attributes with the respective information.

          
<?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
PreferenceClient client = new PreferenceClient();

// Create a preference item
List<PreferenceItemRequest> items = new ArrayList<>();
PreferenceItemRequest item =
   PreferenceItemRequest.builder()
       .title("Meu produto")
       .quantity(1)
       .unitPrice(new BigDecimal("100"))
       .build();
items.add(item);

PreferenceRequest request = PreferenceRequest.builder().items(items).build();

client.create(request);

        
          
# 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 = "ARS",
            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"]

        

Add Checkout

Client-Side

Once you have created the preference in your backend, you will need to install the Mercado Pago frontend SDK to your project in order to add the Checkout Pro button.

The installation is done in two steps: adding the Mercado Pago SDK to the project with your configured credentials and starting the checkout from the previously generated preference.

  1. To include the Mercado Pago.js SDK, add the code below to the project's HTML.

html

// SDK MercadoPago.js
<script src="https://sdk.mercadopago.com/js/v2"></script>
  1. When you finish adding the Mercado Pago.js SDK, configure the SDK credentials and initialize your checkout with the ID of the previously created preference and the identifier of the element where the payment button should be displayed, as shown in the example below.
          
<div class="cho-container"></div>
<script>
const mp = new MercadoPago('PUBLIC_KEY', {
locale: 'pt-BR'
});

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

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

In the example above, a payment button will be rendered and will be responsible for opening Checkout Pro. If you want to customize the way the checkout will be opened, see the section Opening Schema

Implementation example

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