Get Started

Stripe Subscriptions is a sophisticated service provided by Stripe, a popular online payment processing platform. It lets businesses to effortlessly manage and bill their consumers on a recurring basis, generally for subscription-based products or services. Let’s break down some key concepts:

Setting Up Your Stripe Account

1. Create a Stripe Account:

• Go to the Stripe website at https://stripe.com/.
• Click on the “Sign Up” or “Create Account” button.
• Fill in the required information, including your email address and password.
• Follow the on-screen instructions to complete the account setup process.

2. Navigate to the Dashboard:

• Once your account is set up, log in to the Stripe Dashboard.

3. Activate Your Account:

• Stripe may require you to activate your account by providing additional information, such as business details and banking information.

4. Enable Test Mode:

• In the Dashboard, toggle to the “View test data” switch to enable Test Mode. This allows you to test transactions without processing real payments.

5. Set Up Products and Plans:

• In the Dashboard, go to the “Products” section.

Products:

• Click on “Add product.”

• Fill in product details, including name, description, and pricing information.

           note : you should have to add a price to save the product

• Save the product.

Pricing :

• Click on “Products” and select the product you created.
• Under “Pricing,” click on “Add another price.”

• Configure price details, such as billing interval, pricing, and currency.

• Save the price.

6. Integrate Stripe with Your Website or App:

• Follow the integration guide based on your platform to seamlessly incorporate Stripe’s payment functionality.
• Stripe provides Publishable and Secret key after activation of the account which is then used to configure stripe in frontend and backend code will be later discussed below.

Custom Checkout Flow

1. Setup Stripe

Install the Stripe client of your choice:

• Client Side

• Server Side

2. Create Plan and Pricing Model – Client Side

Plan and pricing model will be created in stripe account and will be displayed in client side with the help of priceId as shown below. After you create the prices, record the price IDs so you can use them in other steps. Price IDs look like this: price_1ORsMKDXxvvhRkJtLHm0O2yT.

Each price id represents different price plan, Its recommended to create priceId for free plan too with zero value so that you can provide free trial for 3 months or one month as per your convenience.

3. Create Customer in Stripe

• Client Side

Stripe needs a customer for each subscription. In your application frontend, collect any necessary information from your users and pass it to the backend. Customers can be created in initial stage while registering to an account or can be created while choosing a plan based on your use case.

• Server Side

On the server, create the Stripe customer object with the necessary information passed from the frontend.

Then the customer would be added into the stripe account as show below.

4. Create an Incomplete Subscription while Customer reaches Custom Checkout form.

By a choosing a plan from step-2, customer will be directed to a checkout form where they have to enter their credit or debit card details for purchasing a subscription. Stripe often provide prebuilt checkout form but here we are discussing about how to collect payment from a custom checkout form of our design or brand.

• Client Side

By clicking on the choose plan option, send the priceId selected by the user to backend(server side)

• Server Side

Create the subscription with status incomplete using payment_behaviour=default_incomplete. Then return the client_secret from the subscription’s first payment intent to the front end to complete payment.

Set save_default_payment_method to on_subscription to save the payment method as the default for a subscription when a payment succeeds. Saving a default payment method increases the success rate of future subscription payments.

Here we are sending back paymentIntent-client secret and subscriptionId to frontend for completing the payment, this client secret acts as a connection to the subscription which the user has selected. At this point subscription will be inactive and will be active only once the payment is confirmed from the client side.

5. Collect Payment Information – Client Side

For collecting payment informations like credit or debit card details, cvv, expiry are collected using Stripe Elements. They securely collect all payment informations and also you can customize Elements to match the look-and-feel of your application.

• Add Payment Element to your Checkout Form

Load Stripe by using loadStripe from “@stripe/stripe-js” and wrap your whole checkout form with Element provided by “@stripe/react-stripe-js” as shown below.

Use PaymentElement provided by ‘@stripe/react-stripe-js’ to display checkout form

note : If you want to customize each field like card number , Expiry or CVV, stripe provides:

• CardElement : flexible single-line input that collects all necessary card details.
• ‍CardExpiryElement : Collects the card‘s expiration date.
• ‍CardNumberElement : Collects the card number.

• useElement and useStripe hook

To pass confidential information collected from users to stripe, the best practice is to access the elements and use it with stripe.ConfirmPayment as shown below. Here stripeHooke provides a reference to the Stripe instance passed to the Elements provider.

stripe.confirmPayment confirms the payment and once the payment succeeds, it redirects users to the return URL

6. Listen for Webhooks

• Webhook Configuration

1. Navigate to Webhooks:

• In the Dashboard, find the “Developers” section in the left-hand sidebar.
• Click on “Webhooks” under the “Developers” section.

1. Create a New Endpoint:

• Click the “Add Endpoint” button.

• In the “Endpoint URL” field, enter the URL of the server or service that will handle the incoming webhook events. This should be an HTTPS URL.
• Choose the events you want to be notified about by selecting them from the “Events to send” section.
• By clicking on Add endpoint button, Stripe would provide you with a webhook secret key which is used to connect  webhook with your backend code

You will be  able to add HTTP URL in local event listener, such that you will be able to test working of webhook in local.

• Server Side

Add this middleware  to handle incoming requests. If the original URL is “/webhook,” it allows the request to pass through without parsing the JSON body. Otherwise, it uses the bodyParser middleware to parse the JSON body of the request.

The variable endpointSecret holds the secret key associated with your webhook endpoint. This key is used to verify the authenticity of incoming webhook events.

This part of the code is responsible for verifying the Stripe webhook signature and extracting the event.

In our specific context, we have already initiated the subscription process on Stripe, but it remains partial or incomplete. To finalize and update the subscription details upon payment confirmation, we rely on webhook events provided by Stripe. In particular, we are interested in the “payment_intent.succeeded” event.

If the event called “payment_intent.succeeded” is triggered, then we could update our local database as well and this could complete your whole subscription payout journey.

Conclusion

We discussed whole stripe subscription checkout journey from initiation to the completion using stripe webhook. The initialization of the Stripe library is a crucial step, and it’s important to replace the test secret key with the live secret key in a production environment. This ensures that real transactions are securely processed, maintaining the integrity and confidentiality of sensitive information. You can also use the help of test clock in stripe so that you could analyze the working of your subscription by providing future date in the test clock, thus make your subscription integration flawless.