> ## Documentation Index
> Fetch the complete documentation index at: https://docs.malga.io/llms.txt
> Use this file to discover all available pages before exploring further.

# 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](https://dashboard.malga.io/sign-up) 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.

<Tabs>
  <Tab title="npm">
    ```bash theme={null}
    npm install @malga/tokenization
    ```
  </Tab>

  <Tab title="yarn">
    ```bash theme={null}
    yarn add @malga/tokenization
    ```
  </Tab>

  <Tab title="pnpm">
    ```bash theme={null}
    pnpm add @malga/tokenization
    ```
  </Tab>
</Tabs>

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

<Tabs>
  <Tab title="Sync Tokenization">
    ```jsx theme={null}
      <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>
    ```
  </Tab>

  <Tab title="Form Handling Tokenization">
    ```html theme={null}
       <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>
    ```
  </Tab>
</Tabs>

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

```typescript theme={null}
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.

```typescript theme={null}
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

<CardGroup>
  <Card href="https://github.com/plughacker/malga-tokenization/tree/main/examples/v1/sync-tokenization" icon="https://mintlify.s3.us-west-1.amazonaws.com/malga/img/api-sdks/new-tab.svg" title="Exemplo Sync Tokenization">
    Veja o código completo
  </Card>

  <Card href="https://github.com/plughacker/malga-tokenization/tree/main/examples/v1/form-handling-tokenization" icon="https://mintlify.s3.us-west-1.amazonaws.com/malga/img/api-sdks/new-tab.svg" title="Exemplo Form Handling Tokenization">
    Veja o código completo
  </Card>
</CardGroup>