En la integración por medio del Card Payment Brick para sitios web, la biblioteca de MercadoPago.js, incluída en tu proyecto durante la configuración del ambiente de desarrollo, se encarga de obtener la información requerida para la generación de un pago. Esto es, realiza una búsqueda de los tipos de documentos disponibles para el país correspondiente, así como, a medida que se introducen los datos de la tarjeta, de la información relativa al emisor y a las cuotas disponibles.

Toda la información involucrada en el procesamiento de la transacción es almacenada en el backend, en conformidad con los padrones de seguridad PCI.

Además, el componente brinda la posibilidad de orientar al usuario con alertas de campos incompletos o posibles errores al rellenar los datos, optimizando el proceso de compra.

Con esto, la implementación del flujo es transparente para quien realiza la integración, tal como muestra el diagrama a continuación.

  sequenceDiagram
      participant Navegador del comprador
      participant Front-end del integrador
      participant MercadoPago.js
      participant Back-end del integrador
      participant API Mercado Pago
      Navegador del comprador->>Front-end del integrador: 1. El Comprador accede a la pantalla de cobro.
      Front-end del integrador->>MercadoPago.js: 2. El front-end del integrador descarga e inicializa la SDK JS de Mercado Pago
      Front-end del integrador->>Navegador del comprador: 3. El front-end del integrador muestra el formulario de pago
      Navegador del comprador->>Front-end del integrador: 4. El comprador completa el formulario y finaliza el pago.
      Front-end del integrador->>MercadoPago.js: 5. El front-end del integrador utiliza la SDK JS para crear el token que contendrá los datos de la tarjeta de forma segura.
      Front-end del integrador->>Back-end del integrador: 6. El front-end del integrador envía el token de la tarjeta y los datos de pago a su back-end.
      Back-end del integrador->>API Mercado Pago: 7. Desde el back-end, se llama a los servicios de Mercado Pago para crear el pago.
      API Mercado Pago->>Navegador del comprador: 8. El front-end del integrador le muestra al comprador el resultado de la operación.
      API Mercado Pago->>Back-end del integrador: 9. Mercado Pago puede enviar notificaciones vía Webhook con actualizaciones del estado del pago.
      Back-end del integrador->>Navegador del comprador: 10. Si corresponde, se le avisa al comprador sobre la actualización del pago.

Para avanzar con la configuración, sigue los pasos a continuación.

Para poder recibir pagos, es necesario que añadas en el frontend un formulario que permita capturar los datos del pagador de manera segura y permita la criptografía de la tarjeta. Esta inclusión debe realizarse por medio del Card Payment Brick, que ofrece un formulario optimizado con temas variados, e incluye los campos necesarios para pagos con tarjetas.

Para añadir el Card Payment Brick, realiza primero su configuración e inicialización desde el frontend, como muestran los ejemplos a continuación.

const renderCardPaymentBrick = async (bricksBuilder) => {
  const settings = {
    initialization: {
      amount: 100.99, // valor total a ser pago
    },
    callbacks: {
      onReady: () => {
        /*
         Callback llamado cuando el Brick esté listo.
         Aquí pueden ocultarse loadings del site, por ejemplo.
       */
      },
      onSubmit: (formData, additionalData) => {
        // callback llamado al hacer clic en el botón de envío de datos
        return new Promise((resolve, reject) => {
          const submitData = {
            type: "online",
            total_amount: String(formData.transaction_amount), // debe ser un string con formato 00.00
            external_reference: "ext_ref_1234", // identificador del origen de la transacción
            processing_mode: "automatic",
            transactions: {
              payments: [
                {
                  amount: String(formData.transaction_amount), // debe ser un string con formato 00.00 
                  payment_method: {
                    id: formData.payment_method_id,
                    type: additionalData.paymentTypeId,
                    token: formData.token,
                    installments: formData.installments,
                  },
                },
              ],
            },
            payer: {
              email: formData.payer.email,
              identification: formData.payer.identification,
            },
          };

          fetch("/process_order", {
            method: "POST",
            headers: {
              "Content-Type": "application/json",
            },
            body: JSON.stringify(submitData),
          })
            .then((response) => response.json())
            .then((response) => {
              // recibir el resultado del pago
              resolve();
            })
            .catch((error) => {
              // manejo de la respuesta de error al intentar crear el pago 
              reject();
            });
        });
      },
      onError: (error) => {
        // callback llamado para todos los casos de error del Brick 
        console.error(error);
      },
    },
  };
  window.cardPaymentBrickController = await bricksBuilder.create(
    "cardPayment",
    "cardPaymentBrick_container",
    settings
  );
};
renderCardPaymentBrick(bricksBuilder);

El callback onSubmit del Brick obtendrá los datos mínimos necesarios para la creación de un pago. Entre esos datos se encuentra el CardToken, que representa de forma segura los datos de la tarjeta. Este token solo puede ser usado una vez y expira dentro de los 7 días de su creación.

Además de la información mínima, recomendamos incluir detalles adicionales o que puedan facilitar el reconocimiento de la compra por parte del comprador, y aumentar así la tasa de aprobación de pagos. Consulta nuestra Referencia de API para conocer en detalle todos los parámetros a ser enviados al crear un pago, incluyendo aquellos que puedan mejorar tu aprobación, y verifica cuáles quieres incluir en esta etapa.

Luego, agrega los campos relevantes para el objeto enviado, que son retornados en la respuesta del callback.

Finalmente, realiza el renderizado del Brick utilizando alguno de los ejemplos a continuación.

<div id="cardPaymentBrick_container"></div> // El id debe corresponder al valor enviado dentro del método create() en la etapa anterior

Como resultado, la renderización del Brick se verá similar a la imagen debajo.

Por último, será necesario que tu backend pueda recibir la información del formulario creado, junto con el token resultante de la criptografía de la tarjeta. Para eso, recomendamos disponibilizar un endpoint /Process_order que acoja los datos recolectados por el Brick después de realizar la acción submit.