Aprenda como tokenizar seus cartões usando o Malga Tokenization SDK.

​
Pré-requisitos

Para que você consiga aproveitar ao máximo esse guia, será necessário ter chaves de integração de sandbox. Basta clicar aqui e criar uma conta em nosso Dashboard. Antes de começarmos os passos de configuração e utilização do SDK, há duas formas de tokenizar cartões com a lib, chamamos elas de:
  • Sync Tokenization: Você controla o momento da chamada de tokenização;
  • Form Handling Tokenization: A tokenização acontece automaticamente no submit do formulário e você só receberá o tokenId no seu back-end.
Dessa forma você pode escolher o que se encaixa melhor com o seu projeto.

​
1. Instalando o SDK

Instale nosso SDK com o seu gerenciador de pacotes favorito. 
npm install @malga/tokenization

​
2. Configurando o formulário

Primeiro é necessário adicionar data-attributes nos elementos do seu formulário para que consigamos pegar o valor dos campos automaticamente. 
  <form 
    onSubmit={handleSubmit} 
    data-malga-tokenization-form>
    <input
      data-malga-tokenization-holder-name
      name="holderName"
      type="text"
      placeholder="Card Holder Name"
    />
    <input
      data-malga-tokenization-number
      name="number"
      type="number"
      placeholder="Card Number"
    />
    <input
      data-malga-tokenization-expiration-date
      name="expirationDate"
      type="text"
      placeholder="Card Expiration Date"
    />
    <input
      data-malga-tokenization-cvv
      name="cvv"
      type="number"
      placeholder="Card CVV"
    />
    <button type="submit">Submit</button>
  </form>

​
3. Tokenizando o cartão

Agora que já estamos com nosso formulário configurado basta instanciar o SDK e chamarmos os métodos para cada tipo de integração.

​
Sync Tokenization

Basta chamar o método tokenize do SDK na função que lida com o submit do seu formulário. A mesma irá retornar o tokenId do cartão já tokenizado automaticamente. 
const malgaTokenization = new MalgaTokenization({
  apiKey: "17a64c8f-a387-4682-bdd8-d280493715e0",
  clientId: "d1d2b51a-0446-432a-b055-034518c2660e",
});

async function handleSubmit(event) {
  event.preventDefault();

  const { tokenId } = await malgaTokenization.tokenize();
  console.log(tokenId);
}

​
Form Handling Tokenization

Você só precisará chamar o método init do SDK no seu arquivo JS principal, o entrypoint da sua aplicação. Dessa forma quando acontecer o submit do seu formulário a tokenização já ocorrerá automaticamente. Não se preocupe, os campos do formulário que não estão com o data-attributes do SDK ainda continuarão sendo enviados para o seu back-end. 
const malgaTokenization = new MalgaTokenization({
  apiKey: "17a64c8f-a387-4682-bdd8-d280493715e0",
  clientId: "d1d2b51a-0446-432a-b055-034518c2660e",
});

malgaTokenization.init();
Pronto, agora seus cartões já estão sendo tokenizados com segurança! :rocket:

​
4. Teste você mesmo

https://mintlify.s3.us-west-1.amazonaws.com/malga/img/api-sdks/new-tab.svg

Exemplo Sync Tokenization

Veja o código completo
https://mintlify.s3.us-west-1.amazonaws.com/malga/img/api-sdks/new-tab.svg

Exemplo Form Handling Tokenization

Veja o código completo