{% load i18n %}
{# Square Web Payments SDK card form. Tokenises the card client-side into a
   single-use source_id (nonce) posted as `square_source_id`. No card data
   touches our backend. #}
<div id="square-card-container"></div>
<input type="hidden" name="square_source_id" id="square_source_id">
<script src="{% if environment == 'production' %}https://web.squarecdn.com/v1/square.js{% else %}https://sandbox.web.squarecdn.com/v1/square.js{% endif %}"></script>
<script>
(async function () {
  if (!window.Square) return;
  const payments = window.Square.payments("{{ application_id }}", "{{ location_id }}");
  const card = await payments.card();
  await card.attach("#square-card-container");
  const form = document.querySelector("form");
  form && form.addEventListener("submit", async function (e) {
    if (document.getElementById("square_source_id").value) return; // already tokenised
    e.preventDefault();
    const result = await card.tokenize();
    if (result.status === "OK") {
      document.getElementById("square_source_id").value = result.token;
      form.submit();
    } else {
      alert("{% trans 'Card could not be validated, please check the details.' %}");
    }
  });
})();
</script>