Having a low-friction payment flow is crucial for your business. I’m running a SaaS app called Inkdrop, which is a subscription-based service. I use Stripe to accept payments with credit cards around the world. Recently, I’ve got an email from Stripe that users can’t renew their subscriptions under RBI regulations in India if your website doesn’t support 3D secure:
That’s going to affect my service since I have customers from India. So, I decided to support 3D secure authentication on my website.
In terms of implementation, there are several ways to implement a card form for recurring payments. If you are already using Stripe Checkout, it’s easy. All you have to do is enable 3D Secure in your Billing settings. Then, Stripe basically does all nicely for you. However, I was using Stripe Elements and Sources API to provide a credit card form. While it provides highly customizable form components, it requires an additional complicated implementation for 3D secure authentication. Besides, the Sources API is no longer recommended. Looks like my code is already old since I’ve implemented it several years ago. I thought it’s time to switch my payment logic from Stripe Elements to Stripe Checkout.
In this article, I’ll share how I migrated from Stripe Elements to Stripe Checkout. I’ll also explain my actual UX practice of implementing the payment flow, including my past mistakes that you can avoid. So, it’d be helpful for those who are planning to adopt Stripe Checkout for your website from scratch. Let’s get started.