SHARE
TWEET

Untitled

a guest Oct 15th, 2019 93 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React, { Component } from "react"
  2. import { graphql, StaticQuery } from "gatsby"
  3. import SkuCard from "./SkuCard"
  4. const containerStyles = {
  5.   display: "flex",
  6.   flexDirection: "row",
  7.   flexWrap: "wrap",
  8.   justifyContent: "space-between",
  9.   padding: "1rem 0 1rem 0",
  10. }
  11.  
  12. class Skus extends Component {
  13.   state = {
  14.     stripe: null,
  15.   }
  16.   componentDidMount() {
  17.     const stripe = window.Stripe(process.env.GATSBY_STRIPE_PUBLIC_KEY)
  18.     this.setState({ stripe })
  19.     console.log("stripe", stripe)
  20.   }
  21.   render() {
  22.     return (
  23.       <StaticQuery
  24.         query={graphql`
  25.           query SkusForProduct {
  26.             skus: allStripeSku {
  27.               edges {
  28.                 node {
  29.                   id
  30.                   currency
  31.                   price
  32.                   attributes {
  33.                     name
  34.                   }
  35.                 }
  36.               }
  37.             }
  38.           }
  39.         `}
  40.         render={({ skus }) => (
  41.           <div style={containerStyles}>
  42.             {skus.edges.map(({ node: sku }) => {
  43.               console.log("skus", skus)
  44.               return (
  45.                 <SkuCard key={sku.id} sku={sku} stripe={this.state.stripe} />
  46.               )
  47.             })}
  48.           </div>
  49.         )}
  50.       />
  51.     )
  52.   }
  53. }
  54. export default Skus
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top