1895673 - www.outbackequipment.com.au - "Express" check out option (Gpay) is missing from the payment page header

Status: NEW

(Web Compatibility :: Site Reports, defect, P2)

Description

[Raul Bucata]

Attachment: Screenshot_9.png

Environment:
Browser / Version: Firefox Release 125.3.0 (2016017559-🦎125.0.3-20240425211020🦎)/ Firefox Nightly 127.0a1 (2016019535-🦎127.0a1-20240507214419🦎)/ Chrome Mobile Version 124.0.6367.82
Operating System: Google Pixel 3 (Android 12) -1080 x 2160 pixels, 18:9 ratio (~443 ppi density)
Operating System: Oppo Find X5 (Android 13) - 1080 x 2400 pixels, 20:9 ratio (~402 ppi density)

Steps to reproduce:

1. Navigate to: https://www.outbackequipment.com.au/_mycart?fn=payment&ts=1715123007205030
2. Select a product from the page and add it to the cart.
3. View the item in the cart and proceed with the checkout process.
4. Observe the payment page header, above the "Billing information" section.

Expected Behavior:
The express checkout option is present

Actual Behavior:
The express checkout option is missing

Notes:

• Reproducible regardless of the status of ETP.
• Reproducible on the latest build of Firefox Nightly and Release.
• Works as expected using Chrome.
• Attachment provided.

Comment 1

[Dennis Schubert [:denschub]]

Attachment: 68747470733a2f2f776562636f6d7061742e636f6d2f75706c6f6164732f323032342f352f32323936313134332d323065622d343765342d616630652d3339396439646166643933612e6a706567.jpg

Looks like the wrong screenshot was uploaded, this is the right one. :)

Comment 2

[Thomas Wisniewski [:twisniewski]]

I do see "Express checkout" briefly try to load on Firefox, and also in Chrome in its responsive design mode, but it then simply goes away.

They're using Stripe, which seems to support Apple and Google pay in the code:

expressWebPaymentSetup: function() {
                        var e = nStripeElements.vars.stripe
                          , t = nStripeElements.func.paymentRequestInstance(e);
                        t.canMakePayment().then((function(e) {
                            if (e) {
                                var a = document.createElement("button");
                                a.classList.add("btn", "btn-dark", "btn-web-payments"),
                                "shopping_cart" == nCheckoutGlobals.pageName && a.classList.add("btn-block"),
                                e.applePay ? (a.classList.add("btn-apple-pay"),
                                a.setAttribute("aria-label", "Apple Pay"),
                                a.innerHTML = 'Check out with <i class="fab fa-apple"></i> Pay') : (a.classList.add("btn-google-pay"),
                                a.setAttribute("aria-label", "Google Pay"),
                                a.innerHTML = 'Check out with <i class="fab fa-google"></i> Pay'),
                                a.addEventListener("click", t.show),
                                $("#" + nStripeElements.vars.expressWebPaymentBtnId).html(a)
                            } else
                                $("#" + nStripeElements.vars.expressWebPaymentBtnId).remove(),
                                $(nStripeElements.vars.webPaymentFormId).remove(),
                                (0,
                                r.displayExpress)()
                        }              

It relies on the window.PaymentRequest API.