Skip to main content
A versão 5.0.0 do Tokenization SDK permite desmontar uma instância de MalgaTokenization. Em aplicações de página única, o checkout deixa de acumular iframes e listeners cada vez que a tela é montada de novo. Esta é uma versão major: quem monta o checkout mais de uma vez sem desmontar a instância anterior precisa ajustar a integração antes de atualizar. Veja a seção Mudanças para quem usa o Tokenization SDK, abaixo.

Melhorias

Método destroy()

  • destroy() remove os iframes dos containers, o listener de mensagens e os callbacks registrados com on, apaga os dados do cartão coletados e libera os containers para uma nova instância.
  • Chame o método sempre que o checkout sair da tela: na função de limpeza do useEffect no React, em onUnmounted no Vue ou em ngOnDestroy no Angular.
  • Depois de destroy(), tokenize() lança um erro. Chamar destroy() mais de uma vez não tem efeito.
Em React, por exemplo, o componente do checkout cria a instância ao montar e a desmonta na função de limpeza do useEffect:
Veja o componente completo em React, Vue e Angular em destroy().

Validação dos campos antes de tokenizar

  • tokenize() confere se todos os campos configurados em config.fields foram preenchidos antes de enviar os dados.
  • Se faltar algum, o método retorna na hora, sem chamar a API, com tokenId vazio e um error com type: 'invalid_request_error'. O details lista os campos que faltam, por exemplo ['cardCvv'].
Veja tokenize().

Correções

  • Apagar o CVV ou o nome do titular sem sair do campo agora limpa também o valor coletado. Antes, o último valor digitado continuava sendo enviado na tokenização.

Mudanças para quem usa o Tokenization SDK

Containers em uso: o construtor passa a lançar um erro, antes de renderizar qualquer campo, quando o container já é usado por outra instância ativa (ContainerInUseError) ou aparece em dois campos da mesma configuração (DuplicatedContainerError). Até a versão 4.x, essas configurações eram aceitas: os iframes se empilhavam nos mesmos containers e os dados dos cartões se misturavam.O que fazer: se a tela do checkout pode ser montada mais de uma vez (um useEffect sem função de limpeza, o StrictMode do React ou a volta para a rota), chame destroy() na desmontagem. Use também um container diferente para cada campo e para cada cartão. Veja Containers em uso.
Principais novidades:
  • Método destroy() para desmontar uma instância de MalgaTokenization.
  • ContainerInUseError e DuplicatedContainerError para containers repetidos.
  • tokenize() retorna invalid_request_error quando falta um campo configurado.
Ficou com dúvida? Fale com a gente pelo e-mail suporte@malga.io.