Add Credit Card: Improve Stripe error handling

[sirbrillig]

If there is a stripe error, often the error code or message will not be useful to the user. A secondary issue is that if the setup intent is created, used, and an error happens, the setup intent must be re-created to submit the form again (or the user will receive a cryptic error about the setup intent already being used).

This change handles stripe errors with special logic, displaying a generic message and causing the setup intent to be recreated.

Testing instructions

1. Sandbox the store.
2. Apply D31442-code which will break the Add Card endpoint.
3. Visit http://calypso.localhost:3000/me/purchases/add-credit-card
4. Fill in the form with a stripe test card (eg: 4242 4242 4242 4242).
5. Set the expiration date to a day in the past (eg: 02/02).
6. Submit the form.
7. You should see a message that reads "There was a problem with your credit card. Please check your information and try again". Prior to this change, you would receive an error code like invalid_expiry_year_past.
8. Change the expiration date to a day in the future.
9. Submit the form again.
10. You should see "test error happened" displayed as a global notice.
11. Without changing anything, submit the form again.
12. You should see the same error message displayed again. Prior to this change, you would receive an error that the Payment Intent had already been used.
13. Remove D31442-code.
14. Submit the form again.
15. Verify that you receive a success message.

[matticbot]

Test live: https://calypso.live/?branch=add/better-stripe-error-handling

[matticbot]

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

Sections (~1027 bytes added 📈 [gzipped])

name             parsed_size           gzip_size
themes                +227 B  (+0.1%)      +46 B  (+0.0%)
theme                 +227 B  (+0.1%)      +46 B  (+0.1%)
signup                +227 B  (+0.1%)      +46 B  (+0.1%)
settings              +227 B  (+0.0%)      +46 B  (+0.0%)
plugins               +227 B  (+0.0%)      +46 B  (+0.0%)
plans                 +227 B  (+0.0%)      +46 B  (+0.0%)
marketing             +227 B  (+0.0%)      +46 B  (+0.0%)
jetpack-connect       +227 B  (+0.0%)      +46 B  (+0.0%)
help                  +227 B  (+0.0%)      +46 B  (+0.0%)
export                +227 B  (+0.1%)      +46 B  (+0.1%)
email                 +227 B  (+0.1%)      +46 B  (+0.0%)
domains               +227 B  (+0.0%)      +46 B  (+0.0%)
customize             +227 B  (+0.1%)      +46 B  (+0.1%)
checkout              +227 B  (+0.0%)      +46 B  (+0.0%)
account-close         +227 B  (+0.1%)      +46 B  (+0.0%)
woocommerce           +119 B  (+0.0%)     +174 B  (+0.0%)
purchases             +119 B  (+0.0%)     +163 B  (+0.1%)

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 (~476 bytes added 📈 [gzipped])

name                                                      parsed_size           gzip_size
async-load-my-sites-current-site-stale-cart-items-notice       +227 B  (+0.2%)      +46 B  (+0.1%)
async-load-my-sites-current-site-notice                        +227 B  (+0.2%)      +46 B  (+0.1%)
async-load-design                                              +227 B  (+0.0%)      +46 B  (+0.0%)
async-load-blocks-inline-help-popover                          +227 B  (+0.1%)      +46 B  (+0.1%)
async-load-design-blocks                                       +119 B  (+0.0%)     +292 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]

Tested as described. 👍 Great improvement!