我正在使用 stripe 来获取信用卡信息。但我实现了自己的运输信息表。我希望在添加信用卡信息之前使送货信息表失效。我的问题是我不知道如何防止 Stripe 窗口打开。 Stripe 按钮实现为
<div class="shipping_validation">
<script src="https://checkout.stripe.com/checkout.js" class="stripe-button" id='stripe-button'
data-key="{{ key }}"
data-zip-code="true"
data-billing-address="true"
data-shipping-address="false"
data-description="benty-shop"
data-image="/static/favicon/apple-icon-120x120.png"
data-amount="{{ orders | sum(attribute='cost')*100 }}"
data-locale="auto"
disabled>
</script>
</div>
我将按钮嵌入到 div 元素中,并使用该元素的类来触发发货表单的表单验证
$(".shipping_validation").click(function(event) {
$("#checkout_form").formValidation('validate');
if(!$('#checkout_form').data('formValidation').isValid()){
event.preventDefault();
// do something to prevent the stripe window to open
}
})
我希望 event.preventDefault();可以解决问题,但 Stripe 窗口仍然打开。知道如何防止 Stripe 窗口打开吗?
最佳答案
对于您的情况,您必须为 Stripe 结账的自定义行为实现自定义集成。详情为here
您必须创建一个处理程序
来控制open()
和close()
事件。
以下示例类似于您使用自定义集成的情况
<script src="https://checkout.stripe.com/checkout.js"></script>
<button id="customButton">Purchase</button>
<script>
var handler = StripeCheckout.configure({
key: 'pk_test_key....',
image: 'https://stripe.com/img/documentation/checkout/marketplace.png',
locale: 'auto',
token: function(token) {
// You can access the token ID with `token.id`.
// Get the token ID to your server-side code for use.
}
});
document.getElementById('customButton').addEventListener('click', function(e) {
$("#checkout_form").formValidation('validate');
if($('#checkout_form').data('formValidation').isValid()){ //if your form is valid
popup(); //open the Stripe checkout
}
});
function popup(){
// Open Checkout with further options:
handler.open({
name: 'you will put the name',
description: 'your description',
zipCode: true,
currency: 'usd',
amount: 0000
});
e.preventDefault();
}
// Close Checkout on page navigation:
window.addEventListener('popstate', function() {
handler.close();
});
</script>
关于javascript - 使用 javascript 手动处理 Stripe 结账窗口,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44173017/