Skip to content
A Gatsby theme that implements a stripe checkout, you bring the button, we submit it as a stripe checkout
TypeScript JavaScript
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src added billing address required Aug 23, 2019
.eslintrc.js Inital Commit Jun 8, 2019
.gitignore
README.md Merge branch 'master' of https://github.com/molebox/gatsby-theme-stri… Aug 23, 2019
gatsby-config.js
index.js
package.json v1.0.3 Jul 18, 2019
tsconfig.json Inital Commit Jun 8, 2019
yarn.lock Bump lodash from 4.17.11 to 4.17.15 Jul 19, 2019

README.md

gatsby-theme-stripe-checkout-button

A Gatsby theme that implements a stripe checkout, you bring the button, we submit it as a stripe checkout. Register an account at Stripe and follow the instruction for setting up a developer account to get started.

Example site: https://gatsby-theme-stripe-checkout-button-example.netlify.com

Add to your Gatsby sites gatsby-config.js just like you would with a plugin. The STRIPE_API_KEY, STRIPE_SECRET_KEY and siteUrl are passed in as options from the consuming theme or site.


It is recommended that you use environment variables to store your keys. You can store them in the root of your project in env.development or env.production files.

You can access these file in your gatsby-config.js like so:

let activeEnv =
  process.env.GATSBY_ACTIVE_ENV || process.env.NODE_ENV || "development" || "production"

require("dotenv").config({
  path: `.env.${activeEnv}`,
})


module.exports = {

    plugins: [
      {
        resolve: 'gatsby-theme-stripe-checkout-button',
        options: {
          STRIPE_API_KEY,
          STRIPE_SECRET_KEY,
          siteUrl
        }
      }
  ],
}

Example usage:

import { Checkout } from 'gatsby-theme-stripe-checkout-button';

    <Checkout
        button={<MyCustomButton type="submit" text="Buy Now!"/>}
        sku='sku_123'
        quantity={1}
        customerEmail={customer@email.com}
    />

The component takes a custom button as its form submit which enables you to style it which ever way you wish, it only requires that you provide its type as 'submit'.

In addition the component requires you to provide the products sku (which can be taken from your products in your stripe dashboard) and the quantity of items to purchase. You can optionaly provide the customers email address from your form. This will enable you to prefill your customers billing information if they have already filled in the form before.

Once the user clicks the button to make a purchase they are redirected to the stripe checkout where they can fill out their card details and complete their purchase. Upon completion the user is redirected back to your gatsby site.

This theme provides three base components (success/canceled/error) which you should style yourself. These components should be placed inside your src/pages folder:

src/pages/checkout/success
src/pages/checkout/canceled
---
src/pages/error

Built With

Authors

  • Rich Haines - Hungry Bear Studio

License

This project is licensed under the MIT License

You can’t perform that action at this time.