90 lines
2.7 KiB
HTML
90 lines
2.7 KiB
HTML
{% extends "site_base.html" %}
|
||
{% load bootstrap %}
|
||
{% load registrasion_tags %}
|
||
|
||
|
||
{% block scripts %}
|
||
{{ block.super }}
|
||
|
||
{{ form.media }}
|
||
|
||
<script type="text/javascript">
|
||
$(function() {
|
||
var $form = $('#payment-form');
|
||
$form.submit(function(event) {
|
||
|
||
if ($form.find("input[name='stripe_token']").length) {
|
||
// If we've added the stripe token, then we're good to go.
|
||
return true;
|
||
}
|
||
|
||
// Disable the submit button to prevent repeated clicks:
|
||
|
||
$form.find('input[type=submit]').prop('disabled', true);
|
||
|
||
console.log($form.number);
|
||
|
||
// Request a token from Stripe:
|
||
Stripe.card.createToken($form, stripeResponseHandler);
|
||
|
||
// Prevent the form from being submitted:
|
||
return false;
|
||
});
|
||
});
|
||
|
||
function stripeResponseHandler(status, response) {
|
||
// Grab the form:
|
||
var $form = $('#payment-form');
|
||
var $submit = $form.find('input[type=submit]')
|
||
if (response.error) { // Problem!
|
||
console.log(response.error.message);
|
||
|
||
// Show the errors on the form:
|
||
$form.find('#payment-errors').text(response.error.message);
|
||
$form.find('#payment-errors-outer').show();
|
||
$submit.prop('disabled', false); // Re-enable submission
|
||
|
||
} else { // Token was created!
|
||
console.log(response);
|
||
|
||
// Get the token ID:
|
||
var token = response.id;
|
||
|
||
// Insert the token ID into the form so it gets submitted to the server:
|
||
$form = $form.append($('<input type="hidden" name="stripe_token" />').val(token));
|
||
|
||
// Submit the form:
|
||
|
||
$submit.prop('disabled', false);
|
||
$submit.click();
|
||
$submit.prop('disabled', true);
|
||
$form.append($('<p>').text("Processing your payment. Please do not refresh."));
|
||
}
|
||
};
|
||
</script>
|
||
|
||
{% endblock %}
|
||
|
||
{% block body %}
|
||
|
||
<h2>Credit card payment for invoice #{{ invoice.id}}</h2>
|
||
|
||
<p>You have ${{ invoice.balance_due }} remaining to pay on this invoice.</p>
|
||
|
||
<p>Credit card payments are processed by <a href="https://stripe.com">Stripe</a>.
|
||
We do not store any of your credit card data locally, but instead Strip will securely tokenise your card details. To allow this, you must allow JavaScript from <code>js.stripe.com</code>.</p>
|
||
|
||
<h3>Card details</h3>
|
||
|
||
<form id="payment-form" method="post">
|
||
|
||
<div class="alert alert-danger" id="payment-errors-outer" style="display: none;">
|
||
<a class="close" data-dismiss="alert">×</a>
|
||
<span id="payment-errors"></span>
|
||
</div>
|
||
|
||
{% csrf_token %}
|
||
{{form|bootstrap}}
|
||
<input id="submit" class="btn btn-primary" type="submit" value="Pay {{ invoice.balance_due }}" />
|
||
</form>
|
||
{% endblock %}
|