Aplicaciones web de una sola página
Las ventajas de una aplicacion web monopágina (single-page-application o SPA ) son:
- reducir el tiempo de carga.
- consumir menos recursos.
Etapas de la integración
- Cargar el formulario de pago
- Inicializar el formulario de pago.
- Visualizar el formulario de pago.
- Analizar el resultado del pago
Frameworks
Cargar el formulario de pago
En el 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 ).Aplique un tema (enlace: Temas ).
En el BODY
, :
- Ocultar el formulario de pago en un
<div>
.
Ejemplo 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>
Inicializar el formulario de pago.
Cuando el comprador desee pagar:
- Cree un formToken durante de una llamada al Web Service Charge/CreatePayment.
Por razones de seguridad, la llamada siempre se realiza desde el servidor del vendedor (y nunca desde el navegador para evitar los errores CORS (Cross Origin Policy).
Ejemplo 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));
}
- Llame a su servidor para validar el carrito (control de gestión de stocks, monto del carrito, 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');
}
});
});
Visualizar el formulario de pago.
Tras generar el formToken :
- Muestre el formulario (oculto por defecto).
- Asócielo al formulario: KR.setFormToken.
- Integre la función KR.onSubmit para recibir la notificación del proceso "volver a la tienda".
Ejemplo 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);
}
Analizar el resultado del pago
Al finalizar el pago, analice el resultado del mismo:
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.
- Utilice una función personalizada
onPaid
para mostrar un mensaje según el estado de la transacción.
- Utilice una función personalizada
Ejemplo 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 !");
}
}
Integración con Vue / React / Angular
La integración con frameworks JavaScript compilados (tipo Vuee, React o Angular) requiere el uso de la biblioteca embedded-form-glue.
Ventajas
- Precarga de la biblioteca para permitir una visualización más rápida para redes lentas.
- Gestión de la configuración cuando la aplicación aún no está cargada.
- Agregar, eliminar y visualizar nuevamente el formulario de forma sencilla.
Trabajar en un entorno asíncrono.
En un entorno asíncrono todos los eventos y métodos devuelven promesas. El método then()
contiene dos propiedades:
KR
: la referencia de la biblioteca de JavaScript siempre se devuelve, lo que permite encadenar las promesas.result
: el resultado de la operación puede estar ausente del objeto o indefinido si no se devuelve ningún resultado.
Ejemplo 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(); } );
Ejemplos
Framework | Descripción |
---|---|
Angular | ejemplo de integración para Angular |
ember | ejemplo de integración para Ember |
Ionic | Ejemplo de integración para Ionic |
next | ejemplo de integración para Next |
React | Ejemplo de integración para React. |
servidor | ejemplo de integración para Server |
svelte | ejemplo de integración para Svelte |
vue | ejemplo de integración para Vue.js |
require.js | ejemplo de integración con RequireJS |