Implement payments via Express Checkout Element for Simple Products on the Product Page

[asumaran]

Fixes #8868

Changes proposed in this Pull Request

Implements payments using the Express Checkout Elements API.
This feature is behind the _wcpay_feature_stripe_ece flag.

Testing instructions

Note that the changes on this PR are the same as #8914. So, please make sure to follow the setup instructions before starting to test this PR.

Testing on this PR must focus on the product page for simple products only.

Note

There shouldn't be any problem with testing Google Pay or Apple Pay using your own credit card. Just make sure the site is in test mode.

Visit the product page for a simple product then:

Pay using Google Pay

• Verify shipping address can be changed.
• Verify the order is created with correct amount.
• Verify line items are present in the payment sheet.
• Verify tax is applied to the totals.
• Test with a US shipping address.
• Test with a US billing address.

Pay using Apple Pay

• Verify shipping address can be changed.
• Verify the order is created with correct amount.
• Verify line items are present in the payment sheet.
• Verify tax is applied to the totals.
• Test with a US shipping address.
• Test with a US billing address.

---

• Run npm run changelog to add a changelog file, choose patch to leave it empty if the change is not significant. You can add multiple changelog files in one PR by running this command a few times.
• Covered with tests (or have a good reason not to test in description ☝️)
• Tested on mobile (or does not apply)

Post merge

• Link to testing instructions from release testing doc following these instructions : Add link here / 'QA Testing Not Applicable'
• Add or update critical flows and testing instructions for critical flows, if applicable.
• Add what's changed (description, screenshot, demo videos etc.) to the release announcement post, if applicable.

[ricardo]

@asumaran As noted from #8914, the checkout from the product page didn't work for me. I figured out why:

In case the fraud prevention service is enabled for the account, I guess we're not passing the token correctly here, so it throws this error:

We're not able to process this payment. Please refresh the page and try again.

If I comment out that check I can proceed with the checkout.

[ricardo]

Just to add to the above comment. I'm also having problems checking out with a saved card while the fraud prevention service is enabled, so this is either a problem with my local environment or a more general issue.

[lovo-h]

Code changes are looking good and testing well.

I left a few comments we may want to address before merging.

Testing Instructions

• ✅ Pay using Google Pay. All tests passed.
• ✅ Pay using Apple Pay. All tests passed.
• ✅ npm run test:js and npm run test:php.

[asumaran]

@ricardo, I was able to see the bug, too.
However, let's handle it separately since I'm not sure if it's fixable for ECE right now, given that the same error happens for PRBs. What do you think, @bborman22?
That being said, shall we go ahead and merge this pull request?

[bborman22]

@asumaran @ricardo Just to confirm this is the bug with checking out with a saved card while the fraud prevention service is enabled? And both of you are able to reproduce. If it happens on PRBs as well today, it shouldn't block this PR and we should create an issue to track it instead.

[asumaran]

@bborman22 I was referring to the bug while the prevention service is enabled for the site. I didn't test with saved cards but I assume we'll have the same results.

[lovo-h]

Code changes LGTM 👍

[asumaran]

@bborman22 @ricardo I've created an issue for the issue we have with ECE and the Card Testing Protection Service. #8981

[asumaran]

@bborman22 @ricardo ^ I'm fixing #8981 in #8987. The fix was pretty straightforward 59f8f33