Changeset - abed88031396
[Not reviewed]
0 0 1
Christopher Neugebauer - 7 years ago 2016-09-21 06:40:58
chrisjrn@gmail.com
Adds first pass at credit_card_payment.html
1 file changed with 86 insertions and 0 deletions:
0 comments (0 inline, 0 general)
pinaxcon/templates/registrasion/stripe/credit_card_payment.html
Show inline comments
 
new file 100644
 
{% 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 %}
0 comments (0 inline, 0 general)