Extensions to the ServiceWorkerRegistration interface

The Service Worker specification defines a ServiceWorkerRegistration interface [[!SERVICE-WORKERS]], which this specification extends.

        partial interface ServiceWorkerRegistration {
          readonly attribute PaymentManager paymentManager;
        };
      

PaymentManager interface

      interface PaymentManager {
        attribute PaymentInstruments instruments;
        attribute PaymentWallets wallets;
      };
      

instruments attribute

This attribute allows manipulation of payment instruments associated with a payment handler. To be presented to the user as part of the payment request flow, payment handlers must have at least one registered payment Instrument, and that Instrument needs to match the payment methods and required capabilities specified by the payment request.

wallets attribute

This attribute allows payment handlers to group payment instruments together and provide a name and icon for such a group (e.g., to group together "business account" payment instruments separately from "personal account" payment instruments). The use of this grouping mechanism by payment handlers is completely optional. If payment handlers use this grouping mechanism, then matching payment instruments that do not appear in any groups should still be presented to users by the browser for selection.

PaymentInstruments interface

      interface PaymentInstruments {
          Promise<boolean>              delete(DOMString instrumentKey);
          Promise<PaymentInstrument> get(DOMString instrumentKey);
          Promise<sequence<DOMString>>  keys();
          Promise<boolean>              has(DOMString instrumentKey);
          Promise<void>                 set(DOMString instrumentKey,
                                              PaymentInstrument details);
      };
      

The PaymentInstruments interface represents a collection of payment instruments, each uniquely identified by an instrumentKey. The instrumentKey identifier will be passed to the payment handler to indicate the PaymentInstrument selected by the user.

delete method

When called, this method executes the following steps:

1. Let p be a new promise.
2. Run the following steps in parallel:
1. If the collection contains a PaymentInstrument with a matching instrumentKey, remove it from the collection and resolve p with true.
2. Otherwise, resolve p with false.
3. Return p

get method

When called, this method executes the following steps:

1. Let p be a new promise.
2. Run the following steps in parallel:
1. If the collection contains a PaymentInstrument with a matching instrumentKey, resolve p with that PaymentInstrument.
2. Otherwise, reject p with a DOMException whose value is "NotFoundError".
3. Return p

keys method

When called, this method executes the following steps:

1. Let p be a new promise.
2. Run the following steps in parallel:
1. Resolve p with a sequence that contains all the instrumentKeys for the PaymentInstruments contained in the collection.
3. Return p

has method

When called, this method executes the following steps:

1. Let p be a new promise.
2. Run the following steps in parallel:
1. If the collection contains a PaymentInstrument with a matching instrumentKey, resolve p with true.
2. Otherwise, resolve p with false.
3. Return p

set method

When called, this method executes the following steps:

1. Let p be a new promise.
2. Run the following steps in parallel:
1. If the collection contains a PaymentInstrument with a matching instrumentKey, replace it with the PaymentInstrument in details.
2. Otherwise, PaymentInstrument insert the PaymentInstrument in details as a new member of the collection and associate it with the key instrumentKey.
3. Resolve p.
3. Return p

        return paymentManager.instruments.keys().then((keys) => {
          Promise.all(keys.map(paymentManager.instruments.delete(key)))
        });
      

PaymentInstrument dictionary

      dictionary PaymentInstrument {
        required DOMString name;
        sequence<ImageObjects> icons;
        sequence<DOMString> enabledMethods;
        object capabilities;
      };
      

name member

The name member is a string that represents the label for this payment Instrument as it is usually displayed to the user.

icons member

The icons member is an array of image objects that can serve as iconic representations of the payment Instrument when presented to the user for selection.

enabledMethods member

The enabledMethods member lists the payment method identifiers of the payment methods enabled by this Instrument.

capabilities member

The capabilities member contains a list of payment-method-specific capabilities that this payment handler is capable of supporting for this Instrument. For example, for the basic-card payment method, this object will consist of an object with two fields: one for supportedNetworks, and another for supportedTypes.

PaymentWallets interface

      interface PaymentWallets {
          Promise<boolean>              delete(DOMString walletKey);
          Promise<WalletDetails> get(DOMString walletKey);
          Promise<sequence<DOMString>>  keys();
          Promise<boolean>              has(DOMString walletKey);
          Promise<void>                 set(DOMString walletKey,
                                              WalletDetails details);
      };
      

Where it appears, The walletKey parameter is a unique identifier for the wallet.

delete method

When called, this method executes the following steps:

1. Let p be a new promise.
2. Run the following steps in parallel:
1. If the collection contains a WalletDetails with a matching walletKey, remove it from the collection and resolve p with true.
2. Otherwise, resolve p with false.
3. Return p

get method

When called, this method executes the following steps:

1. Let p be a new promise.
2. Run the following steps in parallel:
1. If the collection contains a WalletDetails with a matching walletKey, resolve p with that WalletDetails.
2. Otherwise, reject p with a DOMException whose value is "NotFoundError".
3. Return p

keys method

When called, this method executes the following steps:

1. Let p be a new promise.
2. Run the following steps in parallel:
1. Resolve p with a sequence that contains all the walletKeys for the WalletDetailss contained in the collection.
3. Return p

has method

When called, this method executes the following steps:

1. Let p be a new promise.
2. Run the following steps in parallel:
1. If the collection contains a WalletDetails with a matching walletKey, resolve p with true.
2. Otherwise, resolve p with false.
3. Return p

set method

When called, this method executes the following steps:

1. Let p be a new promise.
2. Run the following steps in parallel:
1. If the collection contains a WalletDetails with a matching walletKey, replace it with the WalletDetails in details.
2. Otherwise, WalletDetails insert the WalletDetails in details as a new member of the collection and associate it with the key walletKey.
3. Resolve p.
3. Return p

WalletDetails dictionary

      dictionary WalletDetails {
          required DOMString name;
          sequence<ImageObject> icons;
          required sequence<DOMString> instrumentKeys;
      };
      

name member

The name member is a string that represents the label for this wallet as it is usually displayed to the user.

icons member

The icons member is an array of image objects that can serve as iconic representations of the wallet when presented to the user for selection.

instrumentKeys member

The instrumentKeys member is a list of instrumentKeys from PaymentManager.instruments, indicating which PaymentInstrument objects are associated with this Wallet, and should be displayed as being "contained in" the wallet. While it is not generally good practice, there is no restriction that prevents a PaymentInstrument from appearing in more than one Wallet.

Registration Example

The following example shows how to register a payment handler:

Issue 94. The means for code requesting permission to handle payments is not yet defined. The code below is based on one potential model (a requestPermission() method on the PaymentManager), but this is likely to change.

        window.addEventListerner("DOMContentLoaded", async() => {
          const { registration } =
            await navigator.serviceWorker.register('/sw.js');
          if (!paymentManager) {
            return; // not supported, so bail out.
          }
          const state =
            await navigator.permissions.query({ name: "paymenthandler" });

          switch (state) {
            case "denied":
              return;
            case "prompt":
              // Note -- it's not clear how this should work yet; see Issue 94.
              const result = await registration.paymentManager.requestPermission();
              if (result === "denied") {
                return;
              }
              break;
          }
          // Excellent, we got it! Let's now set up the user's cards.
          await addInstruments(registration);
        }, { once: true });

        function addInstruments(registration) {
          const instrumentPromises = [
            registration.paymentManager.instruments.set(
              "dc2de27a-ca5e-4fbd-883e-b6ded6c69d4f",
              {
                name: "Visa ending ****4756",
                enabledMethods: ["basic-card"],
                capabilities: {
                  supportedNetworks: ['visa'],
                  supportedTypes: ['credit']
                }
              }),

            registration.paymentManager.instruments.set(
              "c8126178-3bba-4d09-8f00-0771bcfd3b11",
              {
                name: "My Bob Pay Account: john@example.com",
                enabledMethods: ["https://bobpay.com/"]
              }),

            registration.paymentManager.instruments.set(
              "new-card",
              {
                name: "Add new credit/debit card to ExampleApp",
                enabledMethods: ["basic-card"],
                capabilities: {
                  supportedNetworks:
                    ['visa','mastercard','amex','discover'],
                  supportedTypes: ['credit','debit','prepaid']
                }
              }),
            ];

            return Promise.all(instrumentPromises).then(() => {
              registration.paymentManager.wallets.set(
                "12a1b7e5-16c0-4c09-a312-9b191d08517b",
                {
                  name: "Acme Bank Personal Accounts",
                  icons: [
                           { src: "icon/lowres.webp",
                             sizes: "48x48",
                             type: "image/webp"
                           },
                           { src: "icon/lowres",
                             sizes: "48x48"
                           }
                         ],
                  instrumentKeys: [
                      "dc2de27a-ca5e-4fbd-883e-b6ded6c69d4f",
                      "c8126178-3bba-4d09-8f00-0771bcfd3b11",
                      "new-card"
                    ]
                });
             });
          };
     

The Editors will update the payment method identifier syntax in this and other examples to align with [[!METHOD-IDENTIFIERS]], once a final format has been agreed upon.

Ordering of Payment Handlers

• The user agent MUST favor user-side order preferences (based on user configuration or behavior) over payee-side order preferences.
• The user agent MUST display matching payment handlers in an order that corresponds to the order of supported payment methods provided by the payee, except where overridden by user-side order preferences.
• The user agent SHOULD allow the user to configure the display of matching payment handlers to control the ordering and define preselected defaults.

The following are examples of payment handler ordering:

• For a given Web site, display payment handlers in an order that reflects usage patterns for the site (e.g., a frequently used payment handler at the top, or the most recently used payment handler at the top).
• Enable the user to set a preferred order for a given site or for all sites.
• If the origin of the site being visited by the user matches the origin of a payment handler, show the payment handler at the top of the list.

Display of Instruments

The user agent MUST enable the user to select any displayed Instrument.

• At a minimum, we expect user agents to display an icon and label for each matching origin to help the user make a selection.
• In some contexts (e.g., a desktop browser) it may be possible to improve the user experience by offering additional detail to the user. For example, if the user's "bank.com" origin knows about two credit cards (thus, two potential responses to the same payment method "basic-card"), the user agent could display each credit card's brand and the last four digits of the card to remind the user which cards the origin knows about.

Issue 98. There has been pushback to always requiring display of instruments (e.g., on a mobile devices). User agents can incrementally show instruments. Or user agents can return an empty Instrument ID and it becomes the payment app's responsibility to display instruments to the user.

Grouping of Instruments

At times, the same origin may wish to group instruments with greater flexibility and granularity than merely "by origin." These use cases include:

• White label wallets - one origin provides wallet services for multiple vendors
• Multiple user profiles with a single provider (e.g., business wallet vs personal wallet)
• Multiple instruments held with a single provider

A Wallet is a grouping of Instruments for display purposes.

To enable developers to build payment apps in a variety of ways, we decouple the registration (and subsequent display) of Instruments from how payment handlers respond to paymentrequest events. However, the user agent is responsible for communicating the user's selection in the event.

Selection of Instruments

Users agents may wish to enable the user to select individual displayed Instruments. The payment handler would receive information about the selected Instrument and could take action, potentially eliminating an extra click (first open the payment app then select the Instrument).

Issue 98. Should we require that, if displayed, individual Instruments must be selectable? Or should we allow flexibility that Instruments may be displayed, but selecting any one invokes all registered payment handlers? One idea that has been suggested: the user agent (e.g., on a mobile device) could first display the app-level icon/logo. Upon selection, the user agent could display the Instruments in a submenu.

PaymentAppRequest interface

      interface PaymentAppRequest {
        readonly attribute DOMString origin;
        readonly attribute DOMString id;
        readonly attribute FrozenArray<PaymentMethodData> methodData;
        readonly attribute PaymentItem total;
        readonly attribute FrozenArray<PaymentDetailsModifier> modifiers;
        readonly attribute DOMString instrumentId;
      };
    

origin attribute

This attribute a string that indicates the origin of the payee web page. It MUST be formatted according to the "Unicode Serialization of an Origin" algorithm defined in section 6.1 of [[!RFC6454]].

id attribute

When getting, the id attribute returns this the [[\details]].id from the PaymentRequest that corresponds to this PaymentAppRequest.

methodData attribute

This attribute contains PaymentMethodData dictionaries containing the payment method identifiers for the payment methods that the web site accepts and any associated payment method specific data. It is populated from the PaymentRequest using the Method Data Population Algorithm defined below.

total attribute

This attribute indicates the total amount being requested for payment. It is initialized with a structured clone of the total field of the PaymentDetails provided when the corresponding PaymentRequest object was instantiated.

displayItems

The sequence of line items optionally provided by the payee. It is initialized with a structured clone of the displayItems field of the PaymentDetails provided when the corresponding PaymentRequest object was instantiated.

modifiers attribute

This sequence of PaymentDetailsModifier dictionaries contains modifiers for particular payment method identifiers (e.g., if the payment amount or currency type varies based on a per-payment-method basis). It is populated from the PaymentRequest using the Modifiers Population Algorithm defined below.

instrumentId attribute

This attribute indicates the PaymentInstrument selected by the user. It corresponds to the id field provided during registration.

Invocation

        partial interface ServiceWorkerGlobalScope {
          attribute EventHandler onpaymentrequest;
        };
      

      [Exposed=ServiceWorker]
      interface PaymentRequestEvent : ExtendableEvent {
        readonly attribute PaymentAppRequest appRequest;
        void respondWith(Promise<PaymentAppResponse>appResponse);
      };
      

Payment Handler Windows

An invoked payment handler may or may not need to display information about itself or request user input. Some examples of potential payment handler displays include:

• The payment handler opens a window for the user to provide an authorization code.
• The payment handler opens a window that makes it easy for the user to confirm payment using default information for that site provided through previous user configuration.
• When first selected to pay in a given session, the payment handler opens a window. For subsequent payments in the same session, the payment handler (through configuration) performs its duties without opening a window or requiring user interaction.

See issue 97 for discussion about opening window in a way that is consistent with payment flow and not confusing to the user. For example, there is consensus that in a desktop environment, a payment handler should not open a window in a new browser tab, as this is too dissociated from the checkout context.

User agents SHOULD display the origin of a running payment handler to the user.

PaymentAppResponse dictionary

      dictionary PaymentAppResponse {
        DOMString methodName;
        object details;
      };
    

methodName attribute

The payment method identifier for the payment method that the user selected to fulfil the transaction.

details attribute

A JSON-serializable object that provides a payment method specific message used by the merchant to process the transaction and determine successful fund transfer.

The user agent receives a successful response from the payment handler through resolution of the Promise provided to the respondWith function of the corresponding PaymentRequestEvent dictionary. The application is expected to resolve the Promise with a PaymentAppResponse instance containing the payment response. In case of user cancellation or error, the application may signal failure by rejecting the Promise.

If the Promise is rejected, the user agent MUST run the payment app failure algorithm. The exact details of this algorithm is left for user agent implementers to decide on. Acceptable behaviors include, but are not limited to:

• Letting the user try again, with the same payment handler or with a different one.
• Rejecting the Promise that was created by PaymentRequest.show().

If this Promise is successfully resolved, the user agent MUST run the user accepts the payment request algorithm as defined in [[!PAYMENT-REQUEST-API]], replacing steps 6 and 7 with these steps or their equivalent:

1. Set appResponse to the PaymentAppResponse instance used to resolve the PaymentRequestEvent.respondWith Promise.
2. If appResponse.methodName is not present or not set to one of the values from PaymentRequestEvent.appRequest, run the payment app failure algorithm and terminate these steps.
3. Create a structured clone of appResponse.methodName and assign it to response.methodName.
4. If appResponse.details is not present, run the payment app failure algorithm and terminate these steps.
5. Create a structured clone of appResponse.details and assign it to response.details.

The following example shows how to respond to a payment request:

      paymentRequestEvent.respondWith(new Promise(function(accept,reject) {
        /* ... processing may occur here ... */
        accept({
          methodName: "basic-card",
          details: {
            cardHolderName:   "John Smith",
            cardNumber:       "1232343451234",
            expiryMonth:      "12",
            expiryYear :      "2020",
            cardSecurityCode: "123"
           }
        });
      });
    

[[!PAYMENT-REQUEST-API]] defines a paymentRequestID that parties in the ecosystem (including payment app providers and payees) may use for reconciliation after network or other failures.

Example of handling the paymentrequest event

This example shows how to write a service worker that listens to the paymentrequest event. When a payment request event is received, the service worker opens a window in order to interact with the user.

Per issue 97, we expect not to use clients.OpenWindow() and instead await a proposal for a new openClientWindow method on the PaymentRequestEvent. We will need to update these examples.

      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')) {
              reject(e.data);
            } else {
              resolve(e.data);
            }
          });

          // Note -- this will probably chage to e.openClientWindow(...)
          clients.openWindow("https://www.example.com/bobpay/pay")
          .then(function(windowClient) {
            windowClient.postMessage(e.data);
          })
          .catch(function(err) {
            reject(err);
          });
        }));
      });
    

Using the simple scheme described above, a trivial HTML page that is loaded into the payment handler window to implement the basic card scheme might look like the following:

<html> <body> <form id="form">
<table>
  <tr><th>Cardholder Name:</th><td><input name="cardholderName"></td></tr>
  <tr><th>Card Number:</th><td><input name="cardNumber"></td></tr>
  <tr><th>Expiration Month:</th><td><input name="expiryMonth"></td></tr>
  <tr><th>Expiration Year:</th><td><input name="expiryYear"></td></tr>
  <tr><th>Security Code:</th><td><input name="cardSecurityCode"></td></tr>
  <tr><th></th><td><input type="submit" value="Pay"></td></tr>
</table>
</form>

<script>
window.addEventListener("message", function(e) {
  var form = document.getElementById("form");
  /* Note: message sent from payment app is available in e.data */
  form.onsubmit = function() {
    /* See https://w3c.github.io/webpayments-methods-card/#basiccardresponse */
    var basicCardResponse = {};
    [ "cardholderName", "cardNumber","expiryMonth","expiryYear","cardSecurityCode"]
    .forEach(function(field) {
      basicCardResponse[field] = form.elements[field].value;
    });

    /* See https://w3c.github.io/webpayments-payment-apps-api/#sec-app-response */
    var paymentAppResponse = {
      methodName: "basic-card",
      details: details
    };

    e.source.postMessage(paymentAppResponse);
    window.close();
  }
});
</script> </body> </html>
    

Information about the User Environment

• The API does not share information about the user's registered payment handlers. Information from origins is only shared with the payee with the consent of the user.
• Similarly, user agents should not share payment request information with any payment handler until the user has selected that payment handler.

User Consent before Payment

• One goal of this specification is to minimize the user interaction required to make a payment. At the same time, user agents must not permit combinations of configurations that would enable invoking Web sites to invoke payment request and receive payments silently.

Secure Communications

• See Service Worker security considerations
• Payment method security is outside the scope of this specification and is addressed by payment handlers that support those payment methods.

Payment App Authenticity

The Web Payments Working Group is also discussing Payment App authenticity; see the (draft) Payment Method Manifest.

Data Validation

• Payees should validate that the data they have received through the paymentRequest API is what they expect (e.g., the total that was paid, etc.).

Private Browsing Mode

• When the Payment Request API is invoked in a "private browsing mode," the user agent should launch payment handlers in a private context. This will generally prevent sites from accessing any previously-stored information. In turn, this is likely to require either that the user log in to the origin or re-enter payment instrument details.