symposion_app/pinaxcon/templates/registrasion/stripe/credit_card_payment.html

99 lines
2.9 KiB
HTML

{% extends "registrasion/base.html" %}
{% load registrasion_tags %}
{% load lca2018_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:
$form.get(0).submit();
$form.append($('<p>').text("Processing your payment. Please do not refresh."));
}
};
</script>
{% endblock %}
{% block header_title %}Credit card payment for invoice #{{ invoice.id}}{% endblock %}
{% block proposals_body %}
<p>Pay for your linux.conf.au attendance with your Visa, Mastercard, or American Express credit or debit card. Card payments are processed by <a href="https://stripe.com">Stripe</a>.</p>
<p>
No data on this form is retained by {% conference_name %}, rather it is
sent to Stripe. In particular, credit card details are not sent
to linux.conf.au. You must allow JavaScript from <code>js.stripe.com</code> to complete payment.
</p>
<p>You have <strong>${{ invoice.balance_due }}</strong> remaining to pay on this invoice.</p>
<p></p>
<h3>Card details</h3>
<form class="form-horizontal" id="payment-form" method="post">
<fieldset>
<div class="has-errors" id="payment-errors-outer" style="display: none;">
<span class="errorlist" id="payment-errors"></span>
</div>
{% csrf_token %}
{% include "_form_snippet.html" with form=form %}
<br />
<div class="btn-group">
<input id="pay" class="btn btn-primary" type="submit" value="Pay ${{ invoice.balance_due }}" />
</div>
</fieldset>
</form>
{% endblock %}