Cart - Add an 'Agree to terms and conditions' checkbox

Store Design
21

Hello, this tutorial is really helpful and I manage to add a required checkbox on my cart page.

However, the “required” field doesn’t prevent the customer to proceed with checkout through the additional checkout buttons (Google Pay, Apple Pay etc). Is there any way to block the user to compile required fields before heading to the quick checkout experience?

Thanks in advance

EDIT: I was able, in the meantime, to disable the buttons until the checkbox is selected:

theme.js

$("#additional-buttons-c").addClass("div-disabled");
$(document).ready(function() {
  $('body').on('click', '[name="agree"]', function() {
    if ($('#agree').is(':checked')) {
      $("#additional-buttons-c").removeClass("div-disabled");
    }
    else {
      $("#additional-buttons-c").addClass("div-disabled");
    }
  });
});

theme.scss.liquid:

.div-disabled {
    pointer-events: none;
    opacity: 0.4;
}

cart template:

{%- if additional_checkout_buttons -%}
<div id="additional-buttons-c" class="additional-checkout-buttons">{{ content_for_additional_checkout_buttons }}</div>
{%- endif -%}