This article covers how to add a terms of service to your checkout flow.


1. Make sure that you've added a page to your site called "terms-and-conditions.html"


2. Add an javascript file in the js directory called "checkout.js"

$("#checkout_form .cta button").text("Pay Now");

$("<p class='disclaimer'>By clicking 'Pay Now' you consent to us charging your card for the subscription level you have selected. We will continue to charge your card unless you cancel your subscription with us.</p><input type='checkbox' name='terms' /> I agree to the <a href='/terms-and-conditions'>terms and conditions</a>").insertBefore("#checkout_form .cta");

$("#checkout_form .cta button").prop('disabled', true);

$('#checkout_form input[name=terms]').click(function() {
var $this = $(this);
if($this.is(":checked")) {
console.log("Checked");
$("#checkout_form .cta button").prop('disabled', false);
} else {
$("#checkout_form .cta button").prop('disabled', true);
}
});

3. Edit checkout.html and add this code to include your new checkout.js file.

{% block page_javascript %}
{{ 'js/checkout.js' | asset_url | javascript_tag }}
{% endblock %}
One important note on this step! If your checkout page already contains a 'block page_javascript' then simply include this code one line above the 'endblock' statement:
{{ 'js/checkout.js' | asset_url | javascript_tag }}