L’API Web Payments

Dominique Hazael-Massieux — W3C

Copyright © 2017 W3C ® (MIT, ERCIM, Keio, Beihang)

L’API Web Payments

Dominique Hazaël-Massieux

W3C

/dev/var/19

📷 Hans Splinter, Money, CC-BY-ND

dom@w3.org

Navigateurs Web 👍

En un click

Navigateurs Web 👎

WHERES THE MONEY LEBOWSKI

Paiements Web aujourd’hui

There’s an API for that

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

Copie d’écran des interfaces utilisateurs affichées par différents navigateurs lors de l’invocation de l'API de paiement

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

Adoption

Disponible Chrome (mobile et desktop) Samsung Internet Edge

En développement Firefox Safari

Plate-forme Shopify, Woo, Mobify, Weeebly, Womp, (Magento), Facebook Messenger …

Marchands Washington Post, NY Times, Groupon, JD, Wego, Nivea, Monzo, (AirBnB) …

caniuse

Merci

Plus d’info github:@w3c/payment-request-info MDN

dom@w3.org

@dontcallmeDOM

Bonus: rétrospective