if (stripeKey) {
    const stripe = Stripe(stripeKey);
    const elements = stripe.elements();

    const style = {
        base: {
            fontSize: '16px',
            color: '#32325d',
            border: '1px solid red',
        },
    };

    const card = elements.create('card', { style: style });
    card.mount('#card-element');

    function stripe_payment() {
        const paymentMethodInput = document.getElementById('payment_method');
        if (paymentMethodInput) {
            const parent = paymentMethodInput.parentElement;
            if (parent.classList.contains('has-error')) {
                parent.classList.remove('has-error');
            }
        }

        stripe.createToken(card).then(function (result) {
            if (result.error) {
                const errorElement = document.getElementById('card-errors');
                if (errorElement) {
                    errorElement.textContent = result.error.message;
                }
            } else {
                stripeTokenHandler(result.token);
            }
        });
    }

    function stripeTokenHandler(token) {
        const form = document.getElementById('paymentForm');
        if (form) {
            const hiddenInput = document.createElement('input');
            hiddenInput.setAttribute('type', 'hidden');
            hiddenInput.setAttribute('name', 'stripeToken');
            hiddenInput.setAttribute('value', token.id);
            form.appendChild(hiddenInput);
            form.submit();
        }
    }
}
