Unhelpful error message: Could not purchase subscription, if the problem persists please contact support.

Problem

From our logs, we can see that the purchase is failing because of the credit card, however, the error message is not helpful.

In the last 30 days, there has been 408 users affected by this message

Proposal

When a card has insufficient funds or the card is declined, we should be a displaying an error message to indicate that the card being used is causing the purchase failure.

When possible show the message from backend

We're throwing away the human readable error message we get from the backend and from Zuora.

Replace the instances of throwing away the error message with the following:

diff --git a/app/frontend/javascripts/subscription/components/add_seats_form.vue b/app/frontend/javascripts/subscription/components/add_seats_form.vue
index c18bf3c15..5eb3ba124 100644
--- a/app/frontend/javascripts/subscription/components/add_seats_form.vue
+++ b/app/frontend/javascripts/subscription/components/add_seats_form.vue
@@ -130,7 +130,7 @@ export default {
           Sentry.captureException(error);
           this.$emit(
             'error',
-            'Could not add seats for the subscriptions, if the problem persists please contact support.',
+            error.message
           );
         })
         .finally(() => {

New error message text

We should replace the current message with the following text received from technical writing

This credit card transaction could not be processed. Please verify the information or try another card.

Reported examples:

1. https://gitlab.zendesk.com/agent/tickets/188236
2. https://gitlab.zendesk.com/agent/tickets/200402