Question

我有一个上面带有Stripe Elements的网页。一切正常。但是，我想在单击“付款”按钮后显示一个微调框，但前提是所有信用卡字段均已填写并经过验证。问题在于，Stripe的客户端API /结构阻止我使用javascript检查这些字段。通过执行此操作，我可以轻松点击按钮：

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

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

Stripe Elements API中是否有一种方法可以注入我的js，以便在Stripe验证表单之后注入启动微调器的js，但在此之前，它会进行ajax调用以获取令牌？

这是我页面的某些部分：

一些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尚未定义，则可以隐藏微调框。出现令牌意味着表单已提交。

类似这样的东西：

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');
    }
}

单击按钮后如何在Stripe中显示微调框？

1 个答案: