{% load i18n %}
<div class="mooch mooch--stripe">
<button type="button" id="stripeButton">{{ moocher.title }}</button>

<script src="https://checkout.stripe.com/checkout.js"></script>
<script>
(function() {

  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', '{{ charge_url }}', true);
      xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
      xhr.onload = function() {
        window.location.href = '{{ moocher.success_url }}';  // TODO
      };
      xhr.send(
          'id=' + encodeURIComponent('{{ payment.id.hex }}') +
          '&token=' + encodeURIComponent(token.id));
    }
  });

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

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

  window.addEventListener('popstate', function() { handler.close(); });

})();
</script>

</div>
