• Francia
página de estado
demo
asistencia
FAQContacte el soporte tecnico
Buscar
Categoria
Tags
España
Francia
España
Europa (Inglés)
India
Página principal
Casos de uso
Crear un pago
Crear un pago en vencimientos
Crear un pago multitarjeta
Crear un pago por token
Crear un enlace de pago
Crear una suscripción
Gestione sus suscripciones
Gestione sus transacciones
Analizar los diarios
Docs API
Formulario incrustado
API REST
Formulario en redirección
Pago móvil
Intercambio de ficheros
Ejemplo de código
Medios de pago
Plugins
Guías
Back office Experto
Guías funcionales

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

  • Integración con Vue / React / Angular
  • Ejemplos

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 personalizadaonPaidpara mostrar un mensaje según el estado de la transacción.
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.

  • enlace en Github.

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
Jobs
Legal
GDPR
25.22-1.11