javascript - 使用 javascript 手动处理 Stripe 结账窗口

Question

我正在使用 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 窗口打开吗？

Answer 1

对于您的情况，您必须为 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>