L’API Web Payments

Dominique Hazaël-Massieux

W3C

/dev/var/19

📷 Hans Splinter, Money, CC-BY-ND

[email protected]

@dontcallmeDOM sur Twitter et Github
W3C → Standards pour le Web
WebRTC, mobile, VR/AR

Navigateurs Web 👍

En un click

réunions téléphoniques
réalité virtuelle
pilotage de drone Bluetooth

Navigateurs Web 👎

Paiements Web aujourd’hui

Abandon de panier 70%! (en particulier sur mobile)
Coût d'intégration de nouveaux systèmes de paiements (blockchain, etc)
Risques de fraude plus élevé que paiement physique

There’s an API for that

Spécifications Web Payments
Payment Request API
- Simplifie le processus de paiement
- Permet la réutilisation de données (adresses, carte bleue) même chez un nouveau marchand
- Offre un mécanisme générique d’intégration des méthodes de paiement
Intégration d’appli de paiement Web via Payment Handler

Méthodes de paiement

const methodData = [ {
    supportedMethods: "basic-card",
    data: {
      supportedNetworks: ["visa", "mastercard"],
      supportedTypes: ["debit", "credit"]
    }}];

Transaction

const details = {
  id: "super-store-order-123-12312",
  displayItems: [{
      label: "Sous-total",
      amount: { currency: "EUR", value: "55.00" },
    },{
      label: "TVA",
      amount: { currency: "EUR", value: "11.00" },
    }],
  total: {
    label: "Total à payer",
    // Le total est de 70€ puisqu'on ajoute 4€ de frais de livraison
    amount: { currency: "EUR", value: "80.00" },
  }
};

Livraison (optionnelle)

const shippingOptions = [
  {
    id: "standard",
    label: "🚛 Transport terrestre (2 jours)",
    amount: { currency: "EUR", value: "4.00" },
    selected: true,
  },
  {
    id: "drone",
    label: "🚀 Drone Express (2 heures)",
    amount: { currency: "EUR", value: "25.00" }
  },
];
Object.assign(details, { shippingOptions });

Requête et validation

const request = new PaymentRequest(methodData, details, options);
const response = await request.show();
await valideReponse(response);

Côté utilisateur

Avantages

Processus simplifié et uniforme pour les utilisateurs
Intégré au site du marchand (moins d'aller-retour HTTP)
(à terme) Moins de formulaires à développer et maintenir
(à terme) Meilleure sécurité en supprimant les échanges de numéro de cartes de crédit via la «tokenisation»
Plus de facilité d’intégrer de nouveaux modes de paiement
Nouveaux cas d’usage pour les paiements mobiles