...
    "react-twitter-embed": "^3.0.3",
    "rehype-react": "^6.1.0",
    "shopify-buy": "^2.11.0"
  },
  ...

import React from 'react'
import Sidebar from '../Sidebar'
import './style.scss'

//shopify-buyプラグインからClientをimportします。
import Client from 'shopify-buy'

class ProductTemplateDetails extends React.Component {

  render() {

    const { product } = this.props.pageContext

    //ここから決済機能を実装します。
    async function checkout () {
      // build a client
      const client = Client.buildClient({
        storefrontAccessToken: process.env.GATSBY_SHOPIFY_STOREFRONT_TOKEN,
        domain: `${process.env.GATSBY_SHOP_NAME}.myshopify.com`,
      })
      // create a checkout
      const checkout = await client.checkout.create()
      window.open(checkout.webUrl)
    }
    //決済機能の実装はここまでです。
    //最後に、BuyボタンのonClickにcheckoutを設定します。

    return (
      <div>
        <div className="content">
          <div className="content__inner">
            <div>
              <img src={product.images[0].originalSrc} alt={product.handle} />
              <h2 className="productDetail_title">{product.title}</h2>
              <div className="productDetail_description">{product.description}</div>
              
              {/* ここにonClick={checkout}を設定します。 */}
              <button onClick={checkout}>Buy for €{product.priceRange.minVariantPrice.amount}</button>
            </div>
          </div>
        </div>
        <Sidebar {...this.props} />
      </div>
    )
  }
}

export default ProductTemplateDetails

  ...
  async function checkout () {
    // build a client
    const client = Client.buildClient({
      storefrontAccessToken: process.env.GATSBY_SHOPIFY_STOREFRONT_TOKEN,
      domain: `${process.env.GATSBY_SHOP_NAME}.myshopify.com`,
    })
    // create a checkout
    const checkout = await client.checkout.create()
    window.open(checkout.webUrl)
  }
  ...

...
//こちらは、Shopifyのprivate appのページに表示されている「Storefront access token」です。
GATSBY_SHOPIFY_STOREFRONT_TOKEN=xxxx1234567890zxcvbn
GATSBY_SHOP_NAME=gatsbytutorial

...
gatsby-starter-lumen.iml
.env*

...
button {
  background: none;
  background:#000080;
  border: 0;
  border-radius: 4px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.1),0 2px 4px 0 rgba(14,30,37,.12);
  color: #fff;
  cursor: pointer;
  display: inline-block;
  font-family: inherit;
  font-size: .9rem;
  font-weight: 500;
  line-height: 1.618em;
  outline: 0;
  padding: .382em 1em;
  position: relative;
  text-align: center;
  text-decoration: none;
  text-shadow: none;
  transition: all .15s ease;
  vertical-align: middle;
  z-index: 1;
}

button:hover {
  background-color:#0000FF;
  color:#fff;
  text-decoration: none;
}

kinnikumegane@Kinnikus-MacBook-Air tutorial % git add .
kinnikumegane@Kinnikus-MacBook-Air tutorial % git commit -m "added checkout function"
kinnikumegane@Kinnikus-MacBook-Air tutorial % git push -u origin master