A continuación encontrará listas de errores que pueden ocurrir durante la integración de los Bricks. Ya sean relacionadas con envío de variables o comunicación con servicios externos (APIs de Mercado Pago).

Durante el proceso de integración del Brick, es posible que al momento de instanciar el Brick se muestren al integrador diferentes errores relacionados con el envío de variables. Estos errores se mostrarán mediante un log en la consola del navegador (el comprador no recibe ningún mensaje).

En caso de querer actualizar los valores enviados durante la inicialización de un Brick, es necesario explicitar la asincronicidad del código y valerse de la función de unmount disponible en el Controller del Brick antes de actualizar los datos. Además, el objeto de configuraciones debe ser enviado completo, dado que se trata de una renderización.

Es importante recordar que no se debe simplemente llamar a la función de renderización con los nuevos valores, ya que esto provocaría una duplicación del Brick en pantalla, y la segunda renderización mostrará un error.

El ejemplo de código a continuación ejemplifica el flujo utilizando la actualización de una preferencia en el Payment Brick, pero el flujo en sí es válido para la actualización necesaria en datos de inicialización de cualquier Brick.

Javascript
Copiar
//First render
const renderPaymentBrick = async (bricksBuilder) => {
      const settings = {
        initialization: {
          amount: 100,
          preferenceId: "<YOUR_FIRST_PREFERENCE_ID>"
        },
...
window.paymentBrickController = await bricksBuilder.create(
   "payment",
   "paymentBrick_container",
   settings
 );

    };

await renderPaymentBrick(bricksBuilder);

//Second render
window.paymentBrickController.unmount()

const secondRenderPaymentBrick = async (bricksBuilder) => {
      const settings = {
        initialization: {
          amount: 100,
          preferenceId: "<YOUR_SECOND_PREFERENCE_ID>"
        },
...
window.paymentBrickController = await bricksBuilder.create(
   "payment",
   "paymentBrick_container",
   settings
 );

    };

await secondRenderPaymentBrick(bricksBuilder);

...

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

Para que la renderización ocurra correctamente, es necesario que el ID del contenedor en el DOM donde se renderizará el Brick sea proporcionado de manera idéntica a la función de creación del Brick. Se puede utilizar cualquier cadena como nombre y, siempre y cuando los nombres sean iguales, este error no ocurrirá. Ten en cuenta que las clases no son aceptadas como contenedor para el Brick, es necesario que sea un ID.

Otro punto importante es asegurarse de que al llamar a la función de renderización del Brick, su contenedor ya esté renderizado en la pantalla. Reforzamos este punto debido a la posibilidad de que el contenedor del brick esté dentro de otros contenedores. Esta secuencia de renderización es importante para evitar el error mencionado.

A continuación, tenemos un fragmento de código que ejemplifica este punto utilizando el Payment Brick.

Javascript
Copiar
const renderPaymentBrick = async (bricksBuilder) => {
 const settings = { ... };
 window.paymentBrickController = await bricksBuilder.create(
   "payment",
   "paymentBrick_container",
   settings
 );
};

await renderPaymentBrick(bricksBuilder);

...

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

Next.js es un framework para crear interfaces con componentes React. Por lo tanto, es posible utilizar nuestra SDK de React para integrar Bricks, así como otras soluciones proporcionadas a través de la SDK de React.

Sin embargo, nuestra SDK fue estructurada para renderizar en el cliente (Client Side Rendering), mientras que Next.js generalmente funciona con el Server Side Rendering (SSR). Por lo tanto, al utilizar nuestra SDK, es necesario tener esto en cuenta.

Es posible realizar esta integración mediante la importación dinámica de la SDK, como se indica en la documentación de Next.js. A continuación, encontrarás un ejemplo de código para importar dinámicamente un componente proporcionado en nuestra SDK, el Payment Brick.

react-jsx
Copiar

//index.tsx

import Head from "next/head";
import styles from "../styles/Home.module.css";
import dynamic from "next/dynamic";

const CheckoutMercadoPago = dynamic(() => import("./checkoutMercadoPago"), {
  ssr: false,
});

export default function Home() {
  return (
    <>
      <Head>
        <title>Checkout Brick + NextJS</title>
        <meta name="description" content="Generated by create next app" />
      </Head>
      <main className={styles.main}>
        <CheckoutMercadoPago />
      </main>
    </>
  );
}

react-jsx
Copiar
//checkoutMercadoPago.tsx

import { initMercadoPago, Payment } from "@mercadopago/sdk-react";

initMercadoPago("<YOUR_PUBLIC_KEY>");

const CheckoutMercadoPago = () => {
  const initialization = {
    amount: <YOUR_AMOUNT>,
    preferenceId: "<YOUR_PREFERENCE_ID>"
  };
  const customization = {
    paymentMethods: {
      ticket: "all",
      bankTransfer: "all",
      creditCard: "all",
      debitCard: "all",
      mercadoPago: "all",
    },
  };
  const onSubmit = async ({ 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();
        });
    });
  };
  const onError = async (error) => {
    // callback llamado para todos los casos de error de Brick
    console.log(error);
  };
  const onReady = async () => {
   /*
    Callback llamado cuando el Brick está listo.
    Aquí puede ocultar cargamentos de su sitio, por ejemplo.
   */
  };

  return (
    <Payment
      initialization={initialization}
      customization={customization}
      onSubmit={onSubmit}
      onReady={onReady}
      onError={onError}
    />
  );
};
export default CheckoutMercadoPago;