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

{% block header %}
		<script src="https://js.stripe.com/v3/"></script>
		<style>
			#content {
				width: 400px;
				margin: auto;
			}

			#callback-form {
				display: none;
			}
		</style>
{% endblock %}

{% block body %}
		<div id="content">
			<h1>Registering Stripe Credit Card</h1>

			<!-- Stripe form and messages -->
			<span id="message"></span>
			<form id="setup-form">
				<div id="card-element"></div>
				<button type='button' id="card-button">
					Save
				</button>
			</form>

			<!-- Dirty hack used for callback to API -->
			<form id="callback-form" action="{{ callback }}" method="post"></form>
		</div>

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

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

		<!-- Handle card submission -->
		<script>
			var cardButton = document.getElementById('card-button');
			var messageContainer = document.getElementById('message');
			var clientSecret = '{{ client_secret }}';

			cardButton.addEventListener('click', function(ev) {

				stripe.confirmCardSetup(
					clientSecret,
					{
						payment_method: {
							card: cardElement,
							billing_details: {
							},
						},
					}
				).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("callback-form").submit();
					}
				});
			});
		</script>

{% endblock %}