Renderizado por defecto
Antes de realizar la renderización del Payment Brick, primero ejecute los pasos de inicialización compartidos entre todos los Bricks. A partir de esto, a continuación se presentan las informaciones necesarias para que configures y renderices el Payment Brick.
Configurar el Brick
Crea la configuración de inicio del Brick.
const renderPaymentBrick = async (bricksBuilder) => {
const settings = {
initialization: {
/*
"amount" es el monto total a pagar por todos los medios de pago con excepción
de la Cuenta de Mercado Pago y Cuotas sin tarjeta de crédito, las cuales tienen su valor de procesamiento determinado en el backend a través del "preferenceId". Debe ser un número entero.
*/
amount: 100,
preferenceId: "<PREFERENCE_ID>",
},
customization: {
paymentMethods: {
creditCard: "all",
debitCard: "all",
mercadoPago: "all",
},
},
callbacks: {
onReady: () => {
/*
Callback llamado cuando el Brick está listo.
Aquí puede ocultar cargamentos de su sitio, por ejemplo.
*/
},
onSubmit: ({ selectedPaymentMethod, formData }) => {
// callback llamado al hacer clic en el botón enviar datos
return new Promise((resolve, reject) => {
fetch("/process_payment", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(formData),
})
.then((response) => response.json())
.then((response) => {
// recibir el resultado del pago
resolve();
})
.catch((error) => {
// manejar la respuesta de error al intentar crear el pago
reject();
});
});
},
onError: (error) => {
// callback llamado para todos los casos de error de Brick
console.error(error);
},
},
};
window.paymentBrickController = await bricksBuilder.create(
"payment",
"paymentBrick_container",
settings
);
};
renderPaymentBrick(bricksBuilder);
const initialization = {
amount: 100,
/*
"amount" es el monto total a pagar por todos los medios de pago con excepción
de la Cuenta de Mercado Pago y Cuotas sin tarjeta de crédito, las cuales tienen su valor de procesamiento determinado en el backend a través del "preferenceId". Debe ser un número entero.
*/
preferenceId: "<PREFERENCE_ID>",
};
const customization = {
paymentMethods: {
creditCard: "all",
debitCard: "all",
mercadoPago: "all",
},
};
const onSubmit = async (
{ selectedPaymentMethod, formData }
) => {
// callback llamado al hacer clic en el botón enviar datos
return new Promise((resolve, reject) => {
fetch("/process_payment", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(formData),
})
.then((response) => response.json())
.then((response) => {
// recibir el resultado del pago
resolve();
})
.catch((error) => {
// manejar la respuesta de error al intentar crear el pago
reject();
});
});
};
const onError = async (error) => {
// callback llamado para todos los casos de error de Brick
console.log(error);
};
const onReady = async () => {
/*
Callback llamado cuando el Brick está listo.
Aquí puede ocultar cargamentos de su sitio, por ejemplo.
*/
};
Para utilizar un método de pago (paymentMethods
) del tipo "mercadoPago", se debe enviar una preferencia durante la inicialización del Brick, reemplazando el valor <PREFERENCE_ID>
por el ID de la preferencia creada. Las instrucciones para crear una preferencia se encuentran en la sección Habilitar pago con Mercado Pago.
Renderizar el Brick
Una vez creadas las configuraciones, ingrese el código a continuación para renderizar el Brick.
<div id="paymentBrick_container"></div>
import { Payment } from '@mercadopago/sdk-react';
<Payment
initialization={initialization}
customization={customization}
onSubmit={onSubmit}
onReady={onReady}
onError={onError}
/>
El resultado de renderizar el Brick debería parecerse a la imagen de abajo.
Habilitar pago con Mercado Pago
Para utilizar un método de pago (paymentMethods) del tipo "mercadoPago", se debe enviar una preferencia durante la inicialización del Brick, reemplazando el valor <PREFERENCE_ID> por el ID de la preferencia creada.
Para crear una preferencia en su backend, agrega el SDK de Mercado Pago y las credenciales necesarias a tu proyecto para habilitar el uso de preferencias:
<?php
// SDK de Mercado Pago
require __DIR__ . '/vendor/autoload.php';
// Agrega credenciales
MercadoPago\SDK::setAccessToken('PROD_ACCESS_TOKEN');
?>
// SDK de Mercado Pago
const mercadopago = require("mercadopago");
// Agrega credenciales
mercadopago.configure({
access_token: "PROD_ACCESS_TOKEN",
});
// SDK de Mercado Pago
import com.mercadopago.MercadoPagoConfig;
// Agrega credenciales
MercadoPagoConfig.setAccessToken("PROD_ACCESS_TOKEN");
# SDK de Mercado Pago
require 'mercadopago'
# Agrega credenciales
sdk = Mercadopago::SDK.new('PROD_ACCESS_TOKEN')
// SDK de Mercado Pago
using MercadoPago.Config;
// Agrega credenciales
MercadoPagoConfig.AccessToken = "PROD_ACCESS_TOKEN";
# SDK de Mercado Pago
import mercadopago
# Agrega credenciales
sdk = mercadopago.SDK("PROD_ACCESS_TOKEN")
Luego establezca la preferencia de acuerdo a su producto o servicio.
Los ejemplos de código a continuación establecen el purpose de la preferencia en wallet_purchase
, donde el usuario debe iniciar sesión cuando es redirigido a su cuenta de Mercado Pago.
<?php
$client = new PreferenceClient();
$preference = $client->create([
"items"=> array(
array(
"title" => "Mi producto",
"quantity" => 1,
"unit_price" => 25
)
)
]);
?>
// Crear un objeto de preferencia
let preference = {
// el "purpose": "wallet_purchase" solo permite pagos registrados
// para permitir pagos de guests puede omitir esta propiedad
"purpose": "wallet_purchase",
"items": [
{
"id": "item-ID-1234",
"title": "Meu produto",
"quantity": 1,
"unit_price": 75.76
}
]
};
mercadopago.preferences.create(preference)
.then(function (response) {
// Este valor es el ID de preferencia que se enviará al ladrillo al inicio
const preferenceId = response.body.id;
}).catch(function (error) {
console.log(error);
});
// Crear un objeto de preferencia
PreferenceClient client = new PreferenceClient();
// Crear un elemento en la preferencia
List<PreferenceItemRequest> items = new ArrayList<>();
PreferenceItemRequest item =
PreferenceItemRequest.builder()
.title("Meu produto")
.quantity(1)
.unitPrice(new BigDecimal("100"))
.build();
items.add(item);
PreferenceRequest request = PreferenceRequest.builder()
// el .purpose('wallet_purchase') solo permite pagos registrados
// para permitir pagos de guest, puede omitir esta línea
.purpose('wallet_purchase')
.items(items).build();
client.create(request);
# Crear un objeto de preferencia
preference_data = {
# el purpose: 'wallet_purchase', solo permite pagos registrados
# para permitir pagos de guests, puede omitir esta propiedad
purpose: 'wallet_purchase',
items: [
{
title: 'Meu produto',
unit_price: 75.56,
quantity: 1
}
]
}
preference_response = sdk.preference.create(preference_data)
preference = preference_response[:response]
# Este valor es el ID de preferencia que usará en el HTML en el inicio del Brick
@preference_id = preference['id']
// Crear el objeto de request de preferencia
var request = new PreferenceRequest
{
// el Purpose = 'wallet_purchase', solo permite pagos registrados
// para permitir pagos de invitados, puede omitir esta propiedad
Purpose = 'wallet_purchase',
Items = new List<PreferenceItemRequest>
{
new PreferenceItemRequest
{
Title = "Meu produto",
Quantity = 1,
CurrencyId = "BRL",
UnitPrice = 75.56m,
},
},
};
// Crea la preferencia usando el cliente
var client = new PreferenceClient();
Preference preference = await client.CreateAsync(request);
# Crea un elemento en la preferencia
preference_data = {
# el "purpose": "wallet_purchase", solo permite pagos registrados
# para permitir pagos de invitados, puede omitir esta propiedad
"purpose": "wallet_purchase",
"items": [
{
"title": "Mi elemento",
"quantity": 1,
"unit_price": 75.76
}
]
}
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 '{
"purpose": "wallet_purchase",
"items": [
{
"title": "Mi producto",
"quantity": 1,
"unit_price": 75.76
}
]
}'