Integrate custom order form with Shopify Checkout

Retired Boards Appdev Custom Storefronts
1

I am new to using Shopify APIs. I am trying to create a custom order form (something like this - https://getchongcbd.com/good-vibes-cart/) in builder.io page builder (https://exploreforia.com/trial), where the user will select one of the 2 products; enter shipping details in a form. On submit, these details should be sent to the Shopify checkout page and s/he should be directed to the checkout page showing all these details. For example, it can be any of these pages - https://prnt.sc/e9ng-P83fJ9s or https://prnt.sc/bp63GawcKUS-

Here is some of the code I have written on the Submit button.

event.preventDefault();
const userName = event.target[0].value; 
const email = event.target[1].value; 
const productId = event.target[2].value; 

alert(userName);
alert(email);
alert(productId);

// Example code to create a Shopify checkout using the Fetch API
const createShopifyCheckout = async () => {
  const shopifyAPIEndpoint = 'https://koryart.myshopify.com/admin/api/2023-07/checkouts.json';

  try {
    const response = await fetch(shopifyAPIEndpoint, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'X-Shopify-Storefront-Access-Token': '0f71xxxxxxxxxxxxxxxxxxxx5530', // Replace with your Shopify access token
      },
      body: JSON.stringify({
        // Include the line items and other necessary data for your order
        lineItems: [
          {
            variantId: productId,
            quantity: 1,
          },
          // Add more items as needed
        ],
      }),
    });

    if (response.ok) {
      const data = await response.json();
      alert(data);
      const checkoutUrl = data.data.checkoutCreate.checkout.webUrl;
      alert(checkoutUrl);
      // Now you can redirect the user to the checkout URL
      window.location.href = checkoutUrl;
    } else {
      console.error('Failed to create Shopify checkout:', response.statusText);
    }
  } catch (error) {
    console.error('An error occurred:', error);
  }
};

// Call the function when the form is submitted
document.getElementById('your-form-id').addEventListener('submit', (e) => {
  e.preventDefault();
  createShopifyCheckout();
});

This code doesn’t do anything and doesn’t go anywhere.

I am not sure I am using the correct API / mutant as this API only accept product information whereas i want to send both product as well as shipping information such as name, email, address, city, state, zipcode, etc.

Can someone help me to figure out whether I am using the correct API or where am I erring?

Thanks in advance.

Ketan Shah

2

Hi Ketan,

The code you’ve written is correct for creating a checkout with a line item, but it doesn’t include customer or shipping information. The Shopify Storefront API allows you to create a checkout with line items, but it doesn’t allow you to include customer or shipping information directly. This information can only be added once the customer is redirected to the Shopify checkout page.

Here’s how it works:

  1. You create a checkout using the Storefront API, specifying the line items.
  2. Shopify returns a checkout URL.
  3. You redirect the customer to this checkout URL.
  4. The customer enters their shipping details, and completes their purchase.

However, if you want to pre-fill the checkout with customer information, you could consider creating a customer first via the Admin API. Then, you can associate the checkout with the customer by their email.

Here’s an example of how you can use the mutation to create a customer:

fetch('https://koryart.myshopify.com/admin/api/2023-07/customers.json', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'X-Shopify-Access-Token': 'your-private-app-access-token'  // Use your private app access token
  },
  body: JSON.stringify({
    "customer": {
      "first_name": "Steve",
      "last_name": "Lastnameson",
      "email": "steve.lastnameson@example.com",
      "phone": "+15142546011",
      "verified_email": true,
      "addresses": [
        {
          "address1": "123 Oak St",
          "city": "Ottawa",
          "province": "ON",
          "phone": "555-1212",
          "zip": "123 ABC",
          "last_name": "Lastnameson",
          "first_name": "Mother",
          "country": "CA"
        }
      ]
    }
  })
})

Finally, it’s important to note that even though the customer is created and the checkout is associated with the customer’s email, the customer will still need to enter their shipping address and payment information on the Shopify checkout page.

I hope this helps! If you have more questions, feel free to ask.

3

Hey Liam,

Thanks for your prompt reply.

Looking at this limitation, if my code is correct for just adding a line
item and redirects the user to the checkout page, any idea why it is
not working?

If you look at this sample page - exploreforia.com/trial, on selecting a
product and clicking on the Submit button, nothing happens. I think it is
failing somewhere. It is not getting a successful response and hence it is
not redirecting the user to the Checkout web url.

Can you help with this?

Best regards
Ketan Shah