javascript - 单击按钮后如何在 Stripe 中显示微调器？

Question

我有一个带有 Stripe 元素的网页。一切正常。但我想在点击支付按钮后显示一个微调器，但前提是所有信用卡字段都已完成并经过验证。问题是 Stripe 的客户端 API/结构阻止我使用 javascript 检查这些字段。通过这样做，我可以轻松点击按钮:

$("#btnPay").click(function() {
    // show spinner
});

但我永远不想显示微调器，除非所有信用卡字段都已填写完整。否则当字段仍然为空时，微调器会弹出等等。

Stripe Elements API 中是否有一种方法可以在 Stripe 验证表单之后但在调用 ajax 获取 token 之前注入(inject)启动微调器的 js？

这是我页面的一些部分:

一些js:

<script>
function setOutcome(result) {
    var successElement = document.querySelector('.success');
    var errorElement = document.querySelector('.error');
    successElement.classList.remove('visible');
    errorElement.classList.remove('visible');

    if (result.token) {
        // my ajax here
    } else if (result.error) {
        errorElement.textContent = result.error.message;
        errorElement.classList.add('visible');
    }
}
</script>

HTML 格式:

<form action="//httpbin.org/post" method="POST">
   <input type="hidden" name="token" />
   <div class="group">
      <label>
         <span>Credit Card</span>
         <div id="card-element" class="field"></div>
      </label>
   </div>
   <div class="group">
      <label>
      <span>Name on Card</span>
      <input id="name" name="name" class="field" placeholder="Your name here" />
      </label>
   </div>
   <button type="submit" id="btnPay" style="cursor: pointer; width: 200px; margin-left: 155px;">Pay $115.00</button>
</form>

一些js:

<script>
    var stripe = Stripe('pk_test_3Z8D***********C');
    var elements = stripe.elements();

var card = elements.create('card', {
    hidePostalCode: true,
    style: {
        base: {
            iconColor: '#666EE8',
            color: '#31325F',
            lineHeight: '40px',
            fontWeight: 300,
            fontFamily: 'Helvetica Neue',
            fontSize: '15px',

            '::placeholder': {
                color: '#CFD7E0',
            },
        },
    }
});
card.mount('#card-element');

card.on('change', function (event) {
    setOutcome(event);
});

document.querySelector('form').addEventListener('submit', function (e) {
    e.preventDefault();

    var options = {
        name: document.getElementById('name').value,
    };

    stripe.createToken(card, options).then(setOutcome);
}); 
</script>

有什么想法吗？

Answer 1

如果 result.token 不是未定义的，你可以隐藏你的微调器。 token 存在意味着表单已提交。

像这样:

document.querySelector('form').addEventListener('submit', function (e) {
    e.preventDefault();

    var options = {
        name: document.getElementById('name').value,
    };

    // show the spinner on submit
    showSpinner();

    stripe.createToken(card, options).then(setOutcome);

});

function setOutcome(result, wasSubmitted) {
    var successElement = document.querySelector('.success');
    var errorElement = document.querySelector('.error');
    successElement.classList.remove('visible');
    errorElement.classList.remove('visible');

    if (result.token) {
        // hide the spinner if this was called after a form submit
        hideSpinner();

        // my ajax here
    } else if (result.error) {
        // also hide the spinner on error
        hideSpinner();

        errorElement.textContent = result.error.message;
        errorElement.classList.add('visible');
    }
}