Tokenização

📘

O que você irá aprender com esse artigo?

  • O que é Tokenização
  • Tokenizando via API
  • iugu.js

O que é Tokenização

A tokenização é a criptografia do cartão de crédito do cliente para transacionar de forma segura.

O conceito básico consiste em enviar os dados do cartão do cliente diretamente do browser dele para a iugu e então receber de volta um código (token) que representa o cartão em questão.

Por padrão, o payment token pode ser utilizado uma única vez, mas essa utilização pode ser feita através de uma cobrança ou para geração de uma forma de pagamento do cliente que consequentemente permite a utilização do cartão mais de uma vez.

Tokenizando via API

❗️

Para realizar a tokenização direto via API, é necessário ter certificação PCI-DSS, afim de garantir maior segurança no tráfego de informações confidenciais, como os dados de cartão do comprador.

Esta chamada API deve ser utilizada apenas em aplicações sem compatibilidade com JavaScript como por exemplo aplicações móveis.

Para realizar a criação do Token por API, acesse a documentação Criar Token.

iugu.js

O iugu.js facilita a manipulação de dados sensíveis de cartão de crédito, permitindo efetuar transações seguras diretamente pelo client-side (ou seja, sem enviar dados sensíveis para o seu servidor).

📘

Para aplicações web

O uso do iugu.js é recomendado para aplicações web. Para aplicações móveis, que não têm JavaScript no client-side, utilize a nossa API para gerar tokens de pagamentos.

Incluindo o iugu.js

<script type="text/javascript" src="https://js.iugu.com/v2"></script>

Configurando seu AccountID

A primeira ação a ser tomada para utilizar o iugu.js é configura-lo com seu AccountID. Seu AccountID pode ser obtido acessando AQUI. Este é o número que se encontra após o caracter #.

Para configurar seu AccountID, utilize a seguinte linha de código javascript.

Iugu.setAccountID("COLOCAR SEU ACCOUNT ID AQUI");

Habilitando o modo de testes

Você pode habilitar o modo de testes realizando a seguinte chamada após a configuração do AccountID.

Iugu.setTestMode(true);

Entradas de Texto Inteligentes - Formatter.js

A versão 2 do Iugu.js detecta automaticamente se você possuí o Formatter.js e tenta melhorar as entradas de dados de cartão. Se você utiliza uma aplicação com algum framework de WebApp (Backbone/Ember/etc), é necessário chamar o Iugu.setup() para ativar estas melhorias de usabilidade a cada renderização de views. Você pode saber mais sobre o Formatter.js no GitHub.

Iugu.setup();

Criando um Token de Pagamento (Para Cartão de Crédito)

O Token é um código que representa de forma segura os dados sensíveis do cartão de crédito.

Iugu.createPaymentToken(this, function(response) {
	if (response.errors) {
		alert("Erro salvando cartão");
	} else {
		alert("Token criado:" + response.id);
	}	
});

O primeiro argumento pode ser tanto um formulário (no caso do exemplo, pois esse código estava dentro do submit do formulário) quanto um objeto CreditCard.

Os campos do formulário devem ter o atributo data-iugu para cada campo abaixo:

  • number => Número do Cartão de Crédito
  • verification_value => CVV
  • expiration => Data de vencimento no formato MM/AAAA ou MM/AA
  • first_name => Primeiro Nome
  • last_name => Sobrenome
  • full_name => Nome Completo (Pode optar por esse em vez de enviar o nome separado)

Criando um objeto CreditCard

cc = Iugu.CreditCard("4111111111111111", 
                     "12", "2017", "Nome", 
                     "Sobrenome", "123");

Sendo seus parâmetros, respectivamente:

  • Número do Cartão de Crédito
  • Mês de Vencimento
  • Ano de Vencimento
  • Primeiro Nome
  • Sobrenome
  • CVV

O objeto CreditCard tem a função valid() que valida o cartão de crédito e retorna um bool (true ou false).

Funções Utilitárias

validateCreditCardNumber

Valida o número do cartão conforme o algoritmo de Luhn.

Iugu.utils.validateCreditCardNumber("4111111111111111"); // Retorna true
Iugu.utils.validateCreditCardNumber("3213"); // Retorna false

validateCVV

Valida o número de verificação de acordo com a bandeira.

As bandeiras suportadas são "visa", "mastercard", "amex", "diners" e "elo".

Iugu.utils.validateCVV("123", "visa"); // Retorna true
Iugu.utils.validateCVV("1234", "amex"); // Retorna true
Iugu.utils.validateCVV("3213", "mastercard"); // Retorna false

validateExpiration

Valida a data de vencimento com o mês e ano.

Assumindo a data de hoje como sendo em Dezembro de 2013, temos os seguintes exemplos:

Iugu.utils.validateExpiration(12, 2018); // Retorna true
Iugu.utils.validateExpiration(11, 2016); // Retorna false
Iugu.utils.validateExpiration(11, 2019); // Retorna true

validateExpirationString

Valida a data de vencimento com uma string no formato DD/AAAA ou DD/AA.

Assumindo a data de hoje como sendo em Dezembro de 2013, temos os seguintes exemplos:

Iugu.utils.validateExpirationString("12/2018"); // Retorna true
Iugu.utils.validateExpirationString("11/2016"); // Retorna false
Iugu.utils.validateExpirationString("11/19"); // Retorna true

isBlockedByAdBlock

Retorna se há algum adBlock impedindo o funcionamento correto do iugu.js

Iugu.utils.isBlockedByAdBlock(); // Retorna true caso tenha um adBlock impedindo o funcionamento correto e false caso contrário

getBrandByCreditCardNumber

Retorna a bandeira a partir do número do cartão de crédito.

Iugu.utils.getBrandByCreditCardNumber("4111111111111111"); // Retorna "visa"
Iugu.utils.getBrandByCreditCardNumber("5555555555554444"); // Retorna "mastercard"
Iugu.utils.getBrandByCreditCardNumber("123321"); // Retorna false

Exemplo