$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();

      } 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:

      }

    };

  </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>