BigCommerce Checkout Redirect

This article provides the necessary steps to establish the BigCommerce Checkout Redirect

If using CheckoutChamp hosted pages then follow these instructions

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.

External Checkout (Direct API) Configuration

To process your BigCommerce 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 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

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.

Redirect Checkout

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

• Copy the below code Snippet

<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>

• 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