MyRedland/templates/user/subscribe_get.html.ep

% use JSON qw/encode_json/;
% title 'Suscribete - Redland Official';
% layout 'side_menu';
% my $product = stash 'product';
% my $so = stash 'subscription_order';
% my $current_payment_intent = $self->current_payment_intent;

<div class="description">
	<h2>Ultimando tu subscripción.</h2>

	<input type="hidden" id="publishable-secret" value="<%=$config->{stripe_public}%>"/>
	<input type="hidden" id="so-uuid" value="<%=$so->uuid%>"/>

	<p>Estás suscribiendote en la modalidad "<%=$product->name%>"</p>

	<p>Vas a pagar <%=$so->to_pay/100%>€ al <%=$product->period%>.</p>

	<form id="payment-form">
		<input type="checkbox" id="save-card"
				<%=$so->save_card ? 'checked' : ''%> <%=$so->renew_auto ? 'disabled' : ''%>/>
		<label>Guardar la tarjeta para futuros pagos.</label>
		<input type="checkbox" id="renew-subscription" value="Renovar la subscripción automáticamente."
				<%=$so->renew_auto ? 'checked': ''%>/>
		<label>Renovar la subscripción automáticamente.</label>

	    <div id="card-element">
		</div>
		<div class="submit-div">
			<button id="submit">Enviar pago</button>
		</div>
		<div id="error-message">
		</div>
    </form>

</div>
<script src="https://js.stripe.com/v3/"></script>
<script nonce="<%=$nonce%>">
	const publishable_secret_element = document.querySelector('#publishable-secret');
	const stripe = Stripe(publishable_secret_element.value);
    const options = JSON.parse(<%== encode_json(encode_json(
		{
			clientSecret => $so->client_secret,
			appearance => {
				theme => 'night',
				variables => {
					colorBackground => '#ffffff',
					colorText => '#30313d',
					colorDanger => '#df1b41',
				}
			}
		}
	));%>);
	const clientSecret = options.clientSecret;
	const appearance = options.appearance;
	const renew_subscription_element = document.querySelector('#renew-subscription');
	const style = {
      base: {
		background: '#191326',
        color: "#DC143C",
        fontFamily: 'Arial, sans-serif',
        fontSmoothing: "antialiased",
        fontSize: "25px",
        "::placeholder": {
          color: "#DC143C",
		  background: '#191326',
        }
      },
      invalid: {
        fontFamily: 'Arial, sans-serif',
        color: "#fa755a",
        iconColor: "#fa755a"
      }
    };
	const save_card_element = document.querySelector('#save-card');

	const form = document.querySelector('#payment-form');

	async function update_checkboxes() {
		const response = await fetch('/orden-de-subscripcion/estado', {
			method: 'GET',
		});
		const text = await response.text();
		const body = JSON.parse(text);
		save_card_element.checked = !!body.save_card;	
		renew_subscription_element.checked = !!body.renew_auto;	
		save_card_element.disabled = !!body.renew_auto;
		renew_subscription_element.disabled = false;
	}
	
	function payWithCard(stripe, card, client_secret) {
		update_checkboxes().then(() => {
			const data = {
				payment_method: {
					card: card
				}
			};
			data.setup_future_usage = 'off_session';
			stripe.confirmCardPayment(clientSecret, data)
				.then(function(result) {
					if (result.error) {
						// Show error to your customer
						showError(result.error.message);
					} else {
						window.location = '/perfil/pago-exitoso';
					}
				});
		});
	}

	function showError(error) {
		  const error_msg = document.querySelector("#error-message");
		  error_msg.textContent = error;
		  setTimeout(function() {
			error_msg.textContent = "";
		  }, 4000);
	}

	update_checkboxes();
	
	save_card_element.addEventListener('change', () => {
		save_card_element.disabled = true;
		renew_subscription_element.disabled = true;
		fetch('/orden-de-subscripcion/guardar-tarjeta-api', {
			method: 'POST',
			body: JSON.stringify({new_value: save_card_element.checked}),
		}).then((response) => response.text()).then((text) => {
			const body = JSON.parse(text);
			if (body['error'] != null) {
				alert(body['error']);
			}
			update_checkboxes();
		});
	});

	renew_subscription_element.addEventListener('change', () => {
		save_card_element.disabled = true;
		renew_subscription_element.disabled = true;
		fetch('/orden-de-subscripcion/renovacion-automatica-api', {
			method: 'POST',
			body: JSON.stringify({new_value: renew_subscription_element.checked}),
		}).then((response) => response.text()).then( (text) => {
			const body = JSON.parse(text);
			if (body['error'] != null) {
				alert(body['error']);
			}
			update_checkboxes();
		});
	});

	const elements = stripe.elements({clientSecret, appearance});

	// Create and mount the Payment Element
	const card = elements.create('card', { style, hideIcon: true });
	card.mount('#card-element');
    card.on("change", function (event) {
      document.querySelector("#submit").disabled = event.empty;
      document.querySelector("#error-message").textContent = event.error ? event.error.message : "";
    });
	form.addEventListener('submit', (event) => {
		event.preventDefault();
		payWithCard(stripe, card, options.clientSecret);
	});
</script>