Failed to get payment method id in Checkout Bricks

[Moi6-23]

I'm doing the implementation in Angular in its version 14. With the sdk in version 2. It renders the form correctly but I present the following inconvenience.

When I enter all the data and press the submit button, it tells me that I must complete all the data to continue even though they are already complete. On the other hand, when writing the card number, it presents the following error:
{
"type": "non_critical",
"cause": "missing_payment_information",
"message": "The payment method id is missing"
}
In the tracks service, it can be seen that the payment_method_id and payment_method_type_id fields are empty.

This message to complete all the data to continue is presented in both the shared example and the demo development directly on the web platform:

https://www.mercadopago.com.ar/developers/es/live-demo/card-payment-brick

I hope you can help me, thank you very much

const mp = new MercadoPago('PUBLIC', {
locale: 'es-CO'
});
const bricksBuilder = mp.bricks();
const renderPaymentBrick = async (bricksBuilder) => {
const settings = {
initialization: {
amount: 100, // monto a ser pago
},
customization: {
paymentMethods: {
creditCard: 'all',
debitCard: 'all',
minInstallments: 1,
maxInstallments: 1,
types:{
excluded: ['credit_card']
}
},
defaultPaymentOption:{
debitCardForm: true,
}
},
callbacks: {
onReady: () => {

          },
   
          onBinChange: (bin) => {
            console.log(bin)

          },
          onSubmit: ({ selectedPaymentMethod, formData }) => {

            console.log(formData)
            console.log(selectedPaymentMethod)
              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
                    console.log(response)
                    resolve();
                  })
                  .catch((error) => {
                    // manejar la respuesta de error al intentar crear el pago
                    reject();
                  })
              });
          },
          onError: (error) => {
            // callback solicitado para todos los casos de error de Brick
            console.error(error);
          },
        },
      };
      window.paymentBrickController = await bricksBuilder.create(
        'payment',
        'paymentBrick_container',
        settings
      );
    };
    renderPaymentBrick(bricksBuilder);`

[AleFossati]

Hello Moises, the message specifying you to complete all data even though it’s already completed, is probably because the brick was unable to load your card’s information, which is a required data. This can happen for many reasons, but mainly because you are trying to use a test credit/debit card from a specific country and using a test public key from another country.

Make sure you are using a credit/debit card that meets the mentioned requirement. In our test cards documentation, you can find a few cards for each country, if one of them is also giving you this error, try the others.

We know that the error message that appears in the form is not clear enough and we’ll work on that pretty soon, sorry for the inconvenience and let me know if that answer solves your problem.

[Moi6-23]

Hello Hello Alexandre, thanks for the answer. I have been verifying that I am in the correct domain and I have done new tests. In this case, the error still appears and I am using the credentials for CO (Colombia):

The Mercadopago developers platform:
https://www.mercadopago.com.co/developers/es/live-demo/card-payment-brick

The test cards:
https://www.mercadopago.com.co/developers/es/docs/checkout-bricks/additional-content/test-cards

I have been reading about an indication message that talks about the ID associated with the card and a confirmation, I would like to know if that affects something or with the test cards and the card payment brick live demo should be necessary.

I remain attentive to any information or if you have any post or communication channel where you can help, thank you.

[AleFossati]

Hello Moises, sorry for my delay in this response.
Thanks for pointing that error, it looks like our demo for Colombia is not working right now, but we are already working on a solution for it.
Meanwhile you can try to integrate locally using our documentation.
The only thing you will need to change is the amount: 100 property used in the Brick initialization, it looks like 100 is a value too low and this is not being accepted by the card information API.

We will also work on a better error handling in the Bricks to make it more easy to understand and a fix the Colombia documentation, in order to use a bigger amount.