These flows were made possible by the work that Anna Gyergyai and
Michael Elfassy did on the Shopify Platform.
Overview of Checkout Flow
The demos all make use of:
Sandboxed merchant shops in production,
behind a feature flag. This was done to determine how feasible it is
to adapt Shopify’s current offering of payment methods, so that they
can get surfaced in Payment Request.
Chrome on an Android phone
Each demo involves a similar checkout flow, but a different
payment method. In the checkout flow:
The user adds an item to the cart and pushes "Check Out" which
calls Payment Request API
The user selects a shipping address, which enables the merchant
to update a set of shipping options. The user selects "International
Shipping."
The user selects a payment method.
The sections below describe the flow for the selected payment method.
See below for more
about the payment handlers used in the Affirm and iDEAL demos.
The user chooses to pay with a Visa credit card. The card information is stored in Chrome.
The user enters the 3-digit CVC code for the Visa card, which the browser intentionally does not store.
The browser returns the basic card data through Payment Request API to the merchant, which requests authorization of payment (on the backend).
The merchant finishes Payment Request API and displays a confirmation page.
Affirm
The Affirm payment method involves real-time financing. Unlike "basic card," this payment method is not implemented natively in the browser. Therefore, a payment handler provides the support needed to use it with Payment Request API. In this demo, the user has previously registered the Web-based payment handler via the Payment Handler API.
The user chooses to pay with Affirm. The browser launches the corresponding Web-based payment handler, which opens a window for user interaction. In this demo, the payment handler first opens a Shopify controlled page, then provides access to the Affirm payment system by redirecting to their web integration.
Through the payment handler, the user negotiates financing terms with the Affirm payment service provider and pushes the "Confirm Loan" button.
The payment handler returns the payment response data for Affirm to the browser via Payment Handler API.
The browser returns the payment response data to the merchant via Payment Request API.
The merchant finishes Payment Request API and displays a confirmation page.
iDEAL
iDEAL is the most used payment method in the Netherlands. It allows customers to buy on the Internet using direct online transfers from their bank account. In the following demo, a payment is accomplished through the ABN Amro bank.
The user chooses to pay with iDEAL, through ABN Amro. The browser launches the corresponding Web-based payment handler, which opens a window for user interaction. In this demo, the payment handler first opens a Shopify controlled page, then provides access to the iDEAL payment system by redirecting to their web integration.
Through the payment handler, the user enters their bank credentials.
The user confirms payment, and the payment handler returns data to the browser.
The browser returns the payment response data to the merchant via Payment Request API.
The merchant finishes Payment Request API and displays a confirmation page.
About the Payment Handlers
Shopify created these Web-based payment handlers for demo
purposes. They happen to wrap access to these payment methods, but
the system could work just as well with payment handlers distributed
by the payment systems themselves.
These payment handlers take advantage of Chrome's
"just-in-time
payment handler registration" feature. When guided by a Payment
Method Manifest, Chrome will show users available payment handlers
that may be registered upon first selection by the user.