使用 javascript 手动处理条带结帐窗口

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 结帐的自定义行为实施自定义集成。详情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 处理程序中调用它，因为浏览器喜欢阻止不是由用户直接启动的弹出窗口。