Skip to content

Instantly share code, notes, and snippets.

@marciol

marciol/README.md

Last active November 6, 2018 13:27
Show Gist options
  • Save marciol/427dccb4d2e14922b4d6302c00f7c519 to your computer and use it in GitHub Desktop.
Save marciol/427dccb4d2e14922b4d6302c00f7c519 to your computer and use it in GitHub Desktop.
Download ZIP
Exemplos de uso do rpay.js
Raw
README.md

Rakuten Pay: Exemplos de formulários de tokenização e fingerprint

Aqui estão exemplos de como utilizar a API de tokenização e geração de fingerprint do Rakuten Pay.

Raw
apenas-boleto-simplificado.html
<html>
<header>
<script type="text/javascript" src="https://static.rakutenpay.com.br/rpayjs/rpay-latest.dev.min.js"></script>
</header>
<body>
<form action="#" data-rkp="form">
<fieldset>
<legend>Boleto</legend>
<input type="hidden" data-rkp="method" value="billet">
<button id="send">Enviar</button>
</fieldset>
</form>
<script charset="text/javascript">
var form = document.querySelector('form');
var button = document.querySelector('#send');
button.addEventListener("click", function(e) {
// Crie um instância do tipo RPay
var rpay = new RPay();
console.log('enter');
rpay.listeners = {
"result:success": function() {
// defina aqui o que fazer quando fingerprint
// for gerado e adicionado ao form com successo
// Neste exemplo abaixo seria a submissão do formulário
// Descomente essa linha para submeter o formulário
// form.submit();
},
"result:error": function(errors){
// defina aqui o que fazer caso ocorra algum erro durante
// o processo de geração de fingerprint e token
// Exemplo:
console.log(errors);
}
};
// Previna a execução da submissão do formulário
e.preventDefault();
// Execute a função generate() passando o form como argumento
rpay.generate(form);
});
</script>
</body>
</html>
Raw
apenas-boleto.html
<html>
<header>
<script type="text/javascript" src="https://static.rakutenpay.com.br/rpayjs/rpay-latest.dev.min.js"></script>
</header>
<body>
<form action="#" data-rkp="form">
<fieldset>
<legend>Boleto</legend>
<input type="hidden" data-rkp="method" value="billet">
<input type="hidden" id="fingerprint" name="fingerprint">
<button id="send">Enviar</button>
</fieldset>
</form>
<script charset="text/javascript">
var form = document.querySelector('form');
var button = document.querySelector('#send');
var fingerpringField = document.querySelector("#fingerprint");
button.addEventListener("click", function(e) {
// Crie um instância do tipo RPay
var rpay = new RPay();
rpay.fingerprint(function(error, fingerprint) {
// Informa o erro no console e retorna.
// Aqui é possível lançar um popup de alerta para o cliente por exemplo.
if (error) {
console.error("Erro ao gerar fingerprint", error);
return;
}
// Atribui fingerprint ao campo no formulário
fingerpringField.value = fingerprint;
});
// Previna a execução da submissão do formulário
e.preventDefault();
});
</script>
</body>
</html>
Raw
cartao-simplificado.html
<html>
<header>
<script type="text/javascript" src="https://static.rakutenpay.com.br/rpayjs/rpay-latest.dev.min.js"></script>
</header>
<body>
<form action="#" data-rkp="form">
<fieldset>
<legend>Dados do Cartão</legend>
<!-- ATENÇÃO: Método de Pagamento -->
<input type="hidden" data-rkp="method" value="credit_card">
<input type="hidden" data-rkp="card-brand">
<label>Numero do Cartão (ex: 4111111111111111)</label><br>
<input type="text" data-rkp="card-number"><br>
<br>
<label>CVV (ex: 123)</label><br>
<input type="text" data-rkp="card-cvv"><br>
<br>
<label>Mês (ex: 01)</label><br>
<input type="text" data-rkp="card-expiration-month"><br>
<br>
<label>Ano (ex: 2022)</label><br>
<input type="text" data-rkp="card-expiration-year"><br>
<br>
<label>Nome do Titular (ex: JOE DOE)</label><br>
<input type="text" data-rkp="card-holder-name"><br>
<br>
<label>CPF do Titular (ex: 12345678909)</label><br>
<input type="text" data-rkp="card-holder-document"><br>
<br>
<button id="send">Enviar</button>
</fieldset>
</form>
<script type="text/javascript">
var form = document.querySelector('form');
var button = document.querySelector('#send');
var paymentMethod = document.querySelector("[data-rkp='method']").value;
var cardNumberField = document.querySelector("[data-rkp='card-number']");
var cardBrandField = document.querySelector("[data-rkp='card-brand']");
button.addEventListener("click", function(e) {
// Crie um instância do tipo RPay
var rpay = new RPay();
// Execute a extração da bandeira do cartão.
if (paymentMethod === "credit_card")
cardBrandField.value = rpay.cardBrand(cardNumberField.value);
// Defina as funções de callback para cada tipo de resultado
rpay.listeners = {
"result:success": function() {
// defina aqui o que fazer quando fingerprint e token
// forem gerados e adicionados ao form com successo
// Neste exemplo abaixo seria a submissão do formulário
// Descomente essa linha para submeter o formulário
// form.submit();
},
"result:error": function(errors){
// defina aqui o que fazer caso ocorra algum erro durante
// o processo de geração de fingerprint e token
// Exemplo:
console.log(errors);
}
};
// Previna a execução da submissão do formulário
e.preventDefault();
// Execute a função generate() passando o form como argumento
rpay.generate(form);
});
</script>
</body>
</html>
Raw
dois-cartoes.html
<html>
<header>
<script type="text/javascript" src="https://static.rakutenpay.com.br/rpayjs/rpay-latest.dev.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
</header>
<body>
<form action="#" data-rkp="form">
<input type="hidden" name="fingerprint" id="fingerprint">
<fieldset>
<legend>Cartão nº 1</legend>
<input type="hidden" name="card-brand-1" class="card-brand">
<input type="hidden" name="card-token-1" class="card-token">
<label>Numero do Cartão (ex: 4111111111111111)</label><br>
<input type="text" class="card-number"><br>
<br>
<label>CVV (ex: 123)</label><br>
<input type="text" class="card-cvv"><br>
<br>
<label>Mês (ex: 01)</label><br>
<input type="text" class="card-expiration-month"><br>
<br>
<label>Ano (ex: 2022)</label><br>
<input type="text" class="card-expiration-year"><br>
<br>
<label>Nome do Titular (ex: JOE DOE)</label><br>
<input type="text" class="card-holder-name"><br>
<br>
<label>CPF do Titular (ex: 12345678909)</label><br>
<input type="text" class="card-holder-document"><br>
</fieldset>
<fieldset>
<legend>Cartão nº 2</legend>
<input type="hidden" name="card-brand-2" class="card-brand">
<input type="hidden" name="card-token-2" class="card-token">
<label>Numero do Cartão (ex: 4111111111111111)</label><br>
<input type="text" class="card-number"><br>
<br>
<label>CVV (ex: 123)</label><br>
<input type="text" class="card-cvv"><br>
<br>
<label>Mês (ex: 01)</label><br>
<input type="text" class="card-expiration-month"><br>
<br>
<label>Ano (ex: 2022)</label><br>
<input type="text" class="card-expiration-year"><br>
<br>
<label>Nome do Titular (ex: JOE DOE)</label><br>
<input type="text" class="card-holder-name"><br>
<br>
<label>CPF do Titular (ex: 12345678909)</label><br>
<input type="text" class="card-holder-document"><br>
</fieldset>
<br>
<button id="send">Enviar</button>
</form>
<script charset="text/javascript">
var form = document.querySelector('form');
var button = document.querySelector('#send');
var fingerpringField = document.querySelector('#fingerprint');
var rpay = new RPay();
var tokenize = null;
rpay.fingerprint(function(error, fingerprint) {
// Informa o erro no console e retorna.
// Aqui é possível lançar um popup de alerta para o cliente por exemplo.
if (error) {
console.log("Erro ao gerar fingerprint", error);
return;
}
// Atribui fingerprint ao campo no formulário
fingerpringField.value = fingerprint;
});
tokenize = function(rpay, cards, result, done) {
if (cards.length == 0) {
done(null, result);
return;
}
var card = cards.shift();
var elements = {
"form": card,
"card-number": card.querySelector(".card-number"),
"card-cvv": card.querySelector(".card-cvv"),
"expiration-month": card.querySelector(".card-expiration-month"),
"expiration-year": card.querySelector(".card-expiration-year")
};
rpay.tokenize(elements, function(error, data) {
if (error) {
// Informa o erro e retorna.
console.log("Dados de cartão inválidos", error);
done(error, result);
return;
}
// Insere o token do cartão
var cardTokenField = card.querySelector('.card-token');
cardTokenField.value = data.cardToken;
// Insere a bandeira
var cardBrandField = card.querySelector('.card-brand');
cardBrandField.value = rpay.cardBrand(elements["card-number"].value);
// Substitui o número do cartão pela máscara
elements["card-number"].value = data.cardNumberMasked;
console.log("insert card mask");
result.push(data);
tokenize(rpay, cards, result, done);
});
};
button.addEventListener("click", function(e) {
var cards = [].slice.call(document.querySelectorAll('fieldset'));
// Atribuição de tokens
tokenize(rpay, cards, [], function(error, result) {
if (error) {
console.log("Algum erro ocorreu durante a tokenização: ", error);
return;
}
console.log("Cartões tokenizados com sucesso: ", result);
// form.submit();
});
// Previna a execução da submissão do formulário
e.preventDefault();
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment