Python 3 Flask Stripe Payment Gateway Example to Integrate Subscription Checkout in HTML5 & JS

Welcome folks today in this blog post we will be integrating stripe subscription checkout inside flask web app in browser. All the full source code of the application is shown below.

Get Started

In order to get started you need to install the flask library using the pip command as shown below

pip install flask

And now we need to install the library using the pip command as shown below

pip install stripe

And now you will see the below directory structure of the app as shown below

And after that you need to make an app.py file and copy paste the following code

app.py

import stripe
from flask import Flask, redirect

app = Flask(__name__,static_url_path="",static_folder="public")

stripe.api_key = "##yourstripesecretkey##"

YOUR_DOMAIN = "http://localhost:5000"

@app.route('/create-checkout-session',methods=["POST"])
def create_checkout_session():
    try:
        checkout_session = stripe.checkout.Session.create(
            line_items = [
                {
                    "price":"##yourpriceid##",
                    "quantity":1
                }
            ],
            mode="subscription",
            success_url=YOUR_DOMAIN + "/success.html",
            cancel_url = YOUR_DOMAIN + "/cancel.html"
        )
    except Exception as e:
        return str(e)

    return redirect(checkout_session.url,code=303)

if __name__ == "__main__":
    app.run(port=5000,debug=True)

import stripe

from flask import Flask, redirect

app = Flask(__name__,static_url_path="",static_folder="public")

stripe.api_key = "##yourstripesecretkey##"

YOUR_DOMAIN = "http://localhost:5000"

@app.route('/create-checkout-session',methods=["POST"])

def create_checkout_session():

try:

checkout_session = stripe.checkout.Session.create(

line_items = [

{

"price":"##yourpriceid##",

"quantity":1

}

mode="subscription",

success_url=YOUR_DOMAIN + "/success.html",

cancel_url = YOUR_DOMAIN + "/cancel.html"

)

except Exception as e:

return str(e)

return redirect(checkout_session.url,code=303)

if __name__ == "__main__":

app.run(port=5000,debug=True)

As you can see we are importing the flask and stripe library and here you need to replace your secret key which you will get from your stripe dashboard and also you need to create the stripe product and copy paste it’s id in the above code. And then we have the post request where we allow the user to make the payment and here we are creating the stripe session and here we are passing the mode to be subscription and here we are passing the quantity of the product which is 1. And then we have the url's for success and cancel of payments.

Now you need to create the public folder and inside it you need to create the checkout.html file and copy paste the following code

public/checkout.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h3>Test Product Subscription Payment Checkout Example</h3>
    <form action="/create-checkout-session" method="post">
        <button>Checkout</button>
    </form>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<h3>Test Product Subscription Payment Checkout Example</h3>

<button>Checkout</button>

</form>

</body>

</html>

As you can see we have a simple html5 form where we allow the user to make the payment and we have the button if the user press the button then we are making the post request to the /create-checkout-session route

public/success.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Thanks for the Payment</h1>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<h1>Thanks for the Payment</h1>

</body>

</html>

public/cancel.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Some Error occured in the Payment</h1>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<h1>Some Error occured in the Payment</h1>

</body>

</html>

Now if you execute the below command as shown below to start the python app as shown below

python app.py

It will start the python app at port 5000