Getting Started

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

npm install @malga/tokenization

yarn add @malga/tokenization

pnpm add @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>

<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>

<form 
     data-malga-tokenization-form 
     action="/checkout" 
     method="POST">
     <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

Exemplo Sync Tokenization

Veja o código completo

Exemplo Form Handling Tokenization

Veja o código completo