EditCardDetails: Switch to Stripe Elements

[sirbrillig]

Changes proposed in this Pull Request

This updates the EditCardDetails component to use Stripe Elements and Payment Intents (see previous work in #34848).

Depends on:

• Clean up of EditCardDetails: EditCardDetails: Refactor to a functional component #35237
• Fixing a missing endpoint field: D31360-code

Testing instructions

2. Sandbox the API and the store.
3. Make sure you have purchased something, then visit http://calypso.localhost:3000/me/purchases, click on a purchase, and then click on "Change Payment Method"
4. Verify that the placeholder for the card number field is numbers and not dots (this verifies that you are seeing the Stripe field).
5. Fill out all the fields with a unique cardholder name (something different than the subscription's current cardholder name) and with a Stripe test card (eg: 4242 4242 4242 4242) and submit the form.
6. Verify that you get a success message and are redirected to the purchase page again.
7. Reload the resulting page (to force calypso to fetch the updated card data), then click the "Payment method" text/icon.
8. Be sure that the cardholder name shown is the same as the one you updated above.

[matticbot]

Test live: https://calypso.live/?branch=update/edit-card-details-stripe-elements

[matticbot]

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

Sections (~239 bytes removed 📉 [gzipped])

name         parsed_size           gzip_size
themes            -552 B  (-0.1%)     -148 B  (-0.1%)
theme             -552 B  (-0.2%)     -148 B  (-0.2%)
purchases         +132 B  (+0.0%)      +32 B  (+0.0%)
woocommerce        +88 B  (+0.0%)      +25 B  (+0.0%)

Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to.

Async-loaded Components (~21 bytes added 📈 [gzipped])

name                      parsed_size           gzip_size
async-load-design-blocks        +88 B  (+0.0%)      +21 B  (+0.0%)

React components that are loaded lazily, when a certain part of UI is displayed for the first time.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

[yoavf]

👍Works as expected, together with the two dependencies.

[yoavf]

@sirbrillig I've noticed an unrelated issue in this flow and in the generic add-card one, which we should fix seperately:

I guess we don't do a pre-submission validation like we do when submitting a card with payment, so we should figure out how to display a proper error message here (or maybe better, just prevent submission if stripe elements have errors, since those are already displayed).

[sirbrillig]

@yoavf thanks for noticing that. We should be preventing the submission with invalid data but apparently that is sometimes not working? Anyway, #35315 should improve the error message we receive (and the error flow in general).