Integrar Checkout Pro
A integração com o Checkout Pro permite realizar cobranças através do nosso formulário web a partir de qualquer dispositivo de forma simples, rápida e segura.
Nesta documentação você encontra todos os passos necessários para integrar o Checkout Pro através dos nossos SDKs. Para isso, siga as etapas descritas abaixo.
Instalar SDK do Mercado Pago
Server-Side
A primeira etapa para integrar o Checkout Pro é a instalação do SDK do Mercado Pago em seu projeto. Para isso, utilize um dos códigos disponíveis abaixo.
php composer.phar require "mercadopago/dx-php"
Para instalar o SDK, você deve executar o seguinte código na linha de comandos do seu terminal usando npm:
npm install mercadopago
Para instalar o SDK no seu projeto Maven, você deve adicionar a seguinte dependência ao seu arquivo pom.xml e executar o código maven install na linha de comandos do seu terminal:
<dependency>
<groupId>com.mercadopago</groupId>
<artifactId>sdk-java</artifactId>
<version>2.1.7</version>
</dependency>
Para instalar o SDK, você deve executar o seguinte código na linha de comandos do seu terminal usando gema:
gem install mercadopago-sdk
Para instalar o SDK, você deve executar o seguinte código na linha de comandos do seu terminal usando NuGet:
nuget install mercadopago-sdk
Para instalar o SDK, você deve executar o seguinte código na linha de comandos do seu terminal usando pip:
pip3 install mercadopago
Criar preferência
Server-Side
Preferências são conjuntos de informações que permitem configurar um produto ou serviço que se deseja cobrar, como preço e quantidade, além de outras configurações relacionadas ao fluxo de pagamento definido.
Para criar uma preferência, utilize um dos SDKs disponíveis abaixo preenchendo os atributos com as respectivas informações.
<?php
// SDK do Mercado Pago
require __DIR__ . '/vendor/autoload.php';
// Adicione as credenciais
MercadoPago\SDK::setAccessToken('PROD_ACCESS_TOKEN');
?>
// SDK do Mercado Pago
const mercadopago = require ('mercadopago');
// Adicione as credenciais
mercadopago.configure({
access_token: 'PROD_ACCESS_TOKEN'
});
// SDK de Mercado Pago
import com.mercadopago.MercadoPagoConfig;
// Agrega credenciales
MercadoPagoConfig.setAccessToken("PROD_ACCESS_TOKEN");
# SDK do Mercado Pago
require 'mercadopago'
# Adicione as credenciais
sdk = Mercadopago::SDK.new('PROD_ACCESS_TOKEN')
// SDK do Mercado Pago
using MercadoPago.Config;
// Adicione as credenciais
MercadoPagoConfig.AccessToken = "PROD_ACCESS_TOKEN";
# SDK do Mercado Pago
import mercadopago
# Adicione as credenciais
sdk = mercadopago.SDK("PROD_ACCESS_TOKEN")
Ao finalizar a criação da preferência, é preciso configurá-la de acordo com seu produto ou serviço. Para isso, utilize um dos códigos disponíveis abaixo preenchendo os atributos com as respectivas informações.
<?php
// Cria um objeto de preferência
$preference = new MercadoPago\Preference();
// Cria um item na preferência
$item = new MercadoPago\Item();
$item->title = 'Meu produto';
$item->quantity = 1;
$item->unit_price = 75;
$preference->items = array($item);
$preference->save();
?>
// Cria um objeto de preferência
let preference = {
items: [
{
title: 'Meu produto',
unit_price: 100,
quantity: 1,
}
]
};
mercadopago.preferences.create(preference)
.then(function(response){
// Este valor substituirá a string "<%= global.id %>" no seu HTML
global.id = response.body.id;
}).catch(function(error){
console.log(error);
});
PreferenceItemRequest itemRequest =
PreferenceItemRequest.builder()
.id("1234")
.title("Games")
.description("PS5")
.pictureUrl("http://picture.com/PS5")
.categoryId("games")
.quantity(2)
.currencyId("BRL")
.unitPrice(new BigDecimal("4000"))
.build();
List<PreferenceItemRequest> items = new ArrayList<>();
items.add(itemRequest);
PreferenceRequest preferenceRequest = PreferenceRequest.builder()
.items(items).build();
PreferenceClient client = new PreferenceClient();
Preference preference = client.create(request);
# Cria um objeto de preferência
preference_data = {
items: [
{
title: 'Meu produto',
unit_price: 75,
quantity: 1
}
]
}
preference_response = sdk.preference.create(preference_data)
preference = preference_response[:response]
# Este valor substituirá a string "<%= @preference_id %>" no seu HTML
@preference_id = preference['id']
// Cria o objeto de request da preferência
var request = new PreferenceRequest
{
Items = new List<PreferenceItemRequest>
{
new PreferenceItemRequest
{
Title = "Meu produto",
Quantity = 1,
CurrencyId = "COP",
UnitPrice = 75m,
},
},
};
// Cria a preferência usando o client
var client = new PreferenceClient();
Preference preference = await client.CreateAsync(request);
# Cria um objeto de preferência
preference_data = {
"items": [
{
"title": "My Item",
"quantity": 1,
"unit_price": 75
}
]
}
preference_response = sdk.preference().create(preference_data)
preference = preference_response["response"]
unit_price deve ser um número inteiro.Adicionar Checkout
Client-Side
Após ter criado a preferência em seu backend, será necessário instalar o SDK de frontend do Mercado Pago ao seu projeto para adicionar o botão de pagamento.
A instalação é feita, basicamente, em duas etapas: incluindo o SDK do Mercado Pago ao projeto com suas credenciais configuradas e iniciando o checkout a partir da preferência gerada anteriormente.
- Para incluir o SDK Mercado Pago.js, adicione o código abaixo no HTML do projeto ou instale a biblioteca para ReactJs.
// SDK MercadoPago.js
<script src="https://sdk.mercadopago.com/js/v2"></script>
npm install @mercadopago/sdk-react
Em seguida, inicialize a integração definindo sua chave pública usando o seguinte código JavaScript.
const mp = new MercadoPago('YOUR_PUBLIC_KEY');
import { initMercadoPago, Wallet } from '@mercadopago/sdk-react'
initMercadoPago('YOUR_PUBLIC_KEY');
Para integrações JavaScript/HTML, via CDN, você vai precisar ainda criar um container identificador para definir o local que o botão será inserido na tela. A criação do container é feita inserindo um elemento no código HTML da página no qual o componente será renderizado.
html
<div id="wallet_container"></div>- Ao finalizar a etapa anterior, inicialize seu checkout utilizando o ID da preferência previamente criada com o identificador do elemento onde o botão deverá ser exibido, caso esteja utilizando a integração
Javascript/HTML, ou instanciando o componente, no caso da bibliotecaReact, conforme os exemplos abaixo.
mp.bricks().create("wallet", "wallet_container", {
initialization: {
preferenceId: "<PREFERENCE_ID>",
},
});
<Wallet initialization={{ preferenceId: '<PREFERENCE_ID>' }} />
Em seguida, você poderá observar o botão de pagamento renderizado em sua página.
No exemplo acima, um botão de pagamento será renderizado e ficará responsável por abrir o Checkout Pro. Caso queira que a experiência com Checkout Pro seja feita em uma aba externa ou de forma modal, veja a seção Esquema de abertura
back_urls porque elas serão responsáveis por guiar o fluxo de retorno ao seu website quando o checkout for finalizado. É possível definir três URLs de retorno diferentes, para cenários de pagamento pendentes, sucesso ou erro. Para mais informações, veja a seção de
URLs de retorno.
Os pagamentos criados possuem os seguintes status: Pendente, Rejeitado e Aprovado. Para acompanhar as atualizações é necessário configurar seu sistema para receber as notificações de pagamentos e outras atualizações de status. Veja Notificações para mais detalhes.
Exemplo de implementação
Confira o exemplo completo de integração no GitHub para PHP ou NodeJS para fazer o download de um projeto básico de implementação rápida do Checkout Pro.
Para instalar o SDK, você deve executar o seguinte código na linha de comandos do seu terminal usando o Composer: