Migrate Express Checkout to the Stripe Express Checkout Element

[pierorocca]

Description

WooPayments’ Express Checkout implementation is based on Stripe's PRB element. The PRB element is a legacy element based on W3C standards. Being a web standards body, W3C updates are far and few between and Stripe has little control.

Stripe recommended in 2023 that we move to the Express Checkout Element, which expands functionality and is based off of direct integrations with Apple and Google. Combined with the upcoming Stripe express checkout domain registration compliance date, which changes how domains are registered with the express checkout providers, the timing is right to migrate to this new element.

The main problem with the current implementation is a lack of browser compatibility, particularly on mobile, and Google Pay is not appearing when 3rd party cookies are blocked. We're observing very low usage of Google Pay relative to Apple Pay despite Chrome having a dominant market share.

What we’ll gain:

• Greatly expanded browser support, particularly on mobile
• Allows us to potentially solve some pesky issues impacting conversion and UX quality per @FangedParakeet analysis paJDYF-ckK-p2
• Pill shaped buttons improving theme compatibility
• Google Pay - last 4 and acceptance brand mark on button driving more usage
• Upgrade path for adding Amazon Pay
• Optionally able to separate Apple Pay and Google Pay into their own settings
• Resolves Google Pay not displaying when 3P cookies are blocked

Acceptance criteria

Phase 1

1. Migrated to using the ECE element
2. Removed internal code that limits Apple and Google pay from being displayed on the same page
3. Apple and Google Pay are supported
4. Re-used the existing merchant settings UI
5. Buttons appear on all browser/platform combinations as listed by Stripe
6. Link email element is migrated.
7. Google Pay and Apple Pay buttons are visible even if 3rd party cookies are blocked
8. Completed for Blocks and Shortcode checkouts
9. The FSE Blocks experience for express checkout is functional post migration

Phase 2

1. Link is supported as an express checkout option in addition to Link support in the email field. Link in the Pay With section will continue to not be supported at this time.
2. Link and WooPay continue to be mutually exclusive options. Open question: Can Link still be an Express Checkout button option is WooPay has control over the email field?
3. Existing data telemetry carries over
4. Express Checkout custom field detection and notification carries over

Phase 3 - Open question: Should we wait for the Merchant Settings refresh and move this phase to that effort?

1. Corner radius, i.e. pill shaped buttons, is supported. Requires design.
2. Express Checkouts as options in the payment methods list. Help provide a level of compatibility for checkouts with custom fields.

Designs

Required for Phase 3 and are being developed as part of the Merchant Settings refresh effort.

cc @FangedParakeet

[pierorocca]

Well done. Closing as complete.