Skip to content

Instantly share code, notes, and snippets.

@fiftyandfifty

fiftyandfifty/Custom Donation Form

Created August 20, 2014 18:47
Show Gist options
  • Save fiftyandfifty/1cff4b1a841bca08e35a to your computer and use it in GitHub Desktop.
Save fiftyandfifty/1cff4b1a841bca08e35a to your computer and use it in GitHub Desktop.
Download ZIP
custom-form.html
Raw
Custom Donation Form
<html>
<head>
<title>Donation Form</title>
<link type="text/css" rel="stylesheet" media="all" href="https://www.dntly.com/assets/js/v1/form-inner.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8" defer="defer">
var donately_account_id = '198',
campaign_id = '0',
fundraiser_id = '0';
jQuery( window ).load(function() {
$('form.donately-donation-form').submit(function( event )
{
event.preventDefault();
var formdata = {
amount_in_cents : convertToCents( $(this).find("input[name='amount']").val() ),
campaign_id : campaign_id,
fundraiser_id : fundraiser_id,
recurring : ($(this).find("input[name=recurring]:checked").val() > 0 ? 'true' : 'false'),
card : {
number : $(this).find("input[name='card[number]']").val(),
exp_month : $(this).find("input[name='card[exp_month]']").val(),
exp_year : $(this).find("input[name='card[exp_year]']").val(),
cvc : $(this).find("input[name='card[cvc]']").val()
},
first_name : $(this).find("input[name='first_name']").val(),
last_name : $(this).find("input[name='last_name']").val(),
email : $(this).find("input[name='email']").val()
}
$.ajax({
url : 'http://www.dntly.local:3000/api/v1/accounts/' + donately_account_id + '/donate_without_auth',
type : 'POST',
data : JSON.stringify( formdata ),
async : true,
contentType: 'application/json; charset=utf-8',
dataType: 'json',
complete : function(r)
{
var resp = r.responseJSON;
if( resp.success == true )
{
alert('Thank you for your donation')
}
else{
alert('There was an error\n\n' + resp.error.message)
}
}
});
});
function convertToCents(amount){
var amount = amount || 0;
amount = amount.toString().match(/\d|\./gi) || ["0"];
return parseFloat(parseFloat(amount.join("")).toFixed(2)) * 100
};
});
</script>
</head>
<body>
<form class="donately-donation-form">
<fieldset class="donately-fields">
<div class="donately-donation-amount" for="donately-amount">
<label class="donately-dollar-sign" for="donately-amount">$</label> <input class="donately-text-input" data-numeric="" id="donately-amount" name="amount" placeholder="5" required="" type="text">
</div>
<div class="donately-donation-frequency">
<div class="donately-radio-option">
<input class="donately-radio-input donately-recurring" id="donately-one-time-donation" name="recurring" value="0" type="radio"> <label class="donately-label" for="donately-one-time-donation">One-time donation</label>
</div>
<div class="donately-radio-option">
<input checked="true" class="donately-radio-input" id="donately-recurring-donation" name="recurring" value="1" type="radio"> <label class="donately-label" for="donately-recurring-donation" selected="true">Monthly recurring donation</label>
</div>
</div>
</fieldset>
<div class="donately-secure-fields">
<div class="donately-secure-header">
<span>Secure Information</span>
</div>
<fieldset class="donately-fields card-number-fields">
<label class="donately-label donately-card-number-label" for="donately-card-number">Card Number</label> <input name="card[number]" class="donately-text-input" data-numeric="" id="donately-card-number" placeholder="" required="" x-autocompletetype="cc-number" type="text">
</fieldset>
<fieldset class="donately-fields card-expiration-fields">
<div class="donately-expiration-date">
<label class="donately-label" for="donately-card-exp-month">Expiration Date</label> <input name="card[exp_month]" class="donately-text-input" data-numeric="" id="donately-card-exp-month" maxlength="2" pattern="\d*" placeholder="MM" required="" x-autocompletetype="cc-exp-month" type="text"> <input name="card[exp_year]" class="donately-text-input" data-numeric="" id="donately-card-exp-year" maxlength="2" pattern="\d*" placeholder="YY" required="" x-autocompletetype="cc-exp-year" type="text">
</div>
<div class="donately-verification-number">
<label class="donately-label" for="donately-card-cvc">Verification Number</label> <input name="card[cvc]" class="donately-text-input" data-numeric="" id="donately-card-cvc" maxlength="4" pattern="\d*" placeholder="CVC" required="" x-autocompletetype="cc-csc" type="text">
</div>
</fieldset>
</div>
<fieldset class="donately-fields donately-logged-out-fields donately-name-fields">
<div class="donately-first-name-group">
<label class="donately-label" for="donately-first-name">First Name</label> <input name="first_name" class="donately-text-input" id="donately-first-name" placeholder="First" x-autocompletetype="given-name" type="text">
</div>
<div class="donately-last-name-group">
<label class="donately-label" for="donately-last-name">Last Name</label> <input name="last_name" class="donately-text-input" id="donately-last-name" placeholder="Last" x-autocompletetype="surname" type="text">
</div>
</fieldset>
<fieldset class="donately-fields donately-logged-out-fields donately-email-fields">
<label class="donately-label" for="donately-email">Email Address</label> <input name="email" required="required" class="donately-text-input donately-required" id="donately-email" placeholder="Email" x-autocompletetype="email" type="email">
</fieldset>
<fieldset class="donately-fields donately-action-fields">
<input class="donately-btn donately-submit" value="Submit Donation" type="submit">
</fieldset>
</form>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment