Receive payments by Mercado Pago wallet
Add in your integration the Checkout Pro wallet mode, so that you receive payments only from Mercado Pago registered users with their cards and available balance.
This means that your customers have more ways to pay you and can access better benefits, without changing the dynamics of your Checkout API.
Benefits of Mercado Pago wallet
Your customers can pay you with more payment methods and faster:
- With saved credit or debit cards in their Mercado Pago account, saving the effort of entering a card from the beginning. They also have their addresses saved, which simplifies the whole information entering process.
- With balance available in Mercado Pago they have the money ready to be used on the spot, in just 1 click.
Your clients can pay you in up to 12 installments without using a credit card, being financed by Mercado Crédito.
Your checkout conversion improves by offering more dynamic and easy-to-use payment methods.
Improve approval of your payments with less risk of fraud.
How to add the wallet on your website
You need to integrate Checkout Pro setup as wallet mode to add the Mercado Pago wallet to your website.
To integrate it, you need to generate the payment preference with the information of the product or service you want to offer and add the payment option on your website.
Steps to integrate the wallet
1. Generate your preference
Server-Side
To start, you need to generate your payment preference from your backend with the Mercado Pago SDK you used in your Checkout API.
<?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;
$preference->items = array($item);
$preference->purpose = 'wallet_purchase';
$preference->save();
?>
The wallet mode works by adding the purpose attribute to the preference.
// Create a preference object
let preference = {
items: [
{
title: 'My Item',
unit_price: 100,
quantity: 1,
}
],
purpose: 'wallet_purchase'
};
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);
});
The wallet mode works by adding the purpose attribute to the preference.
// 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);
preference.appendItem(item);
preference.setPurpose("wallet_purchase");
preference.save();
The wallet mode works by adding the purpose attribute to the preference.
# Create a preference object
preference_data = {
"items": [
{
"title": "My Item",
"unit_price": 100,
"quantity": 1
}
],
"purpose": "wallet_purchase"
}
preference = $mp.create_preference(preference_data)
# This value replaces the String "<%= @preference_id %>" in your HTML
@preference_id = preference["response"]["id"]
The wallet mode works by adding the purpose attribute to the preference.
// Create a preference object
Preference preference = new Preference();
// Create a preference item
preference.Items.Add(
new Item()
{
Title = "My Item",
Quantity = 1,
CurrencyId = CurrencyId.BRL,
UnitPrice = (decimal)75
}
);
preference.Purpose = "wallet_purchase"
preference.Save();
The wallet mode works by adding the purpose attribute to the preference.
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
}
],
"purpose": "wallet_purchase"
}'
2. Add the checkout to your website
Client-Side
Then, from your frontend, add the following code to display the Checkout Pro Wallet Mode payment button where 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; ?>"
data-button-label="Pay with Mercado Pago"
data-button-type="wallet">
</script>
<script
src="https://www.mercadopago.com.ar/integrations/v1/web-payment-checkout.js"
data-preference-id="<%= global.id %>"
data-button-label="Pagar con Mercado Pago"
data-button-type="wallet">
</script>
<script
src="https://www.mercadopago.com.ar/integrations/v1/web-payment-checkout.js"
data-preference-id="${preference.id}"
data-button-label="Pay with Mercado Pago"
data-button-type="wallet">
</script>
<script
src="https://www.mercadopago.com.ar/integrations/v1/web-payment-checkout.js"
data-preference-id="<%= @preference_id %>"
data-button-label="Pay with Mercado Pago"
data-button-type="wallet">
</script>
<script
src="https://www.mercadopago.com.ar/integrations/v1/web-payment-checkout.js"
data-preference-id="@Html.DisplayFor(model => model.id)"
data-button-label="Pay with Mercado Pago"
data-button-type="wallet">
</script>
For more information on each attribute, please check the API Reference.
Done! You already have the Mercado Pago wallet integrated on your website.
The wallet mode works by adding the purpose attribute to the preference.