Add bank images and options to show issuer list with radiobuttons

[remcotolsma]

No description provided.

[rvdsteege]

Issuer list with images is supported in some of the extensions (e.g. Gravity Forms, WooCommerce).

Should we close this issue, @remcotolsma?

[remcotolsma]

I still had some ideas regarding the display of the iDEAL banks choice, sometimes I come across nice alternative views at Dutch webshops.

Gravity Forms

List with icons

Small icons

Large icons

I noticed that the small icons are quite large compared to the large icons.

https://github.com/wp-pay-extensions/gravityforms/blob/e8329f1cc6b0541b376c35566ce5194ee0a18399/src/Fields.php#L134-L136

Maybe rename 'small icons' to 'icons only' and the 'large icons' to 'full logo'?

Idea

Sometimes i also see a combination of a <select> element with all the logos of the iDEAL banks underneath. When clicking on the logo of a bank, the bank in the <select> element is automatically selected.

Maybe one day we can launch components for the iDEAL bank choice including all HTML, CSS and JavaScript, similar to:

• https://developer.wordpress.org/block-editor/reference-guides/components/dropdown-menu/
• https://getbootstrap.com/docs/5.0/components/dropdowns/
• https://material-ui.com/components/selects/

We already have a nice bank card component:

https://github.com/wp-pay/core/blob/2.7.0/scss/card-slider.scss

It would be cool if other developers could use such components easily(er).

iDEAL Merchant Integration Guide

Version 3.3.1 (november 2012)

4.4 Presentation of the Issuer selection list

To ensure that the Consumer experience of an iDEAL transaction is consistent and recognizable
through all Merchant websites; all Merchants have to comply with certain presentation standards.

All Issuers in the DirectoryResponse have to be shown in a “dropdown list box”. The first element
in this list is “Kies uw bank…” (Eng. “Choose your bank…”), and is selected by default.
Subesequently the name of the Merchant’s country of choice is shown (either the Merchant’s own
country or the country the Consumer is (expected to be) from). The names of all Issuers that
belong to the Merchant’s country of choice are presented next in separate elements, in the same
(alphabetical) order as they are presented in the DirectoryResponse. Following this the names of
other available countries are presented alphabetically, within each country the banks from are
sorted alphabetically, in the same order as presented in the DirectoryResponse. The Merchant
should generate an error message whenever one of the elements “Kies uw bank…” and
countryNames elements is selected by the Consumer.

² Country names need only be displayed if there are banks from more than one country on the Issuer list. If all banks in
the list are from the same country, the country name can be omitted.

It is recommended to configure the HTML “value” field of the items in the list box to be the
issuerID (BIC) of the corresponding Issuer, because this value is necessary for subsequent
messages.
An example of the Issuer selection list is shown in Figure 3.

Figure 3: Example of (open) dropdown list box showing the Issuer list.

Merchants are not permitted to remove Issuing banks temporarily from the Issuer selection list or
to grey them out.

If a Merchant learns via the iDEAL Notification System (Central Reporting tool for iDEAL banks to
state system non-availability) or via error messages received from the Acquiring bank that a
particular Issuing bank is not currently available, the Merchant may display a message on its
website informing Consumers that the particular bank is not available. In other words, it is
perfectly permissible to display a message conveying such information but it is not permissible to
temporarily remove or grey out the Issuing bank concerned from the Issuer selection list.

Source: https://www.pronamic.nl/wp-content/uploads/2012/12/iDEAL-Merchant-Integration-Guide-ENG-v3.3.1.pdf

Other Examples

[rvdsteege]

From customer:

Is het mogelijk om logo's van banken te tonen bij de selectie van betalen met iDeal? Nu staan alleen de namen er, maar voor de herkenning en snelheid van de flow lijkt het ons handig om ook de logo's te tonen. Of hebben jullie dit bewust niet gedaan?

Internal Help Scout ticket: https://secure.helpscout.net/conversation/2063979297/24776