Configurar la integración - Card Payment - Mercado Pago Developers

Configurar la integración

Para configurar la integración de Card Payment Brick, debe seguir los pasos a continuación:

  1. Crear container
  2. Incluir y configurar la librería MercadoPago.js
  3. Instanciar Brick
  4. Renderizar Brick
Los pasos se realizan en el backend o frontend. Las etiquetas Client-Side y Server-Side ubicadas inmediatamente al lado del título lo ayudan a identificar qué paso se realiza en qué instancia.
Y para ayudar, hemos preparado un ejemplo de código completo de la configuración de Card Payment Brick que puede usar como modelo.

Crear container

Client-Side

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).

Atención
El valor que se muestra en la propiedad id a continuación es solo un ejemplo y puede ser alterado, pero siempre debe coincidir con el id indicado en la renderización.

html

  <div id="cardPaymentBrick_container"></div>

Incluir y configurar la librería MercadoPago.js

Client-Side

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

Atención
Recuerda que todo el código JS se puede incluir en un < script > o también en archivos .js separados que importes en tu sitio.

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

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:

javascript

const mp = new MercadoPago('YOUR_PUBLIC_KEY');

Instanciar Brick

Client-Side

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.

javascript

const bricksBuilder = mp.bricks();
Atención
Durante la instanciación del Brick, es posible que aparezcan diferentes errores. Para más detalles sobre cada uno de ellos, consulta la sección Posibles errores .

Renderizar Brick

Client-Side

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.

javascript

const renderCardPaymentBrick = async (bricksBuilder) => {

  const settings = {
    initialization: {
      amount: 100, // monto a ser pago
    },
    callbacks: {
      onReady: () => {
        /*
          Callback llamado cuando Brick esté listo.
          Aquí puedes ocultar loadings de su sitio, por ejemplo.
        */
      },
      onSubmit: (cardFormData) => {
        // callback llamado cuando el usuario haga clic en el botón enviar los datos

        // ejemplo de envío de los datos recolectados por el Brick a su servidor
        return new Promise((resolve, reject) => {
            fetch("/process_payment", { 
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                },
                body: JSON.stringify(cardFormData)
            })
            .then((response) => {
                // recibir el resultado del pago
                resolve();
            })
            .catch((error) => {
                // tratar respuesta de error al intentar crear el pago
                reject();
            })
          });
      },
      onError: (error) => { 
        // callback llamado para todos los casos de error de Brick
        console.error(error);
      },
    },
  };
  const cardPaymentBrickController = await bricksBuilder.create('cardPayment', 'cardPaymentBrick_container', settings);
};
renderCardPaymentBrick(bricksBuilder);

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

cardform

Atención
Para un control efectivo del Brick, la función enviada en onSubmit siempre debe devolver una Promise. Llame el método resolve() solo si el procesamiento de tu backend fue exitoso. Llame el método reject() en caso de que ocurra un error. Esto hará que el Brick te permita completar los campos nuevamente y haga posible un nuevo intento de pago. Al llamar el resolve() dentro de la Promise de onSubmit, el Brick no permite nuevos pagos. Si deseas realizar un nuevo pago, deberás crear una nueva instancia del Brick.