Faster checkout with Link and the Payment Request Button

mattling_dev - Oct 19 '22 - - Dev Community

Introduction

Offering one-click checkout in your app can dramatically improve the user experience for your customers and increase conversion for your business, as it removes lots of unnecessary friction like inputting card numbers and other billing details.

The Payment Request Button already gave access to popular wallets like Apple Pay and Google Pay and now it supports Link, Stripe’s one-click payment method that gives your customers the opportunity to use one-click checkout on hundreds of thousands of businesses.

And the great news is, if you are already using the Payment Request Button or intend to integrate using it, you get Link without any integration changes whatsoever! You can simply turn it on via the Dashboard. This feature is currently in a public beta, which you can sign up for here.

If you'd like to see a step-by-step integration demo for Apple Pay or Google Pay, both of those have been covered by CJ and Dawn. The Payment Request Button dynamically displays wallet options to optimize the checkout experience for your customers. In this article we'll see how and when Link will be offered and how it will improve your customer's payment experience.

When will Link be offered

Link will be offered as a payment method when certain browser and wallet configurations are met, you can see those combinations in the table in the docs linked here.

What we’ll be testing

In this example, we’ll be testing purchasing with Link using Safari with no card configured in our wallet, therefore Link will be offered as an alternative payment method.

Link

Signing up

The first step is to provide an email address, this will be used to determine whether a customer has signed up for Link before.

One thing to note is that when testing Link in test mode, don’t use real world data, rather use dummy email addresses, test card numbers and non real world user data.

Sign up or log in to Link

If a customer has not used Link before, they’ll be prompted to enter their phone number. This number will be used to authenticate the customer in the future using one-time passcodes.

Provide a phone number

Using the phone number placeholder

On signing up, the customer will be prompted to provide familiar billing information like a debit or credit card, and their billing address.

Provide billing details

Once this is completed, the payment will be made.

Payment completed

Authenticating

The next time the customer uses Link to pay, they provide their email address and they’ll be sent a one-time passcode to their phone which they can use to authenticate. In test mode, we can use any 6 digit number that isn’t 000001, 000002, or 000003. These 3 test codes are reserved for simulating certain errors which you can read more about in the docs.

So we’ll key in 111111 to authenticate.

One-time passcode verification

Now the customer is fully authenticated and can make use of one-click checkout with Link on many businesses that have enabled it. Let’s complete this payment and see what happens when we try to make one last purchase.

One-click checkout with Link

Since the customer is authenticated, they can now checkout with one-click.

Payment complete

Summary

Making the checkout process as smooth and fast as possible is essential to your customer’s experience and will lead to increased conversion and revenue for your business.

Stripe created Link to make online checkouts faster and easier. With Link, you can save your payment information to be used at hundreds of thousands businesses. The next time you’re making an online purchase at a business that supports Link, you can simply check out in one-click.

About the author

Matthew Ling

Matthew Ling (@mattling_dev) is a Developer Advocate at Stripe. Matt loves to tinker with new technology, adores Ruby and coffee and also moonlighted as a pro music photographer. His photo site is at matthewling.com and developer site is at mattling.dev.

Stay connected

In addition, you can stay up to date with Stripe in a few ways:

📣 Follow us on Twitter
💬 Join the official Discord server
📺 Subscribe to our Youtube channel
📧 Sign up for the Dev Digest

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Terabox Video Player