<div class="modal fade" id="modalStripe" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop="static" data-keyboard="false">
	<div class="modal-dialog modal-md" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal">&times;</button>
				<h4 class="modal-title" id="myModalLabel"><?php __('plugin_stripe_payment_title') ?></h4>
			</div>
			<div class="modal-body">
				<div id="stripe-button-container"><?php __('plugin_stripe_redirecting') ?></div>
			</div>
		</div>
	</div>
</div>

<script>
(function ($, undefined) {
	function redirectToStripe() {
		fetch("<?php echo PJ_INSTALL_URL; ?>index.php?controller=pjStripe&action=pjActionCreateOrder", {
			method: "POST",
			headers: {
				"Content-Type": "application/json"
			},
			body: JSON.stringify({
				cart: {
					reference_id: "<?php echo $tpl['arr']['custom']; ?>",
					amount: "<?php echo $tpl['arr']['amount']; ?>",
					currency: "<?php echo $tpl['arr']['currency_code']; ?>",
					description: "<?php echo htmlspecialchars($tpl['arr']['item_name']); ?>"
				}
			})
		}).then(function (res) {
			return res.json();
		}).then(function (res) {
			if (res && res.url) {
				window.location.href = res.url;
			} else {
				$('#modalStripe').find('.modal-body').html((res && res.error) ? res.error : 'Error');
			}
		}).catch(function (err) {
			$('#modalStripe').find('.modal-body').html(err);
		});
	}

	$("#modalStripe").on("hidden.bs.modal", function () {
		window.location.href = "<?php echo $tpl['arr']['failure_url']; ?>";
	});

	$("#modalStripe").on("shown.bs.modal", function () {
		redirectToStripe();
	});

	$('#modalStripe .modal-dialog').css('z-index', 1040);
	$('#modalStripe').modal("show");
})((window.pjQ && window.pjQ.jQuery) || jQuery);
</script>
