# BigCommerce Checkout Redirect

{% hint style="info" %}
If using CheckoutChamp hosted pages then follow these [instructions](https://help.checkoutchamp.com/funnel-builder/redirect-storefront-to-checkoutchamp/bigcommerce-plugin/bigcommerce-checkout-redirect)
{% 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="https://3790748257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT43PzcNjyZtWby9yrGd3%2Fuploads%2FsnCdhRGXZh8TfRsgFV9h%2Fimage.png?alt=media&#x26;token=90b05bfa-f27e-4a8e-a931-846a15975775" 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;