Javascript de tokenização

 
 
O Javascript de Tokenização permite cadastrar os cartões de crédito de seus clientes, de forma segura. Os clientes inserem os dados em seu site, e estes dados são enviados diretamente para os servidores do PayU, ali serão tokenizados e armazenados para futuras compras.

Você poderá desenvolver funcionalidades como “Pagamento em um clique” ou cadastrar vários cartões de crédito para cada cliente. Uma vez instalado o Javascript e cadastrado os cartões de crédito de seus clientes, você poderá gerar cobranças enviando os dados da compra. Se desejar saber mais acerca das opções oferecidas pelo PayU para realizar cobranças, refira-se a SDK de tokenização ou API de tokenização de acordo com seu tipo de integração.

Para instalar o Javascript de tokenização siga os passos a seguir:
Javascript de tokenização
 
 
01. Declaração de instância: Para começar a usar PayU.js, você deve adicionar a seguinte tag em sua página web:
<script type="text/javascript" src="https://gateway.payulatam.com/ppp-web-gateway/javascript/PayU.js"></script>
 
02. Configurações gerais: Você deve realizar as seguintes configurações para poder realizar a conexão.
Com a seguinte configuração, você muda a url para uma de desenvolvimento (Obrigatória):
Para obter sua Public Key acesse sua área administrativa na PayU e vá em 'Dados da Loja' -> 'Informação técnica'.
payU.setURL('https://api.payulatam.com/payments-api/4.0/service');
 
Você deve configurar a chave pública por meio da instrução (Obrigatória)
payU.setPublicKey('SUA CHAVE PUBLICA');
 
Você deve configurar a conta com a qual você deseja utilizar a PayU.js empregando a seguinte linha (Obrigatória):
Para conhecer sua Conta ID visite o Módulo administrativo PayU
payU.setAccountID('SEU NÚMERO DE CONTA');
 
O ID do div utilizado para mostrar a bandeira, o texto opcional será mostrado para que o cliente selecione sua bandeira.
payU.setListBoxID('SEU LIST BOX ID', 'texto opcional');
 
Você deve empregar o seguinte método para obter os métodos de pagamento ativos:
payU.getPaymentMethods();
 
Você pode definir o idioma no qual é mostrada a informação, por defeito é o idioma selecionado como espanhol (‘es’), mas é possível mudá-lo para inglês ‘en’ ou português ‘pt’:
payU.setLanguage("en"); //Ex. Se o idioma é mudado para inglês.
 
Nota: Para conhecer sua chave pública e demais credenciais de autenticação visite a pagina Como obter minha API KEY e API LOGIN?.
03. Obter dados do CARTÃO de crédito: Para executar o processo de Tokenização, você deve empregar o método payU.setCardDetails. Este método converte os dados sensíveis do cartão em um token, o qual será usado para executar o processamento das transações sem necessidade que os dados sensíveis do cartão titular passem pelo seu servidor.
payU.setCardDetails(
	{
		number:'4111111111111111',
		name_card:'NOME_CARTÃO',
		payer_id:'PAYER_ID', 
		exp_month:10,
		exp_year:2015,
		method:'VISA'
	}
);
 
No método payU.setCardDetails são completados os dados do cartão de crédito, no exemplo que está passando um objeto JSON, mas podem ser utilizados outros métodos como jQuery. Os parâmetros são os seguintes:
  1. number: O número do cartão como um string sem separadores. (Obrigatório) Exemplo: '4242424242424242'.
  2. exp_month: O que o número representa no mês de expiração. (Obrigatório) Exemplo: 10
  3. exp_year: Um número de quatro dígitos representando o ano de expiração do cartão. (Obrigatório)
  4. name_card: O nome impresso no cartão. (Obrigatório)
  5. payer_id: O id do pagador na loja. (Obrigatório)
  6. cvv: O código de segurança do cartão: Exemplo: ‘123’
  7. document: O número do documento de identidade do pagador.
 
04. Criação de um token para cartão de crédito: A criação de um token é feita por meio de uma função payU.createToken.
payU.createToken(responseHandler);
 
Onde o parâmetro responseHandler é uma função definida para criar a resposta:
function responseHandler(response)
{
	if (response.error) {
		// São mostradas mensagens de erro.
		$(".create-errors").text(response.error);
	}
	else {
		// Se obtém o token e é possível guardar ou enviar para algum pagamento.
		var token = response.token;
		var payer_id = response.payer_id;
		var document = response.document;
		var name = response.name;
	}
}
 
A função criar token também pode receber um segundo parâmetro, um formulário onde podem passar os dados sem a necessidade de usar o método setCardDetails:
jQuery(function($)
{
	$(‘#create-form’).submit(function(event)
	{
		var $form = $(this);
		payU.createToken(responseHandler, $form);
		return false;
	});
});
 
05. Validações: Estes são as validações que você pode fazer com o javaScript.
Validação de cartões de crédito: A validação de cartões de crédito é realizada por meio da função payU.validateNumber, que não considera espaços ou outros sinais de pontuação que sejam inseridos. Como resposta, o método retorna ‘true’ se o cartão é válido, caso contrário o valor retornado será ‘false’.
payU.validateCard ('4242424242424242')
payU.validateCard ('4242-42424242-4242')
payU.validateCard ('4242 4242 4242 4242')
payU.validateCard ('4242-1111-1111-1111')
payU.validateCard ('12345678')
 
Validação da data de expiração do cartão de crédito: A validação da data de expiração de um cartão, se realizará por meio da função payU.validateExpiry, o qual realiza uma revisão do ano e o mês fornecidos e gera um alerta caso a data não seja válida.
payU.validateExpiry('2020','02') // True
 
Validação da bandeira ou tipo do cartão de crédito: A validação da bandeira ou tipo de cartão de crédito é realizada por meio da função payU.cardPaymentMethod. As possíveis bandeiras são VISA, MASTERCARD, AMEX, DINERS, e DISCOVER, em caso de que o número do cartão não seja identificado, o valor para o campo retornado será desconhecido.
payU.cardPaymentMethod ('4242-4242-4242-4242') // "VISA"
payU.cardPaymentMethod ('378282246310005') // "AMEX"
payU.cardPaymentMethod ('1234') // "desconhecido"
 
 
Possíveis erros: O sistema prevê múltiplas mensagens de erro quando são presentadas falhas ou existem informações incompletas. A seguir, confira a lista das mensagens possíveis:

Mensagens que podem ser vistas pelos desenvolvedores

Cód. Erro MENSAGEM DESCRIÇÃO
0 Esta franquia não está disponível para ser utilizada. A conta configurada não conta com o meio de pagamento indicado. Você deve conversar com a equipe de suporte operacional para solicitar a ativação desse meio de pagamento para a sua conta.
4 Não está configurado o Id do pagador. Não foi enviado o campo payer_id.
6 Ocorreu um erro inesperado com PayU.js. Isso pode ser a causa de problemas de conectividade, por favor tente novamente. Se você ainda tem problemas, por favor avise. Erros de conexão. É possível verificar que o serviço esteja funcionando corretamente e enviar novamente o pedido.
7 Sua configuração inicial não é correta. Os dados configuráveis não estão corretos.
9 Tipo cartão de crédito desconhecido. O tipo de cartão não é conhecido você deve enviar/selecionar a bandeira.
12 A chave pública utilizada não é válida (Verifica payU.setPublicKey()) Verifique se a chave pública seja igual á encontrada no Módulo Administrativo.
13 Sua chave pública não está configurada. Ex: payU.setPublicKey("SUA CHAVE PÚBLICA") Verifique se a chave pública é igual à que você encontra no Módulo Administrativo.
14 Sua conta iD não está configurada. Verifique se o número da conta está correto.
15 Não está configurado o DIV da bandeira. Verifique se você tem um DIV para mostrar as bandeiras.
16 O identificador da conta utilizada não é válido. Verifique se o número da conta está correto.
17 Você deve utilizar um identificador da conta e uma chave pública válidos. Verifique se vocês estão empregando corretamente payU.setAccountID() e payU.setPublicKey()
18 Verifica se você está enviando os parâmetros obrigatórios no Java Script (Nome, bandeira, No. cartão de crédito e data de validade). O cartão tem parâmetros obrigatórios que não estão sendo enviados.
19 Você não tem cartão de crédito como meio de pagamento ativo para tokenizar (Verifique se você está utilizando payU.getPaymentMethods()) Verifique se você está usando a função payU.getPaymentMethods(), e que sua loja/conta tenha métodos de pagamento com os quais seja feita a tokenização.

Mensagens que podem ser vistas pelos Clientes

Cód. Erro Mensagem Descrição
1 Verifique se todos os dados do seu cartão de crédito são corretos. Os dados do cartão são incorretos: Você deve verificar que todos os dados do cartão sejam corretos.
2 O documento deve ter entre 5 e 30 dígitos. No campo opcional do documento não tem os dígitos requisitados.
3 Verifica se a data de expiração é válida. Você deve verificar a data de validade se é válida.
5 Você deve selecionar um método de pagamento. Você deve selecionar um método de pagamento.
10 O cartão de crédito não pertence à bandeira selecionada. O cartão inserido e a bandeira selecionada não coincidem.
 
 
NOTA: O javascript de tokenização se encontra disponível para Chrome, Firefox, Safari, Opera e Internet Explorer 10 ou superior.
Você pode descarregar o seguinte exemplo sobre como implementar o JavaScript de tokenização no seu website. Considere que com o JavaScript você pode registrar os cartões de credito de seus clientes, mas se você deseja fazer uma cobrança deve utilizar o API ou SDK de tokenização.
 
Download exemplo em GitHub