Une transaction de paiement via le Web commence par la découverte de votre application de paiement. Découvrez comment configurer un mode de paiement et préparer votre application de paiement pour que les marchands et les clients puissent effectuer des paiements.
Pour être utilisée avec l'API Payment Request, une application de paiement doit être associée à un identifiant de mode de paiement. Les marchands qui souhaitent intégrer une application de paiement utilisent l'identifiant du mode de paiement pour l'indiquer au navigateur. Cet article explique le fonctionnement de la découverte d'applications de paiement et explique comment configurer votre application de paiement pour qu'elle soit correctement détectée et appelée par un navigateur.
Si vous ne connaissez pas encore le concept des paiements Web ou le fonctionnement d'une transaction de paiement via des applications de paiement, commencez par lire les articles suivants:
- Améliorer les applications de paiement grâce aux paiements Web
- Cycle de vie d'une transaction de paiement
Prise en charge des navigateurs
Les paiements Web sont constitués de différentes technologies, dont l'état d'assistance dépend du navigateur.
Comment un navigateur découvre une application de paiement
Chaque application de paiement doit fournir les éléments suivants:
- Identifiant du mode de paiement basé sur l'URL
- Fichier manifeste du mode de paiement (sauf lorsque l'identifiant du mode de paiement est fourni par un tiers)
- Fichier manifeste d'application Web
![Diagramme: comment un navigateur identifie l'application de paiement à partir d'un identifiant de mode de paiement basé sur une URL](https://web.dev/static/articles/setting-up-a-payment-method/image/diagram-a-browser-disco-ee5623b0facb6.png?authuser=6&hl=fr)
Le processus de découverte commence lorsqu'un marchand initie une transaction:
- Le navigateur envoie une requête à l'URL de l'identifiant du mode de paiement et récupère le fichier manifeste du mode de paiement.
- Le navigateur détermine l'URL du fichier manifeste de l'application Web à partir du fichier manifeste du mode de paiement et récupère le fichier manifeste de l'application Web.
- Le navigateur détermine s'il faut lancer l'application de paiement du système d'exploitation ou l'application de paiement Web à partir du fichier manifeste de l'application Web.
Les sections suivantes expliquent en détail comment configurer votre propre mode de paiement afin que les navigateurs puissent le détecter.
Étape 1: Fournissez l'identifiant du mode de paiement
Un identifiant de mode de paiement est une chaîne basée sur une URL. Par exemple, l'identifiant de Google Pay est https://google.com/pay
. Les développeurs d'applications de paiement peuvent choisir n'importe quelle URL comme identifiant de mode de paiement, à condition qu'ils la contrôlent et puissent diffuser du contenu arbitraire. Dans cet article, nous utiliserons https://bobbucks.dev/pay
comme identifiant du mode de paiement.
Comment les marchands utilisent-ils l'identifiant du mode de paiement ?
Un objet PaymentRequest
est construit avec une liste d'identifiants de mode de paiement qui identifie les applications de paiement qu'un marchand décide d'accepter. Les identifiants de mode de paiement sont définis en tant que valeur pour la propriété supportedMethods
. Exemple :
[marchand] demande le paiement:
const request = new PaymentRequest([{
supportedMethods: 'https://bobbucks.dev/pay'
}], {
total: {
label: 'total',
amount: { value: '10', currency: 'USD' }
}
});
Étape 2: Diffusez le fichier manifeste du mode de paiement
Un fichier manifeste de mode de paiement est un fichier JSON qui définit l'application de paiement autorisée à l'utiliser.
Fournir le fichier manifeste du mode de paiement
Lorsqu'un marchand initie une transaction de paiement, le navigateur envoie une requête HTTP GET
à l'URL de l'identifiant du mode de paiement.
Le serveur répond avec le corps du fichier manifeste du mode de paiement.
Le fichier manifeste d'un mode de paiement comporte deux champs : default_applications
et supported_origins
.
Nom de propriété | Description |
---|---|
default_applications (obligatoire) |
Tableau d'URL pointant vers les fichiers manifestes des applications Web où sont hébergées les applications de paiement. (L'URL peut être un lien relatif.) Ce tableau doit référencer le fichier manifeste de développement, le fichier manifeste de production, etc. |
supported_origins |
Tableau d'URL redirigeant vers des origines susceptibles d'héberger des applications de paiement tierces qui utilisent le même mode de paiement. Notez qu'un mode de paiement peut être implémenté par plusieurs applications de paiement. |
Le fichier manifeste d'un mode de paiement doit se présenter comme suit:
[gestionnaire de paiement] /payment-manifest.json
{
"default_applications": ["https://bobbucks.dev/manifest.json"],
"supported_origins": [
"https://alicepay.friendsofalice.example"
]
}
Lorsque le navigateur lit le champ default_applications
, il trouve une liste de liens vers les fichiers manifestes d'applications Web des applications de paiement compatibles.
Vous pouvez éventuellement rediriger le navigateur pour qu'il trouve le fichier manifeste du mode de paiement à un autre emplacement.
L'URL de l'identifiant du mode de paiement peut éventuellement répondre avec un en-tête Link
qui pointe vers une autre URL permettant au navigateur de récupérer le fichier manifeste du mode de paiement. Cela est utile lorsqu'un fichier manifeste de mode de paiement est hébergé sur un autre serveur ou lorsque l'application de paiement est diffusée par un tiers.
Configurez le serveur de modes de paiement pour qu'il réponde avec un en-tête HTTP Link
avec l'attribut rel="payment-method-manifest"
et l'URL du fichier manifeste du mode de paiement.
Par exemple, si le fichier manifeste se trouve sur https://bobbucks.dev/payment-manifest.json
, l'en-tête de réponse inclut:
Link: <https://bobbucks.dev/payment-manifest.json>; rel="payment-method-manifest"
L'URL peut être un nom de domaine complet ou un chemin d'accès relatif. Inspectez https://bobbucks.dev/pay/
pour détecter le trafic réseau pour voir un exemple. Vous pouvez également utiliser une commande curl
:
curl --include https://bobbucks.dev/pay
Étape 3: Diffusez un fichier manifeste d'application Web
Un fichier manifeste d'application Web est utilisé pour définir une application Web, comme son nom l'indique. Il s'agit d'un fichier manifeste couramment utilisé pour définir une progressive web app (PWA).
Le fichier manifeste d'application Web type se présente comme suit:
[gestionnaire de paiement] /manifest.json:
{
"name": "Pay with Bobpay",
"short_name": "Bobpay",
"description": "This is an example of the Payment Handler API.",
"icons": [
{
"src": "images/manifest/icon-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "images/manifest/icon-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"serviceworker": {
"src": "service-worker.js",
"scope": "/",
"use_cache": false
},
"start_url": "/",
"display": "standalone",
"theme_color": "#3f51b5",
"background_color": "#3f51b5",
"related_applications": [
{
"platform": "play",
"id": "com.example.android.samplepay",
"min_version": "1",
"fingerprints": [
{
"type": "sha256_cert",
"value": "4C:FC:14:C6:97:DE:66:4E:66:97:50:C0:24:CE:5F:27:00:92:EE:F3:7F:18:B3:DA:77:66:84:CD:9D:E9:D2:CB"
}
]
}
]
}
Les informations décrites dans le fichier manifeste d'une application Web sont également utilisées pour définir la façon dont une application de paiement apparaît dans l'UI de demande de paiement.
Nom de propriété | Description |
---|---|
name (obligatoire)
|
Utilisé comme nom de l'application de paiement. |
icons (obligatoire)
|
Utilisée comme icône de l'application de paiement. Seul Chrome utilise ces icônes. D'autres navigateurs peuvent les utiliser comme icônes de remplacement si vous ne les spécifiez pas dans le mode de paiement. |
serviceworker
|
Permet de détecter le service worker qui s'exécute en tant qu'application de paiement Web. |
serviceworker.src |
URL à partir de laquelle télécharger le script de service worker. |
serviceworker.scope |
Chaîne représentant une URL qui définit le champ d'application d'enregistrement d'un service worker. |
serviceworker.use_cache |
URL à partir de laquelle télécharger le script de service worker. |
related_applications
|
Permet de détecter l'application qui sert d'application de paiement fournie par le système d'exploitation. Pour en savoir plus, consultez le guide du développeur pour les applications de paiement Android. |
prefer_related_applications
|
Permet de déterminer quelle application de paiement lancer lorsqu'une application de paiement fournie par le système d'exploitation et une application de paiement Web sont disponibles. |
![Application de paiement avec une icône.](https://web.dev/static/articles/setting-up-a-payment-method/image/payment-app-an-icon-3150130974ec9.png?authuser=6&hl=fr)
La propriété name
du fichier manifeste de l'application Web est utilisée comme nom de l'application de paiement, la propriété icons
comme icône de l'application de paiement.
Comment Chrome détermine quelle application de paiement lancer
Lancer une application de paiement spécifique à une plate-forme
Pour lancer l'application de paiement spécifique à la plate-forme, les conditions suivantes doivent être remplies:
- Le champ
related_applications
est spécifié dans le fichier manifeste de l'application Web et :- L'ID de package et la signature de l'application installée correspondent, tandis que la version minimale (
min_version
) du fichier manifeste de l'application Web est inférieure ou égale à la version de l'application installée.
- L'ID de package et la signature de l'application installée correspondent, tandis que la version minimale (
- Le champ
prefer_related_applications
correspond àtrue
. - L'application de paiement spécifique à la plate-forme est installée et dispose des éléments suivants :
- Un filtre d'intent de
org.chromium.action.PAY
. - Identifiant du mode de paiement spécifié comme valeur de la propriété
org.chromium.default_payment_method_name
.
- Un filtre d'intent de
Pour en savoir plus sur leur configuration, consultez Applications de paiement Android: guide du développeur.
[gestionnaire de paiement] /manifest.json
"prefer_related_applications": true,
"related_applications": [{
"platform": "play",
"id": "xyz.bobpay.app",
"min_version": "1",
"fingerprints": [{
"type": "sha256_cert",
"value": "92:5A:39:05:C5:B9:EA:BC:71:48:5F:F2:05:0A:1E:57:5F:23:40:E9:E3:87:14:EC:6D:A2:04:21:E0:FD:3B:D1"
}]
}]
Si le navigateur a déterminé que l'application de paiement spécifique à la plate-forme est disponible, le flux de découverte est arrêté ici. Sinon, vous pouvez passer à l'étape suivante, qui consiste à lancer l'application de paiement sur le Web.
Lancer l'application de paiement en ligne
L'application de paiement Web doit être spécifiée dans le champ serviceworker
du fichier manifeste de l'application Web.
[gestionnaire de paiement] /manifest.json:
"serviceworker": {
"src": "payment-handler.js"
}
Le navigateur lance l'application de paiement Web en envoyant un événement paymentrequest
au service worker. Le service worker n'a pas besoin d'être enregistré à l'avance. Elle peut être enregistrée "juste à temps".
Comprendre les optimisations spéciales
Comment les navigateurs peuvent ignorer l'UI de demande de paiement et lancer directement une application de paiement
Dans Chrome, lorsque la méthode show()
de PaymentRequest
est appelée, l'API Payment Request affiche une interface utilisateur fournie par le navigateur, appelée "UI de demande de paiement". Cette UI permet aux utilisateurs de choisir une application de paiement. Une fois que vous avez appuyé sur le bouton Continuer dans l'interface utilisateur de la demande de paiement, l'application de paiement sélectionnée est lancée.
L'affichage de l'UI de demande de paiement avant de lancer une application de paiement augmente le nombre d'étapes nécessaires pour qu'un utilisateur effectue un paiement. Pour optimiser le processus, le navigateur peut déléguer le traitement de ces informations aux applications de paiement et lancer une application de paiement directement sans afficher l'interface utilisateur de la demande de paiement lorsque show()
est appelé.
Pour lancer directement une application de paiement, les conditions suivantes doivent être remplies:
show()
est déclenché par un geste de l'utilisateur (par exemple, un clic de souris).- Une seule application de paiement :
- Compatible avec l'identifiant du mode de paiement demandé.
Quand une application de paiement Web est-elle enregistrée juste-à-temps (JIT) ?
Les applications de paiement Web peuvent être lancées sans que l'utilisateur ait consulté explicitement le site Web de l'application de paiement et qu'il n'ait pas enregistré le service worker. Le service worker peut être enregistré juste à temps lorsque l'utilisateur choisit de payer avec l'application de paiement en ligne. Il existe deux variantes pour le délai d'enregistrement:
- Si l'interface utilisateur de demande de paiement s'affiche, l'application est enregistrée juste à temps et lancée lorsque l'utilisateur clique sur Continuer.
- Si l'interface utilisateur des demandes de paiement est ignorée, l'application de paiement est enregistrée juste à temps et lancée directement. Si vous ignorez l'interface utilisateur des demandes de paiement pour lancer une application enregistrée juste-à-temps, un geste de l'utilisateur est nécessaire, ce qui empêche l'enregistrement inattendu des service workers multi-origines.
Étapes suivantes
Maintenant que votre application de paiement est visible, découvrez comment développer une application de paiement spécifique à une plate-forme et une application de paiement Web.