Fix(Purchase): handle 3DS error in the frontend
What does this MR do and why?
This MR implements handling for errors in the frontend and uses that to handle the authentication required error from Stripe that is a result of the 3DS authentication failing.
Changelog: changed EE: true
This change blocks that MR: Fix(Purchase addon): handle errors in the frontend (!149817 - merged).
Note to reviewer: this area is particularly complex so I would appreciate keeping comments strictly to the task at hand. I've created this issue to handle the consolidation of these components: https://gitlab.com/gitlab-org/gitlab/-/issues/455554+.
MR acceptance checklist
Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.
Screenshots or screen recordings
Screenshots are required for UI changes, and strongly recommended for all other merge requests.
| Before | After (3DS) | After ("unknown" error) |
|---|---|---|
 |
 |
 |
How to set up and validate locally
Numbered steps to set up and validate the change are strongly suggested.
- Ensure you have CustomersDot set up and working: https://gitlab.com/gitlab-org/customers-gitlab-com/-/blob/main/doc/setup/installation_steps.md?ref_type=heads
- Navigate to purchase a subscription http://localhost:3000/-/subscriptions/new?plan_id=2c92a01176f0d50a0176f3043c4d4a53&test=capabilities
- Go through the flow and use the "always authenticate" card from the stripe test cards (this will trigger the 3DS error).
- Submit the card form and see the error handled in the frontend
- Update the card number to just be one digit, e.g. 1.
- Submit the card form again and see the "unknown" error handled in the frontend gracefully
Related to #455267 (closed)