Adds first pass at credit_card_payment.html

pinaxcon/templates/registrasion/stripe/credit_card_payment.html

@@ -0,0 +1,86 @@
+{% 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 %}