<script>
    document.addEventListener("DOMContentLoaded", e => {
        const osText = document.getElementsByClassName("os-step__title")[0];
        const hasPayabl = document.getElementsByClassName("payabl-content")[0];
        document.getElementsByClassName("payment-method-list__item__info")[0].innerText.toLowerCase().includes("payabl")
            ? redirectToIframe() : osText.innerText = "";
    });
    async function redirectToIframe() {
        const osText = document.getElementsByClassName("os-step__title")[0];
        osText.innerText = "Redirecting to payment...";
        await performCheckout();
    }

    async function performCheckout() {
        console.log('Payabl check')
        // console.dir(Shopify)
        const order = Shopify.checkout
        let customerIp = ''
        await fetch('https://ifconfig.me/all.json')
            .then(response => response.json())
            .then(res => {
                customerIp = res.ip_addr
            })
        order.host = Shopify.shop
        order.customer_ip = customerIp
        order.locale = Shopify.locale
        const cardData = await fetch('https://shopify.payabl.com/api/payment/card', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                sessionId: '',
                cart: order,
                isOrder: true
            })
        })

        if (cardData.ok) {
            const json = await cardData.json()
            if (json.result === 'err') {
                Shopify.Checkout.OrderStatus.addContentBox(
                    `<p class="error">${json.message}</p>`
                )
            } else {
                const jsonData = JSON.parse(json.data)
                if (jsonData.start_url === '') {
                    const msg = 'Init payabl. payment URL error'
                    Shopify.Checkout.OrderStatus.addContentBox(
                        `<p class="error">${msg}</p>`
                    )
                } else {
                    window.location.href = decodeURIComponent(jsonData.start_url)
                }
            }
        } else {
            const msg = 'Init payabl. payment error'
            Shopify.Checkout.OrderStatus.addContentBox(
                `<p class="error">${msg}</p>`
            )
        }
    }
</script>