How can I disable stripe button from the beginning and enable it after checked the agreement?

问题

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.

回答1:

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>

来源：https://stackoverflow.com/questions/36970737/how-can-i-disable-stripe-button-from-the-beginning-and-enable-it-after-checked-t

标签

stripe-payments