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

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

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

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.

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 especifico para estilos.

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