# BigCommerce Checkout Redirect

{% hint style="info" %}
If using CheckoutChamp hosted pages then follow these [instructions](/funnel-builder/redirect-storefront-to-checkoutchamp/bigcommerce-plugin/bigcommerce-checkout-redirect.md)
{% endhint %}

{% hint style="info" %}
It is critical that your products and variants within BigCommerce have a unique sku. Sku is required for the redirect. It cannot be blank on any item. The redirect is a sku-specific redirect.
{% endhint %}

### **External Checkout (Direct API) Configuration** <a href="#external-checkout-direct-api-configuration" id="external-checkout-direct-api-configuration"></a>

To process your BigCommerce cart on an external checkout page, the checkout page must be connected to the CRM API. See [here ](https://apidocs.checkoutchamp.com)for API documentation.

Your page must also evaluate the incoming products from BigCommerce . 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`

&#x20;

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

{% code fullWidth="false" %}

```javascript
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));
}
```

{% endcode %}

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.

### **Redirect Checkout** <a href="#redirect-checkout" id="redirect-checkout"></a>

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

* Login to your BigCommerce store
* ***Make a copy of your existing theme files as a back-up***
  * Navigate to Storefront → My Themes → then click Advanced and select **Make a Copy**

<figure><img src="/files/6hmPClDkRfqDInI79Xca" alt=""><figcaption></figcaption></figure>

* Copy the below code Snippet

{% code fullWidth="true" %}

```javascript
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $('body').delegate('a[href="/checkout"], a#checkout', 'click', function(e){
            e.preventDefault();

            if (!$(this).hasClass('processing')) {
                $(this).addClass('processing').text('Please wait...');

                $.ajax({
                    url: '/api/storefront/cart',
                    success: function(cart) {
                    	var lineItems = cart && cart[0] && cart[0].lineItems && cart[0].lineItems && cart[0].lineItems.physicalItems ? cart[0].lineItems.physicalItems : [];
                    	var urlData = [];
                    	var getUrlData = function(index) {
                    		$.ajax({
                    			url: lineItems[index].url,
                    			dataType: 'html',
                    			success: function(data) {
                    				var $data = $(data);
                    				var customFields = $data.find('.productView-info-name');
                    				var productId = lineItems[index].productId;
                    				var sku = lineItems[index].sku;

                                    customFields.each(function(){
                                        if ($(this).text().trim() === 'ProductID_' + sku + ':') {
                                            productId = $(this).next('.productView-info-value').text();
                                        }
                                    });

                                    urlData.push(productId + ':' + lineItems[index].quantity);

                                    if (index < lineItems.length - 1) {
                                        getUrlData(++index);
                                    } else {
                                        var checkoutUrl = 'you.must.define.a.checkout.url?products=' + urlData.join(';');
                                        console.log(checkoutUrl);
                                        window.location.href = checkoutUrl;
                                    }
                    			}
                    		})
                    	}

                    	if (typeof lineItems === 'object' && lineItems.length > 0) {
                    		getUrlData(0);
                    	}
                    }
                });
            }
        });
    });
</script>
```

{% endcode %}

* Navigate to **Storefront → My Themes → Advanced → Edit Theme Files**.
* Paste the code snippet at the end of /templates/layout/base.html file, before the ending \</body> tag.
* Replace the text ***you.must.define.a.checkout.url*** with the URL of your CRM checkout page.
* Save and apply the theme changes
* Test the redirect

&#x20;


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.checkoutchamp.com/crm/plugins/data-sources/big-commerce/bigcommerce-checkout-redirect.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.