{% load i18n %}

{# TODO: load only once #}
<script src="https://polyfill.io/v3/polyfill.min.js?version=3.52.1&features=fetch"></script>
<script src="https://js.stripe.com/v3/"></script>

<button class="stripe-checkout-button btn btn-primary" id="checkout-button-{{ order.id }}">{% trans 'Pay' %}</button>

<script type="text/javascript">
    // Create an instance of the Stripe object with your publishable API key
    var stripe = Stripe("{{ stripe_key }}");
    var checkoutButton = document.getElementById("checkout-button-{{ order.id }}");
    checkoutButton.addEventListener("click", function () {
        fetch("{% url 'commerce:stripe_create_session' order.pk %}", {
            method: "POST",
        })
        .then(function (response) {
            return response.json();
        })
        .then(function (session)
        {
            if (session.error) {
                alert(session.error);
            } else {
                return stripe.redirectToCheckout({sessionId: session.id});
            }
        })
        .then(function (result) {
            // If redirectToCheckout fails due to a browser or network
            // error, you should display the localized error message to your
            // customer using error.message.
            if (result && result.error) {
                alert(result.error.message);
            }
        })
        .catch(function (error) {
            alert(error);
            console.error(error);
        });
    });

    function findGetParameter(parameterName) {
        var result = null,
            tmp = [];

        location.search
            .substr(1)
            .split("&")
            .forEach(function (item) {
              tmp = item.split("=");
              if (tmp[0] === parameterName) result = decodeURIComponent(tmp[1]);
            });
        return result;
    }

    if({{ order.id }} == findGetParameter('pay')) {
        console.log('Trigger checkout {{ order.id }}');
        checkoutButton.click();
    }
</script>