JSFiddle - React, Tailwind, and code Playground

by technotarek

HTML

<script src="https://checkout.stripe.com/v2/checkout.js"></script>
<form method="post" action="">
<button class="btn btn-custom btn-stripe">Purchase</button>
</form>
        <div class="cover-all" style="background:rgba(0,0,0,0.5);display:none;height:100%;position:absolute;top:0;left:0;width:100%;z-index:9998">
            <div style="color:#fff;font-size:24px;margin:300px auto;height:200px;width:300px;">Payment Processing...</div>
        </div>

JavaScript

// custom Stripe checkout button with custom overlay to avoid UI confusion during payment processing
$('.btn-stripe').click(function(){

  var token = function(res){
    var $input = $('<input type=hidden name=stripeToken />').val(res.id);
    $('.form-stripe').append($input).submit();
  };

  StripeCheckout.open({
    key:         'pk_test_***',
    address:     false,
    amount:      1000,
    currency:    'usd',
    name:        'Purchase',
    description: 'Description',
    panelLabel:  'Checkout',
    token:       token
  });
  
  $('.cover-all').show();
    
  return false;
});