A Shopify Checkout Example

Shopify Checkout

import React, { Fragment, FunctionComponent, useState, useEffect } from 'react'
import { Box, Grid, Message, Button } from 'theme-ui'

import { Client } from 'shopify-buy'

import { Loader } from '../loader'
import { Confetti } from '../confetti'

interface ICheckoutProps {
  /** Shopify Buy client */
  shopify: Client
  /** Used to create discount in Gatsby Function */
  shopifyId: string
  /** The storefrontId of the product */
  storefrontId: string
}

export const Checkout: FunctionComponent<ICheckoutProps> = ({
  shopify,
  shopifyId,
  storefrontId,
}) => {
  const [isLoading, setIsLoading] = useState(true)
  const [hasError, setHasError] = useState(false)
  const [webUrl, setWebUrl] = useState(null)

  const handleClick = () => {
    window.open(webUrl, '_self')
  }

  const createCheckout = async (discountCode: string) => {
    // console.log('// 3 storefrontId: ', storefrontId)

    // console.log('// 4 creating checkout ...')
    const checkout = await shopify.checkout.create()

    // console.log('// 5 checkout created: ', checkout.id)

    // console.log('// 6 creating cart ...')
    const cart = await shopify.checkout.addLineItems(checkout.id, [
      {
        variantId: storefrontId,
        quantity: 1,
      },
    ])

    ;(shopify as any).checkout.addDiscount(checkout.id, discountCode)

    // console.log('// 7 cart created: ', (cart as any).webUrl)
    setIsLoading(false)
    setWebUrl((cart as any).webUrl)
  }

  useEffect(() => {
    // console.log('// 1 fetching discount code ...')
    fetch('/api/create-discount', { method: 'POST', body: shopifyId })
      .then((response) => {
        if (response.status >= 200 && response.status < 299) {
          return response.json()
        } else {
          throw Error('error')
        }
      })
      .then((response) => {
        // console.log('// 2 discount code: ', response.discount_code)
        createCheckout(response.discount_code)
      })
      .catch((error) => {
        console.log(error)
        setHasError(true)
      })
  }, [])

  return (
    <Grid>
      {hasError ? (
        <Message variant="error">SCE1 | Oops! There’s been an error</Message>
      ) : (
        <Fragment>
          {isLoading ? (
            <Box variant="buttons.primary">
              <Loader />
            </Box>
          ) : (
            <Fragment>
              <Message variant="primary">
                Congratulations - Checkout to claim your free bottle!
              </Message>

              <Button onClick={handleClick}>
                <Confetti confetti={!isLoading}>Checkout</Confetti>
              </Button>

              <Box
                as="ul"
                variant="styles.ul"
                sx={{ color: 'grey', fontSize: 0 }}
              >
                <Box as="li">
                  Offer cannot be used with any other discount code or sale.
                </Box>
                <Box as="li">
                  Maximum two bottles per household (ie mailing address). If a
                  mailing address has already been used to win/claim two 500
                  Bottles bottles, any future orders will be cancelled.
                </Box>
                <Box as="li">
                  Please allow up to eight weeks for your bottle to arrive.
                </Box>
                <Box as="li" sx={{ color: 'error' }}>
                  Discount codes are unique to your win. Attempting to reuse or
                  share your discount code will result in your order being
                  cancelled.
                </Box>
              </Box>
            </Fragment>
          )}
        </Fragment>
      )}
    </Grid>
  )
}