How to prevent a user from completing checkout if the auto-renew checkbox is not checked

In the below example, you can condition the Complete purchase button to be greyed out unless the user ticks the checkbox Automatically renew my subscription when the time comes in checkout.

This will show a mock button that is not clickable unless the user ticks this checkbox. Afterward, the unclickable mock button will be replaced with the default Complete purchase button. All the changes need to be done in the Payment components template as shown below:

1. Edit the template as shown in this example. This needs to be changed for every payment provider you are using, in the <div class="footer-modal"> section:

   HTML

   <div class="footer-modal">
      <div class="auto-renew-purchase" ng-show="isSelectedTermAutoRenewChoiceAvailable()">
         <input class="auto-renew-purchase-checkbox" type="checkbox"
            ng-model="input.autoRenew" id="auto_renew" ng-checked="false" onchange="checkboxChange(this)"/>
         <label class="auto-renew-purchase-label" for="auto_renew">
            <t>Automatically renew my subscription when the time comes.</t>
         </label>
      </div>
      <div  ng-show="isConfirmStepEnabled()" class="complete-purchase-button confirm_real_button"
         goto-confirmation-button
         title="{{'Complete Purchase' | t}}" style="display:none;"></div>
      <div ng-show="!isConfirmStepEnabled()" class="complete-purchase-button confirm_real_button"
         complete-purchase-button 
         title="{{'Complete Purchase' | t}}" style="display:none;"></div>
      <div id="confirm_fake_button" class="complete-purchase-button">
         <a class="button goto-confirmation" style='background-color:grey;'>Complete Purchase</a>
      </div>
   </div>
   

2. Add this code to the bottom of the Payment components template:

   HTML

   <script>
   function checkboxChange(val) {
     if(val.checked){
       document.getElementsByClassName('confirm_real_button')[0].style.display = 'initial'; 
       document.getElementsByClassName('confirm_real_button')[1].style.display = 'initial'; 
       document.getElementById('confirm_fake_button').style.display = 'none';
     }
     if(!val.checked){
       document.getElementById('confirm_fake_button').style.display = 'initial'; 
       document.getElementsByClassName('confirm_real_button')[0].style.display = 'none';
       document.getElementsByClassName('confirm_real_button')[1].style.display = 'none';
    }
   }
   </script>
   

3. If needed, you can adjust the text Automatically renew my subscription when the time comes and format it as you wish.

Last updated: June 26, 2026