Skip to content

Instantly share code, notes, and snippets.

@staycreativedesign

staycreativedesign/gist:c9d2a8232409e38089521278e91374a4

Created November 14, 2018 15:53
Show Gist options
  • Save staycreativedesign/c9d2a8232409e38089521278e91374a4 to your computer and use it in GitHub Desktop.
Save staycreativedesign/c9d2a8232409e38089521278e91374a4 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1.txt
<!DOCTYPE html>
<html lang='en'>
<head>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'>
<title>My website</title>
<link rel="stylesheet" media="all" href="/assets/application.self-df2ac4a8f73f9db3160ed7dfcc020fd1749b93e53981309663bf2f82995735d7.css?body=1" />
<script src="/assets/jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1"></script>
<script src="/assets/jquery_ujs.self-784a997f6726036b1993eb2217c9cb558e1cbb801c6da88105588c56f13b466a.js?body=1"></script>
<script src="/assets/bootstrap.min.self-075878ec6a19d24f3b46052eb9e0e5bb5c2a098ac50d05d8e3a21309d129273a.js?body=1"></script>
<script src="/assets/jquery.slicknav.self-2c66dcc5003ba9cfe9b7697fe1fca1b38033ecbe712a8d4f21300624567036e7.js?body=1"></script>
<script src="/assets/scripts.self-570dea41321fe2f98b80942d0686377c8401d180206ec5b1cd0941af0ccfe0f4.js?body=1"></script>
<script src="/assets/application.self-afe802b04eaf1de2ea762489c83c08aa4c4ff3ff13c21566e43cb710683f5abc.js?body=1"></script>
</head>
<body>
<section>
<div class='container'>
<form action="/charges" accept-charset="UTF-8" method="post">
<input name="utf8" type="hidden" value="&#x2713;" /><input type="hidden" name="authenticity_token" value="3NV5udPNna1juIn+E47ixtVFFwoAM4YR+kXriBWcDJSOOwstMSmivDN3OLJunZqQQioqwIiLl1OsRm2Z9fOdvQ==" />
<div class='row'>
<div id='error_explanation'></div>
<div class='col-md-3 col-sm-4'>
<h5 class='uppercase'>
<strong>Donation type</strong>
</h5>
<div>
<div class='radio-option checked'>
<div class='inner'></div>
<input name='radio' type='radio' value='onetime'>
</div>
<span>
One time
</span>
</div>
<div>
<div class='radio-option'>
<div class='inner'></div>
<input name='radio' type='radio' value='monthly'>
</div>
<span>
Monthly
</span>
</div>
</div>
<div class='col-md-3 col-sm-4'>
<button name="button" type="submit" class="donationAmount" data-amount="5.00">$5.00</button>
</div>
<div class='col-md-3 col-sm-4'>
<button name="button" type="submit" class="donationAmount" data-amount="10.00">$10.00</button>
</div>
<div class='col-md-3 col-sm-4'>
<button name="button" type="submit" class="donationAmount" data-amount="25.00" data-plan="subscription">$25.00</button>
</div>
<div class='col-md-3 col-sm-4'>
<button name="button" type="submit" class="donationAmount" data-amount="50.00">$50.00</button>
</div>
<div class='col-md-3 col-md-push-0 col-sm-4 col-sm-push-4'>
<button name="button" type="submit" class="donationAmount" data-amount="100.00">$100.00</button>
</div>
<div class='col-md-3 col-md-push-0 col-sm-4 col-sm-push-4'>
<button name="button" type="submit" class="donationAmount" data-amount="500.00">$500.00</button>
</div>
<input type="hidden" name="email" id="email" />
<input type="hidden" name="stripeEmail" id="stripeEmail" />
<input type="hidden" name="subscription" id="subscription" value="no" />
<input type="hidden" name="plan" id="plan" value="no" />
<input type="hidden" name="amount" id="amount" />
<input type="hidden" name="stripeToken" id="stripeToken" />
</div>
<div class='row'>
<div class='col-sm-8 col-sm-offset-0 col-md-offset-0'>
<button class='btn donate-button' id='donateButton'>Donate</button>
</div>
</div>
</form>
</div>
</section>
<script src='https://checkout.stripe.com/checkout.js'></script>
<script>
var handler = StripeCheckout.configure({
key: 'pk_test_tStD591hOz1kT6nWBFfzyvyg',
locale: 'auto',
name: 'foobar',
billingAddress: true,
description: 'Donation',
token: function(token) {
$('input#stripeToken').val(token.id);
$('form').submit();
}
});
$('#donateButton').on('click', function(e) {
e.preventDefault();
$('#error_explanation').html('');
var amount = $('input#amount').val();
amount = amount.replace(/\$/g, '').replace(/\,/g, '')
amount = parseFloat(amount);
if (isNaN(amount)) {
$('#error_explanation').html('<p>Please enter a valid amount in USD ($).</p>');
}
else if (amount < 5.00) {
$('#error_explanation').html('<p>Donation amount must be at least $5.</p>');
}
else {
amount = amount * 100; // Needs to be an integer!
handler.open({
amount: Math.round(amount)
})
}
});
$(window).on('popstate', function() {
handler.close();
});
$(".donationAmount").click(function(e){
e.preventDefault();
da = $(this).data("amount")
$("#amount").val(da)
})
</script>
</body>
<script>
$(function(){
$('.menu-bottom').slicknav({
label: 'foobar'
});
});
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment