Juste one CGU checkbox

eboutic/templates/eboutic/eboutic_checkout.jinja

@@ -63,16 +63,12 @@
       <form
         method="post"
         action="{{ settings.SITH_EBOUTIC_ET_URL }}"
+        id="bank-form"
+        onsubmit="return validateCgv()"
       >
         <template x-for="[key, value] in Object.entries(data)" :key="key">
           <input type="hidden" :name="key" :value="value">
         </template>
-        <input type="checkbox" value="cgv" required>
-        <label>
-          {% trans  trimmed %}I have read and accept {% endtrans %}
-          <a href="">{% trans %}the general terms and conditions{% endtrans%}</a> 
-          {%trans%}of the student assosiation of UTBM{% endtrans %}</label>
-        <br>
         <input
           x-cloak
           type="submit"
@@ -100,7 +96,13 @@
     {% elif basket.total > user.account_balance %}
       <p>{% trans %}AE account payment disabled because you do not have enough money remaining.{% endtrans %}</p>
     {% else %}
-      <form method="post" action="{{ url('eboutic:pay_with_sith', basket_id=basket.id) }}" name="sith-pay-form">
+      <form
+        method="post"
+        action="{{ url('eboutic:pay_with_sith', basket_id=basket.id) }}"
+        name="sith-pay-form"
+        id="sith-form"
+        onsubmit="return validateCgv()"
+      >
         {% csrf_token %}
         <input
           {% if basket.is_expired %}
@@ -114,5 +116,26 @@
         />
       </form>
     {% endif %}
+
+    <div class="cgv-block">
+      <input type="checkbox" id="cgv" name="cgv" value="1" required>
+      <label for="cgv">
+        {% trans  trimmed %}I have read and accept {% endtrans %}
+        <a href="">{% trans %}the general terms and conditions{% endtrans%}</a>
+        {%trans%}of the student assosiation of UTBM{% endtrans %}
+      </label>
+    </div>
+
+    <script>
+      function validateCgv() {
+        const checkbox = document.getElementById('cgv');
+        if (!checkbox.checked) {
+          checkbox.focus();
+          alert("Please accept the general terms and conditions.");
+          return false;
+        }
+        return true;
+      }
+    </script>
   </div>
 {% endblock %}