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

Publié le 27 septembre 2017, dernière mise à jour le 1er juillet 2025

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 des 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 le concept de paiements Web ni le fonctionnement d'une transaction de paiement via des applications de paiement, commencez par lire les articles suivants :

• Donner plus de puissance aux applications de paiement avec les paiements Web
• Cycle de vie d'une transaction de paiement

Prise en charge des navigateurs

Les paiements Web sont composés de plusieurs technologies différentes. Leur compatibilité dépend du navigateur.

	Chrome		Safari		Firefox
	Ordinateur	Android	Ordinateur	Mobile	Ordinateur/Mobile
API Payment Request	✔	✔	✔	✔
API Payment Handler basée sur le Web	✔	✔
Application de paiement iOS/Android	✔	✔	✔*	✔*

Remarque  : * Safari est compatible avec Apple Pay, mais pas avec les applications de paiement tierces.

Comment un navigateur découvre une application de paiement

Chaque application de paiement doit fournir les informations suivantes :

• 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

Le processus de découverte commence lorsqu'un marchand lance une transaction :

1. Le navigateur envoie une requête à l'URL de l'identifiant du mode de paiement et récupère le manifeste du mode de paiement.
2. 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.
3. 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 pour que les navigateurs puissent le découvrir.

É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 en aient le contrôle et qu'ils puissent 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.

Remarque  : Les applications de paiement peuvent également accepter les modes de paiement tiers.

Comment les marchands utilisent l'identifiant du mode de paiement

Un objet PaymentRequest est construit avec une liste d'identifiants de modes 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 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 initie 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.

Remarque  : Les redirections sont autorisées jusqu'à trois fois sur le même site pour un identifiant de mode de paiement dans Chrome.

Configurez le serveur de mode de paiement pour qu'il réponde avec un en-tête HTTP Link comportant l'attribut rel="payment-method-manifest" et l'URL du manifeste du mode de paiement. Par exemple, si le fichier manifeste se trouve à l'adresse 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 d'accès relatif. Consultez 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

Remarque  : Pour en savoir plus sur les pratiques concernant les modes de paiement, consultez la documentation du W3C.

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.

Remarque : La demande n'est pas nécessairement envoyée à l'identifiant du mode de paiement, selon la combinaison de l'identifiant et du navigateur. Par exemple, Chrome n'envoie pas de requête pour https://play.google.com/billing et, dans certains cas, pour https://google.com/pay.

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ù sont hébergées les applications de paiement. (L'URL peut être relative.) Cet array est censé faire référence au fichier manifeste de développement, au 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.

Voici à quoi doit ressembler un fichier manifeste de mode de paiement :

[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 manifestes d'applications Web des applications de paiement compatibles.

Remarque  : Chrome n'accepte qu'une seule application de paiement par défaut par mode de paiement.

Étape 3 : Diffuser 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 largement utilisé pour définir une progressive web app (PWA).

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

[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 un fichier manifeste d'application Web sont également utilisées pour définir l'apparence d'une application de paiement dans l'UI de demande de paiement.

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 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 l'instrument 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 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	URL à partir de laquelle télécharger le script du service worker.
related_applications	Utilisé pour détecter l'application qui sert d'application de paiement fournie par l'OS. Pour en savoir plus, consultez le guide du développeur sur les applications de paiement Android.
prefer_related_applications	Permet de déterminer l'application de paiement à lancer lorsqu'une application de paiement fournie par l'OS et une application de paiement Web sont disponibles.

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 de l'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.
• Le champ prefer_related_applications correspond à true.
• L'application de paiement spécifique à la plate-forme est installée et présente les caractéristiques suivantes :
  • 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.

Pour savoir comment les configurer, consultez le guide du développeur sur les applications de paiement Android.

[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 se termine ici. Sinon, il passe à l'étape suivante, qui consiste à lancer l'application de paiement Web.

Lancer 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.

[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. Il peut être enregistré juste à temps.

Comprendre les optimisations spéciales

Comment les navigateurs peuvent-ils ignorer l'UI de la 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 la 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.

Afficher l'UI de demande de paiement avant de lancer une application de paiement augmente le nombre d'étapes nécessaires à un utilisateur pour effectuer un paiement. Pour optimiser le processus, le navigateur peut déléguer la saisie de ces informations aux applications de paiement et lancer directement une application de paiement sans afficher l'interface utilisateur Payment Request lorsque show() est appelé.

Ignorer l'UI 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é.

Remarque  : Safari n'est actuellement compatible qu'avec Apple Pay. Il lance donc toujours l'application directement, en ignorant l'interface utilisateur de la demande de paiement.

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. 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 timing d'enregistrement :

• Si l'interface utilisateur de demande de paiement est affichée à l'utilisateur, l'application est enregistrée juste à temps et lancée lorsque l'utilisateur clique sur Continuer.
• Si l'UI de la 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 et lancer une application enregistrée juste à temps, un geste de l'utilisateur est requis. Cela empêche l'enregistrement inattendu de service workers d'origine croisée.

Remarque  : Bien qu'un seul identifiant de mode de paiement puisse être compatible avec plusieurs applications de paiement, l'enregistrement JIT n'a lieu que lorsque le fichier manifeste du mode de paiement pointe vers une seule application de paiement.

Étapes suivantes

Maintenant que votre application de paiement est détectable, découvrez comment développer une application de paiement spécifique à une plate-forme et une application de paiement Web.

• Applications de paiement Android : guide du développeur
• Guide du développeur pour les applications de paiement Web