copyleftconf-website/pinaxcon/templates/registrasion/stripe/credit_card_payment.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 %}