我有一个上面带有条纹元素的网页。一切正常。但是,我想在单击“付款”按钮后显示一个微调框,但前提是所有信用卡字段均已填写并经过验证。问题在于,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');
}
}
关于javascript - 单击按钮后如何在Stripe中显示微调框?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/55093152/