Wallet, remove card

Wallet allows users to add and use payment methods within their account to make payments on Abeille Assurances websites. This addition allows users to remove an existing card from within wallet.

Design and usage

Structure

• When the user requests to remove a card, a full screen modal is shown to ask for confirmation.
• Within the modal, a visual representation of the card the user wishes to delete is shown to help reaffirm they are deleting the right card. NOTE: If the card is linked to ongoing or scheduled payments (like an auto renewal) the screen should carry a message informing the user of the impact on those paymentsoOur design example is based on a UK scenario where removing a card doesn't stop the regular payments.
• Dates on the card are shown as MM/YY but can be shown as MM/YYYY when needed.
• When a card is successfully removed, a success notification is shown on the underlying page, just above the list of stored cards.

Labels

• All modals must have a 'Cancel' form button and the 'Close' modal button.
• Card number is masked and only shows the last 4 digits.
• The modal title for removing the card must replay the last 4 digits of the user's card.
• PROHIBITED: Remove button cannot be a short label like 'yes' or 'remove'; the button must carry a descriptive action, eg. 'Yes, remove this card'.

Errors

• If an error occurs, and a card cannot be deleted, an error notification would be displayed on the page where their stored cards are shown to say that an error has occurred, that they cannot currently delete their card and to try again later.

Non-JS requirements and considerations

• Instead of displaying these screens in a modal, each screen appearson its own separate page.

Placement

• Full screen modal forms show as built and the layout cannot be modified.