Cardform already instantiated. Returning existing instance

[NissiusRibas]

Estou com problema para recarregar o cardform mais de uma vez na mesma tela...

A pessoa seleciona o frete na mesma de pagamento, e consequentemente o valor pode alterar....

Sendo assim, se a pessoa escolhe o frete 1 e eu executo o mp.cardForm ele fica tudo certinho, porém se a pessoa resolve alterar para o frete 2 o valor é atualizado e quando mando gerar novamente o mp.cardForm ele não gerar, pois diz que já foi inicializado....

- Cardform already instantiated. Returning existing instance...

Como faço para atualizar o valor e recarregar ele na mesma tela?

Obrigado pelo auxilio.

[NicholasPedroso]

Fala @NissiusRibas, tudo bem?

É possível reproduzir este comportamento da seguinte maneira:

        // função que simula a mudança de valores (no seu caso, do frete)
        // O primeiro valor a retornar será de 100, e depois de 200
        function* getAmount() {
            yield '100'
            yield '200'
        }
        const amount = getAmount();

        // deixamos a variável cardForm fora da função, para podermos reatribuir-la mais tarde
        let cardForm;

        const mp = new MercadoPago('YOUR_PUBLIC_KEY');

        // função responsável por fazer o mount do cardForm
        function mountCardForm() {
            cardForm = mp.cardForm({
                amount: amount.next().value,
                autoMount: true,
                form: {
                    id: "form-checkout",
                    cardholderName: {
                        id: "form-checkout__cardholderName",
                        placeholder: "Titular do cartão",
                    },
                    cardholderEmail: {
                        id: "form-checkout__cardholderEmail",
                        placeholder: "E-mail",
                    },
                    cardNumber: {
                        id: "form-checkout__cardNumber",
                        placeholder: "Número do cartão",
                    },
                    cardExpirationMonth: {
                        id: "form-checkout__cardExpirationMonth",
                        placeholder: "Mês de vencimento",
                    },
                    cardExpirationYear: {
                        id: "form-checkout__cardExpirationYear",
                        placeholder: "Ano de vencimento",
                    },
                    securityCode: {
                        id: "form-checkout__securityCode",
                        placeholder: "Código de segurança",
                    },
                    installments: {
                        id: "form-checkout__installments",
                        placeholder: "Parcelas",
                    },
                    identificationType: {
                        id: "form-checkout__identificationType",
                        placeholder: "Tipo de documento",
                    },
                    identificationNumber: {
                        id: "form-checkout__identificationNumber",
                        placeholder: "Número do documento",
                    },
                    issuer: {
                        id: "form-checkout__issuer",
                        placeholder: "Banco emissor",
                    },
                },
                callbacks: {
                    onFormMounted: error => {
                        if (error) return console.warn("Form Mounted handling error: ", error);
                        console.log("Form mounted");
                    },
                    onSubmit: event => {
                        event.preventDefault();

                        const {
                            paymentMethodId: payment_method_id,
                            issuerId: issuer_id,
                            cardholderEmail: email,
                            amount,
                            token,
                            installments,
                            identificationNumber,
                            identificationType,
                        } = cardForm.getCardFormData();


                        console.log(cardForm.getCardFormData());
                    },
                    onFetching: (resource) => {
                        console.log("Fetching resource: ", resource);

                        // Animate progress bar
                        const progressBar = document.querySelector(".progress-bar");
                        progressBar.removeAttribute("value");

                        return () => {
                            progressBar.setAttribute("value", "0");
                        };
                    },
                },
            });
        }

Desta maneira é possível fazer o mount do cardForm chamando mountCardForm() e fazer o unmount chamando cardForm.unmount()

Espero que te ajude,

um abraço

[NissiusRibas]

Perfeito, obrigado!

[Marbemoreno]

Hola @NicholasPedroso tengo el mismo problema de "Cardform already instantiated. Returning existing instance..."
en mi caso uso NUXT.JS y creo un modulo que a su vez crea un plugin que me crea una nueva instancia de mercadoPago.

Es un problema dificil de reproducir en producción pero en desarrollo lo puedo reproducir fácilmente cuando realizo cambio y al guardar no refresca completamente, y solo se soluciona cuando recargo la pagina

Espero puedas ayudarme, muchas gracias

[pinky-rembre]

const { ... } = cardForm.getCardFormData();
cardForm.unmount();