jQuery(function($) {
    'use strict';

    // Initialize Stripe
    var stripe = Stripe(stripe_params.publishableKey);
    var elements = stripe.elements();

    // Create card element
    var cardElement = elements.create('card', {
        style: {
            base: {
                fontSize: '16px',
                color: '#424770',
                '::placeholder': {
                    color: '#aab7c4',
                },
            },
            invalid: {
                color: '#9e2146',
            },
        },
    });

    // Mount card element
    cardElement.mount('#stripe-card-element');

    // Handle form submission
    $('form.checkout').on('checkout_place_order_custom_stripe', function() {
        return stripeFormHandler();
    });

    function stripeFormHandler() {
        if ($('#payment_method_custom_stripe').is(':checked')) {
            if ($('input[name="stripe_token"]').length) {
                return true;
            }

            stripe.createToken(cardElement).then(function(result) {
                if (result.error) {
                    // Show error to customer
                    $('.woocommerce-error, .woocommerce-message').remove();
                    $('form.checkout').prepend('<div class="woocommerce-error">' + result.error.message + '</div>');
                    $('html, body').animate({
                        scrollTop: ($('form.checkout').offset().top - 100)
                    }, 1000);
                } else {
                    // Insert token into form and submit
                    $('form.checkout').append('<input type="hidden" name="stripe_token" value="' + result.token.id + '" />');
                    $('form.checkout').submit();
                }
            });
            return false;
        }
        return true;
    }

    // Handle card element changes
    cardElement.addEventListener('change', function(event) {
        var displayError = document.getElementById('card-errors');
        if (event.error) {
            displayError.textContent = event.error.message;
        } else {
            displayError.textContent = '';
        }
    });
});