[DESIGN] Additional states to support errors in the enrollment process with Littlepay

[indexing]

During implementation to support the Backoffice API from Littlepay, the dev team identified error states that are not currently represented in the app when a transit rider has passed eligibility for a benefit and is completing enrollment of their debit or credit card with Littlepay.

We need four distinct states in the Enrollment error view.

• Generic 500
• User enrollment error
• System enrollment error
• Already enrolled error (covered separately in Create new Enrollment error state for users already enrolled, not expired yet / not within re-enrollment window #1921)

Each state—where possible—needs to inform the user what the next step is to resolve the problem.

---

500 error

A general error state that typically results from a problem with the agency configuration. The fix is outside the users control; resolution will require support from the Cal-ITP engineering team and a fix will be in place within a few hours.

• Incorrect Backoffice credentials (error is from Cal-ITP side)
• Incorrect group configuration (error is from Cal-ITP side)

Acceptance criteria:

• Review current copy for accuracy and alignment with all error states.
• View content communicates the next step for the user.
• Copy explains to the user what happened using plain language that can be comprehended at an 8th grade reading level.

---

User enrollment error

An error state that results when a user incorrectly inputs card details and submits the Littlepay form.

Acceptance criteria:

• View content communicates the next step for the user.
• Copy explains to the user what happened using plain language that can be comprehended at an 8th grade reading level.

---

System enrollment error

An error state that results from a problem with on the Littlepay platform. The fix is outside the user's control; resolution will require support from Littlepay and may take days to resolve.

• Failure to get a token on the enrollment index view. The disabled primary button with the label "Please wait..." never becomes active. (error is from the Littlepay side)
• Failure to enroll the card in a group (error is from the Littlepay side)
• Failure to tokenize card (error is from Littlepay side)

Acceptance criteria:

• View content communicates the next step for the user.
• Copy explains to the user what happened using plain language that can be comprehended at an 8th grade reading level.

---

[indexing]

@thekaveman Please review for this issue for accuracy. Once confirmed, we'll begin the design phase.

[thekaveman]

@indexing yes this all looks good, with one additional note that the Generic 500 error is shared by all phases of the app, so we wouldn't want to put any enrollment-specific language on this page.

[srhhnry]

Here is an initial pass on all three error states. @indexing and @thekaveman any notes/comments/edits?

500 Error:

User Enrollment Error:

System Enrollment Error:

For the 500 and System enrollment errors we would direct the user to the home page, as both errors might take long enough to correct that the user would get kicked out of Login.gov. For the user enrollment error, we take them back to the Littlepay window.

I tried to make the 500 error a bit more branded and verbose to help the user feel like someone is paying attention, and I also left it vague enough that it hopefully covers all support states.

[srhhnry]

All of these text elements pass accessibility standards and are located in Ditto.

[srhhnry]

Checking in on feedback @thekaveman and @indexing

[srhhnry]

Interim pass (formerly final) on these error screens can be found here.

500 Error

User Enrollment Error

System Enrollment Error

Already Enrolled Error

[indexing]

Handoff to devs is complete.

@srhhnry Please add links to the Figma mockups for each error view before closing this issue. Thanks.

[srhhnry]

Final screens, all can be found at Error Screens in Figma.

500 error

User enrollment error

Agency card eligibility error

System enrollment error