Stripe Payments Demo

This demo shows support for payments using Stripe Checkout running on a Website powered by the Flask Micro-framework for Python.

Target Audience

This demo is targeted towards a developer who wants to focus on building their website without spending a lot of time on building a checkout flow. For more advanced users see Stripe Elements

Why Stripe Checkout?

Stripe Checkout is a fully hosted checkout experience. It allows you to outsource the complexity of designing a first-class payments experience to us.

Stipe Checkout will localize the checkout experience and show relevant payment methods such as Credit Card, Apple Pay and Google Pay. By using Stripes Hosted checkout you can integrate once and remain compliant, secure and up to date as regulations change and new payment methods become available.

Prerequisites

• A Stripe Account

• Set your Stripe Secret Key to an Environment variable STRIPE_KEY

• Set your Stripe Public Key to an Environment variable STRIPE_PUBLIC_KEY

• Clone this repo

• Use pipenv to install all package dependencies

  pipenv install

• Replace the existing Stripe Public Key with your Stripe Public Key in ./static/app.js

Add Checkout to your Stripe account

To get started with Checkout navigate to the Business Settings menu and select Checkout

At the time of publishing this Checkout is in Public Beta. You can read more about what is available via the Read Documentation button

Click "Enable Checkout"

Checkout is now enabled for your account. As your account is new it is in test mode. You can ignore adding a Domain for now.

Add Products to your Stripe account

In this example we are going to use a subscription based business model. In our docs you will see mentions of Products and SKU's. SKU's are suited to business models where you are selling one-time purchase items like a T-Shirt for example. When you're selling a recurring product you are using Product and Plans. Which you can read more about here.

You can add Products and Plans to your account via the Dashboard or via the API. Included in this Demo is a file seed.py which demos programmatically adding some products and plans to your account.

python seed.py

You should be able to see the Products you have added to your account

Running the app

As mentioned above this demo uses Flask as the backend for this web app. In order to start the web app you simply do

FLASK_APP=app.py
flask run

And now navigate to localhost:5000

By selecting one of the plans avialable and clicking the button, client side JS will extract the plan_id, added by Flask and the Jinja template and pass that through as the plan to a redirect to Stripe Checkout.

Note the data-plan attribute on the "buy_gold" button

<div class="row">
    <div class="col s0 m2 l3 xl3"></div>
    <div class="col s12 m8 l6 xl6">
        <div class="card z-depth-4">
            <div class="card-image">
              <img class="responsive-img" src="static/bean-gold.jpg">
            </div>
            <div class="card-content">
                <span class="card-title">Bean Box Gold</span>
                <p>Enough Coffee for 4 people for 2 weeks. Includes 4 bags of beans.</p>
            </div>
            <div class="center-align">
                <div class="card-action">
                    <a id="buy_gold" data-plan="plan_EAig31mTIkPcYW" class="waves-effect waves-light btn brown darken-1 z-depth-4" onclick="handleClick(this)">€20.00</a>
                </div>
            </div>
        </div>
    </div>
    <div class="col s0 m2 l3 xl3"></div>
</div>

handleClick js function in static/app.js

var stripe = Stripe(stripePublicKey, {
  betas: ['checkout_beta_4']
});

function handleClick(button) {
  // Generic eventListener for calling Stripe checkout
  stripe.redirectToCheckout({
    items: [{plan: button.dataset.plan, quantity: 1}],

    // Note that it is not guaranteed your customers will be redirected to this
    // URL *100%* of the time, it's possible that they could e.g. close the
    // tab between form submission and the redirect.
    successUrl: `https://${window.location.hostname + (window.location.port? ":" + window.location.port : "")}/success`,
    cancelUrl: `https://${window.location.hostname + (window.location.port? ":" + window.location.port : "")}`,
    })
    .then(function (result) {
      if (result.error) {
        // If `redirectToCheckout` fails due to a browser or network
        // error, display the localized error message to your customer.
      var displayError = document.getElementById('error-message');
        displayError.textContent = result.error.message;
      }
    });
};

🌟 Bonus content! 🌟

The Flask App in this demo is incredibly simple and really could be turned into Static content.

Enter Frozen Flask.

Frozen Flask will generate a static site into a build folder that can then be hosted on a traditional web server.

or github pages...

http://mikeshaw-stripe.github.io

To run it

python freeze.py