Taxonomic name: A-LIST--PAYMENT-OPTION
Extension: PAYMENTS
Added on: v3.0.0 (15/09/17)
Updated on: v5.6.0 (20/04/21)

Payment options list

The payment option list gives users a clear visual illustration of available payment options.

Design and usage

Should be used within payment forms to demonstrate the payment options available.
Payment options stack in a mobile view.
Payment options are not clickable – they are for illustrative purposes only.

Examples

Interactive example

Code example

<ul class="a-list-payment-options">
	<li class="a-list-payment-options__item"><img src="./v.2023.01/shared/assets/themes-icons/v2/[ organisation ]/[ theme name ]/functional/payment-types/[ card type ].svg" decoding="async" width="..." height="..." alt="..." /></li>
</ul>

An example of the full image path would be /assets/themes-icons/v2/aviva/default/functional/payment-types/visa.svg.

Development and test

Notes for developers

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" />

Classes overview

The following table gives you a quick overview of the CSS classes that can be applied.

Class	Outcome	Required	Applied to	Comments
`.a-list-payment-options`	Base style for payment options list	Yes	`ul`
`.a-list-payment-options__item`	Base style for payment options list item	Yes	`.a-list-payment-options > li`

Available image options

The following table gives you a quick overview of the payment option images available.

Payment types	Image	Filename
American Express		`american-express.svg`
Apple Pay		`apple-pay.svg`
Dankort		`dankort.svg`
Diners club		`diners-club.svg`
Direct Debit		`direct-debit.svg`
Discover		`discover.svg`
Google Pay		`google-pay.svg`
JCB		`jcb.svg`
Maestro		`maestro.svg`
Mastercard		`mastercard.svg`
Mir		`mir.svg`
Paypal		`paypal.svg`
RuPay		`rupay.svg`
UnionPay		`unionpay.svg`
Visa		`visa.svg`
Visa Electron		`visa-electron.svg`