Aplicações Web mono página
A utilização de uma Aplicação web One Page (em inglês single-page-application ou SPA tem a vantagem):
- de reduzir o tempo de carregamento.
- de consumir menos recursos.
Etapas de integração
- Carregar o formulário de pagamento
- Iniciar o formulário de pagamento
- Exibir o formulário de pagamento
- Analisar o resultado do pagamento
Frameworks
Carregar o formulário de pagamento
No HEAD
, :
Chargez notre librairie JavaScript : src="https://static.lyra.com/static/js/krypton-client/V4.0/stable/kr-payment-form.min.js"
Intégrez obligatoirement la clé publique dans le paramètre
kr-public-key
(3 ème clé du tableau des clés API REST ).Applique um tema (link: Temas ).
No BODY
, :
- Ocultas a formulário de pagamento, em um
<div>
.
Exemplo de código
<head> <!-- Javascript library. Should be loaded in head section --> <script type="text/javascript" src="https://static.lyra.com/static/js/krypton-client/V4.0/stable/kr-payment-form.min.js" kr-public-key="69876357:testpublickey_DEMOPUBLICKEY95me92597fd28tGD4r5:testpublickey_DEMOPUBLICKEY95me92597fd28tGD4r5"> </script> <!-- theme and plugins. should be loaded in the HEAD section --> <link rel="stylesheet" href="https://static.lyra.com/static/js/krypton-client/V4.0/ext/classic-reset.min.css"> <script type="text/javascript" src="https://static.lyra.com/static/js/krypton-client/V4.0/ext/classic.js"></script> </head> <body> ... <!--Hidden payment form --> <div id="paymentForm" class="kr-embedded" style="display:none"> <!-- payment form fields --> <div class="kr-pan"></div> <div class="kr-expiry"></div> <div class="kr-security-code"></div> <!-- payment form submit button --> <button class="kr-payment-button"></button> <!-- error zone --> <div class="kr-form-error"></div> </div> ... </body>
Iniciar o formulário de pagamento
Quando o comprador decide de pagar:
- Crie um formToken durante uma chamada para o Web Service Charge/CreatePayment.
Por razões de segurança, a chamada é sempre realizada a partir do seu servidor EC (nunca no navegador) para evitar os erros CORS (Cross Origin Policy).
Exemplo de código
/**
* Called on 'checkout' click
*/
function onCheckout(){
// Create the order, based on your cart
var order = {
"amount": 990,
"currency": "EUR",
"orderId": "myOrderId-999999",
"customer": {
"email": "sample@example.com"
}
};
// Call merchant server to get form token and then display payment form
getFormToken(order, displayPaymentForm, alert);
}
/**
* Get form token from merchant server
* @param order
* @param resolve
* @param reject
*/
function getFormToken(order, resolve, reject){
var request = new XMLHttpRequest();
// Open a new connection, using the POST request on the URL endpoint
request.open('POST', 'YOUR_SERVER/payment/init', true);
request.setRequestHeader('Content-Type', 'application/json');
request.onload = function (){
if (request.status >= 200 && request.status < 400) {
resolve(this.response);
}
else
{
reject("Invalid server response. Code " + request.status);
}
};
request.onerror = function (error){
reject(error);
};
// Send request
request.send(JSON.stringify(order));
}
- Chame seu servidor EC para validar o carrinho (controle e gestão dos estoques, valor do carrinho, etc).
Exemple de code en Node JS :
/* Init payment form */
router.post('/init', function(req, res, next){
var order = req.body;
// TO DO: check that order is valid
// Call CreatePayment web service to create the form token
request.post({
url: "https://api.lyra.com/api-payment/V4/Charge/CreatePayment",
headers: {
'Authorization': 'Basic Njk4NzYzNTc6dGVzdHBhc3N3b3JkX0RFTU9QUklWQVRFS0VZMjNHNDQ3NXpYWlEyVUE1eDdN',
'Content-Type': 'application/json'
},
json: order
}, function(error, response, body){
if (body.status === 'SUCCESS')
{
// Send back the form token to the client side
res.send(body.answer.formToken);
}
else
{
// Do your own error handling
console.error(body);
res.status(500).send('error');
}
});
});
Exibir o formulário de pagamento
Depois de gerado o formToken :
- Exibir o formulário, oculto por padrão.
- Associe-o ao formulário: KR.setFormToken.
- Integre a função KR.onSubmit para receber a notificação na hora de retornar para a loja (lado navegador).
Exemplo de código
/**
* Display the payment form with the argument form token
* @param formToken
*/
function displayPaymentForm(formToken){
// Show the payment form
document.getElementById('paymentForm').style.display = 'block';
// Set form token
KR.setFormToken(formToken);
// Add listener for submit event
KR.onSubmit(onPaid);
}
Analisar o resultado do pagamento
No final do pagamento, analise o resultado do pagamento:
Depuis l'IPN (Instant Payment Notification), lors d'un appel de serveur à serveur. Plus d'infos: Analyse de l'IPN (URL de notification).
Depuis le retour à la boutique, lors du retour dans le navigateur grâce à la méthode KR.onSubmit.
- Use uma função personalizada
onPaid
para exibir uma mensagem de acordo com o status da transação.
- Use uma função personalizada
Exemplo de código
/**
* Called when payment is finished
* @param event
*/
function onPaid(event){
if (event.clientAnswer.orderStatus === "PAID") {
// Remove the payment form
KR.removeForms();
// Show success message
document.getElementById("paymentSuccessful").style.display = "block";
} else {
// Show error message to the user
alert("Payment failed !");
}
}
Integração com Vue / React / Angular
A integração com frameworks JavaScript compilados (type Vuee, React ou Angular) requer o uso da biblioteca embedded-form-glue.
Vantagens
- Pré-carregamento da biblioteca para uma exibição mais rápida em redes lentas.
- Gerenciamento da configuração quando a aplicação ainda não foi carregada.
- Permite adicionar, apagar e exibir de novo o formulário facilmente.
Trabalhar em um ambiente assíncrono
Em um ambiente assíncrono, todos os eventos e métodos retornam promessas. O método then()
contém duas propriedades:
KR
: a referência de biblioteca JavaScript é sempre retornada, o que permite fazer o string de promessas.result
: o resultado da operação, pode estar não definido ou ausente se nenhum resultado.
Exemplo de código
KR.validateForm().then( ({KR, result}) => { /* there is no error */ /* result == null */ } ) .catch( ({KR, result}) => { /* Get the error message */ var code = result.errorCode; var message = result.errorMessage; var myMessage = code + ": " + message; console.log(myMessage); /* if you have defined a callback using */ /* result.onError(), you can trigger it calling: */ return result.doOnError(); } );
Exemplos
Framework | Descrição |
---|---|
Angular | exemplo de integração para Angular |
ember | exemplo de integração para Ember |
ionic | exemplo de integração para Ionic |
next | exemplo de integração para Next |
React | exemplo de integração para React |
server | exemplo de integração para Server |
svelte | exemplo de integração para Svelte |
ver | exemplo de integração para Vue |
require.js | exemplo de integração com RequireJS |