javascriptsdkmercadopagomercadopagosdk

Enable payment with Mercado Pago wallet in Checkout bricks


I am implementing checkout bricks on my website with the aim of processing all possible payment methods on my site without the need to redirect or use any pop-up modal.

Based on the Mercado Pago reference, the complete checkout bricks (with all the bricks) should look like this:

introducir la descripción de la imagen aquí

However, when I implement it on my page using the test credentials, the result I get is the following:

introducir la descripción de la imagen aquí

Only these 3 payment methods appear, and the option to pay with Mercado Pago wallet funds does not appear. This is the code I am using:


    const mp = new MercadoPago('TEST-e587cc71-b47f-4db3-b3cd-515433ee5d53', {
        locale: 'es-AR'
    });
    const bricksBuilder = mp.bricks();
    const renderPaymentBrick = async (bricksBuilder) => {
      const settings = {
        initialization: {
          /*
            "amount" es el monto total a pagar por todos los medios de pago con excepción de la Cuenta de Mercado Pago y Cuotas sin tarjeta de crédito, las cuales tienen su valor de procesamiento determinado en el backend a través del "preferenceId"
          */
          amount: 10000,
          preferenceId: "<PREFERENCE_ID>",
          payer: {
            firstName: "",
            lastName: "",
            email: "",
          },
        },
        customization: {
          visual: {
            style: {
              theme: "dark",
            },
          },
          paymentMethods: {
            creditCard: "all",
            debitCard: "all",
            ticket: "all",
            bankTransfer: "all",
            wallet_purchase: "all",
            maxInstallments: 9
          },
        },
        callbacks: {
          onReady: () => {
            /*
             Callback llamado cuando el Brick está listo.
             Aquí puede ocultar cargamentos 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("/______desubik2/buy/php/process-payment.php", {
                method: "POST",
                headers: {
                  "Content-Type": "application/json",
                },
                body: JSON.stringify(formData),
              })
                .then((response) => {
                  // recibir el resultado del pago
                 console.log(response.json());
                 resolve();
                })
                .catch((error) => {
                  // manejar la 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);

As you can see, I am not adding any PREFERENCE_ID, I don't know if this has something to do with the fact that the option to pay with Mercado Pago wallet funds is not added (I understand that when this option is chosen, the processing is done using the preference). However, I also tried to place a previously created preference ID in PHP, but the problem was not solved:

preferenceId: "<?= $preference->id ?>",


The following messages appear in the browser console:

introducir la descripción de la imagen aquí

... it's as if the wallet_purchase option doesn't exist, which is what surprises me the most.

If anyone can guide me on how to fix it, or what alternatives there are, thanks in advance. Regards


Solution

  • Solved. After looking further into the Mercado Pago documentation, it seems they have updated the parameter that was previously called wallet_purchase. It is now called mercadoPago:

    paymentMethods: {
       creditCard: "all",
       debitCard: "all",
       ticket: "all",
       bankTransfer: "all",
       mercadoPago: "all",   // <--------
       maxInstallments: 9
    },
    

    Be careful because the documentation is somewhat outdated.

    P.S.: I also had to load a test PREFERENCE_ID for it to work.