CODEWITHSUNDEEP
stripe-payments
Saleh Ahmad Oyon
Saleh Ahmad Oyon

Reputation: 672

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.

Upvotes: 1

Views: 2539

Answers (1)

Tahsin Hassan Rahit
Tahsin Hassan Rahit

Reputation: 121

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>

Upvotes: 1

Related Questions