Mercado Pago Account
The option to pay with Mercado Pago Wallet, by default, is presented in all Mercado Pago Checkouts in combination with guest user payments (no login).
This option allows users registered in Mercado Pago and/or Mercado Livre to log in and use the available methods to make their payments, in addition to being able to include new payment options, such as credit cards.
It is possible to pay with card, available balance and in a safe and optimized environment, increasing the chances of converting sales, in addition to allowing the seller to only offer payments with wallet. With this, the option to pay without logging in will not exist, however, it will contribute to an increase in the conversion of payments.
Follow the steps below to configure the Mercado Pago Wallet as a payment method.
Create preference
Server-Side
If you are a user and want all your payments to be made via Wallet, you can determine this via an attribute in the preferences API. To create a preference, use one of the SDKs below.
purpose and the value wallet_purchase to the endpoint /checkout/preferences and execute the request or, if you prefer, use one of the SDKs below.
<?php
// Create a preference object
$preference = new MercadoPago\Preference();
// Create an item in the preference
$item = new MercadoPago\Item();
$item->title = 'My product';
$item->quantity = 1;
$item->unit_price = 75;
$preference->items = array($item);
$preference->purpose = 'wallet_purchase';
$preference->save();
?>
Wallet mode works by adding the purpose attribute to the preference.
// Create a preference object
let preference = {
items: [
{
title: 'My product',
unit_price: 100,
quantity: 1,
}
],
purpose: 'wallet_purchase'
};
Mercadopago.preferences.create(preference)
.then(function(response){
global.id = response.body.id;
}).catch(function(error){
console.log(error);
});
Wallet mode works by adding the purpose attribute to the preference.
// Create a preference object
PreferenceClient client = new PreferenceClient();
// Create an item in the preference
PreferenceItemRequest item =
PreferenceItemRequest.builder()
.title("My product")
.quantity(1)
.unitPrice(new BigDecimal("75"))
.build();
MercadoPagoConfig.setAccessToken("YOUR_ACCESS_TOKEN");
List<PreferenceItemRequest> items = new ArrayList<>();
items.add(item);
PreferenceRequest request =
PreferenceRequest.builder().items(items).purpose("wallet_purchase").build();
client.create(request);
Wallet mode works by adding the purpose attribute to the preference.
sdk = Mercadopago::SDK.new('ENV_ACCESS_TOKEN')
# Create a preference object
preference_data = {
items: [
{
title: 'My product',
unit_price: 100,
quantity: 1
}
],
purpose: 'wallet_purchase'
}
preference_response = sdk.preference.create(preference_data)
preference = preference_response[:response]
# This value will replace the string "<%= @preference_id %>" in your HTML
@preference_id = preference['id']
Wallet mode works by adding the purpose attribute to the preference.
// Create the preference request object
var request = new PreferenceRequest
{
Items = new List<PreferenceItemRequest>
{
new PreferenceItemRequest
{
Title = "My product,
quantity = 1,
CurrencyId = "CLP",
UnitPrice = 75m,
},
},
Purpose = "wallet_purchase",
};
// Create the preference
var client = new PreferenceClient();
Preference preference = await client.CreateAsync(request);
preference_data = {
"items": [
{
"title": "My product",
"unit_price": 100,
"quantity": 1
}
],
"purpose": "wallet_purchase"
}
preference_response = sdk.preference().create(preference_data)
preference = preference_response["response"]
unit_price value must be an integer.Add checkout
Client-Side
After creating the preference in the backend, it will be necessary to install the Mercado Pago frontend SDK to the project to add the payment button.
The installation is done in two steps: including the Mercado Pago SDK to the project with its configured credentials and initiating checkout from the preference generated previously. To do this, follow the steps listed below.
- To include the MercadoPago.js SDK, add the code below to the project's HTML or install it via NPM as indicated in the examples below.
<body>
<script src="https://sdk.mercadopago.com/js/v2"></script>
</body>
npm install @mercadopago/sdk-js
Next, initialize the integration by setting your public key using the following code.
<script>
const mp = new MercadoPago("YOUR_PUBLIC_KEY");
</script>
import { loadMercadoPago } from "@mercadopago/sdk-js";
await loadMercadoPago();
const mp = new window.MercadoPago("YOUR_PUBLIC_KEY");
Once this is done, it is necessary to create a container to define the location where the button will be inserted on the screen. The container is created by inserting an element into the HTML code of the page where the component will be rendered.
<div id="wallet_container"></div>
- After completing the previous step, initialize your checkout using the ID of the preference previously created with the identifier of the element where the button should be displayed.
mp.bricks().create("wallet", "wallet_container", {
initialization: {
preferenceId: "<PREFERENCE_ID>",
},
});
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.
Wallet mode works by adding the purpose attribute to the preference.