Quelle est la manière la plus conviviale de demander à un utilisateur de saisir des données bancaires européennes?
Le BIC (Bank Identifier Code) et l'IBAN (International Bank Account Number) sont tous deux des numéros longs et donc facilement mal orthographiés. Pour les sites Web d'achat, il est en revanche important qu'il soit facile pour les utilisateurs d'entrer leurs données de paiement.
Quelle est la meilleure interface pour permettre aux utilisateurs d'entrer ces données?
Les codes Swift/BIC suivent cette convention:
AAAA BB CC DDD
[~ # ~] aaaa [~ # ~] Code bancaire A-Z Code à 4 lettres. Il ressemble généralement à une version abrégée du nom de cette banque.
[~ # ~] bb [~ # ~] Code de pays A-Z Code à 2 lettres. Il indique dans quel pays se trouve cette banque.
[~ # ~] cc [~ # ~] Code d'emplacement 0-9 A-Z Code d'emplacement à 2 chiffres pouvant être composé de 2 lettres ou de chiffres. Il indique où se trouve le siège social de cette banque.
[~ # ~] ddd [~ # ~] Code de succursale 0-9 A-Z Code facultatif à 3 chiffres. Il spécifie une succursale particulière, au lieu du siège social de la banque. "XXX" pour le siège social.
Il existe des sites où vous pouvez obtenir la liste des codes Swift par pays, afin de valider la saisie de l'utilisateur, ils sont au format json. PeterNotenboom/SwiftCodes sur github
Les codes IBAN ( International Bank Account Number ) suivent cette convention:
2 lettres avec code pays ISO 3166-1 alpha-2
2 chiffres comme codes de contrôle
jusqu'à 30 chiffres Le numéro de compte bancaire de base (BBAN) est spécifique au pays et il existe différentes règles de validation.
Reprise:
Vous pouvez diviser le champ BIC en quatre INPUT et le valider dans une liste json de banques. Le code de pays que vous pouvez obtenir à partir d'un SELECT, car il existe une liste de pays dans la norme ISO.
Vous pouvez diviser l'IBAN en trois zones INPUT distinctes. Le code de pays que vous pouvez obtenir à partir d'un SELECT, car il existe une liste de pays dans la norme ISO. Le troisième INPUT est spécifique au pays et peut varier considérablement d'un pays à l'autre.
P.S. Il existe actuellement 105548 codes Swift/BIC différents ....
Pour la conception, vous avez besoin de champs/entrées simples. Ensuite, vous pouvez utiliser un masque et une validation intelligente. La convivialité consiste à laisser l'utilisateur insérer le numéro IBAN/BIC/Credit comme il le souhaite (avec ou sans espaces) et transformer le tableau en cours de développement.
Choisir parmi une ou plusieurs listes est le meilleur moyen d'obtenir une précision.
La reconnaissance est toujours plus facile que la génération. Si vous structurez vos listes à droite (augmentant la spécificité à mesure que l'on se déplace de gauche à droite, c'est-à-dire le pays d'abord, la banque spécifique en dernier et les mots plutôt que les nombres), vos utilisateurs ne devraient presque jamais se tromper, car ils savent généralement où ils vivent et effectuent leurs transactions bancaires.
Une zone de texte. Élément de moindre surprise.
Donnez un exemple du format que vous attendez directement au-dessus ou au-dessous de la zone de texte, un lien (généralement un point d'interrogation) vers une explication plus détaillée à côté et un message utile sur une erreur de validation.
Les alternatives gâcheront à tout le moins la perception selon laquelle le copier-coller fonctionne. Ils sont également plus chers à mettre en œuvre, plus faciles à gâcher sur certains des systèmes d'exploitation ou navigateurs que vos utilisateurs utilisent, beaucoup moins robustes et généralement plus déroutants.