- Taxonomic name: O-WALLET
- Extension: PAYMENTS
- Added on: v3.4.0 (08/06/18)
- Updated on: v5.10.0 (10/08/21)
Wallet, edit 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 edit their card details within wallet.
Design and usage
Structure
- The editing card form is shown in a full screen modal.
- The card information on the card image updates as you type, replaying what a user inserts into the form fields.
- The user is only able to edit their card's expiry date, card holdername and whether they wish to set this card as their default.
- The default card functionality is optional.
- Expired cards can also displaya notification to show the user which form field needs to be corrected; this is optional.
- Dates are shown in the format of MM/YY but can be shown as MM/YYYY when needed.
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.
Non-JS requirements and considerations
- Instead of displaying these screens in a modal, each screen appears on its own separate page.
Accessibility and screen readers
- Aria-invalid must be used to indicate when an error has occurred with this element.
- Aria-describedby must be used to link any help, instructional and/or error text with the element/form fields.
Placement
- Full screen modal forms show as built and the layout cannot be modified.
Examples
Interactive example
Code example
Edit card - modal trigger button
<a href="..." class="a-button" data-module="o-modal" data-module-load="true" data-modal-fullscreen="true" data-modal-wallet="true">Edit card</a>Edit card - content
<div class="o-wallet-card-display [ modifier ]" aria-hidden="true">
<div class="l-content-container">
<p class="a-heading a-heading--2 o-wallet-card-display__heading o-wallet-card-display__heading--mobile">Edit card ending <strong>...</strong></p>
<p class="a-heading a-heading--2 o-wallet-card-display__heading o-wallet-card-display__heading--desktop">Your ... card ending <strong>5169</strong></p>
<div class="o-wallet-card-display-inner">
<p class="o-wallet-card-display-inner__number"><small>Card ending:</small><span>XXXX ....</span></p>
<p class="o-wallet-card-display-inner__expiry"><small>Expires:</small><span>...</span></p>
<p class="o-wallet-card-display-inner__name">...</p>
</div>
</div>
</div>
<div class="l-content-container o-wallet-wrapper">
<div class="o-wallet" data-module="o-wallet" data-variant="edit">
<h1 class="a-heading a-heading--1 o-wallet-add-edit-remove-heading">Edit card ending <strong>...</strong></h1>
<div class="o-wallet-add-edit-remove">
<div class="m-form-row m-form-row--full-width">
<label class="a-label" for="...">Expiry date</label>
<div class="m-form-row__content">
<input class="a-textbox a-textbox--5-character o-wallet-add-edit-remove__expiry" id="..." name="..." data-module="a-textbox-format" data-format="22" data-spacer="/" type="text" maxlength="5" value="..." >
</div>
</div>
<div class="m-form-row m-form-row--full-width">
<label class="a-label" for="...">Card holder's name</label>
<div class="m-form-row__content">
<input class="a-textbox o-wallet-add-edit-remove__name" id="..." name="..." type="text" value="..." />
</div>
</div>
<div class="m-form-row m-form-row--full-width u-margin--bottom-none">
<label class="a-label a-checkbox--toggle-outer-label" for="..." id="...">Default card</label>
<div class="m-form-row__content a-checkbox--toggle-outer-content">
<input class="a-checkbox__input o-wallet-add-edit-remove__default" id="..." name="..." type="checkbox" aria-labelledby="..." checked />
<label class="a-checkbox a-checkbox--toggle" for="edit-test-toggle" aria-hidden="true">
<span class="a-checkbox__label">
<span class="a-checkbox__label-inner a-checkbox__label-inner--yes">Yes</span>
<span class="a-checkbox__label-inner a-checkbox__label-inner--no">No</span>
</span>
<span class="a-checkbox__ui"></span>
</label>
</div>
</div>
</div>
<div class="m-form-row m-form-row--full-width o-wallet-add-edit-remove-buttons">
<div class="m-form-row__content">
<ul class="m-button-group">
<li class="m-button-group__item"><button class="a-button a-button--primary" type="submit">Save</button></li>
<li class="m-button-group__item"><button class="a-button a-button--secondary">Cancel</button></li>
</ul>
</div>
</div>
</div>
</div>Edit card - content with errors
<div class="o-wallet-card-display [ modifier ]" aria-hidden="true">
<div class="l-content-container">
<p class="a-heading a-heading--2 o-wallet-card-display__heading o-wallet-card-display__heading--mobile">Edit card ending <strong>...</strong></p>
<p class="a-heading a-heading--2 o-wallet-card-display__heading o-wallet-card-display__heading--desktop">Your ... card ending <strong>5169</strong></p>
<div class="o-wallet-card-display-inner">
<p class="o-wallet-card-display-inner__number"><small>Card ending:</small><span>XXXX ....</span></p>
<p class="o-wallet-card-display-inner__expiry"><small>Expires:</small><span>...</span></p>
<p class="o-wallet-card-display-inner__name">...</p>
</div>
</div>
</div>
<div class="l-content-container o-wallet-wrapper">
<div class="o-wallet" data-module="o-wallet" data-variant="edit">
<h1 class="a-heading a-heading--1 o-wallet-add-edit-remove-heading">Edit card ending <strong>...</strong></h1>
<div class="m-card m-card-notification m-card-notification--warning" role="status">
<div class="m-card-content">
<div class="m-card-content">
<p>There are problems with your card details; please correct them before continuing.</p>
</div>
</div>
</div>
<div class="o-wallet-add-edit-remove has-error">
<div class="m-form-row m-form-row--full-width is-error">
<label class="a-label" for="...">Expiry date</label>
<div class="m-form-row__content">
<p class="m-form-row__error-message" id="..."><span class="u-hidden--visually">Error: </span>...</p>
<input class="a-textbox a-textbox--5-character o-wallet-add-edit-remove__expiry" id="..." name="..." data-module="a-textbox-format" data-format="22" data-spacer="/" type="text" maxlength="5" value="..." aria-invalid="true" aria-describedby="..." >
</div>
</div>
<div class="m-form-row m-form-row--full-width is-error">
<label class="a-label" for="...">Card holder's name</label>
<div class="m-form-row__content">
<p class="m-form-row__error-message" id="..."><span class="u-hidden--visually">Error: </span>...</p>
<input class="a-textbox o-wallet-add-edit-remove__name" id="..." name="..." type="text" value="..." aria-invalid="true" aria-describedby="..." />
</div>
</div>
<div class="m-form-row m-form-row--full-width u-margin--bottom-none">
<label class="a-label a-checkbox--toggle-outer-label" for="..." id="...">Default card</label>
<div class="m-form-row__content a-checkbox--toggle-outer-content">
<input class="a-checkbox__input o-wallet-add-edit-remove__default" id="..." name="..." type="checkbox" aria-labelledby="..." checked />
<label class="a-checkbox a-checkbox--toggle" for="edit-test-toggle" aria-hidden="true">
<span class="a-checkbox__label">
<span class="a-checkbox__label-inner a-checkbox__label-inner--yes">Yes</span>
<span class="a-checkbox__label-inner a-checkbox__label-inner--no">No</span>
</span>
<span class="a-checkbox__ui"></span>
</label>
</div>
</div>
</div>
<div class="m-form-row m-form-row--full-width o-wallet-add-edit-remove-buttons">
<div class="m-form-row__content">
<ul class="m-button-group">
<li class="m-button-group__item"><button class="a-button a-button--primary" type="submit">Save</button></li>
<li class="m-button-group__item"><button class="a-button a-button--secondary">Cancel</button></li>
</ul>
</div>
</div>
</div>
</div>Development and test
Notes for developers
Basic setup
For basic information about setting up wallet, including standard classes, information regarding locale settings, card types and so on, please visit the Wallet documentation page.
Input types
Care should be taken when choosing input field types for various uses, particularly with regard to number entry, as making the wrong selection could prevent users from inputting the required details into a form. For further information, see the form introduction page.
Aria usage for errors and help text
To aid screen reader users in completing forms without error and also with understanding and fixing any errors that have occured, some additional aria attributes are now recommended to be applied across all form fields/rows.
All form row help, explanatory text, form row instructions and form row errors must have a unique id assigned to them and be appropriately linked to either the individual form input or the form row using aria-describedby. This ensures that the help text is read out immediately on focus of the form input/fieldset. When there is more that one item that requires referencing within the aria-describedby attribute the id values must be supplied in the form of a space separated list. For example if there is an error with id of 'err1' and help text with id of 'help1' the value for the aria-describedby attribute would be 'err1 help1'.
All inline form error messages should start with the hidden text 'Error: ' so that when read by out by a screen reader it is immediately clear that the text being read is an error message.
All erroring form fields (or fieldset if a group or radios/checkboxes) must have aria-invalid="true" set on them, ensuring that when a user focus' on an errored form field, the field will be announced as invalid, so the user is then aware that there in an issue that requires fixing.
When linking help or errors, or even adding aria-invalid to the markup careful consideration must be taken as to where it is most appropriate to apply the value. The following rules should be used to decide where the attribute(s) should be applied.
- Single form field - All attributes should be applied directly to that form field
- Group of form fields but only one in error or help text applies to only one - Apply the attribute(s) to the only field in error or where the help text applies
- Group of form field where all in error or the help text applies to all - Apply the attribute(s) to the groups surrounding fieldset (form row)
There may situations where more than one of these rules applies to the overall form row for example a date range where the instruction text applies to both fields so should be linked to the fieldset for the date range but one of the two fields is in error so the error should be linked to just that field not to the fieldset.
Important messages
To help those using assistive technologies, make sure that success/error messages which need to be announced to users have their aria attributes updated to role="alert" and/or aria-live="assertive".
Extension component
This component forms part of the 'payments' extension and so requires an additional stylesheet to be loaded in order to be used; include the following code in the header of your page to attach the relevant additional stylesheet:
<link media="all" href="./assets/[ theme type ]/[ release version ]/[ organisation ]/[ theme name ]/css/payments.css" rel="stylesheet" />Notes for testers
- Ensure that all form fields have a correctly associated label. This not only provides context to each field for assistive technology users but also a larger clickable area to select the field. Clicking/pressing on a label for a single input field should cause the input to gain focus.
- Ensure that autofill is not available for sensitive fields such as password, card/account number etc.
- Users should be able to copy and paste if necessary.
- If the field has been restricted in length the maximum number of characters allowed must also be restricted. Note: many browsers will not do this for number field and older browsers will not do this at all.
Classes overview
The following table gives you a quick overview of the CSS classes that can be applied.
| Class | Outcome | Required | Applied to | Comments |
|---|---|---|---|---|
.o-wallet-card-display |
Base style for card display area | Yes | div |
|
.o-wallet-card-display__heading.o-wallet-card-display__heading--mobile |
Style for card display heading at mobile | Yes | .o-wallet-display > l-content-container > p |
|
.o-wallet-card-display__heading.o-wallet-card-display__heading--desktop |
Style for card display heading at tablet and desktop | Yes | .o-wallet-display > l-content-container > p |
|
.o-wallet-card-display-inner |
Style for card display inner content wrapper | Yes | .o-wallet-display > l-content-container > div |
|
.o-wallet-card-display-inner__number |
Style for card number within card display | Yes | .o-wallet-display-inner > p |
|
.o-wallet-card-display-inner__expiry |
Style for expiry date within card display | Yes | .o-wallet-display > p |
|
.o-wallet-card-display-inner__name |
Style for card holder's name within card display | Yes | .o-wallet-display > p |
|
.o-wallet-wrapper |
Base style for main wallet area | Yes | div |
|
.o-wallet |
Base style wrapping container of wallet organism | Yes | .o-wallet-wrapper > div |
Defines styling for standard form elements when used within wallet |
.o-wallet-add-edit-remove-heading |
Style for main heading | Yes | .o-wallet > h1 |
|
.o-wallet-add-edit-remove |
Style for main form rows wrapper | Yes | .o-wallet > div |
|
.o-wallet-add-edit-remove-buttons |
Style for form row containing primary and secondry CTAs | Yes | .o-wallet > .m-form-row |
|
.o-wallet-card-display--american-express |
Modifier for card icon image | .o-wallet-card-display |
 |
|
.o-wallet-card-display--dankort |
Modifier for card icon image | .o-wallet-card-display |
 |
|
.o-wallet-card-display--diners-club |
Modifier for card icon image | .o-wallet-card-display |
 |
|
.o-wallet-card-display--discover |
Modifier for card icon image | .o-wallet-card-display |
 |
|
.o-wallet-card-display--jcb |
Modifier for card icon image | .o-wallet-card-display |
 |
|
.o-wallet-card-display--maestro |
Modifier for card icon image | .o-wallet-card-display |
 |
|
.o-wallet-card-display--mastercard |
Modifier for card icon image | .o-wallet-card-display |
 |
|
.o-wallet-card-display--mir |
Modifier for card icon image | .o-wallet-card-display |
 |
|
.o-wallet-card-display--rupay |
Modifier for card icon image | .o-wallet-card-display |
 |
|
.o-wallet-card-display--unionpay |
Modifier for card icon image | .o-wallet-card-display |
 |
|
.o-wallet-card-display--visa |
Modifier for card icon image | .o-wallet-card-display |
 |
|
.o-wallet-card-display--visa-electron |
Modifier for card icon image | .o-wallet-card-display |
 |
Keyboard operations
- TAB
-
Tabbing to an input field should make the input clearly visually different so that the focus point on the page is obvious to the user.
Component releases
- Added on: v3.4.0 (08/06/18)
- Updated on: v5.10.0 (10/08/21)
Latest update:
- updated:
aria-live="polite"has been removed from the notification card as this function is already performed for screenreaders byrole="status"