Introduction:

Stripe is a widely used subscription payment gateway that simplifies online transactions for businesses and customers alike. It serves as a bridge between the merchant's website or app and the financial infrastructure, ensuring secure and seamless recurring payments. With Stripe, businesses can easily set up subscription plans, allowing customers to subscribe to services or products with the convenience of automated billing.

The platform is known for its user-friendly interface, robust security measures, and flexibility, making it a preferred choice for businesses of all sizes looking to manage subscriptions efficiently. Whether you're a small startup or a large enterprise, Stripe provides a straightforward solution for handling recurring payments, offering a reliable and scalable subscription payment experience.

Flow diagram:

How it works:

Prerequisites :

Stripe account
Stripe package
Python – Stripe ( stripe )
React – Stripe ( https://www.npmjs.com/package/@stripe/react-stripe-js )
Steps:

Step 1: Sign up and Login to Stripe

If you don't have a Stripe account ( Stripe | Financial Infrastructure to Grow Your Revenue ), please proceed with the signup option, otherwise, log in with your existing credentials.
Step 2: Retrieve the Stripe API Keys

In the Stripe dashboard, click Developers
Then, click API keys. In the API keys section, find the Publishable key and Secret key. Copy them and paste them into a local text file. These Key`s will be used to interact with Stripe
Warning

Your Secret key is used in the backend only. Please don't use it in the frontend

On the next page, fill in the following details (i.e. Name, Pricing model, Price, Billing period )

After filling in the details click Save product

To check your products, In the Stripe dashboard go to Products.

Click the product that you created in the above step. You will find the price id. Copy them and use them in your front end to access the subscription

Add lookup key to a price object:

The lookup is a custom name we assign to a subscription product. We can pass this custom name from the frontend to the backend for selecting the specified product.

Navigate to the product catalog page

Click on the product that you are going to assign a lookup key

Click on the triple dots of the price you’re going to use. Then in the popup menu click Edit price.

In the popup menu, click on the Additional Options button.

In the Lookup key field enter your custom lookup key and click on save.

Step 4 : Flask backend setup

install the Flask package using the pip

pip install Flask

The basic flask project setup is given below

from flask import Flask
app = Flask(__name__)
@app.route("/")

def hello():
  return "Hello World!"

if __name__ == "__main__":
  app.run()

Import the stripe package and initialize it.

import stripe

stripe.api_key = "sk_test_sdjhfhjdsfvsdfsdhfsdfskjhdbfksjbdfkjsbdflksbdfkjsbdf"

Route Definition:

This code defines a route in your Flask application at the URL path '/api/subscription'. It specifies that this route accepts POST requests and decorates the function with token_required_checkout, which suggests it requires a valid authentication token

@app.route('/api/subscription', methods=['POST'])
def create_checkout_session(current_user):

Retrieve Stripe Prices:

prices = stripe.Price.list(
    lookup_keys=[request.form['lookup_key']],
    expand=['data.product']
)

Create Checkout Session :

Using the price ID collected from the above code, we are going to create the checkout session. After creating the Stripe Checkout session, the code redirects the user to the Stripe Checkout page, where they can complete the payment process

        checkout_session = stripe.checkout.Session.create(
                line_items=[
                    {
                        'price': prices.data[0].id,
                        'quantity': 1,
                    },
                ],
                mode='payment',
                success_url=f"https://episyche.com/home?paymentstatus=true",
                cancel_url=f"https://episyche.com/pushmode?paymentstatus=false",
                allow_promotion_codes=True,
                metadata={
                    "user_id": current_user,
                    "price_id": prices.data[0].id,
                },
                customer_creation="always",
            )

Here is the full code for your reference.

Github repo link: https://github.com/episyche/stripe_subscription_flask_react_example/blob/main/backend/app.py

@app.route('/api/subscription', methods=['POST'])
def create_checkout_session(current_user):
    try:
        prices = stripe.Price.list(
            lookup_keys=[request.form['lookup_key']],
            expand=['data.product']
        )  
        checkout_session = stripe.checkout.Session.create(
                line_items=[
                    {
                        'price': prices.data[0].id,
                        'quantity': 1,
                    },
                ],
                mode='payment',
                success_url=f"https://episyche.com/home?paymentstatus=true",
                cancel_url=f"https://episyche.com/pushmode?paymentstatus=false",
                allow_promotion_codes=True,
                metadata={
                    "user_id": current_user,
                    "price_id": prices.data[0].id,
                },
                customer_creation="always",
            )
        print("==================checkout_session_object=====================")
        print(checkout_session)
        return redirect(checkout_session.url, code=303)
    except Exception as e:
        print(e)
        return jsonify({'status': True, 'data': [], 'message': f"subscription failed"}) 200

Step 5: Stripe Webhook setup

Create a backend API for stripe webhook

Click on the developers link.

click on the webhooks tab → click on the add endpoints button.

first, click on the “Add an endpoint” option

Then the URL of your backend with the webhook path

Then a the events that you want to listen to, don’t add all events in production mode it will affect your account.

Finally, click on the “Add endpoint” button

After the webhook is created copy the signing secret key to use the backend API for authentication purposes.

Click on the created webhook

Click on the reveal button.

copy the signing secret key and store it in a safe place.

The signing secret key will be used in the webhook creation process

In the backend add the API path for the stripe webhook to call when a payment is completed. The API path is mentioned on the webhook creation.

Listen to a particular event, if the event is called add the business logic according to it.

Use the signing secret key just copied before to replace the string of the webhook_secret

Github repo link: https://github.com/episyche/stripe_subscription_flask_react_example/blob/main/backend/app.py

@app.route('/api/webhook', methods=['POST'])
def webhook_received():
    webhook_secret = "whsec_ousdfliksdkfskdfbsweopa,xnbfwe52J"
    try:
        signature = request.headers.get('stripe-signature')
        event = stripe.Webhook.construct_event(
            payload=request.data, sig_header=signature, secret=webhook_secret)
        if(event['type'] == "charge.succeeded"):
            temp_dict = {}
            temp_dict["status"] = "success"
        if(event['type'] == "charge.failed"):
            temp_dict = {}
            temp_dict["status"] = "failed"
        return jsonify({"data": [temp_dict]}), 200
    except Exception as e:
        print(" webhook error",e)
        return jsonify({'message': 'webhook error'}), 500

Step 6: React Frontend setup

Run the following command to create a React project.

npx create-react-app stripe_react

Navigate to the created project directory

cd stripe_react

Add a .env file and add your Stripe Publishable key

REACT_APP_STRIPE_KEY=pk_test_<YOUR_PUBSHICHABLE_KEY>

A sample .env file can be found in the following git repository file.

https://github.com/episyche/stripe_subscription_flask_react_example/blob/main/stripe_react/.env

Create a Config folder under src . After, under the Config folder create config.js file . This file can connect with the backend.

export const API_URL = process.env.REACT_APP_API_URL || 'http://localhost:8000'
export const REACT_APP_STRIPE_KEY = process.env.REACT_APP_STRIPE_KEY || 'pk_test_<YOUR_PUBSHICHABLE_KEY>'

A sample config.js file can be found in the following git repository file.

https://github.com/episyche/stripe_subscription_flask_react_example/blob/main/stripe_react/src/Config/config.js

Under the src folder create a folder named Component that contains Subscription.js , Success and failure redirect .js files.

Final project structure is given below

In your package.json add the following dependencies

{
  "name": "stripe-react",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@stripe/react-stripe-js": "^1.8.1",
    "@stripe/stripe-js": "^1.31.0",
    "@stripe/stripe-react-native": "^0.12.0",
    ...
    ...
    "react-router-dom": "^6.3.0",
    }

In subscription.js add two subscription option (for example , monthly and yearly subscription). These two forms having the hidden input field with price id to get the subscription. In form action add your backend api URL(for example – http://localhost:5000/subscription )

Add two buttons monthly and yearly subscription

import { API_URL } from '../Config/config';

const Subscription = () => {
    return (
        <>
            <h1>Subscription</h1>
            <div className='subscription'>
                <div className='starter-div' >
                    <h2>Starter plan</h2>
                    <img className='month-img' src='https://img.freepik.com/free-vector/subscriber-concept-illustration_114360-3453.jpg?t=st=1654685116~exp=1654685716~hmac=b67fdd003003bc4f477b5184b2201a36a5a88ebefc2552ee7f4f723a2acef85f&w=740'></img>

                    <form action={`${API_URL}/subscription`} method="POST">
                        <input type="hidden" name="price_id" value="price_1LaFt5SE9c6We7uyk0J5QRnG" />
                        <button className="btn-month" type="submit" >&#8377;30 / Month</button>
                    </form>
                </div>
                <br></br>
                <div className='premium-div'>
                    <h2>Premium plan</h2>
                    <img className='year-img' src='https://img.freepik.com/free-vector/subscriber-concept-illustration_114360-2949.jpg?t=st=1654651458~exp=1654652058~hmac=fc1ea117f4198608284f1fea2f5af8f4c50f75692b80c711ad5c93793d0f3ab0&w=740'></img>
                    <form action={`${API_URL}/subscription`} method="POST">
                        <input type="hidden" name="price_id" value="price_1LaFt5SE9c6yk0J5QRnG" />
                        <button className="btn-year" type="submit" >&#8377;350 /Year</button>
                    </form>
                </div>

            </div>
            <br>
            </br>
        </>
    );
}

export default Subscription;

A sample Subscription.js file can be found in the following git repository file.

https://github.com/episyche/stripe_subscription_flask_react_example/blob/main/stripe_react/src/Component/Subscription.js

When you click the button it calls backend api. In backend performs stripe subscription.

After completing your payment you need to redirect based on subscription status. So , you have to add Success.js and Cancel.js

In success.js add some success message like Subscription successful.

import { API_URL } from '../Config/config';

const Success = () => {

  return (
    <>
      <section>
        <div class="product Box-root">

          <div class="description Box-root">
            <h3>Your plan Subscribed successful!</h3>
          </div>
        </div>
      </section>
    </>
  )
}

export default Success

import { API_URL } from '../Config/config';

const Success = () => {

  return (
    <>
      <section>
        <div class="product Box-root">

          <div class="description Box-root">
            <h3>Your plan Subscribed successful!</h3>
          </div>
        </div>
      </section>
    </>
  )
}

export default Success

In Cancel.js add some failure messages like subscription failed.

const Cancel = () => {
    return (
        <>
            <section>
                <p>Subscription Failed . back to pay!</p>
            </section>
        </>
    )
}

export default Cancel

const Cancel = () => {
    return (
        <>
            <section>
                <p>Subscription Failed . back to pay!</p>
            </section>
        </>
    )
}

export default Cancel

const Cancel = () => {
    return (
        <>
            <section>
                <p>Subscription Failed . back to pay!</p>
            </section>
        </>
    )
}
export default Cancel

In App.js add some routing for pages which you created in above steps.

import './index.css'
import React from 'react'
import { Elements } from '@stripe/react-stripe-js'
import { loadStripe } from "@stripe/stripe-js/pure"
import Subscription from "./Component/Subscription"
import Success from './Component/Success'
import Cancel from './Component/Cancel'
import { BrowserRouter as Router, Routes, Route } from "react-router-dom"
import { REACT_APP_STRIPE_KEY } from './Config/config';

const stripe_key = REACT_APP_STRIPE_KEY
const stripePromise = loadStripe(stripe_key)

function App() {
  return (
   <>
   <Elements stripe={stripePromise} >
    <Router>
      <Routes>
      <Route exact path='subscription/' index element={<Subscription />} />
      <Route exact path='subscription/success/' element={<Success/>} />
      <Route exact path='subscription/failed/' element={<Cancel/>} />
      </Routes>
     </Router>
    
   </Elements>
   </>
  );
}

export default App;

run the project using following command.

npm start

After running the command . It will redirect to the browser ( http://localhost:3000 )

In browser check url – http://localhost:3000/subscription

Click monthly or yearly button , it will redirect to the stripe payment page

Complete React example in the following github repo.

https://github.com/episyche/stripe_subscription_flask_react_example/tree/main/stripe_react

Result:

After running both the backend and frontend, If we click on the checkout button, it will redirect to the stripe payment page See the below image

On the Payment page give some testing data and click Pay

If payment success it will redirect the success page

Stripe subscription payment gateway integration with react and Flask