I am building a button that, when clicked, opens a pop-up with a 2-step form. In the first step, users fill in their details. After clicking “Next,” the user is registered and logged in (without refreshing the page). Then, we add a product to the cart and attempt to fetch the checkout without refreshing the page.

However, I am encountering an issue. When I try to fill in the payment details, I always get the error: “We were unable to process your order, please try again.”

When I refresh the page and try again, everything works fine.

It seems something is missing, but I don’t know what. Here is part of my code:

html code in wordpress

<div id="signup_checkout" class="mylightbox">
    <div class="mylightbox-content">
        <span class="myclose-button">×</span>
        <div id="signup">
            [gravityform id="1" title="false" description="false" ajax="true"]
        </div>
        <div id="checkout">
           

        </div>
    </div>
</div>

all this codes are in function.php
click on button open popup and add to cart

(".show_register").click(function() {
                var product = $(this).attr("rel");
                addToCart(product);

                document.getElementById("signup_checkout").style.display = "block";

                if (!document.body.classList.contains("logged-in")) {
                    // If the user is logged in, open lightbox1
                    document.getElementById("signup").style.display = "block";
                    document.getElementById("checkout").style.display = "none";
                } else {
                    // If the user is not logged in, open lightbox2
                    document.getElementById("checkout").style.display = "block";
                    document.getElementById("signup").style.display = "none";
                }
            });

add to cart section here i am also loading checkout js files and try to change the checkout:

function addToCart(product) {
                // Send an AJAX request to add the product to the cart
                jQuery('#checkout .woocommerce').addClass('woocommerce-checkout');

                $.ajax({
                    type: "POST",
                    url: "example.com/home/?add-to-cart=" + product,
                    data: {
                        action: "woocommerce_add_to_cart",
                        product_id: product,
                    },
                    success: function(response) {
                        // If the product is added successfully, fetch the checkout form
                        console.log("Product added to cart:", response);

                        function loadScript(id, src, attributes = {}) {
                            if (!document.getElementById(id)) {
                                var script = document.createElement('script');
                                script.id = id;
                                script.src = src;
                                script.type = 'text/javascript';
                                for (var key in attributes) {
                                    script.setAttribute(key, attributes[key]);
                                }
                                document.head.appendChild(script);
                            }
                        }

                        // Load WooCommerce checkout script
                        loadScript('wc-checkout-js', 'example.com/wp-content/plugins/woocommerce/assets/js/frontend/checkout.min.js?ver=8.7.0', { 'data-wp-strategy': 'defer' });

                        // Load WooCommerce Payments checkout script
                        loadScript('wc-payments-checkout-js', 'example.com/wp-content/plugins/woocommerce-payments/dist/checkout.js?ver=7.4.0', { 'data-wp-strategy': 'defer' });
      

                        setTimeout(function() {
                            // Fetch the checkout form after the product is added to the cart
                            var newForm = $(response).find('.woocommerce-checkout');
                            $('#checkout .woocommerce-checkout').replaceWith(newForm);

                            // Reinitialize WooCommerce checkout functions
                            jQuery(document.body).trigger('init_checkout');
                            jQuery(document.body).trigger('update_checkout');
                            jQuery(document.body).trigger('updated_checkout');
                        }, 2000);
                        

                    },
                    error: function(xhr, status, error) {
                        console.error("Error adding product to cart:", error);
                    }
                });
            }

when i add my code i can the payment like this

the only different when i am doing refresh is that i cant see the use a new payment method checkbox. i will just meantion again that with refresh the page everything working, and i dont want refresh the page.

Thanks