Error: The checkoutCreate mutation failed due to an unknown error.

Highlighted
New Member
5 0 0

I keep getting this error "Error: The checkoutCreate mutation failed due to an unknown error." and I'm not sure why. Store name is correct, storefront Access Token is correct. This is my code:

async function buyFurniture(shopifyId) {
    const checkout = await client.checkout.create();
    const res = await client.checkout.addLineItems(checkout.id, [{
        variantId: shopifyId,
        quantity: 1
    }])
    console.log(checkout.webUrl);
    navigate(checkout.webUrl);
}

 

and I'm doing this to send user to checkout:

<BuyButton variants={product.variants} onClick={() => buyFurniture(variant.shopifyId)} />

 

Any clue how I can fix this?

0 Likes
Highlighted
Shopify Partner
667 47 134

I quick search through the board shows this similar post --> https://community.shopify.com/c/Shopify-APIs-SDKs/Consfusion-with-storeFrontAccessToken/m-p/807789. Did you read through it and if not, please verify that you followed those recommended steps.

Hope this helps! 

0 Likes
Highlighted
New Member
5 0 0

I did read through it and I followed the steps provided. I am using the storefront Access Token but I still get the same error.

0 Likes
Highlighted
Shopify Partner
667 47 134

I'd suggest tracing the actual API request to see what's being passed onto Shopify. Also, perhaps log a few of these values to the console. To ensure they are valid. Like this:

async function buyFurniture(shopifyId) {
    console.log(shopifyId);
    const checkout = await client.checkout.create();
    console.log(checkout.id);
    const res = await client.checkout.addLineItems(checkout.id, [{
        variantId: shopifyId,
        quantity: 1
    }])
    console.log(checkout.webUrl);
    navigate(checkout.webUrl);
}

 

And you have verified that the app is properly linked with Shopify with the appropriate access permissions?

0 Likes
Highlighted
New Member
5 0 0

So I did what you said and I get undefined for the shopifyId and I'm not sure why. This is my graphql that I have placed in a different file:

// @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
                            id
                            shopifyId
                        }
                        shopifyId
                        id
                    }
                }
            }
        `}

            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>
                </>
            )}
        />
    )
};

 

This is my Product-card file which is where the buyFurniture function is located:

// @jsx jsx
import { jsx } from 'theme-ui'
import React from 'react';
import Image from 'gatsby-image';
import Client from 'shopify-buy'
import { navigate } from '@reach/router';

const client = Client.buildClient({
    storefrontAccessToken: "e7fd1b5eef627c5aeac4ee7be2bc6801",
    domain: 'https://modernbyfrancis.myshopify.com/'
})

async function buyFurniture(shopifyId) {
    console.log(shopifyId);
    const checkout = await client.checkout.create();
    // console.log(checkout.id);
    const res = await client.checkout.addLineItems(checkout.id, [{
        variantId: shopifyId,
        quantity: 1
    }])
    console.log(checkout.webUrl);
    navigate(checkout.webUrl);
}

console.log(client.checkout);

const BuyButton = ({ variants }) => {
    const price = variants[0].price;

    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' }
    }} onClick={() => buyFurniture(variants.shopifyId)} >
        {variants.length > 1 ? `Buy for ${`$` + price}` : `Buy for ${`$` + price}`}
    </button>
};

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

    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} onClick={() => buyFurniture(product.shopifyId)} />
        </div >
    )
}

export default ProductCard;

 

I checked that the products were each selected on the sales channels section. I assume the app is properly linked with Shopify since I am displaying the products through the graphql as well

0 Likes
Highlighted
Shopify Partner
667 47 134

Hmmm...I'm wondering if how you might be referencing the variant. That variant ID is what needs to be passed into your buyFurniture() method. I'd start out on the portion of your code that involves the buy button. The click event handler needs to pull the correct variant ID for the item. Since one product ID can have multiple variant ID's associated with it and so on...

0 Likes
Highlighted
New Member
5 0 0

hmm...I may not be getting the right id. Should it be the shopifyId or just the id in the variant? 

0 Likes
Highlighted
Shopify Partner
667 47 134

I don't know what you mean by shopifyId, but the variant ID is definitely what you need to be passing into your function that adds to the cart as a line item. If you reference the documentation that is provided for the tools you are using there should be examples of how to make this work?

0 Likes