Skip to content

Instantly share code, notes, and snippets.

@michaelschade

michaelschade/stripe.html

Last active December 11, 2015 18:58
Show Gist options
  • Save michaelschade/4644849 to your computer and use it in GitHub Desktop.
Save michaelschade/4644849 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
stripe.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Payment Form</title>
<link rel="stylesheet" type="text/css" href="https://fxsupport.org/consolidated_common.css" />
<link rel="stylesheet" type="text/css" href="https://fxsupport.org/css/reset-fonts-grids.css" />
<link href='https://fonts.googleapis.com/css?family=Fjalla+One' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="https://js.stripe.com/v1/"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
// this identifies your website in the createToken call below
Stripe.setPublishableKey('pk_test_5XXXXXXXXXXXXXXXXXXXK');
/* Attempt to add a specific, helpful error message to the
billing form. Field is the standard 'param' identifier used
to determine the invalid field. 'Code', if not null, is used
to determine a more specific nature of the error.
*/
function noteError(field, code) {
// Reusable error messages
var m_inv_number = "The card number is invalid."
, m_inv_exp_month = "The expiration month is invalid."
, m_inv_exp_year = "Check the expiration date."
, m_inv_cvc = "The security code is invalid."
;
var msg;
// Try to determine error from code
switch(code) {
case "invalid_number":
msg = m_inv_number;
break;
case "incorrect_number":
msg = "The card number is incorrect.";
break;
case "invalid_expiry_month":
msg = m_inv_exp_month;
break;
case "invalid_expiry_year":
msg = "Check the expiration date.";
break;
case "invalid_cvc":
msg = m_inv_cvc;
break;
case "expired_card":
msg = "The credit card is expired.";
break;
case "incorrect_cvc":
msg = "The card's security code is incorrect.";
break;
case "card_declined":
msg = "The card has been declined.";
break;
default:
msg = null;
break;
}
// Try to determine error from field
if (msg === null) {
switch(field) {
case "number":
msg = m_inv_number;
break;
case "exp_month":
msg = m_inv_exp_month;
break;
case "exp_year":
msg = "Check the expiration date.";
break;
case "cvc":
msg = m_inv_cvc;
break;
default:
break;
}
}
// If any type of error was determined, specify it.
if (msg !== null) {
$(".payment-errors").html(msg);
}
};
function stripeResponseHandler(status, response) {
if (response.error) {
// re-enable the submit button
$('.submit-button').removeAttr("disabled");
// show the errors on the form
noteError(response.error.param, response.error.code);
} else {
var form$ = $("#payment-form");
// token contains id, last4, and card type
var token = response['id'];
// insert the token into the form so it gets submitted to the server
form$.append("<input type='hidden' name='stripeToken' value='" + token + "' />");
// and submit
form$.get(0).submit();
}
}
$(document).ready(function() {
$("#payment-form").submit(function(event) {
// disable the submit button to prevent repeated clicks
$('.submit-button').attr("disabled", "disabled");
// createToken returns immediately - the supplied callback submits the form if there are no errors
Stripe.createToken({
name: $('.name').val(),
number: $('.card-number').val(),
cvc: $('.card-cvc').val(),
exp_month: $('.card-expiry-month').val(),
exp_year: $('.card-expiry-year').val()
}, stripeResponseHandler);
return false; // submit from callback
});
});
</script>
<style type="text/css">
#intro {
text-align:left;
margin-left:25px;
}
#mainform {
text-align:left;
margin-left:25px;
}
</style>
</head>
<body>
<div class="section" id="form">
<h3><span id="header" style="font-size:24px">Welcome to The FxFoundation Group, Inc. </span><a href="#top" class="gotoTop">Top</a></h3>
<br />
<br />
<div id="intro">
<p>Please remit payment below. Your payment will be processed through our PCI Compliant, 100% secure servers. Thank you for your cooperation.</p>
</div>
<br />
<span class="payment-errors" style="color: #F00"><?= $error ?></span>
<span class="payment-success" style="color:#B9D421"><?= $success ?></span>
<div id="mainform">
<form action="post.php" method="POST" id="payment-form" name="fxpayment" onSubmit="return assignOtherValue();">
<div class="form-row">
<label>Customer Name</label>
<input type="text" size="30" autocomplete="off" name="description" />
</div>
<div class="form-row">
<label>Customer Email</label>
<input type="text" size="30" autocomplete="off" name="email" />
</div>
<div class="form-row">
<label>Please select an amount to remit for services rendered.</label>
<input type="radio" class="radio_button" id="fx1" name="value" value="5" />$5.00<br />
<input type="radio" class="radio_button" id="fx2" name="value" value="10" />$10.00<br />
<input type="radio" class="radio_button" id="fx3" name="value" value="15" />$15.00<br />
<input type="radio" class="radio_button" name="value" onclick="document.getElementById('fxpayment').removeAttribute('disabled')" />
<input name="value" type="text" disabled id="fxpayment" size="10" maxlength="7" />
</div>
<div class="form-row">
<label>Cardholder Name</label>
<input type="text" size="30" autocomplete="off" class="name" />
</div>
<div class="form-row">
<label>Card Number</label>
<input type="text" class="card-number" autocomplete="off" size="16" maxlength="16" />
</div>
<div class="form-row">
<label>CVC</label>
<input type="text" class="card-cvc" autocomplete="off" size="4" maxlength="3" />
</div>
<div class="form-row">
<label>Expiration (MM/YYYY)</label>
<input type="text" class="card-expiry-month" autocomplete="off" size="2" maxlength="2"/>
<span> / </span>
<input type="text" class="card-expiry-year" autocomplete="off" size="4" maxlength="4"/>
</div>
<button type="submit" class="submit-button">Submit Payment</button>
</form>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment