Python 3 Flask Stripe Card Checkout Example Using Charges API in Browser Using HTML5 Form in Javascript

Welcome folks today in this blog post we will be using the stripe charges api to integrate stripe card checkout in browser using flask. All the full source code of the application is shown below.

Get Started

In order to get started you need to install the below libraries using the below command as shown below

pip install flask

pip install stripe

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

app.py

import stripe
from flask import Flask, render_template, request, redirect, url_for

app = Flask(__name__)


stripe.api_key = "##stripesecretkey##"

@app.route("/")
def index():
  return render_template("index.html")


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

import stripe

from flask import Flask, render_template, request, redirect, url_for

app = Flask(__name__)

stripe.api_key = "##stripesecretkey##"

@app.route("/")

def index():

return render_template("index.html")

if __name__ == "__main__":

app.run(debug=True)

As you can see we are importing the stripe library and then we are also importing the flask library and then we are setting the secret key of the stripe dashboard. And then we are showing a simple index.html template file when the user goes to the / route. And then we are starting out the flask app at the port number 5000.

Getting Secret Key From Stripe Dashboard

As you can see you can copy the secret key inside the above code.

Making the Template `index.html` File

Now you need to make the templates folder inside the root directory and inside it make an index.html file and copy paste the following code

templates/index.html

<form action="/charge" method="post">
    <script
      src="https://checkout.stripe.com/checkout.js"
      class="stripe-button"
      data-key="##publishablekey##"
      data-amount="1000"
      data-currency="usd"
      data-name="Example"
      data-description="Example charge"
      data-image="https://stripe.com/img/documentation/checkout/marketplace.png"
      data-locale="auto"
      data-zip-code="true">
    </script>
  </form>

<script

src="https://checkout.stripe.com/checkout.js"

class="stripe-button"

data-key="##publishablekey##"

data-amount="1000"

data-currency="usd"

data-name="Example"

data-description="Example charge"

data-image="https://stripe.com/img/documentation/checkout/marketplace.png"

data-locale="auto"

data-zip-code="true">

</script>

</form>

As you can see we are having a simple stripe card where the user can purchase the product and also we have to attach the stripe publishable key from your stripe dashboard. And also we can change the currency and price as well. And you can even the change the name and description of the product. And also you can change the product image as well. Now if you run the flask app you will see the below output

python app.py

Your flask app will start on port 5000 and you will see the below result

Charging the Customer Using Stripe Charges API

Now guys we will be purchasing the product by filling out the above stripe checkout form and then it will issue a request to the stripe charges api and the information of the user will be passed as a post request. Now we need to create this post request to handle this payment of the user as shown below

Now you need to copy paste the below code inside the app.py file

@app.route("/charge", methods=["POST"])
def charge():
  # Get the credit card details submitted by the form
  token = request.form.get("stripeToken")

  # Create a charge: this will charge the user's card
  try:
    charge = stripe.Charge.create(
      amount=1000, # Amount in cents
      currency="usd",
      source=token,
      description="Example charge"
    )
  except stripe.error.CardError as e:
    # The card has been declined
    return redirect(url_for("error"))

  return redirect(url_for("success"))

@app.route("/charge", methods=["POST"])

def charge():

# Get the credit card details submitted by the form

token = request.form.get("stripeToken")

# Create a charge: this will charge the user's card

try:

charge = stripe.Charge.create(

amount=1000, # Amount in cents

currency="usd",

source=token,

description="Example charge"

)

except stripe.error.CardError as e:

# The card has been declined

return redirect(url_for("error"))

return redirect(url_for("success"))

As you can see we are having the post request at the /charge endpoint and inside it we are actually getting the stripe token coming from the stripe checkout form and then we are using the stripe charges api to create the payment and inside it we are passing the amount and currency used by the customer. And also we are passing the token and description of the product. And then we are redirecting the user to the success page if the payment is succesfull and we will be showing the error page if any error takes place.

@app.route("/success")
def success():
  return "Payment successful!"

@app.route("/error")
def error():
  return "There was an error processing your payment. Please try again."

@app.route("/success")

def success():

return "Payment successful!"

@app.route("/error")

def error():

return "There was an error processing your payment. Please try again."

As you can see we have written the above routes for success and error of the payment. Now basically if you are living in India you will get this below message that the Stripe Charges api is discontinued or if you are not from India then the payment will be done successfully.

In this case if you are india it is natural to see this message so in this case you can use the Stripe Payment Intent API to receive payments from customers.

Full Source Code