PaymentAppPractice

Icons and Labels

• @@size guidance?

Allow users to view the certificate chain

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

Publishing two "wallets" from the same Origin

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.

Files in /personal/ subdirectory:

/personal/manifest.json

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

/personal/index.html

<!-- At the time of writing, the web app manifest specified like so will be used
for the payment handler name and icon: -->
<link rel="manifest" href="/personal/manifest.json">

<h1>Bob Pay Personal Wallet</h1>

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

<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 Wallet</a>.</p>

/personal/payment-handler.js

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

Files in /business/ subdirectory:

/business/manifest.json

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

/business/index.html

<!-- At the time of writing, the web app manifest specified like so will be used
for the payment handler name and icon: -->
<link rel="manifest" href="/business/manifest.json">

<h1>Bob Pay Business Wallet</h1>

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

<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 Wallet</a>.</p>

/business/payment-handler.js

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

Platform-specific app integration

• Android payment app integration into Android web browsers