Blog Internet-Formation

Et si les systèmes de paiement en ligne devenaient encore plus simple à installer et utiliser ? C'est le chemin qui semble être pris par le W3C avec la mise en place de deux API : Payment Request et Payment Handler. Pour les aficionados des Progressive Web Apps (PWA), la première API était sûrement déjà bien connue, mais la seconde vient ajouter une couche supplémentaire dans la gestion des paiements en ligne.

Si vous voulez en savoir plus sur leur usage, vous pouvez observer la vidéo tout en bas de cet article, ou encore vous rendre dans la documentation de Google au sujet de ces API. Et si lire la documentation du W3C ne vous fait pas frémir, alors voici des liens vers l'API Payment Request et l'API Payment Handler. Ces API Javascript vont pouvoir facilement s'intégrer dans des applications web, via des services workers (chers aux PWA).

Comment fonctionne les API Javascript de paiement en ligne ?

Le fonctionnement du système de paiement en ligne est assez simple en soi :

1. Un utilisateur souhaite effectuer un paiement en ligne et appuie sur un bouton du type "Acheter maintenant", directement dans la fiche produit par exemple.
2. Une fenêtre de requête de paiement s'ouvre (via l'API Payment Request).
3. L'utilisateur choisit son moyen de paiement (via l'API Payment Handler qui permet de créer la liste des méthodes de paiement, avec une URL définie pour chacune d'entre elle).
4. Une fenêtre séparée s'ouvre et l'utilisateur peut alors s'authentifier et valider le paiement.
5. Le fenêtre se ferme et le paiement s'exécute jusqu'à finalisation.
6. Le site peut désormais afficher une page de confirmation ou remerciement.

En soi, nous retrouvons donc les étapes assez classiques d'un paiement en ligne, à la différence que l'API permet d'effectuer des achats "impulsifs" directement dans la fiche produit, en toute simplicité. Cela n'empêchera pas d'avoir un système de panier avec un paiement complet définitif, mais elle peut agir soit en complément d'un système de paiement classique (en surcouche en quelque sorte), soit en unique méthode de paiement.

L'API Payment Handler par la technique

L'API Payment Handler a pour but d'identifier les fournisseurs de paiement en ligne. Google évoque notamment BobPay qui fonctionne idéalement avec l'API, c'est pourquoi nous resterons sur le même exemple. Pour être totalement honnête, aucune de mes recherches n'a donné de résultat probant en termes d'alternative à BobPay pour le moment, donc l'offre est assez limitée. :-)

Avant de donner quelques exemples de code via des services workers, je vous conseille vivement d'aller voir et tester l'API sur ce gitHub. De nombreux exemples fonctionnels (dès Google Chrome v.68) avec code spécifique sont présentés. On peut noter que la traduction se fait automatiquement en fonction de la langue du navigateur, hormis pour les contenus propres au site web bien entendu. La capture suivante montre la fenêtre de paiement à droite de l'écran.

Sans entrer dans les détails techniques car il faut une bonne centaine de lignes de code Javascript pour relier les API entre elles, voici un guide complet, étape par étape, pour mettre en oeuvre le système de paiement en ligne. Pour résumer, l'idée est d'installer un moyen de paiement en ligne, comme le montre le code ci-dessous (soit via BobPay, soit via "basic-card" pour le paiement classique par carte bancaire) :

if ('serviceWorker' in navigator) {
  // Enregistre et installe un Service Worker
  const registratoin = await navigator.serviceWorker.register(
    // Fichier du service worker séparé
    'service-worker.js'
  );
  // Vérifie si l'API Payment Handler peut fonctionner dans le navigateur (Chrome 68 et supérieur)
  if (!registration.paymentManager) return; // Possibilité de retourner un message...
  if (!registration.paymentManager.instruments) return; // Possibilité de retourner un message...
  
  // Enregistrement des moyens de paiement ("INSTRUMENT-KEY" est une chaine totalement personnalisable)
  registration.paymentManager.instruments.set(
    'INSTRUMENT-KEY', {
      name: 'Chrome uses name and icon from the web app manifest',
      enabledMethods: ['basic-card'],
      method: 'basic-card',
      capabilities: {
        supportedNetworks: ['visa', 'master', 'jcb'],
        supportedTypes: ['credit'],
      },
    }
  )
}

Si vous voulez installer plusieurs méthodes de paiement, il suffit de créer plusieurs blocs registration.paymentManager.instruments.set() pour chaque moyen de paiement (avec une "instrument-key" différente à chaque fois). Ensuite, vous pourrez "écouter" (obtenir) les informations avec la méthode registration.paymentManager.instruments.get() en allant chercher la clé unique. Il existe d'autres méthodes en Javascript pour arriver à vos fins, ne vous en faites pas, mais celle-ci me semble la plus simple à mettre en oeuvre dans un premier temps.

Sans entrer dans les détails obscurs, l'idée était de montrer que les API de paiement en ligne progressent rapidement et pourraient à l'avenir venir compléter l'offre existante. C'est un pas de plus vers les applications web en lieu et place des sites web tels que nous les connaissons. Nul doute que des composants de frameworks Javascript viendront implémenter ces moyens de paiement à l'avenir d'ailleurs, pour nous faciliter la tâche.