Cette page a été traduite par l'API Cloud Translation.

Configurer un mode de paiement

Une transaction via les paiements Web commence par la découverte de votre application de paiement. Découvrez comment configurer un mode de paiement et télécharger votre application de paiement. pour que les marchands et les clients puissent effectuer des paiements.

Eiji Kitamura

Pour être utilisée avec l'API Payment Request, une application de paiement doit être associée à un identifiant du mode de paiement. Marchands souhaitant intégrer une application de paiement utilisera l'identifiant du mode de paiement pour l'indiquer au navigateur. Ce explique comment fonctionne la découverte d'applications de paiement et comment configurer votre application de paiement soit correctement découverte et appelée par un navigateur.

Si vous ne connaissez pas encore le concept des paiements Web ou le fonctionnement des transactions de paiement via des applications de paiement, commencez par lire les articles suivants:

Prise en charge des navigateurs

Les paiements Web sont constitués de différentes technologies et la prise en charge dépend du navigateur.

	Chrome		Safari		Firefox
	Ordinateur	Android	Ordinateur	Mobile	Ordinateur/Mobile
API Payment Request	✔	✔	✔	✔
API Payment Handler	✔	✔
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 du mode de paiement basé sur l'URL
Fichier manifeste du mode de paiement (sauf lorsque l'identifiant du mode de paiement est fournies 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

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

Le navigateur envoie une requête au mode de paiement identifiant et les récupérations le mode de paiement fichier manifeste.
Le navigateur détermine l'application Web fichier manifeste de l'élément le fichier manifeste du mode de paiement et extrait 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 à 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 la détecter.

Étape 1: Fournissez l'identifiant du mode de paiement

Un mode de paiement identifiant est une chaîne basée sur une URL. Par exemple, l'identifiant Google Pay est https://google.com/pay Les développeurs d'applications de paiement peuvent choisir n'importe quelle URL pour les paiements à condition qu'ils le contrôlent et peuvent diffuser des contenus. Dans cet article, nous utiliserons https://bobbucks.dev/pay comme mode de paiement identifiant.

Comment les marchands utilisent-ils l'identifiant du mode de paiement ?

Un objet PaymentRequest est construit avec une liste de modes de paiement. identifiants qui identifient les modes de paiement applications 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 quelle application de paiement peut 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 GET à l'URL de l'identifiant du mode de paiement. Le serveur répond en indiquant le mode de paiement corps du fichier manifeste.

Le fichier manifeste d'un 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 de l'application Web où le paiement les applications sont hébergées. (L'URL peut être un lien relatif.) Ce tableau est attendu pour référencer le fichier manifeste de développement, le fichier manifeste de production, etc.
`supported_origins`	Un tableau d'URL pointant vers des origines susceptibles d'héberger des URL les applications de paiement mettant en œuvre le même mode de paiement. Notez qu'un 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 des liens vers les fichiers manifestes d'application Web des applications de paiement.

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 redirige vers une autre URL permettant au navigateur de récupérer le mode de paiement. fichier manifeste. Cela s'avère utile lorsqu'un fichier manifeste de mode de paiement est hébergé sur une autre ou lorsque l'application de paiement est diffusée par un tiers.

Comment un navigateur découvre l'application de paiement à partir d'un identifiant de mode de paiement basé sur une URL avec des redirections

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 le mode de paiement fichier manifeste.

Par exemple, si le fichier manifeste se trouve sur https://bobbucks.dev/payment-manifest.json, l'en-tête de réponse comprendrait:

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. Inspecter https://bobbucks.dev/pay/ pour le trafic réseau afin de voir un exemple. Vous pouvez utiliser un 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. C'est 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 servent également à définir la façon dont l'application de paiement s'affiche dans l'interface utilisateur des demandes de paiement.

Champs importants des fichiers manifestes d'applications 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 les utilise. autre les navigateurs peuvent les utiliser comme icônes de remplacement si vous ne les spécifiez pas partie du mode de paiement.
`serviceworker`	Permet de détecter le service worker qui s'exécute en tant que service de paiement via le Web. l'application.
`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 l'état d'un service worker d'enregistrement.
`serviceworker.use_cache`	URL à partir de laquelle télécharger le script de service worker.
`related_applications`	Permet de détecter l'application de paiement fournie par le système d'exploitation. Pour plus d'informations, consultez la page Android guide du développeur pour les applications de paiement.
`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.

</ph>

</ph> Libellé et icône de l'application de paiement.

La propriété name du fichier manifeste d'application Web est utilisée comme nom de l'application de paiement, icons. est utilisée 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: <ph type="x-smartling-placeholder">
- L'ID de package et la signature de l'application installée correspondent, tandis que la configuration minimale la version (min_version) indiquée 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 dispose des éléments suivants: <ph type="x-smartling-placeholder">
- 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.

Consultez Applications de paiement Android: guide du développeur pour en savoir plus sur leur configuration.

[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 était disponible, le processus de découverte est arrêté ici. Sinon, vous pouvez passer à l'étape suivante -- le lancement de l'application de paiement en ligne.

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 paymentrequest. sur le service worker. Il n'est pas nécessaire que le service worker soit enregistré avancer. 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 Request affiche une interface utilisateur fournie par le navigateur, appelée "Interface de demande de paiement". Ce L'UI permet aux utilisateurs de choisir une application de paiement. Après avoir appuyé sur le bouton Continuer dans l'interface utilisateur de demande de paiement, l'application de paiement sélectionnée est lancée.

</ph>

</ph> L'interface de demande de paiement intervient avant le lancement de l'application de paiement.

L'affichage de l'interface utilisateur 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 lancer directement une application de paiement sans afficher l'UI de demande de paiement lorsque show() est appelé.

</ph>

</ph> Ignorez l'interface de demande de paiement et lancez 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).
Une seule application de paiement: <ph type="x-smartling-placeholder">
- 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 intervention préalable explicite de l'utilisateur. au site Web de l'application de paiement et à enregistrer le service worker. Le service peut être enregistré juste-à-temps, lorsque l'utilisateur choisit de payer avec une application de paiement Web. Il existe deux façons de s'inscrire:

Si l'interface utilisateur de demande de paiement est présentée à l'utilisateur, cela signifie que 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é directement. Ignorer l'affichage de l'interface utilisateur des demandes de paiement une application enregistrée juste à temps nécessite un geste de l'utilisateur, ce qui empêche l'enregistrement inattendu de 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. une application de paiement et une application de paiement sur le Web.