87 lines
2.6 KiB
HTML
87 lines
2.6 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');
|
|||
|
|
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();
|
|||
|
|
$form.find('input[type=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:
|
|||
|
|
$form.find('input[type=submit]').prop('disabled', false);
|
|||
|
|
$form.find('input[type=submit]').click();
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
</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 %}
|