Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
87 lines (77 sloc) 4.12 KB
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://checkout.stripe.com/checkout.js"></script>
<div id="content" class="mw7 center cf">
<h3>Name: {{ .Params.sfname }} {{ .Params.slinitial }}. - Grade: {{ .Params.grade }}</h3>
<p>Thank you for helping me raise money for Island View PTA! The funds will make so much possible for the students and staff at Island View Elementary, including classroom enhancements, FIRST LEGO League Jr., Reading is Fundamental's free books, ClassACT School Plays, free popcorn every month, Family Fun Nights, Watch DOGS, Lego Club, I Love to Read Month, Scholastic Magazines, Educational Software, Mountain School, and MORE!</p>
{{ if ne .Params.total "$0.00"}}
<p class="bg-light-gray ml2 w-70 pa2 br3">So far I have raised {{ .Params.online }} from online donations and {{ .Params.envelope }} in person, for a total of {{ ":tada:" | emojify }}<strong>{{ .Params.total }}</strong>{{ ":tada:" | emojify }}!</p>
{{ else }}
<p class="bg-light-gray ml2 w-70 pa2 br3">I haven't received any donations yet. {{ ":disappointed:" | emojify }} <br> Please be the first one to help me reach my goal. {{ ":sparkling_heart:" | emojify }}</p>
{{ end }}
<p>Please enter your Full Name, Email Address and Donation amount in the form below to make a donation in {{ .Params.sfname }}'s name for the Color Run event. Please note that we do not store any of your credit card information.</p>
<form name="colorrun-donation" id="colorrun-donation" class="pa2 w-30" action="https://wt-178473a4ca36b28c0d024bfdae0bd5b3-0.sandbox.auth0-extend.com/ivepta-stripe-payment/payment" method="POST">
<div class="w-100 pv2">
<label for="name">Name</label>
<input id="name" name="name" type="text" placeholder="Enter Your Full Name" required="" autocomplete="name">
</div>
<div class="w-100 pv2">
<label for="email">Email</label>
<input id="email" name="email" type="email" placeholder="Primary Email Address" required="" autocomplete="email">
</div>
<div class="w-100 pv2">
<label for="dollarAmount">Amount</label>
<input id="dollarAmount" type="text" placeholder="$ to Donate" required="">
</div>
<input type="hidden" name="stripeToken" id="stripeToken" value="">
<input type="hidden" name="amount" id="amount" value="">
<input type="hidden" name="description" id="description" value="">
<button id="donateButton" class="f6 link glow br3 ph3 pv2 mb2 dib gold bg-primary">Donate</button>
<div id="error_explanation"></div>
</form>
</div>
<script>
var handler = StripeCheckout.configure({
key: 'pk_live_UggfU7ZSje2PMeJJLoxOllwv',
name: 'Color Run Donation',
zipCode: true,
allowRememberMe: false,
panelLabel: 'Donate',
description: 'Donation for {{ .Params.sfname }} {{ .Params.slinitial }}.',
token: function(token) {
$('input#stripeToken').val(token.id);
var donorname = $('input#name').val();
var descriptionstring = "Color Run Donation for {{ .Params.sfname }} {{ .Params.slinitial }} - {{ .Params.teacher }} - {{ .Params.grade }} from " + donorname;
$('input#description').val(descriptionstring);
$('#colorrun-donation').submit();
}
});
$('#donateButton').on('click', function(e) {
e.preventDefault();
$('#error_explanation').html('');
var email = $('input#email').val();
var name = $('input#name').val();
var amount = $('input#dollarAmount').val();
amount = amount.replace(/\$/g, '').replace(/\,/g, '');
amount = parseFloat(amount);
if (isNaN(amount)) {
$('#error_explanation').html("<p class='w-100 ba br2 center pa3 ma2 red bg-washed-red'>Please enter a whole dollar amount in USD ($).</p>");
}
else if (amount < 3.00) {
$('#error_explanation').html("<p class='w-100 ba br2 center pa3 ma2 red bg-washed-red'>Donation amount must be at least $3.</p>");
}
else {
amount = amount * 100; // Needs to be an integer!
amount = Math.round(amount);
$('input#amount').val(amount);
handler.open({
amount: amount,
email: email,
name: name
});
}
});
// Close Checkout on page navigation
$(window).on('popstate', function() {
handler.close();
});
</script>