e-ticket/assets/modules/stripe-payment.js

function waitForStripe() {
    return new Promise(resolve => {
        if (typeof globalThis.Stripe !== 'undefined') {
            resolve()

            return
        }
        const interval = setInterval(() => {
            if (typeof globalThis.Stripe !== 'undefined') {
                clearInterval(interval)
                resolve()
            }
        }, 100)
    })
}

export function initStripePayment() {
    const container = document.getElementById('payment-card')
    if (!container) return

    const publicKey = container.dataset.stripeKey
    const stripeAccount = container.dataset.stripeAccount
    const intentUrl = container.dataset.intentUrl
    const returnUrl = container.dataset.returnUrl
    const amount = container.dataset.amount

    if (!publicKey || !intentUrl) return

    const submitBtn = document.getElementById('payment-submit')
    const messageEl = document.getElementById('payment-message')
    const messageText = document.getElementById('payment-message-text')

    let stripe
    let elements

    waitForStripe().then(() => {
        /* global Stripe */
        stripe = Stripe(publicKey, {
            stripeAccount: stripeAccount || undefined,
        })

        return globalThis.fetch(intentUrl, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
        })
    })
        .then(r => r.json())
        .then(data => {
            elements = stripe.elements({
                clientSecret: data.clientSecret,
                appearance: {
                    theme: 'flat',
                    variables: {
                        colorPrimary: '#4f46e5',
                        fontFamily: 'system-ui, sans-serif',
                        fontWeightNormal: '700',
                        borderRadius: '0px',
                        colorBackground: '#ffffff',
                    },
                    rules: {
                        '.Input': {
                            border: '2px solid #111827',
                            boxShadow: 'none',
                        },
                        '.Input:focus': {
                            border: '2px solid #4f46e5',
                            boxShadow: 'none',
                        },
                    },
                },
            })

            const paymentElement = elements.create('payment', { layout: 'tabs' })
            paymentElement.mount('#payment-element')
        })

    submitBtn.addEventListener('click', async () => {
        if (!stripe || !elements) return

        submitBtn.disabled = true
        submitBtn.textContent = 'Traitement...'
        messageEl.classList.add('hidden')

        const { error } = await stripe.confirmPayment({
            elements,
            confirmParams: {
                return_url: returnUrl,
            },
        })

        if (error) {
            messageText.textContent = error.message
            messageEl.classList.remove('hidden')
            submitBtn.disabled = false
            submitBtn.textContent = 'Payer ' + amount + ' \u20AC'
        }
    })
}