Adicione a carteira do Mercado Pago - Checkout API - Mercado Pago Developers

Receba pagamentos com a carteira do Mercado Pago

Adicione na sua integração o Checkout Pro modo carteira, para que você receba pagamentos somente de usuários cadastrados no Mercado Pago, com seus cartões e saldo disponível.

Isto significa que seus clientes têm mais formas de te pagar e podem ter acesso aos melhores benefícios, sem mudar a dinâmica da sua API de Checkout.

Checkout-Wallet

Benefícios da carteira do Mercado Pago

  • Seus clientes podem te pagar com mais meios de pagamento e mais rapidamente:

    • Com cartões já salvos nas suas contas Mercado Pago, poupando o esforço de digitar as informações de um cartão do zero. Eles também têm seus endereços salvos, o que simplifica todo o processo de preenchimento.
    • Com saldo disponível no Mercado Pago, o dinheiro está pronto para ser usado na hora, em 1 clique.
  • A conversão do seu Checkout melhora ao oferecer meios de pagamento mais dinâmicos e fáceis de usar.

  • Melhora a aprovação dos seus pagamentos com menos risco de fraude.

Como adicionar a carteira no seu site

Você deve integrar o Checkout Pro configurado como modo carteira para adicionar a carteira do Mercado Pago no seu site.

Para integrá-lo, você deve gerar a preferência de pagamento com as informações do produto ou serviço que quer oferecer e adicionar a opção de pagamento no seu site.

Passos para integrar a carteira

      1. Gere sua preferência

Server-Side

Para começar, você precisa gerar sua preferência de pagamento pelo seu backend com a SDK do Mercado Pago que você usou na sua API de Checkout.

O modo carteira funciona adicionando o atributo purpose na preferência.

          
<?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->purpose = 'wallet_purchase';
$preference->save();
?>

        

O modo carteira funciona adicionando o atributo purpose na preferência.

          
// Cria um objeto de preferência
let preference = {
  items: [
    {
      title: 'Meu produto',
      unit_price: 100,
      quantity: 1,
    }
  ],
  purpose: 'wallet_purchase'
};

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);
});

        

O modo carteira funciona adicionando o atributo purpose na preferência.

          
// Cria um objeto de preferência
Preference preference = new Preference();

// Cria um item na preferência
Item item = new Item();
item.setTitle("Meu produto")
    .setQuantity(1)
    .setUnitPrice((float) 75);
preference.appendItem(item);
preference.setPurpose("wallet_purchase");
preference.save();

        

O modo carteira funciona adicionando o atributo purpose na preferência.

          
sdk = Mercadopago::SDK.new('ENV_ACCESS_TOKEN')
# Cria um objeto de preferência
preference_data = {
  items: [
    {
      title: 'Meu produto',
      unit_price: 100,
      quantity: 1
    }
  ],
  purpose: 'wallet_purchase'
}
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']

        

O modo carteira funciona adicionando o atributo purpose na preferência.

          
// Cria o objeto de request da preferência
var request = new PreferenceRequest
{
    Items = new List<PreferenceItemRequest>
    {
        new PreferenceItemRequest
        {
            Title = "Meu produto,
            Quantity = 1,
            CurrencyId = "CLP",
            UnitPrice = 75m,
        },
    },
    Purpose = "wallet_purchase",
};
// Cria a preferência
var client = new PreferenceClient();
Preference preference = await client.CreateAsync(request);

        
          
preference_data = {
    "items": [
        {
            "title": "Meu produto",
            "unit_price": 100,
            "quantity": 1
        }
    ],
    "purpose": "wallet_purchase"
}

preference_response = sdk.preference().create(preference_data)
preference = preference_response["response"]

        

O modo carteira funciona adicionando o atributo purpose na preferência.

          
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": "Meu produto",
            "quantity": 1,
            "unit_price": 75
        }
    ],
    "purpose": "wallet_purchase"
}'

        
Importante
O valor de unit_price deve ser um número inteiro.

      2. Adicione o checkout ao seu site

Client-Side

Depois, do seu frontend, adicione o seguinte código para exibir o botão de pagamento do Checkout Pro modo carteira onde você quiser que ele apareça.

          
// SDK Client-Side Mercado Pago
<script src="https://sdk.mercadopago.com/js/v2"></script>
<script>
// Adicione as credenciais do SDK
const mp = new MercadoPago('PUBLIC_KEY', {
      locale: 'es-AR'
});

const preferenceId = "<?php echo $preference->id; ?>"

// Inicializa o checkout
mp.checkout({
    preference: {
      id: 'YOUR_PREFERENCE_ID'
    },
    render: {
      container: '.cho-container', // Indica onde o botão de pagamento será exibido
      label: 'Pagar com Mercado Pago', // Muda o texto do botão de pagamento (opcional)
      type: 'wallet', // Aplica a marca do Mercado Pago ao botão
    }
});
</script>

        
          
// SDK Client-Side Mercado Pago
<script src="https://sdk.mercadopago.com/js/v2"></script>
<script>
// Adicione as credenciais do SDK
const mp = new MercadoPago('PUBLIC_KEY', {
      locale: 'es-AR'
});

// Inicializa o checkout
mp.checkout({
    preference: {
      id: 'YOUR_PREFERENCE_ID'
    },
    render: {
      container: '.cho-container', // Indica onde o botão de pagamento será exibido
      label: 'Pagar com Mercado Pago', // Muda o texto do botão de pagamento (opcional)
      type: 'wallet', // Aplica a marca do Mercado Pago ao botão
    }
});
</script>


        
          
// SDK Client-Side Mercado Pago
<script src="https://sdk.mercadopago.com/js/v2"></script>
<script>
// Adicione as credenciais do SDK
const mp = new MercadoPago('PUBLIC_KEY', {
      locale: 'es-AR'
});

const preferenceId = ${preference.id};

// Inicializa o checkout
mp.checkout({
    preference: {
      id: 'YOUR_PREFERENCE_ID'
    },
    render: {
      container: '.cho-container', // Indica onde o botão de pagamento será exibido
      label: 'Pagar com Mercado Pago', // Muda o texto do botão de pagamento (opcional)
      type: 'wallet', // Aplica a marca do Mercado Pago ao botão
    }
});
</script>

        
          
# SDK Client-Side Mercado Pago
<script src="https://sdk.mercadopago.com/js/v2"></script>
<script>
# Adicione as credenciais do SDK
const mp = new MercadoPago('PUBLIC_KEY', {
      locale: 'es-AR'
});

const preferenceId = "<%= @preference_id %>";

# Inicializa o checkout
mp.checkout({
    preference: {
      id: 'YOUR_PREFERENCE_ID'
    },
    render: {
      container: '.cho-container', # Indica onde o botão de pagamento será exibido
      label: 'Pagar com Mercado Pago', # Muda o texto do botão de pagamento (opcional)
      type: 'wallet', # Aplica a marca do Mercado Pago ao botão
    }
});
</script>

        
          
// SDK Client-Side Mercado Pago
<script src="https://sdk.mercadopago.com/js/v2"></script>
<script>
// Adicione as credenciais do SDK
const mp = new MercadoPago('PUBLIC_KEY', {
      locale: 'es-AR'
});

const preferenceId = @Html.DisplayFor(model => model.id);

// Inicializa o checkout
mp.checkout({
    preference: {
      id: 'YOUR_PREFERENCE_ID'
    },
    render: {
      container: '.cho-container', // Indica onde o botão de pagamento será exibido
      label: 'Pagar com Mercado Pago', // Muda o texto do botão de pagamento (opcional)
      type: 'wallet', // Aplica a marca do Mercado Pago ao botão
    }
});
</script>

        
          
# SDK Client-Side Mercado Pago
<script src="https://sdk.mercadopago.com/js/v2"></script>
<script>
# Adicione as credenciais do SDK
const mp = new MercadoPago('PUBLIC_KEY', {
      locale: 'es-AR'
});

const preferenceId = {{ preference_id }}

# Inicializa o checkout
mp.checkout({
    preference: {
      id: 'YOUR_PREFERENCE_ID'
    },
    render: {
      container: '.cho-container', # Indica onde o botão de pagamento será exibido
      label: 'Pagar com Mercado Pago', # Muda o texto do botão de pagamento (opcional)
      type: 'wallet', # Aplica a marca do Mercado Pago ao botão
    }
});
</script>

        
Esta documentação utiliza a nova versão da biblioteca. Para ver a versão anterior, vá para a seção de Receba pagamentos com a carteira do Mercado Pago com MercadoPago.js V1.

Para mais informações sobre cada atributo, confira a Referência de API.

Pronto! você já tem a carteira do Mercado Pago integrada no seu site.

Importante
Para testar, não esqueça de acessar de outro navegador ou encerrar a sessão da sua conta Mercado Pago já que você não pode fazer um pagamento para si mesmo.

Próximos passos