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

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

O id de cada div é o container configurado no campo. Ele pode ser qualquer id, desde que não se repita na página.

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 das 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. Aceita qualquer `id` único na página.	`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`

Os campos devem ser configurados utilizando as chaves em camelCase: cardNumber, cardHolderName, cardCvv, cardExpirationDate.O container é livre: card-number, numero ou card.number funcionam da mesma forma, porque os dados do cartão são identificados pela chave do campo, e não pelo nome do container. A única regra é não repetir o mesmo id na página. Para tokenizar dois ou mais cartões, veja Tokenizando mais de um cartão.

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

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 Máximo: 22 caracteres 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 Máximo: 30 caracteres
`card-cvv`	`string`	Mínimo: 3 caracteres Máximo: 4 caracteres
`card-expiration-date`	`string`	Mínimo: 1 caractere Máximo: 5 caracteres Data: Deve ser superior à data atual Mês: Deve ser igual ou superior ao atual Ano: Deve ser igual ou superior ao atual

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.

Estilos

Aprenda a estilizar os campos.

Mais de um cartão

Aprenda a tokenizar dois ou mais cartões na mesma página.

Tokenization SDK

API SDKs

UI SDKs

Plugins

Configuração

Props

Detalhes das Props

`options`

`options.config`

`config.fields`

`config.preventAutofill`

`config.styles`

Validações padrão

Validações

Estilos

Mais de um cartão

​Props

​Detalhes das Props

​options

​options.config

config.fields

config.preventAutofill

config.styles

​Validações padrão

​Validações

Estilos

Mais de um cartão

Props

Detalhes das Props

`options`

`options.config`

`config.fields`

`config.preventAutofill`

`config.styles`

Validações padrão

Validações