[jakubjasinsky]

Summary

When the only express checkout option is a wallet (Apple Pay / Google Pay) that turns out to be unavailable, Dynamic Checkout still rendered the "Express checkout" header above an empty section. The section now appears only once a wallet button is actually shown.

Changes

• ApplePayClient / GooglePayClient take an onButtonDisplayed callback. It fires only when the button really renders (Apple Pay checkAvailability succeeds, or Google Pay isReadyToPay returns result: true).
• DynamicCheckoutPaymentMethodsView: a section with only wallets starts hidden and is shown when any wallet calls back. If there are saved payment methods, the section shows straight away as before.
• Added wallet-availability.test.ts, covering Apple Pay available/unavailable and Google Pay ready / not ready / rejected.

Impact

• Also fixes the same issue for Google Pay.
• The header now appears together with the wallet button instead of before it, so there is a slightly larger layout shift when the section appears.

Additional Context

Known issues left for follow-ups:

• The regular methods section still says "Other payment methods" when every configured wallet is unavailable.
• #google-pay-button-container keeps its fixed 48px height when Google Pay is unavailable but Apple Pay is shown.

[datadog-eu-processout]

_{This comment will be updated automatically if new data arrives.
🔗 Commit SHA: cfb6999 | Docs | Give us feedback!}

[datadog-processout]

_{This comment will be updated automatically if new data arrives.
🔗 Commit SHA: cfb6999 | Docs | Give us feedback!}

[Copilot]

🟢 Approval recommended

The callback wiring and visibility changes match the intended behavior, with no unresolved blocking findings.

No open issues 🎉

What changed in this PR

This PR prevents Dynamic Checkout from showing an empty “Express checkout” section when configured wallets are unavailable, while preserving immediate display for saved payment methods.

Changes:

• Adds callbacks when Apple Pay or Google Pay displays its button.
• Keeps wallet-only express checkout sections hidden until a wallet button appears.
• Adds tests for wallet availability, readiness, and failure cases.

File	Description
test/​dynamic-checkout/​wallet-availability.test.ts	Tests wallet button display callbacks across availability outcomes.
src/​dynamic-checkout/​views/​payment-methods.ts	Hides wallet-only sections until a button is displayed.
src/​dynamic-checkout/​payment-methods/​google-pay.ts	Passes the display callback to the Google Pay client.
src/​dynamic-checkout/​payment-methods/​apple-pay.ts	Passes the display callback to the Apple Pay client.
src/​dynamic-checkout/​clients/​google-pay.ts	Calls back after appending an available Google Pay button.
src/​dynamic-checkout/​clients/​apple-pay.ts	Calls back after revealing an available Apple Pay button.

_{Review effort: Balanced}