84 lines
2.3 KiB
HTML
84 lines
2.3 KiB
HTML
{% extends "basepledge.html" %}
|
|
{% load humanize %}
|
|
|
|
{% block title %}Stripe{% endblock %}
|
|
|
|
{% block extra_extra_head %}
|
|
<link href="/static/stripe/tag.css" rel="stylesheet" type="text/css">
|
|
|
|
<script type="text/javascript" src="https://js.stripe.com/v1/"></script>
|
|
|
|
|
|
<script type="text/javascript">
|
|
// this identifies your website in the createToken call below
|
|
Stripe.setPublishableKey('{{STRIPE_PK}}');
|
|
</script>
|
|
|
|
<script type="application/x-javascript">
|
|
|
|
var $j = jQuery.noConflict();
|
|
|
|
|
|
function stripeResponseHandler(status, response) {
|
|
if (response.error) {
|
|
// re-enable the submit button
|
|
$j('.submit-button').removeAttr("disabled");
|
|
// show the errors on the form
|
|
$j(".payment-errors").html(response.error.message);
|
|
} else {
|
|
var form$ = $j("#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='stripe_token' value='" + token + "' />");
|
|
// and submit
|
|
form$.get(0).submit();
|
|
}
|
|
}
|
|
|
|
|
|
$j().ready(function() {
|
|
$j("#payment-form").submit(function(event) {
|
|
// disable the submit button to prevent repeated clicks
|
|
$j('.submit-button').attr("disabled", "disabled");
|
|
|
|
Stripe.createToken({
|
|
number: $j('.card-number').val(),
|
|
cvc: $j('.card-cvc').val(),
|
|
exp_month: $j('.card-expiry-month').val(),
|
|
exp_year: $j('.card-expiry-year').val()
|
|
}, stripeResponseHandler);
|
|
|
|
// prevent the form from submitting with the default action
|
|
return false;
|
|
});
|
|
});
|
|
</script>
|
|
{% endblock %}
|
|
|
|
{% block doccontent %}
|
|
Stripe Test:
|
|
|
|
<span class="payment-errors"></span>
|
|
<form action="" method="POST" id="payment-form">
|
|
{% csrf_token %}
|
|
<div class="form-row">
|
|
<label>Card Number</label>
|
|
<input type="text" size="20" autocomplete="off" class="card-number" />
|
|
</div>
|
|
<div class="form-row">
|
|
<label>CVC</label>
|
|
<input type="text" size="4" autocomplete="off" class="card-cvc" />
|
|
</div>
|
|
<div class="form-row">
|
|
<label>Expiration (MM/YYYY)</label>
|
|
<input type="text" size="2" class="card-expiry-month" />
|
|
<span> / </span>
|
|
<input type="text" size="4" class="card-expiry-year" />
|
|
</div>
|
|
<button type="submit" class="submit-button">Submit Payment</button>
|
|
</form>
|
|
|
|
{% endblock %}
|
|
|