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

{% extends "registrasion/base.html" %}
{% load bootstrap %}
{% load registrasion_tags %}
{% load lca2017_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 header_inset_image %}{% illustration "casino.svg" %}{% endblock %}
{% block header_paragraph %}
  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>.
{% endblock %}

{% block content %}

  <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 ${{ invoice.balance_due }} remaining to pay on this invoice.</p>

  <p></p>

  <h3>Card details</h3>

  <form 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 %}