Support

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

NOTE: This article only applies to the new designer. Not sure which designer you have? Check here.

1. Use the Add a Page function to create a page titled terms_and_conditions.

(Note: Though the options are not selected here, you are more than welcome to add a link to the terms and conditions page in the header and/or footer.)

You are now able to select your new page through the designer, and edit it like any other page.

2. From here, we'll need to use the code editor. Under components -> checkout -> Checkout, add a new file called component.js and copy the following code exactly:

<script>$("#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);
    }
});</script>

And that's it! Your checkout page now has a terms and conditions requirement!