This only works for Stripe's new Checkout API. If you create your products with "Orders" this will not work
This is a starter built off of gatsby-theme-stripe-storefront
The idea is to be able to quickly set up a bare-minimum e-commerce page using your Stripe API keys.
You can get your Stripe API keys here:
https://dashboard.stripe.com/apikeys
Be sure to set up environment variables at the root of the project so you can hide your secret keys:
.env.development
STRIPE_API_SECRET=SECRET_KEY_HERE
STRIPE_API_PUBLIC=PUBLIC_KEY_HERE
To get your Stripe products running to display in this starter, you need to pass your Stripe API Public key to the gatsby-config.js
file:
require('dotenv').config({
path: `.env.${process.env.NODE_ENV}`,
})
module.exports = {
plugins: [
{
resolve: 'gatsby-theme-stripe-storefront',
options: {
stripePublicKey: process.env.STRIPE_API_PUBLIC,
},
},
],
}
We intentionally avoid passing the stripeSecretKey in Gatsby config for security reasons.
Your secret key will float down to the gatsby-node file in gatsby-theme-stripe-storefront
You probably want to change the main colors of the storefront. You can do so by updating the theme object:
src/gatsby-plugin-theme-ui/index.js
import merge from "deepmerge";
import baseTheme from "gatsby-theme-stripe-storefront/src/gatsby-plugin-theme-ui";
export default merge(baseTheme, {
colors: {
primary: "coral",
primaryText: "black",
secondary: "skyblue"
}
});
Change the primary, secondary and primaryText values to be the colors that you desire.
You can replace the logo with an image of your choice. There is a logo component that takes in an imported image. You can use extended shadowing to accomplish this.
Change logo.js to look like the following:
src/gatsby-theme-stripe-storefront/components/logo.js
import Logo from 'gatsby-theme-stripe-storefront/src/components/logo'
import image from 'path/to/image'
export default props => <Logo {...props} logo={image} />
To change the storefront copy, there is strings.json
file where you can change the string value for storefront
src/strings.json
{
"storefront": "Change this copy in the strings.json file!"
}