{% load i18n %}
<div class="moocher moocher--stripe">
<button type="button" id="stripeButton">{% trans "Pay with Stripe (VISA, Mastercard)" %}</button>

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://checkout.stripe.com/checkout.js"></script>

<script>
  jQuery.noConflict();
  var handler = StripeCheckout.configure({
    key: '{{ publishable_key }}',
    // image: '/img/documentation/checkout/marketplace.png',
    currency: 'CHF',
    name: document.title,
    description: '{% trans "Payment" %}',  // TODO something better
    locale: '{{ LANGUAGE_CODE|default:'auto' }}',
    token: function(token) {
      jQuery.post(
        '{% url "mooch:stripe_charge" %}',
        {
          id: '{{ donation.id.hex }}',
          token: token.id
        },
        function(data) {
          window.location.href = '/';  // TODO
        }
      );
    }
  });

  jQuery('#stripeButton').on('click', function(e) {
    // Open Checkout with further options
    handler.open({
      amount: {{ payment.amount_cents }}
    });
    e.preventDefault();
  });

  // Close Checkout on page navigation
  jQuery(window).on('popstate', function() {
    handler.close();
  });
</script>

</div>

{% load i18n %}
<div class="moocher moocher--stripe">
<button type="button" id="stripeButton">{% trans "Pay with Stripe (VISA, Mastercard)" %}</button>

<script src="https://checkout.stripe.com/checkout.js"></script>

<script>
  var handler = StripeCheckout.configure({
    key: '{{ publishable_key }}',
    // image: '/img/documentation/checkout/marketplace.png',
    currency: 'CHF',
    name: document.title,
    description: '{% trans "Payment" %}',  // TODO something better
    locale: '{{ LANGUAGE_CODE|default:'auto' }}',
    token: function(token) {
      var xhr = new XMLHttpRequest();
      xhr.open('POST', '{% url "mooch:stripe_charge" %}', true);
      xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
      xhr.onload = function() {
        window.location.href = '/';  // TODO
      };
      xhr.send(
          'id=' + encodeURIComponent('{{ payment.id.hex }}') +
          '&token=' + encodeURIComponent(token.id));
    }
  });

document.querySelector('.moocher--stripe button').addEventListener('click', function(e) {
  e.preventDefault();

  handler.open({amount: {{ payment.amount_cents }} });
});

window.addEventListener('popstate', function() { handler.close(); });
</script>

</div>

Stop using jQuery just for a simple POST
Stop using jQuery just for a simple POST
