Shaping the Future of Payments in the Browser

Krystian Czesak

At Shopify, the leading multi-channel commerce platform that powers over 600,000 businesses in approximately 175 countries, we aim at making commerce better for everyone. This sometimes means investing in new technologies and giving back what we learned to the community, especially if it’s a technology we think will

Shopify

•

Krystian Czesak

•19 min read•advanced•

--

•View Original

Google CloudRails

Overview

The article discusses Shopify's experimentation with the Payment Request API, aimed at enhancing the web payment experience. It outlines the project's goals, the setup of an A/B experiment, and the initial findings regarding checkout completion rates and user interactions.

What You'll Learn

1

How to set up an A/B experiment to test new payment technologies

2

Why the Payment Request API can improve the checkout experience

3

How to analyze checkout completion rates and user behavior during payment processes

Prerequisites & Requirements

Understanding of web payment systems and APIs
Familiarity with JavaScript and web development frameworks(optional)

Key Questions Answered

What is the Payment Request API and how does it work?

The Payment Request API is a JavaScript API designed to simplify the checkout process by replacing traditional forms with a streamlined payment sheet. It supports multiple payment methods and can indicate if a buyer can proceed with a purchase through the canMakePayment() method.

What were the results of Shopify's A/B experiment with the Payment Request API?

The experiment revealed a 7% drop in checkout completion rates when using the Payment Request API compared to the traditional checkout. However, median completion times were faster, indicating potential for improvement as users adapt to the new interface.

How does the user flow through the Payment Request API payment sheet look?

The ideal user flow involves the buyer clicking the checkout button, opening the payment sheet, selecting a shipping address and method, and successfully completing the payment. However, 60% of users dropped out before interacting with the payment sheet.

Key Statistics & Figures

Checkout completion rate drop

7%

This drop was observed when comparing the control group to the experiment group using the Payment Request API.

Median time to completion for buyers with canMakePayment() = true

2:25

This time reflects the median duration from clicking checkout to completing the purchase.

Percentage of buyers who drop out before interacting with the payment sheet

60%

This dropout rate indicates the challenges users face when adapting to the new payment interface.

Technologies & Tools

Some links below are affiliate links. We may earn a commission if you make a purchase.

API

Payment Request API

Used to simplify the checkout process by replacing traditional forms with a payment sheet.

Frontend

Javascript

Utilized to implement the Payment Request API and manage user interactions.

Cloud Infrastructure

Google Cloud

Employed for deploying the experiment and managing the app infrastructure.

Key Actionable Insights

1
Consider implementing the Payment Request API to streamline your checkout process.
As the API simplifies payment interactions, it can lead to faster transactions and improved user satisfaction, especially as more users become familiar with its functionality.

2
Monitor user behavior closely during the transition to new payment technologies.
Understanding how users interact with new systems can provide valuable insights into necessary adjustments and improvements, ensuring a smoother adoption process.

3
Leverage A/B testing to evaluate the effectiveness of new payment methods.
This approach allows you to gather data on user preferences and behaviors, helping to make informed decisions about which technologies to adopt.

Common Pitfalls

1

Failing to adequately prepare users for a new payment interface can lead to high dropout rates.

As seen in the experiment, many users were confused by the Payment Request API's payment sheet, resulting in a significant percentage not completing their purchases.

2

Not leveraging A/B testing can result in missed opportunities to optimize user experience.

Without testing different payment methods, businesses may overlook which options yield the best user engagement and conversion rates.

Related Concepts

Web Payments

User Experience Design

A/B Testing

Payment Systems