Express Payment button not visibile on the Cart template

[ralucaStan]

Describe the bug

When visiting the Page: Cart template, the button for express payment is not visible in the Cart block

To Reproduce

1. Go to Appearance > Editor > Templates > Page: Cart
2. Click on 'Edit'
3. Scroll down to the bottom of the template
4. Notice the express payment buttons aren't available

Actual behavior

The buttons are visible when navigating to the block via the Post editor. Admin > Pages > Cart

Screenshots

Page: Cart template

Cart Page

Expected behavior

The express payment buttons should show in the editor for the template as well

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context

[bborman22]

A quick note while triaging, I am able to see the express checkout buttons on the cart page when going to Admin > Pages > Cart, so some things to consider are that it requires HTTPS and a valid browser set up. But we'll definitely want to confirm the overall behavior, because if they are not appearing, than we shouldn't display a seemingly broken view like that.

[danielmx-dev]

Please add your planning poker estimate with Zenhub @FangedParakeet

[danielmx-dev]

In #10141 I'm proposing to stop using the Stripe Elements API to load the previews, and instead use the APIs provided directly by Google (https://developers.google.com/pay/api/web/guides/resources/customize) and Apple (https://developer.apple.com/documentation/apple_pay_on_the_web/displaying_apple_pay_buttons_using_css).

Here's how it looks in the Apple Pay / Google Pay Settings page (using Stripe):

Here's in the Template Editor (which previously didn't load, now it's using the Apple Pay and Google Pay APIs directly):

And here's in the live Cart page (Using Stripe):

Here is another example using different settings:

Settings:

Template Editor:

Cart Page:

In this last screenshot there seems to be an error with the margin calculation done by Stripe when using Safari, but it's outside of our control.

Finally here are screenshots using the Outline theme.

Settings:

Template Editor:

Cart Page:

In Chrome the borders render fine (Although Apple Pay is not supported, so it won't render at all):

[danielmx-dev]

I created a follow-up issue to track the problem with the white/outline buttons in safari (I also confirmed that the issue is present in the current develop branch): #10258

[FangedParakeet]

Just dropping a last call for feedback on this issue. It appears that the current solution in #10141 is a large improvement over the non-functionality reported in this issue, has been reviewed by Heisenberg, and offers visual parity with checkout with the sole exception of the difference described in #10258, which can be completed as a follow-up issue.

I've added this issue to the 8.9.0 milestone and we will look to merge our solution before the end of the week, since the PR has been approved. Am extending a final opportunity to suggest any alterations to the given solution, in case there is any critical shortfall in visual appearance or functionality. Let us know if anyone has any cause to pause and review the implementation here, otherwise we will be closing out this issue once merged and if there are further changes required, we can continue the conversation in #10248. Cheers in advance and apologies for frivolous pings! 🙏

CC @ralucaStan @pierorocca @elizaan36

[pierorocca]

The downside of this approach is that, if more express payment methods are added, we'd need to implement a way to render the buttons ourselves. An alternative would be to just show placeholder buttons and don't worry too much about the styling, but please let me know what do you think

At some point soon Amazon Pay may be added. Stripe Link is an option and Klarna is in Beta. So if this isn't scalable I'd suggest other options.

[danielmx-dev]

At some point soon Amazon Pay may be added. Stripe Link is an option and Klarna is in Beta. So if this isn't scalable I'd suggest other options.

We could limit the new solution to Google Pay/Apple Pay only, and once the new express payment methods are added we can work individually in their previews (in the meantime the previews would be rendered using Stripe, although that may not work in the template editor as explained in the present issue).

The only other alternative would be to use regular unstyled buttons as placeholders.

[pierorocca]

Amazon might be easier to have a placeholder since it has only 1 theme and no configurable text. In principle using real not dummy data is preferred as it scales better and is easier to maintain.