Question

我使用条纹信息卡信息。但我实施了自己的运输信息表。我希望在添加信用卡信息之前，送货信息表格无效。我的问题是我不知道如何防止条纹窗口打开。条带按钮实现为

<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（）;会做的伎俩，但条纹窗口仍然打开。知道如何防止条纹窗口打开吗？

Answer 1

对于您的情况，您必须为Stripe checkout的自定义行为实现自定义集成。详细信息为here

您必须创建handler来控制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>

Answer 2

问题是Stripe的窗口打开不是默认操作。默认操作类似于按下空格键时向下滚动的浏览器。在这种情况下，div没有默认的click操作，因此preventDefault()无法帮助您，因为它无关。

相反，使用stopPropagation()来阻止其他脚本（即checkout.js）接收点击事件，从而能够对其采取行动。

if(!$('#checkout_form').data('formValidation').isValid()){
   event.stopPropagation();
   // do something to prevent the stripe window to open
}

另一种方法是使用Checkout Custom mode，它提供open()方法，您可以调用该方法按需触发弹出窗口。请确保仍在click处理程序中调用它，因为浏览器会阻止不是由用户直接启动的弹出窗口。

使用javascript

2 个答案: