Renderizado por defecto
Antes de realizar la renderización del Card 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 Card Payment Brick.
Configurar el Brick
Crea la configuración de inicio del Brick.
const renderCardPaymentBrick = async (bricksBuilder) => {
const settings = {
initialization: {
amount: 100, // Monto total a pagar. Debe ser un número entero.
},
callbacks: {
onReady: () => {
/*
Callback llamado cuando Brick está listo.
Aquí puedes ocultar cargamentos de su sitio, por ejemplo.
*/
},
onSubmit: (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.cardPaymentBrickController = await bricksBuilder.create(
'cardPayment',
'cardPaymentBrick_container',
settings,
);
};
renderCardPaymentBrick(bricksBuilder);
const initialization = {
amount: 100, // Monto total a pagar. Debe ser un número entero.
};
const onSubmit = async (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 Brick está listo.
Aquí puedes ocultar cargamentos de su sitio, por ejemplo.
*/
};
Renderizar el Brick
Una vez creadas las configuraciones, ingresa el código a continuación para renderizar el Brick.
<div id="cardPaymentBrick_container"></div>
import { CardPayment } from '@mercadopago/sdk-react';
<CardPayment
initialization={initialization}
onSubmit={onSubmit}
onReady={onReady}
onError={onError}
/>
El resultado de renderizar el Brick debería parecerse a la imagen de abajo.