[Gatsby example] Update and migrate to Prices API (#130)

examples/gatsby/.env.example

@@ -0,0 +1,4 @@
+# Stripe secret API key
+# Details see: https://www.gatsbyjs.org/docs/environment-variables/
+STRIPE_SECRET_KEY=
+GATSBY_STRIPE_PUBLISHABLE_KEY=

examples/gatsby/.gitignore

@@ -0,0 +1,72 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Typescript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# dotenv environment variables file
+.env
+.env.development
+.env.production
+!.env.example
+
+# gatsby files
+.cache/
+public
+
+# Mac files
+.DS_Store
+
+# Yarn
+yarn-error.log
+.pnp/
+.pnp.js
+# Yarn Integrity file
+.yarn-integrity

examples/gatsby/README.md

@@ -8,44 +8,20 @@
   Gatsby E-Commerce Starter
 </h1>
 
-This is a Gatsby e-commerce example based on https://www.gatsbyjs.org/docs/ecommerce-tutorial/
+This is a Gatsby e-commerce example based on https://www.gatsbyjs.org/tutorial/ecommerce-tutorial/
 
 ## Setup
 
-### 1. Install the dependencies
+- First, you must enable client-only Checkout in your Stripe Dashboard: https://dashboard.stripe.com/account/checkout/settings
+- Next, create a product and price from the Stripe Dashboard: https://dashboard.stripe.com/test/products
 
-```bash
-npm install
-// or
-yarn
-```
+### Run locally
 
-### 2. Enabling the “Checkout client-only integration” for your Stripe account
+- Make a copy of the example .env file: `cp .env.example .env.development`
+- Add your Stripe API keys to the newly created `.env.development` file.
+- run `npm install`
+- run `gatsby develop`
 
-In this example we're using Stripe Checkout in client-only mode. You need to enable client-only mode in the [Checkout settings](https://dashboard.stripe.com/account/checkout/settings).
+### 💫 Deploy with Netlify
 
-Additionally, you need to set a name for your Stripe account in your [Account settings](https://dashboard.stripe.com/account). You can find more configuration details in the [Stripe docs](https://stripe.com/docs/payments/checkout#configure).
-
-### 3. Create your products in your Stripe Account
-
-To sell your products, you need to create them in your Stripe account using the [Stripe Dashboard](https://dashboard.stripe.com/products) or the [Stripe API](https://stripe.com/docs/api/products/create). This is required for Stripe to validate that the request coming from the frontend is legitimate and to charge the correct amount for the selected product/SKU. Stripe requires every SKU used with Stripe Checkout to have a name: be sure to add one to all of your SKUs.
-
-You will need to create both test and live product SKUs separately in the Stripe Dashboard. Make sure you toggle to "Viewing test data", then create your products for local development.
-
-### 4. Setup the env variables
-
-Create a `.env.development` file:
-
-```bash
-cp .env.example .env.development
-```
-
-Open the newly created `.env.development` file and set your [Stripe API keys](https://dashboard.stripe.com/test/apikeys).
-
-### 5. Run it
-
-```bash
-npm run develop
-// or
-yarn develop
-```
+[![Deploy to Netlify](https://www.netlify.com/img/deploy/button.svg)](https://app.netlify.com/start/deploy?repository=https://github.com/thorsten-stripe/ecommerce-gatsby-tutorial)

examples/gatsby/gatsby-config.js

@@ -13,7 +13,7 @@ module.exports = {
     {
       resolve: `gatsby-source-stripe`,
       options: {
-        objects: ['Sku'],
+        objects: ['Price'],
         secretKey: process.env.STRIPE_SECRET_KEY,
         downloadFiles: false,
       },

examples/gatsby/package.json

@@ -6,16 +6,15 @@
   "author": "@thorwebdev",
   "dependencies": {
     "@stripe/stripe-js": "^1.4.0",
-    "gatsby": "^2.22.11",
-    "gatsby-image": "^2.4.7",
-    "gatsby-plugin-manifest": "^2.4.11",
+    "gatsby": "^2.23.21",
+    "gatsby-image": "^2.2.41",
+    "gatsby-plugin-manifest": "^2.2.41",
     "gatsby-plugin-offline": "^2.2.10",
-    "gatsby-plugin-react-helmet": "^3.3.4",
-    "gatsby-plugin-sharp": "^2.6.11",
-    "gatsby-plugin-stripe": "^1.2.4",
-    "gatsby-source-filesystem": "^2.3.11",
-    "gatsby-source-stripe": "^2.2.2",
-    "gatsby-transformer-sharp": "^2.5.5",
+    "gatsby-plugin-react-helmet": "^3.1.22",
+    "gatsby-plugin-sharp": "^2.6.18",
+    "gatsby-source-filesystem": "^2.1.48",
+    "gatsby-source-stripe": "^3.1.1",
+    "gatsby-transformer-sharp": "^2.3.14",
     "prop-types": "^15.7.2",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",

examples/gatsby/src/components/CartOverview.js

@@ -18,7 +18,7 @@ const Cart = () => {
   const [loading, setLoading] = useState(false)
   /* Gets the totalPrice and a method for redirecting to stripe */
   const {
-    totalPrice,
+    formattedTotalPrice,
     redirectToCheckout,
     cartCount,
     clearCart,
@@ -28,7 +28,7 @@ const Cart = () => {
     <div>
       {/* This is where we'll render our cart */}
       <p>Number of Items: {cartCount}</p>
-      <p>Total: {totalPrice()}</p>
+      <p>Total: {formattedTotalPrice}</p>
 
       {/* Redirects the user to Stripe */}
       <button

examples/gatsby/src/components/Products/SkuCard.js

@@ -27,19 +27,19 @@ const buttonStyles = {
 }
 
 const SkuCard = ({ sku }) => {
-  const { incrementItem } = useShoppingCart()
+  const { addItem } = useShoppingCart()
 
   return (
     <div style={cardStyles}>
       <h4>{sku.name}</h4>
       <p>
         Price:{' '}
         {formatCurrencyString({
-          value: sku.price,
+          value: parseInt(sku.price),
           currency: sku.currency,
         })}
       </p>
-      <button style={buttonStyles} onClick={() => incrementItem(sku)}>
+      <button style={buttonStyles} onClick={() => addItem(sku)}>
         ADD TO CART
       </button>
     </div>

examples/gatsby/src/components/Products/Skus.js

@@ -2,42 +2,47 @@ import React from 'react'
 import { graphql, StaticQuery } from 'gatsby'
 import SkuCard from './SkuCard'
 
-const containerStyles = {
+const conatinerStyles = {
   display: 'flex',
   flexDirection: 'row',
   flexWrap: 'wrap',
   justifyContent: 'space-between',
   padding: '1rem 0 1rem 0',
 }
 
-export default () => (
+export default (props) => (
   <StaticQuery
     query={graphql`
-      query SkusForProduct {
-        skus: allStripeSku(sort: { fields: [price] }) {
+      query ProductPrices {
+        prices: allStripePrice(
+          filter: { active: { eq: true }, currency: { eq: "usd" } }
+          sort: { fields: [unit_amount] }
+        ) {
           edges {
             node {
               id
+              active
               currency
-              price
-              attributes {
+              unit_amount
+              product {
+                id
                 name
               }
             }
           }
         }
       }
     `}
-    render={({ skus }) => (
-      <div style={containerStyles}>
-        {skus.edges.map(({ node: sku }) => {
+    render={({ prices }) => (
+      <div style={conatinerStyles}>
+        {prices.edges.map(({ node: price }) => {
           const newSku = {
-            sku: sku.id,
-            name: sku.attributes.name,
-            price: sku.price,
-            currency: sku.currency,
+            sku: price.id,
+            name: price.product.name,
+            price: price.unit_amount,
+            currency: price.currency,
           }
-          return <SkuCard key={sku.id} sku={newSku} />
+          return <SkuCard key={price.id} sku={newSku} />
         })}
       </div>
     )}

examples/gatsby/src/components/layout.js

@@ -34,7 +34,10 @@ const Layout = ({ children }) => (
           <footer>
             <div>
               © 2019, Built by <a href="https://twitter.com/thorwebdev">Thor</a>{' '}
-              with <a href="https://www.gatsbyjs.org">Gatsby</a>
+              with <a href="https://www.gatsbyjs.org">Gatsby</a> | View{' '}
+              <a href="https://github.com/dayhaysoos/use-shopping-cart/tree/master/examples/gatsby">
+                source
+              </a>
             </div>
             <div>
               <a href="https://stripe.com">

examples/gatsby/src/pages/index.js

@@ -20,9 +20,10 @@ const CartExample = () => (
       <a href="https://use-shopping-cart.netlify.app/">use-shopping-cart</a>
     </h2>
     <CartProvider
+      mode="client-only"
       stripe={stripePromise}
-      successUrl={`http://localhost:8000/page-2/`}
-      cancelUrl={`http://localhost:8000/`}
+      successUrl={`${window.location.origin}/page-2/`}
+      cancelUrl={`${window.location.origin}/`}
       currency="USD"
       allowedCountries={['US', 'GB', 'CA']}
       billingAddressCollection={true}

examples/gatsby/src/pages/page-2.js

@@ -8,7 +8,7 @@ const SuccessPage = () => {
   return (
     <Layout>
       <SEO title="Payment Success" />
-      <h1>Sucess!</h1>
+      <h1>Success!</h1>
       <Link to="/">Shop again</Link>
     </Layout>
   )