如何从一开始禁用条纹按钮并在检查协议后启用它? [英] How can I disable stripe button from the beginning and enable it after checked the agreement?

查看:22
本文介绍了如何从一开始禁用条纹按钮并在检查协议后启用它?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我想从一开始就禁用条纹结帐按钮.然后当人们选中协议复选框时,它将被启用.如果他撤消检查,它将再次被禁用.我该怎么做?

I want to disable the stripe checkout button from the beginning. Then when one will checked the agreement checkbox, it will be enabled. If he undo his checked, it will be disabled again. How can I do this?

<script
    src="https://checkout.stripe.com/checkout.js" class="stripe-button"
    data-key="pk_test_6pRNASCoBOKtIshFeQd4XMUh"
    data-amount="2000"
    data-name="Stripe.com"
    data-description="2 widgets"
    data-image="/img/documentation/checkout/marketplace.png"
    data-locale="auto">
</script>

我的代码与上面的代码非常相似.只是价值观不同.

My code is very similar of the above code. Only values are different.

推荐答案

您可以使用自定义按钮而不是自动嵌入结帐按钮.这是文档中的修改示例.

You can use custom button instead of auto embedding checkout button. Here is a modified example from the docs.

$('#agree').click(function() {
    $("#customButton").toggle(this.checked);
});

 var handler = StripeCheckout.configure({
    key: 'pk_test_6pRNASCoBOKtIshFeQd4XMUh',
    image: '/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.
    }
  });
  $('#customButton').on('click', function(e) {
    // Open Checkout with further options:
    handler.open({
      name: 'Stripe.com',
      description: '2 widgets',
      amount: 2000
    });
    e.preventDefault();
  });

  // Close Checkout on page navigation:
  $(window).on('popstate', function() {
    handler.close();
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://checkout.stripe.com/checkout.js"></script>

<input type="checkbox" id="agree"> agree
<button id="customButton" style="display:none">Purchase</button>

这篇关于如何从一开始禁用条纹按钮并在检查协议后启用它?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆