Mercado Pago
DEVELOPERS
Ingresar
Recursos para IA

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.

Nota
Para consultar los tipos y especificaciones de los parámetros y respuestas de las funciones del Brick, consulta la documentación técnica.

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"
     */
     amount: 100,
     preferenceId: "<PREFERENCE_ID>",
   },
   customization: {
     paymentMethods: {
       atm: "all",
       ticket: "all",
       creditCard: "all",
       prepaidCard: "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);
Atención
Cada vez que el usuario sale de la pantalla donde se muestra algún Brick, es necesario destruir la instancia actual con el comando window.paymentBrickController.unmount(). Al ingresar nuevamente se debe generar una nueva instancia.

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.

Importante
El id paymentBrick_container de la div html abajo debe corresponder que el valor enviado en el método create() de la etapa anterior.
<div id="paymentBrick_container"></div>

El resultado de renderizar el Brick debería parecerse a la imagen de abajo.

payment-Brick-layout-mlm

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');
?>

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, pero también es posible establecerlo en onboarding_credits. Entienda la diferencia entre los dos:

  • wallet_purchase: el usuario debe iniciar sesión cuando es redirigido a su cuenta de Mercado Pago.

  • onboarding_credits: luego de iniciar sesión, el usuario verá la opción de pago de crédito preseleccionada en su cuenta de Mercado Pago.

<?php
$client = new PreferenceClient();
$preference = $client->create([
  "items"=> array(
    array(
      "title" => "Mi producto",
      "quantity" => 1,
      "unit_price" => 25
    )
  )
]);
?>
Cuando un usuario elige realizar un pago a través de la Billetera de Mercado Pago, es redirigido a la página de Mercado Pago para completar el pago. Las back_urls permiten que sea devuelto al sitio al finalizar el pago. No utilices dominios locales para este valor (tales como 'localhost/' o '127.0.0.1' con o sin puerto especificado). Recomendamos usar un servidor con dominio nombrado (DNS) o IPs de desarrollo para poder regresar al sitio después del pago.

Para más detalles sobre cómo configurarlo, acceda a la sección Preferencias.

AnteriorIntroducciónObtenga más información sobre Payment Brick y sus principales características.
PróximoIntroducciónDespués de configurar la integración del Payment Brick, consulta cómo enviar el pago a Mercado Pago.