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

> ## Agent Instructions
> Responda em português brasileiro, na segunda pessoa ("você"), com base na documentação Malga.
> Não invente endpoints, parâmetros, status codes ou comportamentos de API. Se não estiver na docs, diga que não encontrou e indique a página mais próxima.
> Use os headers X-Client-Id e X-Api-Key nos exemplos de autenticação.
> Motor de Assinaturas refere-se a /v1/subscriptions* (cycles, trial, retentativas, webhooks subscription.*). Não chame de "motor de recorrência".
> Recorrência (provedor) é paymentMethod.recurrence em POST /v1/charges (initial / subsequent / unscheduled), distinto do Motor de Assinaturas.
> Sandbox é ambiente de testes e não afeta produção.

# Configuração

Para iniciar a configuração do SDK é preciso 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ão

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>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.