Como adicionar a carteira no seu site - Receba pagamentos com a carteira do Mercado Pago - Mercado Pago Developers

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

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

// Cria um item na preferência
PreferenceItemRequest item =
   PreferenceItemRequest.builder()
       .title("Meu produto")
       .quantity(1)
       .unitPrice(new BigDecimal("75"))
       .build();

List<PreferenceItemRequest> items = new ArrayList<>();
items.add(item);

PreferenceRequest request =
   PreferenceRequest.builder().items(items).purpose("wallet_purchase").build();

client.create(request);

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 = "MXN",
            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"
}'

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: 'pt-BR'
});

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

// Inicializa o checkout
mp.checkout({
    preference: {
      id: preferenceId
    },
    render: {
      container: '.cho-container', // Indique o nome da class onde será exibido o botão de pagamento
      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: 'pt-BR'
});

// 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: 'pt-BR'
});

const preferenceId = ${preference.id};

// Inicializa o checkout
mp.checkout({
    preference: {
      id: preferenceId
    },
    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: 'pt-BR'
});

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

# Inicializa o checkout
mp.checkout({
    preference: {
      id: preferenceId
    },
    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: 'pt-BR'
});

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

// Inicializa o checkout
mp.checkout({
    preference: {
      id: preferenceId
    },
    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: 'pt-BR'
});

const preferenceId = {{ preference_id }}

# Inicializa o checkout
mp.checkout({
    preference: {
      id: preferenceId
    },
    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 .

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.