<link rel="stylesheet" type="text/css" href="{{ store_url }}catalog/view/theme/default/stylesheet/stripe.css">
<div class="payment-form-wrapper">
{% if test_mode %}
<small class="text-info">{{ text_debug }}</small>
{% endif %}
<form id="payment-form">
	<div id="payment-request-button"></div>
	<fieldset>
		<legend class="card-only">{{ text_pay_with_card }}</legend>
		<legend class="payment-request-available">{{ text_or_pay_with_card }}</legend>
		<div class="container-stripe">
			<!-- placeholder for Elements -->
			<div id="card-element"></div>
			<button type="button" id="button-confirm" class="buttons">{{ button_submit_payment }}</button>
		</div>
	</fieldset>
	<div class="error-stripe" role="alert">
		<svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 17 17">
			<path class="base" fill="#000" d="M8.5,17 C3.80557963,17 0,13.1944204 0,8.5 C0,3.80557963 3.80557963,0 8.5,0 C13.1944204,0 17,3.80557963 17,8.5 C17,13.1944204 13.1944204,17 8.5,17 Z"></path>
			<path class="glyph" fill="#FFF" d="M8.5,7.29791847 L6.12604076,4.92395924 C5.79409512,4.59201359 5.25590488,4.59201359 4.92395924,4.92395924 C4.59201359,5.25590488 4.59201359,5.79409512 4.92395924,6.12604076 L7.29791847,8.5 L4.92395924,10.8739592 C4.59201359,11.2059049 4.59201359,11.7440951 4.92395924,12.0760408 C5.25590488,12.4079864 5.79409512,12.4079864 6.12604076,12.0760408 L8.5,9.70208153 L10.8739592,12.0760408 C11.2059049,12.4079864 11.7440951,12.4079864 12.0760408,12.0760408 C12.4079864,11.7440951 12.4079864,11.2059049 12.0760408,10.8739592 L9.70208153,8.5 L12.0760408,6.12604076 C12.4079864,5.79409512 12.4079864,5.25590488 12.0760408,4.92395924 C11.7440951,4.59201359 11.2059049,4.59201359 10.8739592,4.92395924 L8.5,7.29791847 L8.5,7.29791847 Z"></path>
		</svg>
		<span id="card-errors" class="message"></span>
	</div>
</form>
<div class="success-stripe">
	<div class="icon">
		<svg width="84px" height="84px" viewBox="0 0 84 84" version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink">
			<circle class="border" cx="42" cy="42" r="40" stroke-linecap="round" stroke-width="4" stroke="#000" fill="none"></circle>
		</svg>
	</div>
</div>
</div>
<script type="text/javascript" src="https://js.stripe.com/v3/"></script>
<script type="text/javascript">
function initStripe() {
	
	if (window.Stripe) {

		var stripe = Stripe('{{ payment_stripe_public_key }}');
		var elements = stripe.elements({% if locale %}{"locale": "{{ locale }}"}{% endif %});

		var style = {
					base: {
						color: "#32325D",
						fontWeight: 500,
						fontFamily: "Inter UI, Open Sans, Segoe UI, sans-serif",
						fontSize: "15px",
						fontSmoothing: "antialiased",
						"::placeholder": {
							color: "#CFD7DF"
						}
					},
					invalid: {
						 color: "#E25950"
					}
				};

		var cardElement = elements.create('card', {style: style, hidePostalCode: true});
		cardElement.mount('#card-element');
		var cardButton = document.getElementById('button-confirm');

		var billing_details = {{ billing_details|json_encode|raw }};

		cardButton.addEventListener('click', function(ev) {
			$('.payment-form-wrapper').addClass('submitting');

			stripe.createPaymentMethod({
				type: 'card',
				card: cardElement,
				billing_details: billing_details
			}).then(function(result){
				if (result.error) {
					// Show error in payment form
					showErrorMessage(result.error.message);
				} else {
					// Send paymentMethod.id to your server (see Step 2)
					$.ajax({
						url: '{{ action }}',
						method: 'POST',
						data: JSON.stringify({ payment_method_id: result.paymentMethod.id }),
						success: function(response){
							handleServerResponse(response);
						},
						error: function(jqXHR, textStatus, errorThrown) {
							console.warn("Stripe App have encountered with some error.");
							console.warn("Please see below the response your server sent.");
							console.error(jqXHR.responseText);
							console.error(textStatus, errorThrown);
						}
					});
				}
			}).catch(function(e){
				logServerError(e);
			});
		});


		var handleServerResponse = function(response) {

			if(typeof response === "undefined") {
				console.warn("Stripe App have encountered with some error. This error might not be caused by Stripe App. Such errors come when Stripe App receive unexpected JSON response from your server.");
				console.warn("Please see below the response your server sent, whereas JSON was expected by Stripe App.");
				console.error(response);
				return;
			}

			if (response.error) {
				// Show error from server on payment form
				showErrorMessage(response.error);
			} else if (response.requires_action) {
				// Use Stripe.js to handle the required card action
				stripe.handleCardAction(response.payment_intent_client_secret).then(function(result){
					if (result.error) {
						// Show error from Stripe.js in payment form
						showErrorMessage(result.error.message);
					} else {
						// The card action has been handled
						// The PaymentIntent can be confirmed again on the server
						// Send paymentMethod.id to your server (see Step 2)
						$.ajax({
							url: '{{ action }}',
							method: 'POST',
							data: JSON.stringify({ payment_intent_id: result.paymentIntent.id }),
							success: function(response){
								handleServerResponse(response);
							},
							error: function(jqXHR, textStatus, errorThrown) {
								console.warn("Stripe App have encountered with some error.");
								console.warn("Please see below the response your server sent.");
								console.error(jqXHR.responseText);
								console.error(textStatus, errorThrown);
							}
						});
					}
				}).catch(function(e){
					logServerError(e);
				});
			} else {
				// Show success message
				window.location = response.success;
			}
		}

		var showErrorMessage = function(error) {
			$(".payment-form-wrapper #card-errors").text(error);
			$(".payment-form-wrapper .error-stripe").addClass("visible");
			$('.payment-form-wrapper').removeClass('submitting');
		}

		var logServerError = function(error){
			console.warn("Stripe App have encountered with some error.");
			console.error(error);
		}
	} else {
		 setTimeout(function() { initStripe(); }, 50);
	}
}

initStripe();
</script>