使用javascript手动处理条带签出窗口

我使用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

没有默认的

click

操作，因此

preventDefault（）

无法帮助您，因为它与您无关

相反，使用来防止其他脚本（即checkout.js）接收单击事件，从而能够对其进行操作

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

---

另一种方法是使用Checkout，它提供了一个

open（）

方法，您可以根据需要调用该方法来触发弹出窗口。只需确保仍在

单击处理程序中调用它，因为浏览器喜欢阻止非用户直接启动的弹出窗口。
问题在于Stripe的窗口打开不是默认操作。默认操作是按下空格键时浏览器向下滚动。在这种情况下，
div
没有默认的
click
操作，因此
preventDefault（）
无法帮助您，因为它与您无关

相反，使用来防止其他脚本（即checkout.js）接收单击事件，从而能够对其进行操作

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

另一种方法是使用Checkout，它提供了一个
open（）
方法，您可以根据需要调用该方法来触发弹出窗口。只需确保仍在
单击
处理程序中调用它，因为浏览器喜欢阻止非用户直接启动的弹出窗口。
对于您的情况，您必须为条带签出的自定义行为实现自定义集成。详情如下

您必须创建一个
处理程序来控制
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>


购买
var handler=StripeCheckout.configure({
键：“pk_测试_键…”，
图像：'https://stripe.com/img/documentation/checkout/marketplace.png',
区域设置：“自动”，
令牌：函数（令牌）{
//您可以使用“token.ID”访问令牌ID。
//获取服务器端代码的令牌ID以供使用。
}
});
document.getElementById（'customButton'）。addEventListener（'click'，函数（e）{
$（“#签出表格”）.formValidation（‘validate’）；
if（$（'#checkout_form'）.data（'formValidation'）.isValid（））{//如果您的表单有效
popup（）；//打开条带签出
}
});
函数popup（）{
//使用其他选项打开签出：
handler.open({
姓名：'您将输入姓名'，
描述：'您的描述'，
真的，
货币：美元，
金额：万元
});
e、 预防默认值（）；
}
//关闭页面导航上的签出：
addEventListener（'popstate'，function（）{
handler.close（）；
});
对于您的案例，您必须为条带签出的自定义行为实施自定义集成。详情如下

您必须创建一个
处理程序来控制
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>


购买
var handler=StripeCheckout.configure({
键：“pk_测试_键…”，
图像：'https://stripe.com/img/documentation/checkout/marketplace.png',
区域设置：“自动”，
令牌：函数（令牌）{
//您可以使用“token.ID”访问令牌ID。
//获取服务器端代码的令牌ID以供使用。
}
});
document.getElementById（'customButton'）。addEventListener（'click'，函数（e）{
$（“#签出表格”）.formValidation（‘validate’）；
if（$（'#checkout_form'）.data（'formValidation'）.isValid（））{//如果您的表单有效
popup（）；//打开条带签出
}
});
函数popup（）{
//使用其他选项打开签出：
handler.open({
姓名：'您将输入姓名'，
描述：'您的描述'，
真的，
货币：美元，
金额：万元
});
e、 预防默认值（）；
}
//关闭页面导航上的签出：
addEventListener（'popstate'，function（）{
handler.close（）；
});
你能提供小提琴吗？你能提供小提琴吗？谢谢赛斯，但是stopPropagation（）似乎也不起作用。。。是否checkout.js会在我自己的js代码之前接收到事件？是的，这可能会发生。如果在注册事件侦听器的脚本之前导入checkout.js，而该脚本的处理程序执行stopPropagation（），则处理程序可能运行得太晚，无法生效，因为处理程序是按注册顺序执行的。因此，您需要确保尽快在页面中注册您的事件侦听器。我添加了第二个解决方案，以防挑剔的事件顺序对您造成问题。谢谢Seth，但是StopRopagation（）似乎也不起作用。。。是否checkout.js会在我自己的js代码之前接收到事件？是的，这可能会发生。如果在注册事件侦听器的脚本之前导入checkout.js，而该脚本的处理程序执行stopPropagation（），则处理程序可能运行得太晚，无法生效，因为处理程序是按注册顺序执行的。因此，您需要确保尽快在页面中注册您的事件侦听器。我添加了第二个解决方案，以防挑剔的事件顺序对您造成问题。