Avoid Chargebacks by learning to create Stripe customer portal links for your SAAS to manage their user subscriptions

To prevent chargebacks and save your business!

Photo by Blake Wisz on Unsplash

Gautham Vijayan | Lead React Native Developer

Customers who do not find a easy way to manage their subscriptions while using your SAAS, while file a chargeback which will be detrimental to your business. To prevent this, Stripe introduced Customer Portals to provide full control to the users who want to cancel or update their subscriptions from within our application.

In this post we will discuss how to create Stripe customer portal links to facilitate self service of user subscriptions where the user can modify their subscriptions, update their payment methods by changing their card details attached to their subscription to your SAAS.

By providing a Stripe custom portal link in your Setting section of your SAAS app, you can prevent Chargebacks and offer a fully robust end to end solution for your customer to manage their subscription without asking you to cancel the subscription or any other subscription related queries.

In this post I will be making the frontend with Next JS (React JS) and the backend with Express JS (Node JS) and will be deploying it to the GCP Cloud functions. You can deploy in any platform you prefer and use any frontend framework as the concepts I am going to discuss here is going to be the same for all the frameworks.

Lets dive into the integration.

Prerequisite

You should have the following setup within your application.

1. Have a Stripe Account to access the secret key for the API’s to work.
2. Have a customer who has an ACTIVE subscription
3. Frontend Website/App.

Without these, you will not be able to integrate the features, I am going to discuss in this post.

Installation

Here is what we are going to do. We are going to make button in our Next JS project and then when the user taps on it, we are going to call our backend api to fetch the stripe customer portal link and redirect the user to the portal.

So to do this, We are going to create a Next JS project from our terminal.

npx create-next-app@latest stripedemo

Once we do that, I am going to utilise my Express JS app connected to Firebase Cloud functions which I have already installed and configured, to create the Stripe API’s. (You can do so by visiting the links which I will provide in the end of this article).

You can use your preferred deployment choice.

Concepts Explanation

In this section I will discuss each and every concept involved around customer portal link creation, so it will be easier for you to integrate it in your code. (This is what I do before start implementing the code)

I will explain it via a story. (This also ties to a bigger picture in the future which I am slowly planning to make)

You have made a SAAS where you connect user’s to premium luxury cars where they pay a fees of $ 1000 per week.

The user at the middle of the week decides to return the car, explaining he had an emergency.

Now, he has to manually call you or text you, then you will have to manually cancel their subscription and return the pending $ 500 to them.

This has a lot of steps which has to be done manually.

Now, with the introduction of stripe customer links, the customer who has an ACTIVE subscription, can go to the app himself and cancel the subscription and the refund will be automatically processed once he has cancelled the subscription.

This also goes to the same where he wants to drive 2 cars at a time with his friends or a family which can also be done in the customer portal. (This can be accomplished in your own SAAS aswell)

So the friction and manual tasks are eliminated without any intervention by us.

If at the time of cancellation, you are unavailable due to various reason, the user might make a chargeback to cancel the subscription which may result in huge losses and you may lose the $1000 on top of charge back fees.

So implementing this feature is a must for SAAS applications who wants to run in autopilot mode.

These are the concepts you need to understand, and once you understand these, it is very easy to implement it in the code if you have basic to intermediate coding knowledge.

Lets dive into backend implementation before making the button for customer link.

Backend Implementation

Lets create a API route in Express JS which generates the stripe customer payment link. As said before, you need to pass the Stripe Customer Id to the Stripe API Call to get the customer portal Link.

Before this you have to enable customer portal links in your stripe customer portal for this to work.

To enable stripe customer portal links, I have attached a Youtube Video Explaining it. Now back to the code.

Grab the secret key of your Stripe Account so you can attach it while calling the stripe api. To use the Stripe SDK, use the following command in your command prompt to install it in your Express JS project.

npm i stripe

Now implement the following code to complete the integration. The response will be a link which we can receive in the frontend.

const stripe = require("stripe")(
  "sk_test_yours"
);

stripeServer.post("/create-stripe-customer-portal-link", async (req, res) => {
  const session = await stripe.billingPortal.sessions.create({
    customer: req.body.customerId,
  });

  res.send({ url: session.url });
}); 

Deploy it to your backend service.

Frontend Implementation

We are going to consume our API’s by calling it in a button which will then redirect it to the customer portal link.

Here is the full code of the implementation. I have used tailwind for the styling.

import React from "react";
import axios from "axios";

const CustomerPortalIntegrationz = () => {
  const goToCustomerLink = async () => {
    const customerId = "your_customer_id";

    try {

       // Your API URL Should be replaced here!

      const link = await axios.post(
        `your_url/stripe/create-stripe-customer-portal-link`,
        {
          customerId: customerId,
        }
      );

      window.open(link.data.url, "_self");
    } catch (error) {
      console.log(error);
    }
  };
  return (
    <div>
      <button
        onClick={goToCustomerLink}
        className="px-6 py-3 bg-blue-500 text-white font-semibold rounded-lg shadow-md hover:bg-blue-600"
      >
        Go to Customer Portal
      </button>
    </div>
  );
};

That’s it! We now have a full end-end solution of integrating Stripe Customer Portal Links in our application.

Video Demo

To maximise the value you can get from this post, I have also made a Youtube video on this topic explaining step by step on how to integrate this in the frontend as well as in the backend.

Here is the Video Demo:

Video Explaining how to create stripe customer portal links: https://www.youtube.com/watch?v=ztPcWRUpenE

Live Demo

You can try this out yourself in my demo link. Tap on the pay button to visualise it for yourself

Live Demo Link: https://demos.gauthamvijay.com/stripe/customer-portal

Referred Guides

Chargebacks - the basics: What they are and how businesses can prevent them | Stripe

https://docs.stripe.com/customer-management

About Author

👋 Hey, I am Gautham, Lead Full Stack React Native developer with 4+ years of experience in making SAAS Applications with React & React Native.

Do follow me here in medium for more posts about SAAS development & React Native in general and if you want to contact me, you can do so in Twitter (X) and here is my profile: https://x.com/gautham_vijay_

I will meet you in the next post.