Wallet, stored cards

Wallet allows users to add and use payment methods within their account to make payments on Abeille Assurances websites. This addition allows users to add, store and edit their payment cards on Abeille Assurances websites.

Design and usage

At the moment, core Framework functionality supports only credit/debit cards. Other payment methods will be added in future releases, but the code is flexible enough to allow teams to add their own sections in the meantime if so desired.

Credit/debit card

Structure

• If no bank cards are stored, the default view would show an empty credit card pictograph
• When a new bank card is saved it will replace the empty credit card pictograph
• The colour of each bank card matches the colour of that card's brand i.e. Visa cards are coloured in a Visa blue. Refer to the designs for the different card colour patterns

• Each bank card must show:

  • The card type – indicated by the card's brand logo/icon
  • The card's expiry date (dates are shown in a MM/YY format, but can be shown as MM/YYYY when needed)
  • The card number in a truncated format (i.e. '****' and then the last 4 digits of the card number)

• Each bank card should also include:

  • The cardholder's name
  • A button to 'Edit' the card
  • A button to 'Remove' the card

  These three elements are optional if there are technical constraints in implementing them.

• Each card can also have a default button functionality (optional)

• If the default functionality is used, it follows these rules:

  • There can be only one default card at any one time
  • A card can be made/changed to the default card by clicking on the heart button on the card or by clicking on the card's "Edit"/"Update" button
  • When a default card is selected, the heart button on the card becomes filled, and, when the page is refreshed, the card is positioned first in the sequence of cards
  • If a different card is selected to be the default card, the old card transitions to a state of "Make default" and, when the page is refreshed, is placed in the second position in the sequence of cards (whilst the new default card is first in the sequence)
  • If a default card is deselected and no new card is selected to become the default, the card remains in its current position and transitions to the state of "Make default"
• Stored cards run side by side on desktop and tablet and stack on mobile viewports
• The maximum number of bank cards allowed is a configurable limit. Once this limit is reached, a warning notification is displayed above the bank cards prompting the user to delete any unused cards in order to add a new card
• The cards are ordered by the most recently used to the least recently used card. If this is not possible, the cards are ordered from most recently added to the least recently added
• If there is a default card, this card is the first one shown in the sequence
• Expiring or expired cards show with a notification in place of the card allowing the card to be updated (if supported) or removed
• Success notifications appear above the cards

Labels

• Card number is masked and only shows the last 4 digits except during the adding screens when the number is shown in full
• Edit and Remove links should be kept short to reduce the risk of wrapping
• Make default label can use different copy

Errors

• If the associated bank does not allow a particular card to be updated, then only the "Remove" button is shown – i.e. the "Update expiry date" button is not present
• If a customer's stored cards cannot be shown, an error notification card is displayed instead, with a message like the following: "We can't show your stored cards right now. Your card details are still secure. Please refresh the page or call 01234 567 890 to change your stored cards"

Placement

• The Wallet viewing UI section can be added anywhere in a page

Design anatomy

Desktop break point

• The empty card pictogram spans across 3 columns and measures (W=285px H=168px)
• An "Add new card" CTA sits underneath the credit card/s
• Each new credit card spans across 4 columns (W=390px H=236px) with a 30px right and bottom margin
• The maximum number of cards per row is 3

Tablet break point

• The empty card pictogram inherits the desktop size card and measures (W=285px H=168px)
• An "Add new card" CTA sits underneath the credit card/s
• Each new credit card spans across 4 columns (W=344px H=220px) with a 20px right and bottom margin
• The maximum number of cards per row is 2

Mobile break point

• The empty card pictogram spans across 4 columns (W=280px H=168px)
• An "Add new card" CTA sits underneath the credit card/s and spans across 4 columns (280px)
• Each new credit card spans across 4 columns (W=280px H=220px) with a 30px bottom margin
• With each subsequent new card added, the card stacks beneath the previous card

Sketch Columns

• Desktop:

  • Width per card 3 columns (285px)
  • Max 3 cards per row (12 columns, 1230px)

• Tablet:

  • Width per card 4 columns (344px)
  • Max 2 cards per row (8 columns, 708px)

• Mobile:

  • Width per card 4 columns (280px)