Configurar la integración con tarjetas

Para configurar la integración de Payment Brick para recibir pagos con tarjetas de crédito y débito 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
5. Administrar tarjetas de crédito y débito
6. Incluir tarjetas guardadas

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: {
       creditCard: 'all',
       debitCard: 'all',
     },
   },
   callbacks: {
     onReady: () => {
       /*
         Callback llamado cuando Brick está listo
         Aquí puedes ocultar loadings de su sitio, por ejemplo.
       */
     },
     onSubmit: ({ selectedPaymentMethod, formData }) => {
       // callback llamado cuando el usuario haz clic en el botón enviar los 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) => {
               // 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);
     },
   },
 };
 window.paymentBrickController = await bricksBuilder.create(
   'payment',
   'paymentBrick_container',
   settings
 );
};
renderPaymentBrick(bricksBuilder);

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

El fragmento de código responsable de incluir la tarjeta de crédito y débito como medio de pago es el siguiente:

settings = {
  ...,
  customization: {
    ...,
    paymentMethods: {
      ...,
      creditCard: 'all',
      debitCard: 'all'
    }
  }
}

Las propiedades creditCard y debitCard aceptan 2 tipos de variables, string y string[]. En el ejemplo anterior se aceptarán pagos con tarjetas de crédito y débito de cualquier bandera aceptada por Mercado Pago.

Si desea seleccionar las banderas, en lugar de la string all, puede pasar un array con solo las ID deseadas. Como en el ejemplo a continuación, donde solo se aceptarán tarjetas de crédito MASTER y VISA y tarjetas de débito ELO.

settings = {
  ...,
  customization: {
    ...,
    paymentMethods: {
      ...,
      creditCard: [ 'master', 'visa' ],
      debitCard: [ 'debelo' ]
    }
  }
}

Para obtener una lista completa de ID que se pueden pasar dentro del array, consulte la API Obtener medios de pago en nuestra referencia de API.

En Payment Brick puedes hacer que las tarjetas guardadas estén disponibles para tus clientes. Para saber cómo agregar tarjetas guardadas, consulte la sección Incluir tarjetas guardadas.