A step-by-step guide to getting started with Stripe Checkout and Stripe Customer Portal for managing customer subscriptions and billing.
Updates from Churnkey's team of experts have been known to change lives.
Billflow, formerly known as Servicebot, is set to sunset in August 2022. Billflow offered a suite of features on top of Stripe subscriptions including a plan picker, subscription portal, and an inline checkout component. Billflow was acquired by Stripe in 2021.
Prior to the acquisition, Stripe had been building in-house features that were counterparts to those from Billflow, such as Stripe Elements, Stripe Checkout, and Stripe Portal. Most recently, in July 2022, Stripe has worked with the Billflow team (post-acquisition) to build an in-house plan picker.
All companies using Billflow have been asked to migrate off of the platform. In this tutorial, we’ll walk through how to port all of your existing Billflow code into Stripe code and your Billflow components into Stripe components. Specifically, we’ll be dealing with (i) subscription creation with card input, and (ii) subscription management, including card updates, invoice viewing, and canceling subscriptions. We’ll also show you how you can offer your customers dynamic point-of-cancellation offers to boost retention.
At a glance, you'll learn how to:
Stripe Checkout and Stripe Elements are the two primary options for collecting card information and creating subscriptions. At a glance, Stripe Elements offers complete control at the expense of implementation difficulty; particularly with the recent changes to regulatory law requiring security measures like 3D Secure card authentication. Stripe Checkout shoulders this regulatory burden, but allows for less control over the look and feel of the page, and requires your customers be sent to a Stripe-hosted page to enter their billing details.
With new regulations in place, implementation through Stripe Elements and the Payment Intent API has grown in complexity. If you’d like to automate tax collection, you’ll further need to make use of the Orders API. For this reason, we recommend that most companies proceed with Stripe Checkout, offloading the regulatory concerns onto their team.
This section will walk you through card collection and subscription creation using Stripe Checkout.
The Stripe Checkout API works like this.
The most action for us takes place in step 2, where we create a Checkout Session on our server through the Stripe API.
The code snippet below captures the essence of creating a session with the Stripe Node.js SDK. We use the
customer parameter since we create a Stripe account for our users at sign up, but you can optionally use a
customer_email parameter if that isn't the case.
cancel_url are where the Stripe hosted checkout page will redirect to upon successful payment or a canceled attempt, respectively. We point both of these to the same page, but add a query param "checkout" set to "success" or "cancel" depending on the result.
For subscription services, you'll want to set
subscription. The other options are
payment, for one time transactions, and
setup, for saving payment details to charge the customer later.
You'll pass in the price id for the customer to subscribe to within
line_items. Note that, if you offer multiple prices, you'll want to pass your API handler data on which price the customer wants to subscribe to, and accordingly pass in the relevant Stripe Price ID within
Stripe offers a number of Payment Method Types which can be enumerated in a list. We choose to just accept
At Churnkey, we everyone is on the same plan. We do offer a 14-day free trial, which Stripe Checkout makes very easy to add.
Finally, Stripe has recently made tax collection easy through Checkout. You can automatically collect tax from customer simply by setting
Once the Checkout Session is created, you can extract the URL and pass it to your client-side application. Then all you need to do on the client side is redirect the user to the session URL.
You'll also want to make sure you're gracefully handling redirects to both the
cancel_url that you specified when creating the Checkout Session.
Once customers are subscribed, we can leverage Stripe Customer Portal for subscription and billing management. Within the portal, customers will be able to:
As you can see, the Stripe-hosted customer portal does a lot of the heavy lifting for our subscription management!
Getting set up with Stripe Customer Portal follows the same pattern that we used with Stripe Checkout. We'll use the Stripe SDK on our server to create a portal session; then pass the URL of this session to the front-end and redirect our customer there.
The code to create a portal session is even simpler than the code needed to create a checkout session. If you'd like to configure the actions that a customer can take within a portal session, you can do that on the Stripe Portal settings page. Below is an example of what settings we use at Churnkey.
We worked with the team at Billflow to build an integration that made Churnkey's best-in-class cancel flows readily available for anyone using Billflow. Fortunately, for everyone using the Churnkey-Billflow integration, migrating to a standalone Churnkey installation is very easy.
Churnkey's cancel flow is the perfect companion for Stripe Customer Portal.
By default, your customers will be able to cancel their subscriptions within Stripe Portal. Stripe Portal even makes it easy to collect a cancellation reason from a preset list of reasons. But at Churnkey, we think we can do a lot better. We see the cancel button as an opportunity to refresh your relationship with your customers. As an opportunity for feedback and an opportunity to show you understand and empathize with your customers.
Installing Churnkey next to Stripe Customer Portal gives you the best of both worlds. Let Stripe Portal take care of the billing details, and turn your cancel button into a growth lever with Churnkey.
With Churnkey, you can build custom cancellation surveys and present unique point-of-cancellation offers to each of your unique customer segments. We've done the research on the unusual effectiveness of point-of-cancellation offers. The tldr; there's a reason why the world's biggest tech companies spend a ton of time on optimizing their offboarding flows. With Churnkey cancel flows, we've made it easy to emulate the most successful subscription businesses out there.
Adding Churnkey to your subscription business follows the same code patterns as Stripe and Billflow. Whenever someone clicks the cancel button, we'll use server side code to create a session hash which we pass to the client side to initialize an on-page cancellation flow.
Above is sample code which attaches the Churnkey cancel flow embed to a cancel button. The
authHash listed above is where the server side code comes in to ensure that each request to modify a customer's subscription (discount, pause, cancel) is valid. Below is a sample in Node.js, but we also have examples in Python, Ruby (Rails), PHP, Go, and Java available in our docs.
The full list of customization options, including custom callbacks, customer attributes, internationalization, and styling options can be found in Churnkey's step-by-step documentation.
If you'd like to see Churnkey in action, you can give it a try with a 14-day free trial by registering a new account. If you'd like to learn more, you can book a time to speak with someone from the team on our calendar and talk about how we can boost your retention rates.
Get more insights like this, right in your inbox.
We keep up with the latest in the world of subscription retention, so you don't have to.
We’ll take you on a quick, friendly, no-pressure walkthrough of what we do. And you’ll see why so many companies are graduating to Churnkey to boost their revenue and make customers happier.Chat With Us