regluit/payment/templates/stripe.html

{% extends "basepledge.html" %}
{% load humanize %}

{% block title %}Stripe{% endblock %}

{% block extra_extra_head %}
<link href="/static/stripe/tag.css" rel="stylesheet" type="text/css">

<script type="text/javascript" src="https://js.stripe.com/v1/"></script>


<script type="text/javascript">
    // this identifies your website in the createToken call below
    Stripe.setPublishableKey('{{STRIPE_PK}}');
</script>

<script type="application/x-javascript">

var $j = jQuery.noConflict();


function stripeResponseHandler(status, response) {
	if (response.error) {
	    // re-enable the submit button
	    $j('.submit-button').removeAttr("disabled");
	    // show the errors on the form
	    $j(".payment-errors").html(response.error.message);
	} else {
	    var form$ = $j("#payment-form");
	    // token contains id, last4, and card type
	    var token = response['id'];
	    // insert the token into the form so it gets submitted to the server
	    form$.append("<input type='hidden' name='stripe_token' value='" + token + "' />");
	    // and submit
	    form$.get(0).submit();
	}
}
	   
	    
$j().ready(function() {
  $j("#payment-form").submit(function(event) {
    // disable the submit button to prevent repeated clicks
    $j('.submit-button').attr("disabled", "disabled");

    Stripe.createToken({
        number: $j('.card-number').val(),
        cvc: $j('.card-cvc').val(),
        exp_month: $j('.card-expiry-month').val(),
        exp_year: $j('.card-expiry-year').val()
    }, stripeResponseHandler);

    // prevent the form from submitting with the default action
    return false;
  });
});
</script>
{% endblock %}

{% block doccontent %}
Stripe Test:

<span class="payment-errors"></span>
<form action="" method="POST" id="payment-form">
  {% csrf_token %}
  <div class="form-row">
    <label>Card Number</label>
    <input type="text" size="20" autocomplete="off" class="card-number" />
  </div>
  <div class="form-row">
    <label>CVC</label>
    <input type="text" size="4" autocomplete="off" class="card-cvc" />
  </div>
  <div class="form-row">
    <label>Expiration (MM/YYYY)</label>
    <input type="text" size="2" class="card-expiry-month" />
    <span> / </span>
    <input type="text" size="4" class="card-expiry-year" />
  </div>
  <button type="submit" class="submit-button">Submit Payment</button>
</form>

{% endblock %}