Compra ahora, paga después
Meses sin Tarjeta es el método de financiación de Mercado Pago que ofrece la opción de pagar en mensualidades sin contar con una tarjeta.
Con esta línea de crédito, administrada por Mercado Pago, el dinero se acredita en su totalidad en la cuenta del vendedor, mientras que el cliente puede optar por pagar en hasta 12 pagos fijos mensuales, sin necesidad de contar con una tarjeta. El usuario solamente tendrá que ingresar a su cuenta de Mercado Pago (o crear una), conocer su límite disponible y elegir en cuántos meses quiere pagar.
En esta guía encontrarás los pasos necesarios para ofrecer Meses sin Tarjeta en tu tienda.
Configuración de integración
Crear preferencia
Server-Side
Preferencia es un conjunto de información sobre un producto y/o servicio que te permiten definir el nombre, el método de pago y otros atributos necesarios para obtener la URL para iniciar el flujo de pago al finalizar la compra.
La primera etapa para configurar los pagos con Meses sin Tarjeta es la creación de la preferencia. Para esto, envía un POST con el parámetro purpose y el valor onboarding_credits al endpoint /checkout/preferences y ejecuta la solicitud o, si lo prefieres, utiliza uno de los SDKs indicados a continuación.
<?php
// Crea un objeto de preferencia
$preference = new MercadoPago\Preference();
// Crea un ítem en la preferencia
$item = new MercadoPago\Item();
$item->title = 'Mi producto';
$item->quantity = 1;
$item->unit_price = 75;
$preference->items = array($item);
$preference->purpose = 'onboarding_credits';
$preference->save();
?>
// Crea un objeto de preferencia
let preference = {
items: [
{
title: 'Mi producto',
unit_price: 100,
quantity: 1,
}
],
purpose: 'onboarding_credits'
};
mercadopago.preferences.create(preference)
.then(function(response){
global.id = response.body.id;
}).catch(function(error){
console.log(error);
});
// Crea un objeto de preferencia
PreferenceClient client = new PreferenceClient();
// Crea un ítem en la preferencia
PreferenceItemRequest item =
PreferenceItemRequest.builder()
.title("Mi producto")
.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("onboarding_credits").build();
client.create(request);
sdk = Mercadopago::SDK.new('ENV_ACCESS_TOKEN')
# Crea un objeto de preferencia
preference_data = {
items: [
{
title: 'Mi producto',
unit_price: 100,
quantity: 1
}
],
purpose: 'onboarding_credits'
}
preference_response = sdk.preference.create(preference_data)
preference = preference_response[:response]
# Este valor substituirá a la string "<%= @preference_id %>" en tu HTML
@preference_id = preference['id']
// Crea el objeto de request de la preferencia
var request = new PreferenceRequest
{
Items = new List<PreferenceItemRequest>
{
new PreferenceItemRequest
{
Title = "Mi producto",
Quantity = 1,
CurrencyId = "MXN",
UnitPrice = 75m,
},
},
Purpose = "onboarding_credits",
};
// Crea la preferencia
var client = new PreferenceClient();
Preference preference = await client.CreateAsync(request);
preference_data = {
"items": [
{
"title": "Mi producto",
"unit_price": 100,
"quantity": 1
}
],
"purpose": "onboarding_credits"
}
preference_response = sdk.preference().create(preference_data)
preference = preference_response["response"]
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": "onboarding_credits"
}'
Añadir checkout
Client-Side
Después de haber creado la preferencia en el backend, para adicionar el botón de pago será necesario instalar el SDK de frontend de Mercado Pago en el proyecto.
La instalación se hace en dos etapas: primero, incluyendo el SDK de Mercado Pago en el proyecto con tus credenciales configuradas, y luego, iniciando el checkout a partir de esa preferencia generada anteriormente.
- Para incluir el SDK MercadoPago.js, agrega el código disponible debajo en el HTML del proyecto, o instálalo vía NPM de acuerdo a lo indicado en los ejemplos a continuación.
<body>
<script src="https://sdk.mercadopago.com/js/v2"></script>
</body>
npm install @mercadopago/sdk-js
Luego, inicializa la integración al definir tu clave pública usando el siguiente código.
<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");
Hecho esto, es necesario que crees un container para definir la ubicación que el botón tendrá en la pantalla. La creación de este container se hace insertando un elemento en el código HTML de la página en la que el componente será renderizado.
<div id="wallet_container"></div>
- Al finalizar la etapa anterior, inicializa tu checkout utilizando el ID de la preferencia previamente creada con el identificador del elemento donde el botón deberá ser exhibido.
mp.bricks().create("wallet", "wallet_container", {
initialization: {
preferenceId: "<PREFERENCE_ID>",
},
customization: {
texts: {
valueProp: "convenience",
},
},
});
¡Listo! Al completar los pasos descritos anteriormente, el botón de pago se mostrará en la pantalla y habrás completado la integración. Sigue los siguientes pasos para explicar a tus clientes cómo funciona Meses sin Tarjeta.
- Crea una cuenta o ingresa en Mercado Pago. Si usas Mercado Libre, ¡ya tienes cuenta!
- Elige Meses sin Tarjeta y la cantidad de mensualidades en las que quieras pagar.
- Después paga tus mensualidades desde la app de Mercado Pago.