• France
état des services
démonstrations
assistance
FAQContacter le support
Video tutorials
Rechercher
Catégories
Tags
France
France
Espagne
Europe (Anglais)
Inde
Accueil
Cas d'usage
Créer un paiement
Créer un paiement en plusieurs fois
Proposer un paiement complémentaire
Créer un paiement par alias (token)
Créer un lien de paiement
Créer un abonnement
Gérer vos abonnements
Gérer vos transactions (rembourser,...)
Analyser vos journaux
Docs API
Formulaire embarqué
API REST
Formulaire en redirection
SDK Mobile
Échange de fichiers
Mandats SEPA par API REST
Exemples de code
Moyens de paiement
Modules de paiement
Marketplace
Guides
Back Office Marchand
Back Office Expert
Guides fonctionnels

Applications Web monopages

L'utilisation d'une application web monopage (en anglais single-page-application ou SPA) a pour avantage :

  • de réduire le temps de chargement.
  • de consommer moins de ressources.

Étapes d'intégration

  • Charger le formulaire de paiement
  • Initialiser le formulaire de paiement
  • Afficher le formulaire de paiement
  • Analyser le résultat du paiement

Frameworks

  • Intégration avec Vue / React / Angular
  • Exemples

Charger le formulaire de paiement

Dans le 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 ).

  • Appliquez un thème (lien : Thèmes).

Dans le BODY :

  • Masquez le formulaire de paiement, dans une div.
Exemple de code
<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-smart-form" 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>

Initialiser le formulaire de paiement

Lorsque l'acheteur décide de payer, créez un formToken en envoyant une requête vers le Web Service Charge/CreatePayment :

  • Toujours depuis votre serveur marchand, car vos données sensibles sont protégées.
  • Jamais depuis votre navigateur, car certaines données sensibles sont vulnérables, comme vos identifiants.

Pour sécuriser vos données, nous bloquons la requête et affichons des erreurs CORS.

Ces exemples de code peuvent vous aider. Voir aussi nos exemples d'intégration en fonction de votre framework JavaScript : Exemples de code.

Exemple de code
/**
* 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));
}
  • Appelez votre serveur marchand pour valider le panier (contrôle et gestion des stocks, montant du panier, 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');
    }
  });
});

Afficher le formulaire de paiement

Une fois le formToken généré :

  • Affichez le formulaire, par défaut masqué.
  • Associez-le au formulaire : KR.setFormToken.
  • Intégrez la fonction KR.onSubmit pour recevoir la notification lors du retour à la boutique.
Exemple de code
/**
* 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);
}

Analyser le résultat du paiement

À la fin du paiement, analysez le résultat du paiement :

  • 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 grâce à la méthode KR.onSubmit.
  • Utilisez une fonction personnalisée onPaid pour afficher un message selon le statut de la transaction.
Exemple de code
/**
 * 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 !");
  }
}

Intégration avec Vue / React / Angular

L'intégration avec des frameworks JavaScript compilés (type Vuee, React ou Angular) nécessite l'utilisation de la librairie embedded-form-glue.

  • lien dans Github.

Avantages

  • Préchargement de la librairie pour permettre un affichage plus rapide pour les réseaux lents.
  • Gestion de la configuration lorsque l'application n'est pas encore chargée.
  • Permet d'ajouter, de supprimer, et d'afficher à nouveau le formulaire facilement.

Travailler dans un environnement asynchrone

Dans un environnement asynchrone, tous les événements et méthodes retournent des promesses.

La méthode then() contient deux propriétés :

  • KR: la référence de librairie JavaScript est toujours retournée permettant de chaîner les promesses.
  • result: le résultat de l'opération, peut être non défini ou absent de l'objet si aucun résultat n'est renvoyé.
Exemple de code
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();
    }

);

Exemples

Framework Description
Angular exemple d'intégration pour Angular
Ember exemple d'intégration pour Ember
Ionic exemple d'intégration pour Ionic
Next exemple d'intégration pour Next
React exemple d'intégration pour React
Server exemple d'intégration pour Server
Svelte exemple d'intégration pour Svelte
Vue exemple d'intégration pour Vue
require.js exemple d'intégration avec RequireJS
Nous recrutons
Mentions légales
Charte de Protection des Données Personnelles
25.18-1.11