Hacking Chrome’s Payment Request Api into PayPal’s iframe buttons

A few engineers on PayPal’s Checkout team and I recently attended the Chrome Dev Summit in SF. We were pretty impressed with everything we saw — but one of the things that piqued our interest most was the demo of the Payment Request implementation in Chrome.

If you’re not already familiar with how this works, this idea is: browsers which implement PaymentRequest provide a native UI for entering payment details on the web, including cards, billing addresses, shipping addresses, and contact details. The browser then persists these for the next time you check out.

All in all this is a really smooth experience, especially for repeat checkouts across multiple sites.

There are a few caveats around this approach though. Unless you’re using PaymentRequest with Android Pay or another tokenized funding source, your card details are passed directly back to the site which initiated the PaymentRequest. This can be problematic for both the merchant and the customer:

  • As a merchant, you may want to avoid having to become PCI compliant, which is not a simple process. This is required when directly accepting or storing credit card numbers on your site.
  • As a customer, you probably want to avoid directly handing over your credit card number to an unknown or untrusted site — or you may simply wish to limit the number of databases in which your card numbers are persisted.

At PayPal we recently launched Smart Payment Buttons, which are sandboxed inside an iframe. So while we were at the Chrome Dev Summit, a few of us thought — let’s hack in support for PaymentRequest! That would have the following benefits:

  • Merchants integrated with PayPal could get PaymentRequest automatically, without directly needing to accept and process raw credit card numbers.
  • Buyers could enter their card numbers without worrying about exposing them to every site they want to buy from, since they would be passed directly to PayPal through our iframe.
  • Other security issues xould be avoided: the PaymentRequest UI isn’t a target for attacks like clickjacking or UI redress. Although it would be nice if the UI displayed the domain the payment request originated from.

Here’s what we came up with after an hour or two of hacking and integrating PaymentRequest into PayPal’s iframe buttons and guest-payments stack:

It also works great on mobile:

Anyway — this isn’t production-ready on our side yet, but it’s something we’ll be auto-enabling in our button iframe soon. It shouldn’t require any integration changes to fit in with your existing PayPal integration, providing you have card buttons enabled. So watch this space!

Thanks all,

— Daniel, PayPal Checkout team

works for PayPal, as a lead engineer in Checkout. Opinions expressed herein belong to him and not his employer. daniel@bluesuncorp.co.uk

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store