text: import React, { Component } from "react"
  import { graphql, StaticQuery } from "gatsby"
  import SkuCard from "./SkuCard"
  const conatinerStyles = {
    display: "flex",
    flexDirection: "row",
    flexWrap: "wrap",
    justifyContent: "space-between",
    padding: "1rem 0 1rem 0",
  }
  
  class Skus extends Component {
    // Initialise Stripe.js with your publishable key.
    // You can find your key in the Dashboard:
    // https://dashboard.stripe.com/account/apikeys
    state = {
      stripe: window.Stripe("pk_test_qOUT7QyfVVOJlWXtnbzzZ9Tn", {
        betas: ["checkout_beta_4"],
      }),
    }
    render() {
      return (
        <StaticQuery
          query={graphql`
            query SkusForProduct {
              skus: allStripeSku {
                edges {
                  node {
                    id
                    currency
                    price
                    attributes {
                      name
                    }
                    image
                  }
                }
              }
            }
          `}
          render={({ skus }) => (
            <div style={conatinerStyles}>
              {skus.edges.map(({ node: sku }) => (
                <SkuCard key={sku.id} sku={sku} stripe={this.state.stripe} />
              ))}
            </div>
          )}
        />
      )
    }
  }
  
  export default Skus
  