gistfile1.txt

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

<a id="customButton" class="btn btn-lg btn-success mb-4">Donate</a>

<script defer="defer">

$(function() {
  $('#new_donation').parsley();
  $('#donation_amount').on('keypress', function() {
    $(this).parsley().removeError("min", {updateClass: true});
  });
});

var handler = StripeCheckout.configure({
  key: "<%= site.stripe_public_key %>",
  image: "https://via.placeholder.com/128x128",
  locale: 'auto',
  token: function(token) {
    $('#donation_stripeToken').val(token.id)
    $('#new_donation').submit()
  }
});

document.getElementById('customButton').addEventListener('click', function(e) {
  e.preventDefault();

  // trigger the form validation
  if(!$("#new_donation").parsley().validate()) {
    // cancel this routine
    return false;
  }
  var amountField = $('#donation_amount');
  var amount = parseFloat(amountField.val())
  if (isNaN(amount)) {
    amount = 0
  }
  else if (amount < 10) {
    amountField.parsley().addError("min", {message: "Minimum donation amount is $10"})
    return false;
  }
  else {
    amount = amount * 100
  }

  // Open Checkout with further options:
  handler.open({
    amount: amount,
    description: "Donation to <%= fundraiser.title %>",
    email: $('#donation_email').val(),
    name: "<%= site.name %>",
    panelLabel: "Donate {{amount}}",
    zipCode: true
  });
});

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