Mandatory checkbox when pressing button

Question

I’d like to place a checkbox obligatory html below the payment button of my website, I would like the person to be able to continue the purchase only if he or she marks the terms of use, otherwise he or she notifies that the person has not checked the checkbox. I’ve tried everything, I can’t, I’m new to the field.

My buy button:

            <button
         onclick="comprar('LINK DE PAGAMENTO')"
         class="plans-button"
         klickart-edit-not-highlight=""
         klickart-edit-link-type="default"
         klickart-edit-link-href-klickbox="#"
         klickart-edit-link-href-faq-question="#"
         id="klickart-linkikl6qk5g77k00"
         style="background-attachment: scroll; background-color: rgb(255, 64, 64);"
        >
         <span><b class="medium-b">QUERO ESSE PLANO!</b></span>
        </button>

However I would like to put the checkbox below the button, in this position:

The code of those written below the button is this:

      <footer class="plans-info" id="klickart-collection-2cimijo2l8k000">
   <div class="info-item">
    <span class="icon-footer">
     <svg klickart-edit-icon="svg" enable-background="0 0 512 512" fill="#c0c0c0" viewbox="0 0 512 512">
      <path
       d="M436.064,77.014c-48.238-48.248-112.377-74.809-180.6-74.809c-68.221,0-132.36,26.561-180.599,74.809C26.623,125.25,0.056,189.388,0.056,257.61c0,68.223,26.567,132.36,74.809,180.597c48.238,48.237,112.378,74.807,180.599,74.807c68.223,0,132.362-26.57,180.6-74.807c48.242-48.237,74.809-112.375,74.809-180.597C510.873,189.388,484.305,125.25,436.064,77.014z M490.314,257.61c0,60.436-22.954,115.609-60.594,157.274L98.189,83.355c41.664-37.642,96.837-60.596,157.274-60.596C384.96,22.759,490.314,128.117,490.314,257.61z M20.615,257.61c0-61.677,23.913-117.868,62.938-159.818l331.726,331.733c-41.95,39.024-98.139,62.937-159.815,62.937C125.969,492.462,20.615,387.104,20.615,257.61z"
      ></path>
     </svg>
    </span>
    <span>Cancele seu plano <b class="medium-b">mensal</b> a qualquer momento e sem compromisso.</span>
   </div>
   <div class="info-item">
    <span class="icon-footer">
     <svg klickart-edit-icon="svg" fill="#c0c0c0" viewbox="0 0 512 512">
      <path
       d="M507.4 351.5l-64.6-64.6 10.7-12.3c8.2-9.5 12-25.8 8.7-37.9l-4.3-15.7c-1.6-5.7-1.6-16.5 0-22.2l4.3-15.7c3.3-12.2-0.4-28.4-8.7-37.9l-10.7-12.3c-3.9-4.5-8.6-14.2-9.6-20l-3-16c-2.3-12.4-12.7-25.4-24.2-30.4l-14.9-6.5c-5.4-2.4-13.9-9.1-17.3-13.8l-9.6-13.1c-7.1-9.7-21.6-16.9-33.7-16.9h-0.9l-16.8 0.7c-0.2 0-0.5 0-0.7 0 -6.1 0-15.8-2.3-20.8-5l-14.4-7.7c-5.4-2.9-12.3-4.5-19.4-4.5 -7.1 0-14 1.6-19.5 4.5l-14.3 7.7c-5 2.7-14.6 5-20.7 5 -0.3 0-0.5 0-0.9 0l-16.5-0.7c-0.3 0-0.7 0-1 0 -12.2 0-26.7 7.3-33.8 16.9l-9.6 13.1c-3.5 4.7-11.9 11.5-17.3 13.8l-15 6.5c-11.5 5-22 18.1-24.2 30.4l-3 16c-1.1 5.8-5.8 15.5-9.6 20l-10.6 12.3c-8.2 9.5-12 25.8-8.7 37.9l4.3 15.7c1.5 5.7 1.6 16.5 0 22.2l-4.3 15.7c-3.3 12.1 0.4 28.4 8.7 37.9l10.7 12.4 0.2 0.2L7.8 351.5c-5.9 6-8.3 14.2-6.3 22.1 2 7.9 8 14 16.1 16.5l64.5 19.2 19.2 64.5c3 10 11.8 16.8 22 16.8 6.2 0 12.1-2.5 16.6-7l77.9-78c2.3 0.7 4.3 1.5 5.8 2.3l14.4 7.7c5.4 2.9 12.3 4.4 19.5 4.4 7.2 0 14.1-1.6 19.4-4.4l14.4-7.7c1.6-0.9 3.8-1.7 6.2-2.4l78.1 78.1c4.5 4.5 10.4 7 16.6 7 10.2 0 19-6.7 22-16.7l19.2-64.5 64.5-19.2c8.1-2.4 14.1-8.6 16.1-16.5C515.7 365.7 513.3 357.5 507.4 351.5zM125.1 460.7l-19.8-66.3c-1.1-3.7-4.6-7.3-8.3-8.3l-66.4-19.8 52.2-52.2 1.6 8.9c2.3 12.4 12.7 25.4 24.2 30.4l15 6.5c5.4 2.3 13.8 9 17.3 13.8l9.6 13.1c6.6 9.1 19.9 16 31.6 16.8L125.1 460.7zM278.9 384.8l-14.4 7.7c-1.7 0.9-4.3 1.4-7.1 1.4 -2.8 0-5.5-0.5-7.1-1.4l-14.4-7.7c-1.4-0.7-2.8-1.4-4.2-1.9 -5.9-2.5-13.3-4.5-20.2-5.4 -3.1-0.5-6.1-0.7-8.8-0.7 -0.4 0-0.8 0-1.1 0h-0.6l-16.5 0.7h-0.2c-4.1 0-10.3-3.1-12.6-6.2l-9.6-13.1c-6.2-8.5-18.5-18.3-28.1-22.4l-14.9-6.5c-3.7-1.6-8.2-7.2-8.9-11.1l-3-16c-0.7-3.9-2.2-8.5-4.2-13.3 -3.1-7.4-7.3-14.3-11.4-19l-0.4-0.5 -10.3-11.9c-2.6-3-4.2-10-3.2-13.9l4.3-15.7c2.7-10 2.7-25.8 0-35.9l-4.3-15.7c-1-3.9 0.6-10.9 3.2-13.9l10.6-12.3c6.9-7.9 13.7-22.1 15.6-32.4l3-16c0.7-3.9 5.2-9.5 8.9-11.1l15-6.5c9.6-4.1 21.9-14 28.1-22.4l9.6-13.1c2.3-3.1 8.5-6.2 12.5-6.2h0.3l16.3 0.7c0.6 0 1.2 0.1 1.8 0.1 10.3 0 24.5-3.5 33.1-8l14.3-7.7c1.6-0.9 4.3-1.4 7.1-1.4 2.8 0 5.5 0.5 7.1 1.4l14.4 7.7c8.6 4.6 22.8 8.1 33.1 8.1 0.5 0 0.9 0 1.4 0h0.3l16.6-0.7h0.2c4 0 10.2 3.1 12.5 6.2l9.6 13.1c6.2 8.4 18.5 18.2 28.1 22.4l14.9 6.4c3.7 1.6 8.2 7.2 8.9 11.1l3 16c1.9 10.3 8.7 24.5 15.6 32.4l10.6 12.3c2.6 3 4.2 10 3.2 13.9l-4.3 15.7c-2.7 10.1-2.7 25.9 0 35.9l4.3 15.7c1 3.9-0.6 10.9-3.2 13.9l-10.3 11.8 -0.4 0.5c-6.8 7.9-13.7 22.1-15.6 32.4l-3 16c-0.7 3.9-5.2 9.5-8.9 11.1l-14.9 6.5c-9.6 4.1-21.9 14-28.1 22.4l-9.6 13.1c-2.3 3.1-8.5 6.2-12.5 6.2h-0.4l-16.3-0.7c-0.5 0-1.1 0-1.7 0 -8.7 0-20.4 2.4-29 6.1C281.6 383.4 280.2 384.1 278.9 384.8zM418.2 386c-3.7 1.1-7.2 4.6-8.3 8.3l-19.8 66.4 -57.2-57.2c11.6-0.9 24.6-7.8 31.1-16.8l9.6-13.1c3.5-4.8 11.9-11.5 17.3-13.8l15-6.5c11.5-5 22-18.1 24.2-30.4l1.7-9.3 52.6 52.6L418.2 386z"
      ></path>
     </svg>
    </span>
    <span>Satisfação garantida!</span>
   </div>
  </footer>
 </div>
</section>

Answer 1

Adds the attribute required in the html tag of the field you want to be required

Example:

<form action="#">
<input type="checkbox" name="myName" id="myId" required> Li e Concordo com os Termos de Licensa do Site
<br>
<br>
<input type="submit" value="Enviar">
</form>

I hope I helped