JSFiddle - React, Tailwind, and code Playground

by Daniel DeGroff

HTML

<script src="https://checkout.stripe.com/checkout.js"></script>

<div class="checkout">
    <span class="white">Click to pay by Credit Card.   </span>


    <div>
<form action="" method="POST">
    <button id="filter"><span>Filter Only</span></button>
<hr>
    <button id="filterMod"><span>Filter and Moderation</span></button>
    <hr>
    <button id="beer"><span>Buy us beer.</span></button>
</form>
        <div>
</div>

CSS

body {
        background: url(http://www.inversoft.com/wp-content/themes/inversoft1_6/images/homepage-bg.jpg);

}
span.white {
    margin-top: 10px;
    color: #fff;
      font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  -webkit-font-smoothing: antialiased;
}
div.checkout {
    margin: 0 auto;
   margin-top: 50px;
    margin-left: 20%;
    margin-right: 20%;
    margin-bottom: 50px;
    height: 250px;
        text-align: center;
        align-content: center;

}

div.checkout > div {
    margin-top: 50px;
    margin-left: 30%;
    margin-right: 30%;
    align-content: center;
}

div.output-container  {
  margin-top: 20px;
  margin-left: 10px;
  margin-right: 10px;
}

div.output-container > div {
  border: dashed 1px;
  min-height: 50px;
}

button {
  background-image: linear-gradient(#7dc5ee,#008cdd 85%,#30a2e4);
  min-height: 30px;
  display: block;
  margin: 0 auto;
  font-size: 14px;
  color: #fff;
  font-weight: bold;
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  -webkit-font-smoothing: antialiased;
  border: 0;
  padding: 1px;    
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25);
  border-radius: 4px;
    cursor: pointer;
}

button > span {
      display: block;
    position: relative;
padding: 0 12px;
height: 30px;
line-height: 30px;
}

JavaScript

var output = document.getElementById("output");

var handler = StripeCheckout.configure({
    key: 'pk_test_6pRNASCoBOKtIshFeQd4XMUh',
    image: 'https://pbs.twimg.com/profile_images/439441250412797952/WroUzU1F_reasonably_small.png',
    token: function(token) {
      // Use the token to create the charge with a server-side script.
      // You can access the token ID with `token.id`
    }
  });

  document.getElementById('filter').addEventListener('click', function(e) {
    // Open Checkout with further options
    handler.open({
      name: 'CleanSpeak Express',
      description: 'Annual license $1,000,000.00',
      amount: 100000000
    });
    e.preventDefault();
  });
    
      document.getElementById('beer').addEventListener('click', function(e) {
    // Open Checkout with further options
    handler.open({
      name: 'Buy us Beer',
      description: '6-pack Pabst Blue Ribbon. $5.49',
      amount: 549
    });
    e.preventDefault();
  });
    
      document.getElementById('filterMod').addEventListener('click', function(e) {
    // Open Checkout with further options
    handler.open({
      name: 'CleanSpeak Enterprise',
      description: 'Annual license $2,000,000.00',
      amount: 200000000
    });
    e.preventDefault();
  });