Shopify Checkout Redirect - Direct API

This article will explain how to retrieve and configure the code necessary to establish the Shopify Checkout Redirect.

This article should only be followed if you are building custom php websites outside of the CheckoutChamp funnel builder. If you are using the CheckoutChamp funnel builder, please follow this article instead: Shopify Checkout Redirect - Standard Cart

External Checkout (Direct API) Configuration

To process your Shopify cart on an external checkout page, the checkout page must be connected to the CRM API. See here for API documentation.

Your page must also evaluate the incoming products from Shopify. The products are passed to the checkout page in one of the following formats:

• for products without variants - combinations of CRM campaign product id and quantity

https://checkout.mysite.com/?products=228:1;277:1;158:1

• for products with variants - combinations of CRM campaign product id, variant detail id, and quantity

https://checkout.mysite.com/?products=228.123:1;277.45:1;158.87:1

Scripting may be added to your checkout page to parse this input and cache it in a product array. Here is one example.

const urlParams = new URLSearchParams(location.search);
if (urlParams.has("products")){
    const urlProducts = urlParams.get("products").split(";");
    for(const product of urlProducts){
        const pos = product.indexOf(".");
        const splitChar = pos > 0 && pos < product.indexOf(":") ? "." : ":";
        const productData = product.split(splitChar);
        myCart[productData[0]] = productData[1];
    }
    sessionStorage.setItem("myCart",JSON.stringify(myCart));
}

When making the Import Order API call, parse myCart into product{i}_id, product{i}_qty, and variant{i}_id (if applicable). Increment {i} for each product, starting with 1.

To redirect the Shopify cart to the checkout page, it is required to manually set the routing on your Shopify cart page.

How to use

• Go to the snippets/ folder and add a "your-cart.js.liquid" snippet.

• Go here. Copy all of the code and paste into the your-cart.js.liquid snippet. Save the snippet.

• Replace the text you.must.define.a.checkout.url with the URL of your CRM checkout page.

• Go to the cart.liquid file and paste this text at the top of the file.

   {%
    include 'your-cart.js' with
      cart: cart
   %}

• Save the cart.liquid file.

Checkout URLs that Contain "?"

• If your checkout page URL contains a"?" follow these steps to ensure the checkout redirect works:

1. Look at this sample checkout URL: https://wordpresskonnekt.online/?page_id=304, notice it contains a"?"

2. Navigate to your cart.liquid file and edit checkout_url to exclude the question mark and what follows it. Save.

   Before: checkout_url:'https://wordpresskonnekt.online/?page_id=304'
   After:  checkout_url:'https://wordpresskonnekt.online/'

3. Go to the konnektive-cart.js.liquid snippet. Find this line near the bottom.

      return self.options.checkoutUrl + '?products=' + urlLineItems;

   Replace the ? with &, and prepend the part that was taken out of the original checkout url (?page_id=304).

      return self.options.checkoutUrl + '?page_id=304&products=' + urlLineItems;

4. Save the snippet.