Get started with Apple Pay on the Web

Tom Grant : Bienvenue ! Je m’appelle Tom, membre de l’équipe Apple Pay E-Commerce. Depuis le lancement d’Apple Pay, j’ai travaillé avec diverses équipes à l’intégration d’Apple Pay à leurs passerelles de paiement et plateformes de commerce électronique. Je vais vous parler des principaux enseignements et des bonnes pratiques acquis au fil des ans et vous montrer comment intégrer Apple Pay à votre site web avec l’API Payment Request.

Apple Pay a été lancé aux États-Unis en octobre 2014. Depuis, nous avons réalisé des progrès incroyables.

Apple Pay est disponible dans plus de 75 marchés et des millions de marques l’ont intégré à leurs apps et sites web. Apple Pay traite des données de carte tokenisées spécifiques à l’appareil. Les transactions Apple Pay sont traitées comme les transactions par carte de crédit ou de débit. Comme Apple ne traite pas les paiements Apple Pay, un prestataire de services de paiement reste nécessaire. Il peut s’agir du même que celui qui gère vos paiements en ligne. Pour mieux comprendre le processus de paiement, voyons comment se déroule une transaction Apple Pay sur le web.

Le flux de transaction débute lorsqu’une personne clique sur le bouton Apple Pay. Une page de paiement lui permet alors de sélectionner et vérifier ses informations. Après avoir authentifié la transaction, les données du paiement sont chiffrées et transmises au site web. Le site web envoie l’objet de paiement Apple Pay au serveur marchand. Le serveur envoie ensuite les données au prestataire de services de paiement. Celui-ci déchiffre les données du paiement, puis génère et envoie un message d’autorisation à l’acquéreur, qui envoie ensuite le paiement au réseau de paiement. Celui-ci procède à la détokenisation des données et envoie le numéro de carte à l’émetteur pour autorisation. La confirmation de paiement remonte ensuite la chaîne et une coche s’affiche sur la page de paiement pour confirmer la transaction. Ce processus peut sembler long, mais en réalité, tout se déroule en quelques secondes. Après avoir vu ce qui se passe en arrière-plan lors d’une transaction Apple Pay sur le Web, intéressons-nous à l’expérience client. Pour cela, accédons au site de démo d’Apple Pay : applepaydemo.apple.com. Ce site est très utile pour apprendre à maîtriser Apple Pay sur le Web. Vous pouvez y simuler des transactions sans débiter aucune carte. En cas de difficultés lors de la mise en œuvre de votre intégration, le site de démo d’Apple Pay est une ressource idéale pour trouver des solutions. Il prend en charge de nombreux types de configurations d’Apple Pay : les informations de livraison, la gestion des erreurs, etc. Pour l’instant, privilégions la simplicité et conservons les réglages par défaut pour voir comment se passe une transaction de base.

Le processus démarre en appuyant sur le bouton Apple Pay. Une fenêtre modale s’affiche, que nous appelons une page de paiement. La personne choisit ses options de paiement et authentifie la transaction, qui est envoyée pour être traitée et le résultat apparaît au bas de la page de paiement. Une fois le paiement effectué, la page se ferme. Et voilà comment effectuer une simulation de paiement. Après avoir vu le déroulement d’une transaction, voyons comment se préparer à accepter Apple Pay, et comment intégrer Apple Pay avec l’API Payment Request. L’API fournit une méthode commune aux divers navigateurs de récupération des informations de paiement, de livraison et des coordonnées de la clientèle, que vous pouvez ensuite utiliser pour traiter les commandes. L’API Payment Request simplifie le processus de paiement et garantit sa sécurité, sa cohérence et son accessibilité. Si vous avez déjà intégré Apple Pay en utilisant l’API Apple Pay JavaScript, vous connaîtrez sans doute les étapes de cette vidéo. Voyons comment procéder pour intégrer Apple Pay, en commençant par les étapes de configuration de votre environnement. Ensuite, nous verrons comment mettre en œuvre Apple Pay, de la création d’une demande de paiement jusqu’à la finalisation d’une transaction. Enfin, je vous présenterai plusieurs outils permettant de tester votre mise en œuvre d’Apple Pay. Il y a beaucoup à dire, l’objectif de la session étant d’acquérir une connaissance approfondie de la façon d’intégrer Apple Pay à votre site web. Commençons par la configuration de votre environnement. Votre prestataire de services de paiement doit prendre en charge les transactions Apple Pay. Il peut aussi proposer Apple Pay via son propre SDK, ce qui peut être un moyen simple et fiable d’intégrer Apple Pay à votre site. Votre serveur doit disposer d’un certificat SSL valide et pouvoir utiliser TLS version 1.2 ou ultérieure pour communiquer avec les serveurs Apple Pay. Enfin, vérifiez que les pages où Apple Pay est intégré sont transmises en https://. Une fois ces vérifications effectuées, vous pouvez créer les identifiants que vous utiliserez pour Apple Pay. Pour cela, il existe deux méthodes principales. Vous pouvez les créer et les gérer vous-même sur le portail Apple Developer, ou vous enregistrer directement auprès de votre PSP. Pour connaître la configuration spécifique requise pour votre site web, contactez votre prestataire de services de paiement. Je vais à présent vous expliquer comment créer et gérer des identifiants sur le portail Apple Developer. Votre organisation a peut-être un compte Apple Developer, en particulier si elle propose déjà une app sur l’App Store. Demandez à votre admin de vous ajouter depuis la section Utilisateurs et Accès d’App Store Connect. Si votre organisation n’a pas encore de compte, inscrivez-vous sur developer.apple.com.

L’élément central de chaque transaction Apple Pay est l’identifiant commerçant, qui atteste que vous acceptez les paiements Apple Pay. Pour cet identifiant unique, nous recommandons une chaîne de type nom de domaine inversé.

Ensuite, créez un certificat de traitement de paiement. Celui-ci servira à sécuriser le chiffrement et le déchiffrement des données de paiement provenant des appareils. Vous recevrez une demande de signature de certificat de votre prestataire de services de paiement, car c’est sans doute lui qui déchiffrera les transactions. Ensuite, créez un certificat d’identifiant commerçant. Ce certificat permet de vérifier votre identité en tant qu’entité commerciale lorsqu’un paiement est initié. Enfin, enregistrez et vérifiez les domaines et sous-domaines des pages où le bouton Apple Pay apparaîtra sur votre site. Pour cela, saisissez le nom de domaine complet à vérifier dans la section Domaines commerciaux du portail Apple Developer. Un fichier sera généré. Téléchargez-le et placez-le dans le dossier « .well-known » sur votre serveur. Cliquez ensuite sur le bouton Vérifier pour que les serveurs Apple vérifient que cet emplacement existe bien.

Une fois l’environnement prêt et l’identifiant commerçant créé, vous pouvez implémenter Apple Pay dans votre site web. Pour mieux cerner la finalité de ce que nous faisons, examinons plus en détail le déroulement d’une transaction Apple Pay sur le Web.

Elle débute lorsqu’une personne touche ou clique sur le bouton Apple Pay. Le site web crée une demande de paiement avec toutes les informations de la transaction, puis envoie une requête de session au serveur marchand. Une fois l’identifiant commerçant vérifié, les serveurs Apple Pay génèrent et renvoient un objet de session marchande. Celui-ci est transmis au site pour le processus de validation. La personne peut alors vérifier la page de paiement et authentifier la transaction avec Face ID, Touch ID ou son code d’accès. Les données du paiement sont générées sur l’appareil et envoyées aux serveurs Apple Pay pour être chiffrées à l’aide du certificat de traitement de paiement du site. Les données du paiement sont ensuite renvoyées au site web,

puis transmises au prestataire de services de paiement pour être déchiffrées et traitées. Le statut du paiement est renvoyé par le PSP. Le site web indique si la transaction a réussi et, si c’est le cas, la page de paiement se ferme. Ce processus peut être divisé en quatre phases principales : la présentation d’Apple Pay, la validation du site marchand, l’authentification du paiement et le traitement du paiement. La phase de présentation d’Apple Pay comprend l’affichage du bouton Apple Pay et de la page de paiement. Dans la phase de validation, les certificats sont échangés entre Apple et le serveur marchand via le protocole TLS mutuel. C’est lors de la phase d’authentification que le paiement est confirmé et généré. Enfin, la phase de traitement du paiement est gérée en grande partie par le commerce et le prestataire de services de paiement. Ces quatre phases constituent la base d’un paiement Apple Pay sur le Web. Ce flux servira de base pour structurer la mise en œuvre d’Apple Pay. Voici comment proposer Apple Pay comme option de paiement sur un site web. Le bouton Apple Pay doit apparaître lorsque le site est consulté sur un appareil compatible. Pour vérifier si un appareil est compatible avec Apple Pay, appelez la méthode ApplePaySession.canMakePayments.

Il est important de déterminer quel type de bouton convient le mieux à votre parcours de paiement. L’API Apple Pay en propose de nombreux types de styles différents pour votre site web. Choisissez celui qui s’intègre le mieux au flux de votre expérience d’achat. La police, la couleur, le texte et le style des boutons fournis par le système sont approuvés par Apple. Vous pouvez importer un bouton dans votre site à l’aide de JavaScript ou de CSS et définir son style, son type et sa langue à l’aide d’attributs. Pour ajouter un bouton à l’aide du SDK JavaScript, chargez son script à partir du réseau de diffusion de contenu. Définissez des propriétés CSS comme le rayon de bordure pour adapter le bouton à votre interface utilisateur. Enfin, ajoutez l’élément bouton Apple Pay à la page, en définissant les attributs de style, de type et de langue. Dans cet exemple, le bouton sera noir avec le texte « Payer avec Apple Pay » traduit en allemand. Pour voir les boutons Apple Pay qui sont disponibles, revenons au site de démo d’Apple Pay consulté précédemment. Vous pouvez modifier facilement les attributs et propriétés CSS du bouton et voir le résultat en temps réel au bas de la page. C’est un moyen simple et rapide de générer des boutons Apple Pay et de copier-coller leur code dans votre site web. Ici, vous pouvez choisir le style du bouton. J’ai choisi le noir. Ensuite, vous pouvez choisir un type en fonction du contexte. Le dernier attribut concerne la langue. Sélectionnons l’allemand comme dans l’exemple précédent. Plus bas, ce sont les propriétés CSS, comme la largeur du bouton, sa hauteur, le rayon des angles et les marges intérieures. La configuration du bouton s’affiche et se met à jour dans le bloc de code situé en dessous des options. Vous pouvez le copier-coller dans votre propre code.

Différents types de demande de paiement sont disponibles, afin d’afficher des informations supplémentaires concernant la transaction. Une transaction type correspond à un paiement unique, mais Apple Pay propose d’autres options pour les paiements récurrents, comme les abonnements, les recharges automatiques, pour les cartes cadeaux, et les paiements différés, pour les précommandes. Pour l’instant, créons une demande de paiement pour un paiement unique.

Pour accepter Apple Pay avec l’API Payment Request, vous devez ajouter ce mode de paiement à l’aide de son identifiant, en l’occurrence : apple.com/apple-pay. En plus de l’identifiant, d’autres données sont nécessaires, dont le numéro de version. Nous recommandons d’utiliser la version la plus récente, car elle intègre toutes les dernières fonctionnalités d’Apple Pay. Pour en savoir plus, rendez-vous sur developer.apple.com. Il faut aussi préciser l’identifiant commerçant configuré précédemment, les fonctionnalités et les réseaux pris en charge et le code du pays où le paiement sera traité. Il est très important de le définir correctement pour générer un cryptogramme conforme à la DSP2 dans les pays concernés. Vous pouvez spécifier les coordonnées que la personne doit fournir, comme son adresse de facturation, de livraison, ou les deux. Ici, l’adresse de livraison sera demandée. Toutefois, il est essentiel de penser à la confidentialité lorsque vous collectez des données. Demandez uniquement les informations nécessaires au traitement de la transaction pour optimiser le taux de conversion avec Apple Pay. Ensuite, vous devez créer un objet « details » pour la transaction. Il définit les éléments à afficher, par exemple les taxes, les frais et les remises, les différentes options de livraison qui seront disponibles pour les commandes – très utile pour proposer une option de paiement express – et le total, avec la devise et le montant à facturer, et une étiquette indiquant le nom du commerce. Ce nom doit correspondre à celui que la clientèle associe à l’entreprise. Il apparaîtra après le mot « Payer » dans la page de paiement. C’est également dans l’objet « details » que s’ajoutent les éventuels modificateurs de la transaction. Ceux-ci contiennent des informations qui ne s’appliquent que dans certains cas. Par exemple, vous pouvez ajouter un supplément pour les paiements par carte. Si vous vouliez demander un paiement récurrent, comme pour un abonnement, c’est également là que vous ajouteriez les détails de la demande récurrente.

À partir de tous ces éléments, nous pouvons à présent initier une demande de paiement. Créez un objet « PaymentRequest » et transmettez les méthodes, les informations et les options au constructeur. Nous l’avons vu, l’un des grands avantages d’Apple Pay est de pouvoir servir d’option de paiement express pour optimiser les conversions. L’objectif est de rendre l’expérience aussi fluide que possible. Pour cela, vous devez vérifier que la personne dispose d’une carte pour effectuer le paiement avant d’afficher le bouton Apple Pay. Utilisez pour cela la méthode « canMakePayment » de l’API Payment Request. Cette méthode vérifie que l’appareil et le navigateur sont compatibles avec Apple Pay et renvoie « true » uniquement si la personne dispose d’une carte pour effectuer le paiement. Lorsque la personne touche le bouton Apple Pay, la méthode « show » affiche la page de paiement. Une fois que celle-ci est apparue, elle affiche l’animation « Traitement » et lance le processus de validation du site marchand. Voyons en quoi cela consiste.

La validation du site marchand a lieu pour chaque transaction Apple Pay sur le Web. Cette mesure de sécurité importante garantit que le paiement est traité par un site marchand légitime et autorisé.

Il protège la clientèle des transactions frauduleuses et améliore la sécurité globale du processus de paiement.

Trois parties sont impliquées dans cette validation : le site marchand, le serveur marchand et le serveur Apple Pay. L’utilisation du bouton Apple Pay déclenche la validation du site marchand en appelant le gestionnaire « onmerchantvalidation ». Dans ce gestionnaire, un appel doit être dirigé vers un point de terminaison du serveur marchand pour demander la création d’une session avec le nom d’hôte statique « apple-pay-gateway.apple.com » comme URL de validation. Pour que les certificats restent sécurisés, la demande transmise au serveur Apple Pay doit provenir du serveur marchand et non directement du navigateur. Ainsi, les certificats d’identifiant commerçant restent sécurisés, hors d’accès de la clientèle et autres tiers, et ne peuvent pas imiter votre site web. Pour demander la création d’une session, le serveur marchand génère des données utiles et les transmet au serveur Apple Pay via le protocole TLS mutuel. Le certificat utilisé pour cette connexion est le certificat d’identifiant commerçant. Une fois l’identifiant commerçant validé, un objet de session est généré et renvoyé au serveur.

Cet objet ne doit subir aucune modification, ou la validation du site marchand échouera.

L’objet de session est ensuite renvoyé au navigateur, où il est transmis à la méthode de complétion pour finaliser le processus de validation du site marchand. Le système active la page de paiement pour permettre les interactions. Voyons comment accomplir ce processus dans votre code.

Un appui sur le bouton Apple Pay déclenche le gestionnaire « onmerchantvalidation ». Dans ce gestionnaire, un appel doit être dirigé vers un point de terminaison du serveur pour gérer la demande de session de commerce. Une fois reçu par le navigateur, l’objet de session est transmis au format JSON et utilisé dans le rappel de complétion du processus. Si la validation réussit, la page de paiement se met à jour pour indiquer que le paiement est prêt à être confirmé. Quand elle échoue, la page de paiement se ferme juste après que la personne a touché le bouton Apple Pay. En cas de problèmes avec le processus de validation, la console de l’inspecteur web de Safari permet d’analyser les erreurs et les objets lors du développement de ce processus. Si vous ne le connaissez pas, l’inspecteur web fournit des outils performants de débogage des pages web, extensions web et WKWebViews. Vous pouvez le lancer sur votre Mac pour déboguer le code qui s’exécute sur un appareil connecté. Pour en savoir plus, regardez la vidéo « Rediscover Safari Developer Features » de la WWDC23.

Après la validation du site marchand, passons à l’authentification du paiement.

Quand la personne met à jour les champs de la page de paiement, ses choix sont partagés par des gestionnaires d’évènements, qui permettent au site web de répondre en conséquence. Ces gestionnaires peuvent concerner la sélection du mode de paiement, dont les codes de réduction, la mise à jour de l’option de livraison choisie ou les modifications apportées à l’adresse de livraison. Quand le navigateur appelle un gestionnaire, vous disposez de 30 secondes pour le traiter et appeler la fonction de rappel « updateWith ». Les appels serveur pour l’adresse de livraison doivent avoir lieu dans ces 30 secondes. Si la fonction de rappel n’est pas appelée à temps, un message apparaît sur la page de paiement indiquant que le paiement n’a pas pu être effectué. Examinons le gestionnaire « onshippingaddresschange » plus en détail. Avant que la personne authentifie la transaction, les coordonnées de livraison modifiées sont partagées avec le site web marchand. À des fins de confidentialité, seules les données nécessaires au calcul des coûts finaux de la transaction sont transmises, comme les taxes ou les frais de livraison. Une fois ces informations reçues, vous pouvez calculer le montant total approprié. En cas de problème au niveau de l’adresse ou des coordonnées fournies par la personne, vous pouvez également créer des messages d’erreur personnalisés. Les messages d’erreur attirent l’attention sur certains champs et fournissent des conseils clairs et concrets aidant à corriger rapidement les problèmes et à finaliser la transaction. Quand Apple Pay fournit des données, vous pouvez procéder à la même validation que pour tout autre champ manuel déjà présent sur votre site web. Si un problème est détecté au niveau de l’adresse ou des coordonnées, « ApplePayError » permet de créer un message d’erreur personnalisé. Dans une erreur Apple Pay, vous devez indiquer un code d’erreur identifiant la section de la page de paiement contenant l’erreur, un champ de contact, qui est le champ spécifique de la page qui contient l’erreur, et le message personnalisé à afficher. L’erreur Apple Pay est ensuite transmise dans la méthode de mise à jour avec un rappel. Vous pouvez aussi vérifier l’adresse complète et les coordonnées après l’autorisation de la transaction avec Face ID, Touch ID ou le code d’accès. En cas de problème avec l’adresse de la personne, vous pouvez l’autoriser à retenter la transaction et mettre en évidence les problèmes à corriger.

Si des erreurs ont été ajoutées au tableau d’erreurs, vous pouvez empêcher le paiement jusqu’à ce que le format des informations soit conforme à vos règles de validation. Il est conseillé d’être aussi souple que possible concernant les formats d’adresse pour que les transactions puissent aboutir.

Les données utiles d’Apple Pay contiennent aussi le jeton de paiement, avec les informations nécessaires au traitement de la transaction. Si vous gérez le déchiffrement du jeton de paiement, c’est à cette étape qu’il doit avoir lieu. Dans la plupart des cas, le PSP se charge du déchiffrement et vous pouvez lui envoyer le jeton directement. Ce jeton contient aussi le nom d’affichage de la carte utilisée pour la transaction, composé du nom du réseau et des quatre derniers chiffres du numéro de la carte. Ce jeton est différent du jeton spécifique à l’appareil et c’est lui qui permet d’indiquer à la personne la carte qui a été utilisée pour la transaction, dans l’e-mail de confirmation de commande ou un reçu.

Après l’authentification du paiement, nous terminerons par le traitement du paiement. Une fois le traitement effectué par le PSP, le résultat doit être transmis à la méthode « complete » pour en informer la personne. Si la transaction a réussi, le paramètre « success » sera transmis. Une coche apparaît alors dans la page de paiement, qui se ferme pour clore le processus Apple Pay. Si un paiement échoue, vous pouvez transmettre « fail » au gestionnaire « response ». La page de paiement affiche un point d’exclamation et la personne est invitée à réessayer. Vous pouvez aussi fermer la page de paiement. Voilà, nous avons fait le tour des quatre phases principales de mise en œuvre d’Apple Pay.

Bien sûr, aucune présentation de ce type n’est complète sans évoquer les tests. Pour conclure, voyons rapidement comment tester votre solution. Pour cela, accédez au site de test Sandbox d’Apple Pay. Vous y trouverez des numéros de carte de crédit Sandbox utilisables sur des appareils pour tester votre intégration front-end et le processus de déchiffrement. Notez que les cartes de crédit Sandbox ne sont pas utilisables dans un environnement de traitement des paiements de production. Les cartes de crédit Sandbox sont idéales pour les tests, mais il est conseillé d’en effectuer avec de vraies cartes avant la mise en production de votre implémentation. Ces tests garantiront que votre processus de paiement fonctionne correctement de bout en bout. Voilà pour les tests et cette présentation sur la prise en main d’Apple Pay sur le Web. J’ai abordé de nombreux sujets, de la configuration et de la mise en œuvre aux tests Sandbox. Avant de terminer, voici les prochaines étapes de votre parcours d’intégration d’Apple Pay. Pensez à consulter le site de démo d’Apple Pay. C’est le meilleur point de départ pour concevoir votre solution Apple Pay. Lisez le Guide d’intégration lié à cette session. Il contient de nombreux détails qui vous aideront à réussir votre mise en œuvre d’Apple Pay. Enfin, consultez la section Apple Pay des directives d’interface humaine pour obtenir des consignes détaillées sur la façon de présenter Apple Pay et la page de paiement sur votre site web. Merci de votre attention. À vous de jouer pour intégrer Apple Pay avec succès.