Getting Started
Aprenda como tokenizar seus cartões usando o Malga Tokenization SDK.
Pré-requisitos
Para que você consiga aproveitar ao máximo esse guia, será necessário ter chaves de integração de sandbox. Basta clicar aqui e criar uma conta em nosso Dashboard.
Antes de começarmos os passos de configuração e utilização do SDK, há duas formas de tokenizar cartões com a lib, chamamos elas de:
Sync Tokenization
: Você controla o momento da chamada de tokenização;Form Handling Tokenization
: A tokenização acontece automaticamente no submit do formulário e você só receberá otokenId
no seu back-end.
Dessa forma você pode escolher o que se encaixa melhor com o seu projeto.
1. Instalando o SDK
Instale nosso SDK com o seu gerenciador de pacotes favorito.
npm install @malga/tokenization
2. Configurando o formulário
Primeiro é necessário adicionar data-attributes
nos elementos do seu formulário para que consigamos
pegar o valor dos campos automaticamente.
<form
onSubmit={handleSubmit}
data-malga-tokenization-form>
<input
data-malga-tokenization-holder-name
name="holderName"
type="text"
placeholder="Card Holder Name"
/>
<input
data-malga-tokenization-number
name="number"
type="number"
placeholder="Card Number"
/>
<input
data-malga-tokenization-expiration-date
name="expirationDate"
type="text"
placeholder="Card Expiration Date"
/>
<input
data-malga-tokenization-cvv
name="cvv"
type="number"
placeholder="Card CVV"
/>
<button type="submit">Submit</button>
</form>
3. Tokenizando o cartão
Agora que já estamos com nosso formulário configurado basta instanciar o SDK e chamarmos os métodos para cada tipo de integração.
Sync Tokenization
Basta chamar o método tokenize
do SDK na função que lida com o submit
do
seu formulário. A mesma irá retornar o tokenId
do cartão já tokenizado automaticamente.
const malgaTokenization = new MalgaTokenization({
apiKey: "17a64c8f-a387-4682-bdd8-d280493715e0",
clientId: "d1d2b51a-0446-432a-b055-034518c2660e",
});
async function handleSubmit(event) {
event.preventDefault();
const { tokenId } = await malgaTokenization.tokenize();
console.log(tokenId);
}
Form Handling Tokenization
Você só precisará chamar o método init
do SDK no seu arquivo JS principal, o
entrypoint da sua aplicação. Dessa forma quando acontecer o submit
do seu formulário a
tokenização já ocorrerá automaticamente.
Não se preocupe, os campos do formulário que não estão com o data-attributes
do SDK ainda continuarão
sendo enviados para o seu back-end.
const malgaTokenization = new MalgaTokenization({
apiKey: "17a64c8f-a387-4682-bdd8-d280493715e0",
clientId: "d1d2b51a-0446-432a-b055-034518c2660e",
});
malgaTokenization.init();
Pronto, agora seus cartões já estão sendo tokenizados com segurança! :rocket:
4. Teste você mesmo
Was this page helpful?