• @@size guidance?

• When displaying a Web-based payment app window, use existing browser UI patterns that enable the user to view the certificate chain.

At times, a provider publishing payment handlers may wish to group instruments with greater flexibility and granularity than having them all listed together under a single origin. These use cases include:

• White label wallets - one provider 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

If your payment handler needs to compartmentalize the payment instruments into two wallets, one of the simplest approaches is to use two separate service workers with different scopes or paths. Here's the list of files to enable this solution for the personal/business split of the payment instruments in the fictional product named Bob Pay. A visitor to /personal and /business paths on your website will be able to install two service workers with different responsibilities.

{
  "scope": "/personal/",
  "name": "Bob Pay Personal",
  "icons": [{
    "src": "/img/personal.png"
  }]
}

<link rel="manifest" href="/personal/manifest.json">

<h1>Bob Pay Personal Walleth1>

<button id="register-button" style="display: none;" onclick="install()">Install
Bob Pay Personal Walletbutton>

<script>
var SW_URL = '/personal/payment-handler.js';
var SW_SCOPE = '/personal/';

if (!navigator.serviceWorker) {
  console.log('Service workers not supported.');
} else {
  navigator.serviceWorker.getRegistration(SW_URL)
  .then(function(registration) {
    if (!registration) {
      document.getElementById('register-button').style.display = 'block';
    }
  });
}

function install() {
  navigator.serviceWorker.register(SW_URL, SW_SCOPE)
  .then(function(registration) {
    console.log('Registered the service worker for ' + registration.scope);
  }).catch(function(error) {
    console.log(error);
  });
}
script>

<p>You can switch to manage <a href="/business/">Bob Pay Business Walleta>.p>

self.addEventListener('paymentrequest', function(e) {
  console.log('Not implemented.');
  e.respondWith(undefined);
});

{
  "scope": "/business/",
  "name": "Bob Pay Business",
  "icons": [{
    "src": "/img/business.png"
  }]
}

<link rel="manifest" href="/business/manifest.json">

<h1>Bob Pay Business Walleth1>

<button id="register-button" style="display: none;" onclick="install()">Install
Bob Pay Business Walletbutton>

<script>
var SW_URL = '/business/payment-handler.js';
var SW_SCOPE = '/business/';

if (!navigator.serviceWorker) {
  console.log('Service workers not supported.');
} else {
  navigator.serviceWorker.getRegistration(SW_URL)
  .then(function(registration) {
    if (!registration) {
      document.getElementById('register-button').style.display = 'block';
    }
  });
}

function install() {
  navigator.serviceWorker.register(SW_URL, SW_SCOPE)
  .then(function(registration) {
    console.log('Registered the service worker for ' + registration.scope);
  }).catch(function(error) {
    console.log(error);
  });
}
script>

<p>You can switch to manage <a href="/personal/">Bob Pay Personal Walleta>.p>

self.addEventListener('paymentrequest', function(e) {
  console.log('Not implemented.');
  e.respondWith(undefined);
});

• Android payment app integration into Android web browsers