#152 - OTP Verification via WhatsApp in Webflow v0.1

<!-- 💙 MEMBERSCRIPT #152 v1.0 💙 - OTP VERIFICATION VIA WHATSAPP IN WEBFLOW -->
<script>
  document.addEventListener("DOMContentLoaded", function () {
    const phoneInput = document.querySelector('[data-ms-code="phone-number"]');
    const form = phoneInput?.closest("form");
    const submitBtn = form?.querySelector('[type="submit"]');

    let isVerified = false;
    let originalMsFormValue = "signup"; // update this if your form uses another Memberstack action

    if (phoneInput && form && submitBtn && window.$WhatsAuthForm) {
      // Temporarily disable Memberstack
      form.removeAttribute("data-ms-form");

      // Create error message
      const errorMsg = document.createElement('div');
      errorMsg.style.color = 'red';
      errorMsg.style.marginTop = '8px';
      errorMsg.style.display = 'none';
      errorMsg.textContent = '⚠️ Please verify your phone number via WhatsApp.';
      phoneInput.parentNode.appendChild(errorMsg);

      // Initially disable submit
      submitBtn.disabled = true;
      submitBtn.style.opacity = 0.6;
      submitBtn.style.cursor = 'not-allowed';

      // Init WhatsAuth
      window.$WhatsAuthForm.init({
        inputSelector: '[data-ms-code="phone-number"]',
        apiKey: "k07Zj8EwdAIzHzLcLPQh-5jCuREbSKXG", //REPLACE WITH YOUR API KEY
        placeholder: phoneInput.getAttribute("data-ms-placeholder") || "",
        primaryColor: phoneInput.getAttribute("data-ms-primary-color") || "",
        secondaryColor: phoneInput.getAttribute("data-ms-secondary-color") || "",
        btnText: phoneInput.getAttribute("data-ms-btn-text") || ""
      });

      // Watch for success class from WhatsAuth
      const observer = new MutationObserver(() => {
        if (phoneInput.classList.contains("whatsauth-success") && !isVerified) {
          isVerified = true;

          // Enable submit
          submitBtn.disabled = false;
          submitBtn.style.opacity = 1;
          submitBtn.style.cursor = 'pointer';

          // Hide error
          errorMsg.style.display = 'none';

          // Re-enable Memberstack
          form.setAttribute("data-ms-form", originalMsFormValue);
        }
      });

      observer.observe(phoneInput, { attributes: true, attributeFilter: ["class"] });

      // Final form safeguard
      form.addEventListener("submit", function (e) {
        if (!isVerified) {
          e.preventDefault();
          errorMsg.style.display = 'block';
        }
      });

      submitBtn.addEventListener("click", function (e) {
        if (!isVerified) {
          e.preventDefault();
          errorMsg.style.display = 'block';
        }
      });
    }
  });
</script>