Checkout webUrl Help

[CaroMen]

I currently have the following code to display the products in my Shopify store. This is in my Store.js file which simply grabs information from the Shopify store.

// @jsx jsx
import { jsx } from 'theme-ui'
import React from 'react';
import { StaticQuery, graphql } from 'gatsby';
import { ProductCard } from '../components/Product-card';

export const Store = () => {
    return (
        <StaticQuery
            query={graphql`
                { allShopifyProduct {
                    nodes {
                        title
                        description
                        productType
                        variants {
                            image {
                                localFile {
                                    childImageSharp {
                                        fluid(maxHeight: 1600, maxWidth: 900, cropFocus: CENTER, fit: COVER) {
                                            ...GatsbyImageSharpFluid_withWebp
                                            # srcSet
                                        }
                                    }
                                }
                            }
                            price
                        }
                    }
                }
            }
        `}

            render={data => (
                <>
                    <div sx={{
                        mx: 'auto', maxWidth: '80vw', display: 'grid', padding: '40px',
                        gridGap: 4,
                        gridTemplateColumns: [
                            'auto',
                            '1fr 1fr 1fr 1fr'
                        ], background: 'white'
                    }}>
                        {data.allShopifyProduct.nodes.map(product => (
                            <div>
                                <ProductCard key={product.id} product={product} />

                            </div>
                        ))}
                    </div>
                </>
            )}
        />
    )
};

Then I have this product card file that handles the frontend part using the information from the Store.js file:

// @jsx jsx
import { jsx } from 'theme-ui'
import React, { useContext, useEffect } from 'react';
import Image from 'gatsby-image';

const BuyButton = ({ variants }) => {
    const price = variants[0].price;
    // const formatted = new Intl.NumberFormat('en-US', price.currencyCode, { style: currency, currency: price.currencyCode }).format(price.amount);

    return <button sx={{ position: 'absolute', width: '100%', color: 'white', background: 'black', borderRadius: '8px', border: 'none', padding: '13px', margin: 'auto', '&:hover': { bg: '#454C5F', boxShadow: '1px 1px 2px rgba(#fff, .2)', textDecoration: 'none', transition: 'all 250ms linear' } }}>{variants.length > 1 ? `Buy for ${`$` + price}` : `Buy for ${`$` + price}`} </button>
    // if (variants.length > 1) {
    //     return <button>Buy for {variants[0].price}</button>
    // }
}

export const ProductCard = ({ product }) => {


    return (


        <div sx={{
            position: 'relative', background: 'white', border: '5px solid white', borderRadius: '15px', mb: '1rem'
        }}>
            <Image sx={{
                maxWidth: '100%'
            }} fluid={product.variants[0].image.localFile.childImageSharp.fluid} alt={product.title} />
            <p sx={{ textAlign: 'center', fontSize: '20px', mt: '.2rem' }}>{product.productType}</p>
            <h2 sx={{ mt: '.5rem', fontSize: '40px', textAlign: 'center' }}>{product.title}</h2>
            <p sx={{ textAlign: 'center', fontSize: '25px', mt: '.2rem' }}>{product.description}</p>
            <p sx={{ textAlign: 'center', fontSize: '25px', mt: '.2rem' }}>{product.price}</p>
            <BuyButton variants={product.variants} />
        </div >
    )
}

export default ProductCard;

I can't seem to figure out what else I need to create a button that sends the user straight to the checkout.  I guess I'm confused on how I can query for the checkout based on what I already have done. Do I have to create a new file or can I build on to what I already have? I don't have any context folder containing any information building a client or anything.