This article will assist you if you have a checkbox on your cart page for Terms & Conditions or another business rule that needs to be checked before your users can continue to the checkout page.

Before you start

• This guide requires custom code and is not supported by Recharge as per our design and integration policy. If you require further assistance, visit the Recharge Agency Partners Directory.
• This guide assumes your site already contains a Terms and Conditions checkbox, and that you are familiar with Shopify themes, HTML, and JavaScript. If you're looking for a guide to include the Terms and Conditions checkbox, visit the Shopify guide.

Step 1 - Locate ID value

Once you've added a checkbox requirement, you will need to ensure that Recharge checks for acknowledgment requirements before redirecting your customers to the checkout flow.

You will need to find the ID tag of the checkbox input. You can do this from your browser, or by navigating to your cart.liquid file in Shopify. For this example, you can see that the ID is agree. Take note of this ID value.

Step 2 - Search for cartSubmit(

If you have the subscription-cart-footer.liquid version 3.2 or newer installed, you can search the subscription-cart-footer.liquid file for cartSubmit( to quickly locate the line of code that needs to be modified. 

This line of code will submit the cart if all other required checks were passed successfully. Before this line, you will need to add a new check which will validate your terms and conditions input.

Step 3 - Add terms and conditions check

You will want to set up a check to see if your terms and conditions were agreed to. You can add the check by adding the following code above thecartSubmit(line identified in Step 2:

if (!document.querySelector('#agree:checked')) {
    alert('You must accept the terms of purchase to proceed to checkout');
    return false;
}

The code will search the document for the input using the ID tag and value #agree. It also adds a pseudo-selector :checked to see if the box has been checked. If this pattern is not found, it indicates that the customer has not accepted the terms and conditions and an alert is shown to the customer to instruct on checking the box before proceeding. return false is used to prevent the rest of the script from running. 

Step 4 - Save your work

Save the file and test the checkout to confirm the update was successful.

This should check the input before jumping into the checkout page. If you require further assistance, visit the Recharge Agency Partners Directory.

Older versions of the snippet

In older versions of the snippet, you might find code similar to this example:

$(document).on('click', checkout_button_selectors, function(e) {
    if (!$(this).data('disable-recharge')) {
        e.preventDefault();
        var submit_form = true;
        reChargeSaveCartNotes(submit_form);
    }
});

In this case, you'll want to add the following code to add a terms and conditions check:

$(document).on('click', checkout_button_selectors, function(e) {
    if (!$(this).data('disable-recharge')) {
        e.preventDefault();
        var submit_form = true;

        if (!$('#agree').is(':checked')) {
            alert('You must accept the terms of purchase to proceed to checkout');
            return false;
        }

        reChargeSaveCartNotes(submit_form);
    }
});