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.

PropriedadeDescriçãoTipoDefault
apiKeyChave privada para realizar transações na Malga.stringundefined
clientIdChave para identificar o cliente na Malga.stringundefined
optionsObjeto 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.

PropriedadeDescriçãoTipoDefault
configConfiguração dos campos do cartão e estilos dos inputs.object{}
sandboxDefine se a tokenização será feita no ambiente de sandbox.booleantrue

​
options.config

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

config.fields
PropriedadeDescriçãoTipoDefault
containerID do elemento HTML onde o campo será renderizado.string""
typeTipo do input (ex: text).string"text"
placeholderTexto de placeholder do campo.string""
needMaskDefine se o campo deve ter máscara de formatação.booleantrue
defaultValidationIndica se as validações padrão devem ser aplicadas.booleantrue

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

CampoMáscara
card-numberCartões até 16 dígitos: 9999 9999 9999 9999
Cartões superiores a 16 dígitos: 9999 9999 9999 999999
card-expiration-dateMM/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
PropriedadeDescriçãoTipoDefault
preventAutofillImpede que o navegador sugira preenchimento automático.booleanfalse
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

CampoTipoValidações
card-numberstringMí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-namestringMínimo: 3 caracteres
Máximo: 30 caracteres
card-cvvstringMínimo: 3 caracteres
Máximo: 4 caracteres
card-expiration-datestringMí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.

Was this page helpful?