我有一个上面带有条纹元素的网页。一切正常。但是，我想在单击“付款”按钮后显示一个微调框，但前提是所有信用卡字段均已填写并经过验证。问题在于，Stripe的客户端API /结构阻止我使用javascript检查这些字段。通过执行以下操作，我可以轻松点击按钮：
$("#btnPay").click(function() {
// show spinner
});
但是除非填写并完成所有信用卡字段，否则我永远不想显示微调框。否则，当字段仍然为空等时，微调框将弹出。
在Stripe验证表单之后，Stripe Elements API中是否有一种方法可以注入启动旋转程序的js的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>
有任何想法吗？
如果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');
}
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句