{% extends 'uncloud/base.html' %}

{% block header %}
    <script src="https://js.stripe.com/v3/"></script>
{% endblock %}

{% block body %}
    <div id="content">
      <h1>Register Credit Card with Stripe</h1>
      <p>
        By submitting I authorise to send instructions to
        the financial institution that issued my card to take
        payments from my card account in accordance with the
        terms of my agreement with you.
      </p>

      <span id="message"></span>
      <div id="card-element"></div>
      <button type='button' id="card-button">Save</button>
      <div id="ungleichmessage">The card will be registered with stripe.</div>

      <div id="goback" style="display: none;">
        <a href="{% url 'uncloudindex' %}">Go back to main page</a>
      </div>
    </div>


    <!-- Enable Stripe from UI elements - standard code -->
    <script>
      var stripe = Stripe('{{ stripe_pk }}');

      var elements = stripe.elements();
      var cardElement = elements.create('card');
      cardElement.mount('#card-element');

      var cardButton = document.getElementById('card-button');
      var messageContainer = document.getElementById('message');
      var backmessage = document.getElementById('goback');
      var clientSecret = '{{ client_secret }}';

      cardButton.addEventListener('click', function(ev) {
		  document.getElementById("ungleichmessage").innerHTML
		      = "Registering card with Stripe, please wait ...";


	      stripe.confirmCardSetup(
		      clientSecret,
		      {
			      payment_method: {
				      card: cardElement,
				      billing_details: { name: "{{username}}", },
			      },
		      }
	      ).then(function(result) {
		      if (result.error) {
			      var message = document.createTextNode('Error:' + result.error.message);
			      messageContainer.appendChild(message);
		      } else {
			      // Return to API on success.
			      document.getElementById("ungleichmessage").innerHTML
		              = "Registered credit card with Stripe."

                  backmessage.style.display = "block";
		      }
	      });


      });
    </script>
{% endblock %}