From e7193c31c12c474b6efffe1c894e153249ae9eb2 Mon Sep 17 00:00:00 2001 From: Rouslan Solomakhin Date: Wed, 28 Mar 2018 15:14:12 -0400 Subject: [PATCH 1/4] Replace 'enabledMethods' array with 'method' string. Also be more consistent with ' vs ". WPT: https://github.com/w3c/web-platform-tests/pull/10180 --- index.html | 91 +++++++++++++++++++++++++++--------------------------- 1 file changed, 45 insertions(+), 46 deletions(-) diff --git a/index.html b/index.html index 17c2c1a..4f9bb90 100644 --- a/index.html +++ b/index.html @@ -4,11 +4,11 @@ Payment Handler API - - - - + + -
+

This specification defines capabilities that enable Web applications to handle requests for payment.

-
+

The Web Payments Working Group maintains a list of all bug @@ -86,7 +86,7 @@ specification text for outstanding issues are strongly encouraged.

-
+

Introduction

@@ -135,8 +135,8 @@

  • During service worker registration, the PaymentManager is used to set:
      -
    • A list of enabled - payment methods. +
    • A list of enabled payment + methods.
    • [Optionally] the conditions under which the handler supports a given payment method; these dictionary PaymentInstrument { required DOMString name; sequence<ImageObject> icons; - sequence<DOMString> enabledMethods; + DOMString method; object capabilities; }; @@ -611,12 +611,11 @@

      presented to the user for selection.
      - enabledMethods member + method member
      - The enabledMethods member is a list of one or more - payment method identifiers of the payment methods - supported by this instrument. + The method member is the payment method identifier + of the payment method supported by this instrument.
      capabilities member @@ -752,7 +751,7 @@

      instrumentKey, { name: "My Bob Pay Account: john@example.com", - enabledMethods: ["https://bobpay.com/"], + method: "https://bobpay.com", icons: [{ src: "icon/lowres.webp", sizes: "48x48", @@ -777,7 +776,7 @@

      instrumentKey, { name: "My Bob Pay Account: john@example.com", - enabledMethods: ["https://bobpay.com/"], + method: "https://bobpay.com", icons: [{ src: "../bobpay/icon/lowres.webp", sizes: "48x48", @@ -810,7 +809,7 @@

      } const registration = - await navigator.serviceWorker.register('/sw.js'); + await navigator.serviceWorker.register("/sw.js"); // Excellent, we got it! Let's now set up the user's cards. await addInstruments(registration); @@ -822,10 +821,10 @@

      "dc2de27a-ca5e-4fbd-883e-b6ded6c69d4f", { name: "Visa ending ****4756", - enabledMethods: ["basic-card"], + method: "basic-card", capabilities: { - supportedNetworks: ['visa'], - supportedTypes: ['credit'] + supportedNetworks: ["visa"], + supportedTypes: ["credit"] } }), @@ -833,18 +832,18 @@

      "c8126178-3bba-4d09-8f00-0771bcfd3b11", { name: "My Bob Pay Account: john@example.com", - enabledMethods: ["https://bobpay.com/"] + method: "https://bobpay.com" }), registration.paymentManager.instruments.set( "new-card", { name: "Add new credit/debit card to ExampleApp", - enabledMethods: ["basic-card"], + method: "basic-card", capabilities: { supportedNetworks: - ['visa','mastercard','amex','discover'], - supportedTypes: ['credit','debit','prepaid'] + ["visa", "mastercard", "amex", "discover"], + supportedTypes: ["credit", "debit", "prepaid"] } }), ]); @@ -1004,7 +1003,7 @@

      received, the service worker always returns true. 

      -          self.addEventListener('canmakepayment', function(e) {
+          self.addEventListener("canmakepayment", function(e) {
             e.respondWith(true);
           });
      @@ -1065,31 +1064,31 @@

      active cards to the browser. 

      -          await navigator.serviceWorker.register('/pw/app.js');
+          await navigator.serviceWorker.register("/pw/app.js");
           const registration = await navigator.serviceWorker.ready;
-          registration.paymentManager.userHint = '(Visa ****1111)';
+          registration.paymentManager.userHint = "(Visa ****1111)";
           await registration.paymentManager.instruments.set(
-            '12345',
+            "12345",
             {
               name: "Visa ****1111",
               icons: [{
-                src: '/pay/visa.png',
-                sizes: '32x32',
-                type: 'image/png',
+                src: "/pay/visa.png",
+                sizes: "32x32",
+                type: "image/png",
               }],
-              enabledMethods: ['basic-card'],
+              method: "basic-card",
               capabilities: {
-                supportedNetworks: ['visa'],
-                supportedTypes: ['credit'],
+                supportedNetworks: ["visa"],
+                supportedTypes: ["credit"],
               },
             });

      In this case, new PaymentRequest([{supportedMethods: - 'basic-card'}], shoppingCart).canMakePayment() should return + "basic-card"}], shoppingCart).canMakePayment() should return true because there's an active card in the payment handler. Note that new PaymentRequest([{supportedMethods: - 'basic-card', data: {supportedTypes: ['debit']}}], + "basic-card", data: {supportedTypes: ["debit"]}}], shoppingCart).canMakePayment() would return false because of mismatch in supportedTypes in this example. @@ -1322,7 +1321,7 @@

      payment handler's PaymentManager.instruments, add all entries in instrument.enabledMethods to + "PaymentInstrument.method">method to registeredMethods.

    • Create a new empty Sequence. @@ -1375,8 +1374,8 @@

    • For each PaymentInstrument instrument in the payment handler's PaymentManager.instruments, - add all entries in instrument.enabledMethods to + add the value of instrument.method to registeredMethods.
    • Create a new empty Sequence. @@ -1689,11 +1688,11 @@

      user. 

      -      self.addEventListener('paymentrequest', function(e) {
+      self.addEventListener("paymentrequest", function(e) {
         e.respondWith(new Promise(function(resolve, reject) {
-          self.addEventListener('message', listener = function(e) {
-            self.removeEventListener('message', listener);
-            if (e.data.hasOwnProperty('name')) {
+          self.addEventListener("message", listener = function(e) {
+            self.removeEventListener("message", listener);
+            if (e.data.hasOwnProperty("name")) {
               reject(e.data);
             } else {
               resolve(e.data);
@@ -2283,7 +2282,7 @@

    • -
    +

    There is only one class of product that can claim conformance to this specification: a user agent. From 13f1debce851135aaf1c69ee0d617843f0762212 Mon Sep 17 00:00:00 2001 From: Rouslan Solomakhin Date: Tue, 3 Apr 2018 10:37:05 -0400 Subject: [PATCH 2/4] Remove the quote changes. --- index.html | 62 +++++++++++++++++++++++++++--------------------------- 1 file changed, 31 insertions(+), 31 deletions(-) diff --git a/index.html b/index.html index 4f9bb90..2498e16 100644 --- a/index.html +++ b/index.html @@ -4,11 +4,11 @@ Payment Handler API - - - - + + -

    +

    This specification defines capabilities that enable Web applications to handle requests for payment.

    -
    +

    The Web Payments Working Group maintains a list of all bug @@ -86,7 +86,7 @@ specification text for outstanding issues are strongly encouraged.

    -
    +

    Introduction

    @@ -809,7 +809,7 @@

    } const registration = - await navigator.serviceWorker.register("/sw.js"); + await navigator.serviceWorker.register('/sw.js'); // Excellent, we got it! Let's now set up the user's cards. await addInstruments(registration); @@ -823,8 +823,8 @@

    name: "Visa ending ****4756", method: "basic-card", capabilities: { - supportedNetworks: ["visa"], - supportedTypes: ["credit"] + supportedNetworks: ['visa'], + supportedTypes: ['credit'] } }), @@ -842,8 +842,8 @@

    method: "basic-card", capabilities: { supportedNetworks: - ["visa", "mastercard", "amex", "discover"], - supportedTypes: ["credit", "debit", "prepaid"] + ['visa','mastercard','amex','discover'], + supportedTypes: ['credit','debit','prepaid'] } }), ]); @@ -1003,7 +1003,7 @@

    received, the service worker always returns true. 

    -          self.addEventListener("canmakepayment", function(e) {
+          self.addEventListener('canmakepayment', function(e) {
             e.respondWith(true);
           });
    @@ -1064,31 +1064,31 @@

    active cards to the browser. 

    -          await navigator.serviceWorker.register("/pw/app.js");
+          await navigator.serviceWorker.register('/pw/app.js');
           const registration = await navigator.serviceWorker.ready;
-          registration.paymentManager.userHint = "(Visa ****1111)";
+          registration.paymentManager.userHint = '(Visa ****1111)';
           await registration.paymentManager.instruments.set(
-            "12345",
+            '12345',
             {
               name: "Visa ****1111",
               icons: [{
-                src: "/pay/visa.png",
-                sizes: "32x32",
-                type: "image/png",
+                src: '/pay/visa.png',
+                sizes: '32x32',
+                type: 'image/png',
               }],
               method: "basic-card",
               capabilities: {
-                supportedNetworks: ["visa"],
-                supportedTypes: ["credit"],
+                supportedNetworks: ['visa'],
+                supportedTypes: ['credit'],
               },
             });

    In this case, new PaymentRequest([{supportedMethods: - "basic-card"}], shoppingCart).canMakePayment() should return + 'basic-card'}], shoppingCart).canMakePayment() should return true because there's an active card in the payment handler. Note that new PaymentRequest([{supportedMethods: - "basic-card", data: {supportedTypes: ["debit"]}}], + 'basic-card', data: {supportedTypes: ['debit']}}], shoppingCart).canMakePayment() would return false because of mismatch in supportedTypes in this example. @@ -1321,7 +1321,7 @@

    payment handler's PaymentManager.instruments, add all entries in instrument.method to + "PaymentInstrument.enabledMethods">enabledMethods to registeredMethods.
  • Create a new empty Sequence. @@ -1688,11 +1688,11 @@

    user. 

    -      self.addEventListener("paymentrequest", function(e) {
+      self.addEventListener('paymentrequest', function(e) {
         e.respondWith(new Promise(function(resolve, reject) {
-          self.addEventListener("message", listener = function(e) {
-            self.removeEventListener("message", listener);
-            if (e.data.hasOwnProperty("name")) {
+          self.addEventListener('message', listener = function(e) {
+            self.removeEventListener('message', listener);
+            if (e.data.hasOwnProperty('name')) {
               reject(e.data);
             } else {
               resolve(e.data);
@@ -2282,7 +2282,7 @@

    • -
    +

    There is only one class of product that can claim conformance to this specification: a user agent. From 008f6618525177e02e57ae36e96192438259d4ac Mon Sep 17 00:00:00 2001 From: Rouslan Solomakhin Date: Tue, 3 Apr 2018 10:57:51 -0400 Subject: [PATCH 3/4] Apply Ian's suggestion --- index.html | 27 ++++++++++++++++----------- 1 file changed, 16 insertions(+), 11 deletions(-) diff --git a/index.html b/index.html index 2498e16..e0bf5e1 100644 --- a/index.html +++ b/index.html @@ -133,19 +133,24 @@

    Payment handlers are defined in service worker code.
  • During service worker registration, the PaymentManager is - used to set: + used to set a list of + payment instruments. Each payment instrument provides + data to the user agent to improve the user experience of selecting + payment credentials:
      -
    • A list of enabled payment - methods. +
    • The method and + optional capabilities inform the user + agent decision whether to display this instrument as a candidate + for payment.
      • -
    • [Optionally] the conditions under which the handler supports a - given payment method; these capabilities play a role in - matching computations. -
      • -
    • Information used in the display of instruments supported by the - payment handler. +
    • When the instrument matches what the payee accepts, the user + agent may display the Name + and icon. These provide + hints about payment credentials that the user agent will return in + the PaymentHandlerResponse if the user selects this + instrument.
    • From 3281123b51a95b98d2a3dbf09ba5d79cfa2c787e Mon Sep 17 00:00:00 2001 From: Rouslan Solomakhin Date: Tue, 3 Apr 2018 11:08:46 -0400 Subject: [PATCH 4/4] Clean up language. --- index.html | 19 +++++++++---------- 1 file changed, 9 insertions(+), 10 deletions(-) diff --git a/index.html b/index.html index e0bf5e1..9f84213 100644 --- a/index.html +++ b/index.html @@ -132,12 +132,11 @@

  • Payment handlers are defined in service worker code.
    • -
  • During service worker registration, the PaymentManager is - used to set a list of - payment instruments. Each payment instrument provides - data to the user agent to improve the user experience of selecting - payment credentials: +
  • The PaymentManager is used to set a list of payment instruments. Each + payment instrument provides data + to the user agent to improve the user experience of selecting payment + credentials: