Payment request buttons do not work when caching product pages

[crashbit666]

What I expected

On mobile device, when I select a variation of product I expected I can click on Comprar (Buy) button

What happened instead

When I select a variation the button is grayed and I can't click on it.

Steps to reproduce the issue

On a mobile device with Chrome payment method, select one product, select one variation and check if Comprar button is not grayed. If I activate develop optioins on chrome, I can see a 403 error with POST https://www.mamabepo.com/?wc-ajax=wc_stripe_get_selected_product_data 403. I check Sucuri block and nothing is blocking, I deactivate wordfence plugin and I check hosting logs and doesn't show this 403 error

This line generate error: g.send(b.hasContent && b.data || null)

My website

---

• [ ] Issue assigned to next milestone.
• [ ] Issue assigned a priority (will be assessed by maintainers).

[amityweb]

Did you resolve this? Also having the issue. I think it may be cache related for us. Clear cache it works, then for a new user session it doesn't. Clear cache then that user session works, then refresh the old one and that doesn't. We use WP Rocket for our cache system.

[amityweb]

I thought I posted an update about this, but cant find it...

My issue (might not be the same as above) is in woocommerce-gateway-stripe/includes/payment-methods/class-wc-stripe-payment-request.php the function check_ajax_referer returns -1 and so the rest does not process. Maybe to do with cache is happens on subsequent cache calls.

To fix it I comment the following out which I guess is not best practice but dont know what else to do: //check_ajax_referer( 'wc-stripe-get-selected-product-data', 'security' );

I am raising this again because I just upgraded the plugin and so my code above was overwritten and the issue still persists.

Please could a developer fix this so we don't have to keep modifying its code every time its updated.

Thanks!

[Ariane-B]

Still happens in 2020. I had to disable Google Pay. It would be nice if there was a workaround for caches.

[katinthehatsite]

The same issue happens in 3542333-zen with the ?wc-ajax=update_order_review 403 error

[manomintis]

I confirm the bug. The same happens to me. However, only happens to Safari users.

[glagonikas]

We came across the same bug ourselves and tried to pinpoint the exact cause of this. We concluded the following:

This bug happens on websites where cache is enabled and only on product pages if they are cached. It does not happen on cart or checkout, or for logged-in users. It also happens when payment request (Google/Apple pay) buttons are enabled and when the customer is using a browser that supports those (so Chrome/Safari)

The reason for this, is the nonce shown on the cached page, is somebody else's and not the current users'. The current user hasn't got a session yet, because they only see a cached page in the form of HTML and make no interaction with the application.

The moment a session is created (if you add a product to the cart for example) pages are no longer cached and a session is created for that user, so the issue goes away.

@allendav This should probably be bumped to a higher priority, because it definitely affects a lot of people without realising. I'd imagine any website that caches product pages and has the payment buttons there (shown by default) would experience this issue and it affects the customers that browse only cached pages (or land on a product page). It's also quite elusive because it goes away the moment a session is created, so it's hard to find a scenario that it can be reproduced.

The best way to reproduce, is the following

1. Enable caching on product pages
2. Enable guest checkout (so you don't run into https://github.com/woocommerce/woocommerce-gateway-stripe/issues/1352)
3. Open an incognito window and navigate to a product page
4. Click on the Google or Apple pay button
5. Enter your details

While we wait for someone to fix this issue, there are two solutions

1. Hide the payment buttons on the product pages

You can use this code in functions.php or a mu-plugin add_filter( 'wc_stripe_hide_payment_request_on_product_page', '__return_true', 1000 );

2. Add a bit of code to mess around with the nonces

You can find more details on this nonce issue here

// fix stripe nonce failture on first page load
add_filter('nonce_user_logged_out', 'wc_stripe_nonce_fix', 100, 2);
function wc_stripe_nonce_fix( $uid = 0, $action = '' ) {

    if (
        $action === 'woocommerce-process_checkout' &&
        is_checkout() &&
        (
            !isset($_GET['wc-ajax']) ||
            isset($_GET['wc-ajax']) && $_GET['wc-ajax'] !== 'wc_stripe_create_order'
        )
    ) {
        // return original
        return $uid;
    }

    // check if current action is inside overwrite actions and return new uid
    if (
        $action == 'wc-stripe-payment-request' ||
        $action == 'wc-stripe-payment-request-shipping' ||
        $action == 'wc-stripe-update-shipping-method' ||
        $action == 'woocommerce-process_checkout' ||
        $action == 'wc-stripe-add-to-cart' ||
        $action == 'wc-stripe-get-selected-product-data' ||
        $action == 'wc-stripe-log-errors' ||
        $action == 'wc-stripe-clear-cart'
    ) {
        return 0;
    }

    // return original
    return $uid;
}

add_action( 'wp_ajax_get_stripe_nonce', 'get_stripe_nonce' );
add_action( 'wp_ajax_nopriv_get_stripe_nonce', 'get_stripe_nonce' );
function get_stripe_nonce() {
    wp_send_json(array(
        'payment'                   => wp_create_nonce( 'wc-stripe-payment-request' ),
        'shipping'                  => wp_create_nonce( 'wc-stripe-payment-request-shipping' ),
        'update_shipping'           => wp_create_nonce( 'wc-stripe-update-shipping-method' ),
        'checkout'                  => wp_create_nonce( 'woocommerce-process_checkout' ),
        'add_to_cart'               => wp_create_nonce( 'wc-stripe-add-to-cart' ),
        'get_selected_product_data' => wp_create_nonce( 'wc-stripe-get-selected-product-data' ),
        'log_errors'                => wp_create_nonce( 'wc-stripe-log-errors' ),
        'clear_cart'                => wp_create_nonce( 'wc-stripe-clear-cart' ),
    ));
}

add_action('wp_footer', 'append_get_stripe_nonce_request' );
function append_get_stripe_nonce_request() {

    if ( !is_product() ) {
        return;
    }

    global $post;

    if ( apply_filters( 'wc_stripe_hide_payment_request_on_product_page', false, $post ) ) {
        return;
    }

    ?>
    <script>
    jQuery( 'body' ).on( 'wc_fragments_refreshed', function() {
        jQuery.ajax( {
            url: ajaxurl,
            type: 'POST',
            data: {
                action: 'get_stripe_nonce'
            },
            success: function( data ) {
                wc_stripe_payment_request_params.nonce = data;
            }
        });
    });
    </script>
    <?php
}

Option 2 seems to work for us now, but we need to test a bit more before setting it live. If anyone else uses it and comes across any issues, please let me know

p.s. It's a few ajax calls that fail. We noticed first when trying to update the shipping address, but upon fixing that, we were unable to create an order. Upon fixing that, we ended up with duplicate orders due to a CSRF issue, very similar (if not identical) to https://github.com/woocommerce/woocommerce-gateway-stripe/issues/1011

[ServusNL]

Any update on this? I seem to experience the same problem with Apple Pay in combination with Litespeed caching, where first the right amount is shown then it turns to 0. Tried to add these: wc-stripe-payment-request wc-stripe-payment-request-shipping wc-stripe-update-shipping-method woocommerce-process_checkout wc-stripe-add-to-cart wc-stripe-get-selected-product-data wc-stripe-log-errors wc-stripe-clear-cart

to the ESI Nonce in the Litespeed plugin but it did not work.

[sam-fc]

Can Someone Please Provide an updated solution for this - Inactive/Greyed express buttons on cached pages?? Please please !