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

# Configuração

Para iniciar a configuração do SDK precisa criar elementos na tela que serão hidratados com os campos de texto.

Esses campos serão preenchidos com os dados do cartão de crédito (número, nome, data e cvv).

```typescript theme={null}
<form>
  <div>
    <label htmlFor="card-number">Card Numberr</label>
    <div id="card-number" className="form-control"></div>
  </div>
  <div>
    <label htmlFor="card-holder-name">Card Holder Name</label>
    <div id="card-holder-name" className="form-control"></div>
  </div>
  <div>
    <label htmlFor="card-cvv">Card CVV</label>
    <div id="card-cvv" className="form-control"></div>
  </div>
  <div>
    <label htmlFor="card-expiration-date">Card Expiration Date</label>
    <div id="card-expiration-date" className="form-control"></div>
  </div>
</form>
```

<Warning>
  É importante que o id da tag div seja uma das opções válidas, conforme o exemplo
</Warning>

## Props

Abaixo está a lista de propriedades de customização do SDK. Utilize-as conforme necessário para configurar a tokenização de cartões.

| Propriedade | Descrição                                                        | Tipo     | Default     |
| ----------- | ---------------------------------------------------------------- | -------- | ----------- |
| `apiKey`    | Chave privada para realizar transações na Malga.                 | `string` | `undefined` |
| `clientId`  | Chave para identificar o cliente na Malga.                       | `string` | `undefined` |
| `options`   | Objeto que contém configurações dos campos, estilos e segurança. | `object` | `{}`        |

### Detalhes da Props

#### `options`

A propriedade options contém diversas configurações para personalização do SDK.

| Propriedade | Descrição                                                  | Tipo      | Default |
| ----------- | ---------------------------------------------------------- | --------- | ------- |
| `config`    | Configuração dos campos do cartão e estilos dos inputs.    | `object`  | `{}`    |
| `sandbox`   | Define se a tokenização será feita no ambiente de sandbox. | `boolean` | `true`  |

#### `options.config`

A propriedade config permite configurar os campos de entrada dos cartões e seus respectivos estilos.

##### `config.fields`

| Propriedade         | Descrição                                           | Tipo      | Default  |
| ------------------- | --------------------------------------------------- | --------- | -------- |
| `container`         | ID do elemento HTML onde o campo será renderizado.  | `string`  | `""`     |
| `type`              | Tipo do input (ex: text).                           | `string`  | `"text"` |
| `placeholder`       | Texto de placeholder do campo.                      | `string`  | `""`     |
| `needMask`          | Define se o campo deve ter máscara de formatação.   | `boolean` | `true`   |
| `defaultValidation` | Indica se as validações padrão devem ser aplicadas. | `boolean` | `true`   |

Quando a propriedade needMask possuir valor true, ela vai aplicar as seguintes máscaras:

| Campo                  | Máscara                                                  |
| ---------------------- | -------------------------------------------------------- |
| `card-number`          | Cartões até 16 dígitos: `9999 9999 9999 9999`            |
|                        | Cartões superiores a 16 dígitos: `9999 9999 9999 999999` |
| `card-expiration-date` | `MM/YY`                                                  |

<Warning>
  A configuração do container deve seguir rigorosamente a nomenclatura: `card-number`, `card-holder-name`, `card-cvv`, `card-expiration-date`.

  Da mesma forma, os campos devem ser configurados utilizando as versões em camelCase: `cardNumber`, `cardHolderName`, `cardCvv`, `cardExpirationDate`, conforme demonstrado no exemplo acima.
</Warning>

##### `config.preventAutofill`

| Propriedade       | Descrição                                               | Tipo      | Default |
| ----------------- | ------------------------------------------------------- | --------- | ------- |
| `preventAutofill` | Impede que o navegador sugira preenchimento automático. | `boolean` | `false` |

##### `config.styles`

Vamos tratar sobre estilização separadamente no tópico específico para [estilos](/sdks/tokenization/v2/styles).

### Validações padrões.

Quando a propriedade defaultValidation estiver definida como true, algumas validações serão aplicadas automaticamente aos campos durante a digitação do cliente.

O resultado dessas validações pode ser acessado por meio do evento validity, que será abordado no próximo tópico.

A seguir, estão as validações aplicadas quando defaultValidation for true:

### Validações

| Campo                  | Tipo     | Validações                                                                                                                                                                          |
| ---------------------- | -------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `card-number`          | `string` | Mínimo: 14 caracteres<br />Máximo: 22 caracteres<br />Validação extra: Usa a biblioteca card-validation para verificar a validade do número do cartão.                              |
| `card-holder-name`     | `string` | Mínimo: 3 caracteres<br />Máximo: 30 caracteres                                                                                                                                     |
| `card-cvv`             | `string` | Mínimo: 3 caracteres<br />Máximo: 4 caracteres                                                                                                                                      |
| `card-expiration-date` | `string` | Mínimo: 1 caractere<br />Máximo: 5 caracteres<br />Data: Deve ser superior à data atual<br />Mês: Deve ser igual ou superior ao atual<br />Ano: Deve ser igual ou superior ao atual |

<Info>
  Regras adicionais:

  `card-number`: Permite apenas a digitação de números.

  `card-holder-name`: Permite apenas letras e espaços.

  `card-cvv`: Permite apenas a digitação de números.

  `card-expiration-date`: Permite apenas a digitação de números.
</Info>

<CardGroup>
  <Card href="/sdks/tokenization/v2/styles" title="Estilos">
    Aprenda a estilizar os campos.
  </Card>
</CardGroup>