Configurer un mode de paiement

Une transaction de paiement avec les paiements 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.

Eiji Kitamura

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 comment fonctionne la détection 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 des paiements Web ou le fonctionnement d'une transaction de paiement via des applications de paiement, commencez par lire les articles suivants:

• Permettre aux applications de paiement d'utiliser les paiements Web
• Cycle de vie d'une transaction de paiement

Prise en charge des navigateurs

Les paiements Web incluent différentes technologies, dont l'état 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 si 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 initie une transaction:

1. Le navigateur envoie une requête à l'URL de l'identifiant du mode de paiement et extrait le fichier manifeste du mode de paiement.
2. Le navigateur détermine l'URL du fichier manifeste d'application Web à partir du fichier manifeste du mode de paiement et le récupère.
3. 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: Indiquez 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 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 arbitraire. Dans cet article, nous utilisons 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 du mode de paiement sont définis sous la forme d'une 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: Fournissez 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 effectue 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.

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.

Si vous le souhaitez, vous pouvez router le navigateur pour trouver 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 où le navigateur peut 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 est dans https://bobbucks.dev/payment-manifest.json, l'en-tête de réponse comprendra:

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

Le fichier manifeste d'application Web classique se présente généralement 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 permettent également de définir la manière dont une application de paiement apparaît dans l'interface utilisateur des demandes de paiement.

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

Comment Chrome détermine-t-il l'application de paiement à lancer ?

Lancer l'application de paiement spécifique à une plate-forme

Pour lancer l'application de paiement spécifique à une 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 inclut les éléments suivants :
  • Un filtre d'intent de org.chromium.action.PAY
  • Identifiant du mode de paiement spécifié en tant que valeur de la propriété org.chromium.default_payment_method_name.

Pour en savoir plus sur leur configuration, consultez le guide du développeur 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 parcours de découverte s'arrête ici. Sinon, il passe à l'étape suivante : le lancement de 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. Il n'est pas nécessaire que le service worker soit enregistré à l'avance. Elle peut être enregistrée juste-à-temps.

Comprendre les optimisations spéciales

Comment les navigateurs peuvent ignorer l'interface utilisateur des demandes de paiement et lancer une application de paiement directement

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 des demandes de paiement". Cette 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.

Afficher l'interface utilisateur des demandes 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 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 :
  • Accepte l'identifiant de mode de paiement demandé.

À quel moment une application de paiement Web est-elle enregistrée juste-à-temps (JIT) ?

Les applications de paiement en ligne peuvent être lancées sans que l'utilisateur ait explicitement accédé au site Web de l'application de paiement et 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 Web. Il existe deux façons de définir le délai d'enregistrement:

• Si l'interface utilisateur des demandes 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. Le fait d'ignorer l'interface utilisateur des demandes de paiement pour lancer 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 et une application de paiement Web.

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