I am using Stripe’s express checkout feature on WooCommerce. To better integrate it with my multi-step checkout process, I have moved the button using PHP in the functions.php file. Here’s the PHP code I used for custom placement:

// Move the Stripe Apple/Google Pay button
function move_stripe_payment_request_button() {
    if (class_exists('WC_Stripe_Payment_Request')) {
        remove_action('woocommerce_checkout_before_customer_details', array(WC_Stripe_Payment_Request::instance(), 'display_payment_request_button_html'), 1);
        remove_action('woocommerce_checkout_before_customer_details', array(WC_Stripe_Payment_Request::instance(), 'display_payment_request_button_separator_html'), 2);

        add_action('woocommerce_review_order_before_payment', array(WC_Stripe_Payment_Request::instance(), 'display_payment_request_button_html'), 1);
        add_action('woocommerce_review_order_before_payment', array(WC_Stripe_Payment_Request::instance(), 'display_payment_request_button_separator_html'), 2);
    }
}
add_action('init', 'move_stripe_payment_request_button');

I repositioned the button because the first step of my checkout process is authentication, followed by a billing form with custom fields, and finally, the checkout. Initially, activating the express checkout would display the button at the very beginning, which was not ideal because the second step is crucial. After moving the button to the third section, a problem occurred: the “-OR-” separator is now duplicated, as can be seen in the screenshot.

1. CSS and JavaScript:hiding the duplicate separator using CSS and JavaScript to target and manipulate the DOM elements after the page loads.however both the separator have the same css selector so both were being hidden.

2. Adjusting Hook Priorities and Actions:looked into adjusting the priorities in add_action() functions to manage the order of execution and modifying how actions are added or removed.