Add Terms and Conditions to Checkout

For Shopify Plus store, add this script to the bottom of your checkout.liquid file. Make sure you update the link to the terms and conditions page and check your checkout console for any errors. Also, test if checkout is stopped if the checkbox is not checked.

{% assign terms_and_conditions_value = "false" %}
{% for attribute in checkout.attributes %}
{% if attribute.first == "terms_and_conditions" %}
{% assign terms_and_conditions_value = attribute.last %}
{% endif %}
{% endfor %}

<script>
(function($) {
$(document).on("page:load page:change", function() {
if (Shopify.Checkout.step === "payment_method") {
$(document).ready(function() {
var newHTML = `
<div class="section section--terms_and_conditions">
<div class="section__content">
<div class="content-box">
<div class="content-box__row">
<div class="checkbox-wrapper">
<div class="checkbox__input">
<input required aria-required="true" class="input-checkbox" aria-controls="section--terms_and_conditions" type="checkbox" value="{{ terms_and_conditions_value }}" name="checkout[attributes][terms_and_conditions]" id="checkout_terms_and_conditions" {% if terms_and_conditions_value == "true" %} checked {% endif %}>
</div>

<label class="checkbox__label content-box__emphasis" for="checkout_terms_and_conditions">
I agree that by making this purchase I am agreeing to <a href="/policies/terms-of-service" target="_blank">Terms of Service</a>
</label>
</div>
</div>
</div>
</div>
</div>
`;

$('.step__footer').before(newHTML);

$('#checkout_terms_and_conditions').click(function() {
if($(this).is(':checked')) {
$(this).val('true');
} else {
$(this).val('false');
}
});
});
}
});
})(Checkout.$);
</script>

Discussion