Configurar la integración con otros medios de pago

Con el Checkout Bricks de Mercado Pago es posible ofrecer, además de tarjeta, pagos vía Rapipago y Pago Fácil. Para ofrecer pagos con Rapipago y Pago Fácil, sigue los siguientes pasos.

1. Crear container
2. Incluir y configurar la librería MercadoPago.js
3. Instanciar Brick
4. Renderizar Brick
5. Administrar otros medios de pago

Deberás crear un container para definir dónde se colocará el Brick en la pantalla. La creación del container se realiza insertando un elemento (por ejemplo, un div) en el código HTML de la página en la que se renderizará el Brick (ver el código a continuación).

  <div id="paymentBrick_container"></div>

Usa nuestra librería oficial para acceder a las funcionalidades de Mercado Pago desde tu frontend de forma segura.

Para esto deberás instalar la SDK agregando lo siguiente en tu código HTML:

<script src="https://sdk.mercadopago.com/js/v2"></script>

Luego, inicializa la SDK y configura tu clave pública mediante código JavaScript de la siguiente manera:

const mp = new MercadoPago('YOUR_PUBLIC_KEY');

Con el container creado y la SDK JS instalada, el siguiente paso es instanciar el Brick builder, que permitirá generar el Brick. Para crear la instancia, inserta el código a continuación del paso anterior.

const bricksBuilder = mp.bricks();

Una vez instanciado el builder, nuestro Brick puede ser renderizado y tener todas sus configuraciones compiladas para que la estructura final sea generada.

Para renderizar el Brick, inserta el código a continuación del paso anterior y completa los atributos de acuerdo con los comentarios destacados en este mismo código.

const renderPaymentBrick = async (bricksBuilder) => {
 const settings = {
   initialization: {
     amount: 100, // monto a ser pago
   },
   customization: {
     paymentMethods: {
       ticket: 'all',
     },
   },
   callbacks: {
     onReady: () => {
       /*
        Callback llamado cuando Brick está listo
        Aquí puedes ocultar loadings de su sitio, por ejemplo.
       */
     },
     onSubmit: ({ selectedPaymentMethod, formData }) => {
       // callback llamado al hacer clic en el botón de envío de datos
      
         return new Promise((resolve, reject) => {
           fetch("/processar-pago", {
             method: "POST",
             headers: {
               "Content-Type": "application/json",
             },
             body: JSON.stringify(formData)
           })
             .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 solicitada para todos los casos de error de Brick
       console.error(error);
     },
   },
 };
 window.paymentBrickController = await bricksBuilder.create(
   'payment',
   'paymentBrick_container',
   settings
 );
};
renderPaymentBrick(bricksBuilder);

El resultado de renderizar el Brick debe ser como la imagen de abajo:

Para incluir pagos con Rapipago y Pago Fácil, solo usa la siguiente configuración:

          
settings = {
  ...,
  customization: {
    ...,
    paymentMethods: {
      ...,
      ticket: 'all'
    }
  }
}

        

La propiedad ticket acepta 2 tipos de variables, string y string[]. En el ejemplo anterior, se aceptarán pagos a través de Rapipago y Pago Fácil.

Si no deseas permitir ambos métodos de pago, en lugar de la cadena all puedes pasar un array solo con las IDs deseadas, como en el ejemplo a continuación, donde solo se acepta el pago a través de Pago Fácil.

          
settings = {
  ...,
  customization: {
    ...,
    paymentMethods: {
      ...,
      ticket: [ 'pagofacil' ]
    }
  }
}

        

En este caso, al ser Pago Fácil el único medio disponible, no se mostrará la lista para seleccionar dónde pagar.

Si quieres obtener una lista completa de IDs que se pueden pasar dentro del array, consulta la API Obtener medios de pago en nuestra referencia de API. Para más información, consulte la sección correspondiente.