Both the BIC (Bank Identifier Code) and the IBAN (International Bank Account Number) are long numbers and thus easily mistyped. For shopping websites it's on the other hand important that it's easy for users to enter their payment data.
What's the best interface to allow users to enter this data?
Swift/BIC codes follow this convention:
AAAA BB CC DDD
AAAA Bank code A-Z 4 letter code. It usually looks like a shortened version of that bank's name.
BB Country code A-Z 2 letter code. It says which country that bank is in.
CC Location code 0-9 A-Z 2 digit location code that could be either 2 letters or numbers. It says where that bank's head office is.
DDD Branch Code 0-9 A-Z Optional 3 digit code. It specifies a particular branch, instead of the bank's head office. 'XXX' for head office.
There are sites where you can get the list of Swift codes by country, in order to validate the user input, they are in json format. PeterNotenboom/SwiftCodes on github
IBAN codes (International Bank Account Number) follow this convention:
2 letters with the ISO 3166-1 alpha-2 country code
2 digits as control codes
up to 30 digits Basic Bank Account Number (BBAN) is country specific, and there are different rules for validation.
Resuming:
You can split the BIC field in four INPUT and validate it to a json list of banks. The country code you may get from a SELECT, as there is a list of countries in the ISO norm.
You can split the IBAN into three separate INPUT boxes. The country code you may get from a SELECT, as there is a list of countries in the ISO norm. The third INPUT is country specific and it may vary a lot from country to country.
P.S. Currently there are 105548 different Swift/BIC codes....
For the design, you need simple fields/ inputs. Then, you can use a mask and smart validation. User-friendly is to let the user insert the IBAN/ BIC/ Credit number how he wants (with spaces or without) and transform the array in development.
A Textbox. Element of least surprise.
Provide an example of the format you expect directly above or below the textbox, a link (usually a question mark) to a more detailed explanation next to it, and a helpful message on a validation error.
The alternatives will at the very least mess up the perception that copy paste works. They are also more expensive to implement, easier to mess up on some of the operating systems or browsers your users use, far less robust, and usually more confusing.
Choosing from a list or lists is the best way to get accuracy.
Recognition is always easier than generation. If you structure your lists right (increasing specificity as one moves from left to right, i.e. country first, specific bank last, and words rather than numbers) your users should hardly ever get it wrong, since they generally know where they live and bank.
