Merci d'avoir participé à Google I/O ! Regarder des contenus à la demande

Google utilise la technologie IA pour traduire le contenu dans votre langue préférée. Les traductions générées par IA peuvent contenir des erreurs.

Configurer un mode de paiement

Une transaction de paiement utilisant Web Payments 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.

Eiji Kitamura

Date de publication : 27 septembre 2017, dernière mise à jour : 16 octobre 2026

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 s'intégrer à une application de paiement utiliseront l'identifiant du mode de paiement pour l'indiquer au navigateur. Cet article explique comment fonctionne la découverte d'applications de paiement, et comment configurer votre application de paiement pour qu'elle soit correctement découverte et appelée par un navigateur.

Si vous ne connaissez pas encore Web Payments, lisez d'abord la présentation de Web Payments.

Types d'applications de paiement

Un mode de paiement peut être accepté par une application de paiement Android, une application de paiement Web ou les deux :

Application de paiement Android : application installée que Chrome lance avec un intent Android. Chrome vérifie le nom du package et le certificat de signature de l'application.
Application de paiement Web : service worker lancé par Chrome dans une fenêtre modale. Les utilisateurs n'ont rien à installer.

Les applications de paiement Android sont disponibles dans Chrome sur Android et dans WebView. Les applications de paiement Web sont disponibles dans Chrome sur toutes les plates-formes, mais pas dans WebView.

Si les deux types d'applications sont disponibles pour un mode de paiement et que le fichier manifeste de votre application Web définit prefer_related_applications sur true, Chrome masque votre application de paiement Web. Sinon, les utilisateurs peuvent voir les deux dans l'interface utilisateur de la demande de paiement et choisir entre les deux.

Prise en charge des navigateurs

Web Payments se compose de plusieurs technologies différentes, et l'état de la compatibilité dépend du navigateur.

	Chrome		Safari		Firefox
	Ordinateur	Android	Ordinateur	Mobile	Ordinateur/Mobile
API Payment Request	✔	✔	✔	✔
API Payment Handler Web	✔	✔
Application de paiement iOS/Android	✔	✔	✔*	✔*

Comment un navigateur découvre une application de paiement

Chaque application de paiement doit fournir les éléments suivants :

Identifiant de mode de paiement basé sur une URL
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 découvre l'application de paiement à partir d'un identifiant de mode de paiement basé sur une URL

Le processus de découverte commence lorsqu'un marchand lance 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 doit lancer l'application de paiement de l'OS 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 d'en avoir le contrôle et de pouvoir diffuser du contenu et des en-têtes HTTP arbitraires. Dans cet article, nous utiliserons https://bobbucks.dev/pay comme identifiant du mode de paiement.

Comment les marchands utilisent 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 comme valeur de la propriété supportedMethods. Exemple :

[merchant] requests payment:

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 pouvant utiliser ce mode de paiement.

Fournir le fichier manifeste du mode de paiement

Lorsqu'un marchand lance une transaction de paiement, le navigateur envoie une requête HTTP HEAD à l'URL de l'identifiant du mode de paiement. L'URL de l'identifiant du mode de paiement répond avec un en-tête HTTP Link qui pointe vers l'URL où le navigateur peut récupérer le fichier manifeste du mode de paiement.

Configurez le serveur du mode de paiement pour qu'il réponde avec un en-tête HTTP Link contenant l'attribut rel="payment-method-manifest" et l'URL du fichier manifeste du mode de paiement. Par exemple, si le fichier manifeste se trouve à l'emplacement https://bobbucks.dev/pay/payment-manifest.json, l'en-tête de réponse inclut :

Link: <https://bobbucks.dev/pay/payment-manifest.json>; rel="payment-method-manifest"

L'URL peut être un nom de domaine complet ou un chemin relatif. Inspectez https://bobbucks.dev/pay pour voir un exemple de trafic réseau. Vous pouvez également utiliser une commande curl :

curl --include https://bobbucks.dev/pay

Le navigateur envoie ensuite une requête HTTP GET à l'URL du fichier manifeste du mode de paiement. Le serveur répond avec le corps du fichier manifeste du mode de paiement.

Un fichier manifeste de mode de paiement comporte deux champs : default_applications et supported_origins.

Champs du fichier manifeste du mode de paiement
Nom de propriété	Description
`default_applications` (obligatoire)	Tableau d'URL pointant vers les fichiers manifestes d'applications Web où les applications de paiement sont hébergées. (L'URL peut être relative). Ce tableau doit référencer le fichier manifeste de développement, le fichier manifeste de production, etc.
`supported_origins`	Tableau d'URL pointant vers des origines pouvant héberger des applications de paiement tierces implémentant le même mode de paiement. Notez qu'un mode de paiement peut être implémenté par plusieurs applications de paiement.

Un fichier manifeste de mode de paiement doit se présenter comme suit :

[payment handler] /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'application Web des applications de paiement compatibles.

Étape 3 : Diffusez un fichier manifeste d'application Web

Un fichier manifeste d'application Web permet de définir une application Web, comme son nom l'indique. Il s'agit d'un fichier manifeste largement utilisé pour définir une progressive web app (PWA).

Voici à quoi ressemble un fichier manifeste d'application Web standard :

[payment handler] /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
  },
  "payment": {
    "supported_delegations": ["shippingAddress", "payerName", "payerEmail", "payerPhone"]
  },
  "start_url": "/",
  "display": "standalone",
  "theme_color": "#3f51b5",
  "background_color": "#3f51b5",
  "prefer_related_applications": true,
  "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"
        }
      ]
    }
  ]
}

Chrome lit différents champs en fonction du type d'application de paiement. Pour une application de paiement Android, Chrome ne lit que related_applications. Pour une application de paiement Web, Chrome lit name, icons, serviceworker, payment et prefer_related_applications.

Champs importants du fichier manifeste d'application Web
Nom de propriété	Description
`name` (obligatoire)	Utilisé comme nom de l'application de paiement.
`icons` (obligatoire)	Utilisée comme icône d'application de paiement. Seul Chrome utilise ces icônes. Les autres navigateurs peuvent les utiliser comme icônes de remplacement si vous ne les spécifiez pas dans l'instrument de paiement.
`serviceworker`	Applications de paiement Web uniquement. Définit le service worker qui s'exécute en tant qu'application de paiement.
`serviceworker.src`	URL à partir de laquelle télécharger le script du service worker.
`serviceworker.scope`	Chaîne représentant une URL qui définit le champ d'application de l'enregistrement d'un service worker.
`serviceworker.use_cache`	Indique si le navigateur peut utiliser son cache HTTP lors de la récupération du script du service worker.
`payment.supported_delegations`	Applications de paiement Web uniquement. Informations de livraison et de contact que l'application de paiement peut fournir : `shippingAddress`, `payerName`, `payerEmail` ou `payerPhone`. Les applications de paiement Android déclarent cela dans `AndroidManifest.xml`.
`related_applications`	Applications de paiement Android uniquement. Identifie l'application et son certificat de signature. Pour en savoir plus, consultez le guide du développeur d'applications de paiement Android.
`prefer_related_applications`	Définissez cette option sur `true` pour masquer l'application de paiement Web lorsque l'application de paiement Android est installée.

La propriété name du fichier manifeste de l'application Web est utilisée comme nom de l'application de paiement, et la propriété icons est utilisée comme icône d'application de paiement.

Comment Chrome détermine l'application de paiement à lancer

Lancer l'application de paiement spécifique à la 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) dans le fichier manifeste de l'application Web est inférieure ou égale à la version de l'application installée.
L'application de paiement spécifique à la plate-forme est installée et présente les caractéristiques suivantes :
- Un filtre d'intent de org.chromium.intent.action.PAY.
- Identifiant de mode de paiement spécifié comme valeur de la propriété org.chromium.default_payment_method_name.

Pour en savoir plus sur la configuration, consultez le guide du développeur sur les applications de paiement Android.

[payment handler] /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 prefer_related_applications est défini sur true et que l'application de paiement spécifique à la plate-forme est disponible, Chrome masque l'application de paiement Web. Sinon, Chrome recherche également l'application de paiement Web.

Lancement de l'application de paiement Web…

L'application de paiement Web doit être spécifiée dans le champ serviceworker du fichier manifeste de l'application Web.

[payment handler] /manifest.json:

"serviceworker": {
  "src": "payment-handler.js"
}

Le navigateur lance l'application de paiement Web en envoyant un événement paymentrequest au service worker. Il n'est pas nécessaire d'enregistrer le service worker à l'avance. Il peut être enregistré juste-à-temps.

Comprendre les optimisations spéciales

Comment les navigateurs peuvent ignorer l'interface utilisateur 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 UI fournie par le navigateur, appelée "UI Payment Request". Cette UI permet aux utilisateurs de choisir une application de paiement. Après avoir appuyé sur le bouton Continuer dans l'UI de demande de paiement, l'application de paiement sélectionnée est lancée.

L'UI de la demande de paiement intervient avant le lancement de l'application de paiement.

L'affichage de l'interface utilisateur de la demande de paiement avant le lancement d'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 l'exécution de ces informations aux applications de paiement et lancer directement une application de paiement sans afficher l'interface utilisateur de la demande de paiement lorsque show() est appelé.

Ignorer l'interface utilisateur de la demande de paiement et lancer directement l'application de paiement.

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).
Il n'existe qu'une seule application de paiement qui :
- Prend en charge l'identifiant du mode de paiement demandé.
- Prend en charge toutes les informations de livraison et de contact demandées par le marchand.

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 explicitement visité le site Web de l'application de paiement et enregistré le service worker au préalable. Le service worker peut être enregistré juste-à-temps lorsque l'utilisateur choisit de payer avec l'application de paiement Web. Il existe deux variantes pour le moment de l'enregistrement :

Si l'UI de demande de paiement est présentée à l'utilisateur, l'application est enregistrée juste-à-temps et lancée lorsque l'utilisateur clique sur Continuer.
Si l'UI de demande de paiement est ignorée, l'application de paiement est enregistrée juste à temps et lancée directement. Pour ignorer l'UI de demande de paiement afin de lancer une application enregistrée juste-à-temps, un geste de l'utilisateur est requis. Cela empêche l'enregistrement inattendu de service workers interorigines.

Créer une application de paiement Web

Lorsque le marchand appelle show(), Chrome envoie un événement paymentrequest à votre service worker. Appelez openWindow() dans respondWith() pour afficher l'UI de paiement, puis résolvez le problème avec la réponse de paiement.

Pour l'API complète, consultez l'API Web-Based Payment Handler sur MDN.