Découvrez comment adapter votre application de paiement Web aux paiements Web afin d'améliorer l'expérience utilisateur.
Une fois l'application de paiement enregistrée, vous êtes prêt à accepter les demandes de paiement des marchands. Cet article explique comment orchestrer une transaction de paiement d'un service worker pendant l'exécution (c'est-à-dire lorsqu'une fenêtre s'affiche et que l'utilisateur interagit avec elle).
![Orchestrer des transactions de paiement avec un service worker](https://web.dev/static/articles/orchestrating-payment-transactions/image/orchestrating-payment-tra-dd17687ea595a.png?authuser=5&hl=fr)
Les "modifications des paramètres de paiement au moment de l'exécution" font référence à un ensemble d'événements qui permet au marchand et au gestionnaire de paiement d'échanger des messages pendant que l'utilisateur interagit avec lui. Pour en savoir plus, consultez la section Gérer les informations de paiement facultatives avec un service worker.
Recevoir un événement de demande de paiement de la part du marchand
Lorsqu'un client choisit de payer avec votre application de paiement Web et que le marchand appelle PaymentRequest.show()
, votre service worker reçoit un événement paymentrequest
. Ajoutez un écouteur d'événements au service worker pour capturer l'événement et préparer l'action suivante.
[gestionnaire de paiement] service-worker.js :
…
let payment_request_event;
let resolver;
let client;
// `self` is the global object in service worker
self.addEventListener('paymentrequest', async e => {
if (payment_request_event) {
// If there's an ongoing payment transaction, reject it.
resolver.reject();
}
// Preserve the event for future use
payment_request_event = e;
…
Le PaymentRequestEvent
conservé contient des informations importantes sur cette transaction:
Nom de propriété | Description |
---|---|
topOrigin |
Chaîne qui indique l'origine de la page Web de premier niveau (généralement le marchand bénéficiaire). Utilisez-le pour identifier le point de départ du marchand. |
paymentRequestOrigin |
Chaîne qui indique l'origine du demandeur. Elle peut être identique à topOrigin lorsque le marchand appelle directement l'API Payment Request, mais elle peut être différente si l'API est appelée depuis un iFrame par un tiers (une passerelle de paiement, par exemple).
|
paymentRequestId |
Propriété id de PaymentDetailsInit fournie à l'API Payment Request. Si le marchand omet l'ajout, le navigateur fournit un ID généré automatiquement.
|
methodData |
Données du mode de paiement fournies par le marchand dans le cadre de PaymentMethodData .
Utilisez cette valeur pour déterminer les détails de la transaction.
|
total |
Montant total fourni par le marchand dans le cadre de PaymentDetailsInit .
Utilisez-le pour créer une UI indiquant au client le montant total à payer.
|
instrumentKey |
Clé d'instrumentation sélectionnée par l'utilisateur. Cela correspond aux instrumentKey que vous avez fournies à l'avance. Une chaîne vide indique que l'utilisateur n'a spécifié aucun instrument.
|
Ouvrir la fenêtre du gestionnaire de paiement pour afficher l'interface de l'application de paiement Web
Lorsqu'un événement paymentrequest
est reçu, l'application de paiement peut ouvrir une fenêtre de gestionnaire de paiement en appelant PaymentRequestEvent.openWindow()
. La fenêtre du gestionnaire de paiement présente l'interface de votre application de paiement aux clients, où ils peuvent s'authentifier, choisir l'adresse et les options de livraison, et autoriser le paiement. Nous verrons comment écrire le code de l'interface dans la section Gérer les paiements sur l'interface des paiements (bientôt disponible).
Transmettez une promesse préservée à PaymentRequestEvent.respondWith()
afin de pouvoir la résoudre avec un résultat de paiement à l'avenir.
[gestionnaire de paiement] service-worker.js :
…
self.addEventListener('paymentrequest', async e => {
…
// Retain a promise for future resolution
// Polyfill for PromiseResolver is provided below.
resolver = new PromiseResolver();
// Pass a promise that resolves when payment is done.
e.respondWith(resolver.promise);
// Open the checkout page.
try {
// Open the window and preserve the client
client = await e.openWindow(checkoutURL);
if (!client) {
// Reject if the window fails to open
throw 'Failed to open window';
}
} catch (err) {
// Reject the promise on failure
resolver.reject(err);
};
});
…
Vous pouvez utiliser un polyfill PromiseResolver
pratique pour résoudre une promesse à un moment arbitraire.
class PromiseResolver {
constructor() {
this.promise_ = new Promise((resolve, reject) => {
this.resolve_ = resolve;
this.reject_ = reject;
})
}
get promise() { return this.promise_ }
get resolve() { return this.resolve_ }
get reject() { return this.reject_ }
}
Échanger des informations avec l'interface
Le service worker de l'application de paiement peut échanger des messages avec l'interface de cette application via ServiceWorkerController.postMessage()
. Pour recevoir des messages de l'interface, écoutez les événements message
.
[gestionnaire de paiement] service-worker.js :
// Define a convenient `postMessage()` method
const postMessage = (type, contents = {}) => {
if (client) client.postMessage({ type, ...contents });
}
Recevoir le signal "prêt" de l'interface
Une fois la fenêtre du gestionnaire de paiement ouverte, le service worker doit attendre un signal d'état prêt de l'interface de l'application de paiement. Le service worker peut transmettre des informations importantes à l'interface lorsqu'il est prêt.
Interface [gestionnaire de paiement] :
navigator.serviceWorker.controller.postMessage({
type: 'WINDOW_IS_READY'
});
[gestionnaire de paiement] service-worker.js :
…
// Received a message from the frontend
self.addEventListener('message', async e => {
let details;
try {
switch (e.data.type) {
// `WINDOW_IS_READY` is a frontend's ready state signal
case 'WINDOW_IS_READY':
const { total } = payment_request_event;
…
Transmettre les détails de la transaction à l'interface
Maintenant, renvoyez les détails du paiement. Dans ce cas, vous n'envoyez que le total de la demande de paiement, mais vous pouvez transmettre plus d'informations si vous le souhaitez.
[gestionnaire de paiement] service-worker.js :
…
// Pass the payment details to the frontend
postMessage('PAYMENT_IS_READY', { total });
break;
…
Interface [gestionnaire de paiement] :
let total;
navigator.serviceWorker.addEventListener('message', async e => {
switch (e.data.type) {
case 'PAYMENT_IS_READY':
({ total } = e.data);
// Update the UI
renderHTML(total);
break;
…
Renvoyer les identifiants de paiement du client
Lorsque le client autorise le paiement, l'interface peut envoyer un post au service worker pour qu'il continue. Vous pouvez résoudre la promesse transmise à PaymentRequestEvent.respondWith()
pour renvoyer le résultat au marchand.
Transmettez un objet PaymentHandlerResponse
.
Nom de propriété | Description |
---|---|
methodName |
Identifiant du mode de paiement utilisé pour effectuer le paiement. |
details |
Les données spécifiques au mode de paiement qui fournissent les informations nécessaires au marchand pour traiter le paiement. |
Interface [gestionnaire de paiement] :
const paymentMethod = …
postMessage('PAYMENT_AUTHORIZED', {
paymentMethod, // Payment method identifier
});
[gestionnaire de paiement] service-worker.js :
…
// Received a message from the frontend
self.addEventListener('message', async e => {
let details;
try {
switch (e.data.type) {
…
case 'PAYMENT_AUTHORIZED':
// Resolve the payment request event promise
// with a payment response object
const response = {
methodName: e.data.paymentMethod,
details: { id: 'put payment credential here' },
}
resolver.resolve(response);
// Don't forget to initialize.
payment_request_event = null;
break;
…
Annuler la transaction de paiement
Pour autoriser le client à annuler la transaction, l'interface peut envoyer un message post au service worker. Celui-ci peut ensuite résoudre la promesse transmise à PaymentRequestEvent.respondWith()
avec null
pour indiquer au marchand que la transaction a été annulée.
Interface [gestionnaire de paiement] :
postMessage('CANCEL_PAYMENT');
[gestionnaire de paiement] service-worker.js :
…
// Received a message from the frontend
self.addEventListener('message', async e => {
let details;
try {
switch (e.data.type) {
…
case 'CANCEL_PAYMENT':
// Resolve the payment request event promise
// with null
resolver.resolve(null);
// Don't forget to initialize.
payment_request_event = null;
break;
…
Exemple de code
Tous les exemples de code que vous avez vus dans ce document sont des extraits de l'application exemple fonctionnelle suivante:
https://paymenthandler-demo.glitch.me
Service worker [gestionnaire de paiement]
Interface [gestionnaire de paiement]
Pour essayer:
- Accédez à https://paymentrequest-demo.glitch.me/.
- Accédez au bas de la page.
- Appuyez sur Ajouter un bouton de paiement.
- Saisissez
https://paymenthandler-demo.glitch.me
dans le champ Identifiant du mode de paiement. - Appuyez sur le bouton Payer à côté du champ.
Étapes suivantes
Dans cet article, nous avons appris à orchestrer une transaction de paiement à partir d'un service worker. L'étape suivante consiste à apprendre à ajouter des fonctionnalités plus avancées au service worker.