Recurring Products

This article explains how to configure your BigCommerce cart to redirect to a Checkout Champ checkout when you have an option at checkout to purchase a recurring product.

Only follow this article if your checkout and upsell flow is finished inside of Checkout Champ and you are ready to start sending the BigCommerce customers to your Checkout Champ checkout page

This article assumes the recurring products are setup in BigCommerce using product customizations. Please contact your Account Manager if your store uses a different method.

A product SKU is required on each product in BigCommerce to redirect checkout. Products with variations must have a SKU on each variation. Products without variations must have a SKU on the product.

It is required to have separate CheckoutChamp campaign products for the One-Time option and for the Recurring option.

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

Redirect Checkout

• 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/carts?include=lineItems.digitalItems.options,lineItems.physicalItems.options',
                    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 productOptions = lineItems[index].options;
                    				var subscriptionOptionName = '';
                            		$.each(productOptions, function(key,valueObj){
                                        subscriptionOptionName = valueObj.value;
                                    });
                    				var sku = lineItems[index].sku;

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

                                    if (subscriptionOptionName == 'Every 1 month') {
                                        urlData.push(productId + '|Delivery every 30 Days, Charge every 30 Days|:' + lineItems[index].quantity);
                                    } else if (subscriptionOptionName == 'Every 2 months') {
                                        urlData.push(productId + '|Delivery every 60 Days, Charge every 60 Days|:' + lineItems[index].quantity);
                                    } else {
                                        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.

• Adjust lines 36 and 38 to match your customization values. Add/Remove additional IF statements as needed to match your values.

• Change the numbers on lines 37 and 39 to reflect your actual billing and delivery options

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

• Save and apply the theme changes

• Test the redirect

Accessing Your Checkout URL:

Select the Settings option on your Checkout Champ checkout page:

This will open the page configuration panel on the right side of the builder.

Define the Published Page Name (slug) for your checkout page. Tab off the field to save.

At the bottom, mark this checkout page as the Default Page.

Then close the panel and Publish the funnel.

Select the page Settings once more:

Copy the entire Live URL and replace you.must.define.a.checkout.url in the code snippet above.