Automatyczne wykrywanie typu karty kredytowej

Automatyczne wykrywanie typu karty kredytowej
Category: Konto Bankowe
16 marca 2021

Był czas, kiedy ludzie myśleli, że internet wymaga zupełnie innej metody płatności niż świat rzeczywisty. Po bardzo krótkim czasie wszyscy zdali sobie sprawę, że karty kredytowe są w rzeczywistości całkiem dobrze dopasowane do sieci, i tak narodził się formularz karty kredytowej. Prawdopodobnie widzieliście taki formularz często i zawsze z tymi samymi polami:

  1. Twoje imię
  2. Typ karty kredytowej
  3. Numer karty kredytowej
  4. Termin ważności

Ostatnio natknąłem się na kilka witryn, które zrezygnowały z pola typu karty kredytowej. Zarówno Amazon, jak i GitHub nie wymagają wybierania typu karty kredytowej w ich formularzu. W miarę wpisywania numeru karty kredytowej interfejs użytkownika zmienia się, pokazując typ używanej karty kredytowej.

Amazon czeka na wprowadzenie całego numeru karty kredytowej, a następnie wyświetla ikonę reprezentującą typ karty kredytowej.

Wykrywanie kart kredytowych Amazon

GitHub aktualizuje interfejs nieco szybciej, czekając, aż zgromadzi wystarczającą ilość informacji, aby określić typ karty kredytowej. Początkowo widać kilka ikon kart kredytowych. Po określeniu rzeczywistego typu karty kredytowej wszystkie ikony znikną, z wyjątkiem ikony reprezentującej typ karty kredytowej.

Wykrywanie kart kredytowych GitHub

Wykrywanie typu karty kredytowej jest miłym dodatkiem do standardowego formularza płatności, ponieważ uwalnia użytkownika od wprowadzania faktycznie zbędnych informacji. Określenie typu używanej karty kredytowej jest trywialne, gdy zrozumiesz, jak działają numery kart kredytowych.

Co znajduje się w numerze karty kredytowej?

Pomimo tego, że numery kart kredytowych wyglądają dość przypadkowo, w rzeczywistości obowiązują surowe konwencje. Istnieje norma o nazwie ISO / IEC 7812, która określa format numerów identyfikacyjnych na kartach kredytowych, a także innych numerów identyfikacyjnych opartych na karcie. Cały numer identyfikacyjny jest podzielony na trzy części:

  1. Numer identyfikacyjny emitenta (IIN). Numer IIN to pierwsze od czterech do sześciu cyfr ogólnego numeru identyfikacyjnego i reprezentuje firmę, która wydała kartę. W przypadku kart kredytowych IIN reprezentuje bank wydający.
  2. Numer konta. Kilka kolejnych cyfr to Twój osobisty numer identyfikacyjny. W przypadku kart kredytowych jest to numer Twojego konta.
  3. Cyfra kontrolna. Ostatnia cyfra służy do weryfikacji ogólnej ważności numeru identyfikacyjnego. Obliczenia są używane z poprzednimi liczbami, aby określić, czy format liczb jest prawidłowy.

Rozważ przykładowy numer karty MasterCard 5555-5555-5555-4444 (nie martw się, wszystkie banki mają przykładowe numery kart kredytowych, których możesz użyć do celów testowych). Pierwsze cztery cyfry, 5555, to numer IIN reprezentujący fałszywy bank wydający kartę MasterCard. Numery 5555-5555-444 to indywidualny numer konta, a ostatnie 4 to cyfra kontrolna.

Wykrywanie typu karty kredytowej

Interesującą rzeczą w IIN jest to, że określa on również rodzaj karty kredytowej. Oto kilka typowych wzorców IIN:

  • Numery IIN MasterCard mają pierwsze dwie cyfry z zakresu 51-55
  • Numery Visa IIN zawsze zaczynają się od 4
  • Numery IIN American Expression zawsze zaczynają się od 34 lub 37

Wiedząc o tym, można napisać prostą funkcję JavaScript, aby określić typ karty kredytowej, podając numer konta.

Ta funkcja w szerokim zakresie wykorzystuje wyrażenia regularne do weryfikacji typu karty kredytowej. Argument accountNumber powinien być ciągiem znaków (takim samym, jak wartość pola tekstowego, które będziesz oceniać). Możesz użyć metody getCreditCardType () w następujący sposób:

Należy pamiętać, że funkcja getCreditCardType () sprawdza tylko kilka pierwszych cyfr, więc działa zarówno wtedy, gdy w numerze konta są myślniki, jak i gdy ich nie ma.

Jedyne, co pozostaje do zrobienia, to powiązanie tej funkcjonalności z formularzem. Aby to zrobić, nasłuchuj zdarzeń keyup i blur. Musisz posłuchać obu, ponieważ użytkownicy albo wpiszą numer swojej karty kredytowej, albo ją wkleią. W tym drugim przypadku, klucz nigdy nie zostanie uruchomiony i nie uzyskasz wykrywania karty kredytowej.

Ten kod zakłada, że ​​na stronie istnieje pole tekstowe o identyfikatorze cc-num. Za pomocą metody DOM Level 2 addEventListener () procedura obsługi zdarzeń DOMContentLoaded konfiguruje pozostałe procedury obsługi zdarzeń dla strony. W pełnej aplikacji internetowej należy dołączyć ten kod wszędzie tam, gdzie inicjalizujesz inne programy obsługi zdarzeń. Zdarzenia keyup i blur są przypisane do wywołania handleEvent (). Wewnątrz handleEvent () bieżąca wartość pola tekstowego jest pobierana przez event.target.value i przekazywana do funkcji getCreditCardType (). Po określeniu typu wprowadzane są odpowiednie zmiany w interfejsie użytkownika.

A co z bezpieczeństwem?

Walidacja po stronie klienta została zaprojektowana jako wygoda dla użytkownika, a nie jako środek ostrożności w systemie. Automatyczne wykrywanie typu karty kredytowej w ten sposób nie daje żadnej wskazówki, czy numer karty kredytowej jako całość jest ważny. Serwer powinien zarówno automatycznie wykrywać typ karty kredytowej przy użyciu tego samego algorytmu, jak i sprawdzać, czy numer karty kredytowej jest prawidłowy. Systemy handlowe zazwyczaj wykonują obie te kontrole za Ciebie.

Kolejny aspekt, o którym należy pamiętać: jeśli nie wykrywasz automatycznie wszystkich typów kart kredytowych, które akceptujesz, upewnij się, że użytkownik może określić typ karty. Amazon wyświetla listę rozwijaną z dostępnymi typami kart kredytowych, jeśli nie uda jej się określić typu na podstawie samego numeru karty kredytowej. Z drugiej strony GitHub automatycznie wykrywa wszystkie typy kart kredytowych, które akceptuje.

Prostsze formularze = szybsza realizacja transakcji

Powszechnie przyjęta zasada mówi, że prostsze formy to lepsze formy. Zawsze, gdy możesz ułatwić wypełnianie formularza, zdecydowanie powinieneś skorzystać z okazji. W przypadku kart kredytowych od tak dawna prosimy użytkowników o podanie zbędnych informacji, że zwykle akceptujemy status quo. Amazon i GitHub są zdecydowanie pierwszymi w tej dziedzinie, ale spodziewam się, że więcej witryn zacznie stosować automatyczne wykrywanie typów kart kredytowych w swoich formularzach.

Idąc na Extra Mile

Chociaż pomocne jest zidentyfikowanie typu używanej karty kredytowej, a tym samym wyeliminowanie jednego pola formularza, jeszcze bardziej pomocne jest sprawdzenie, czy cały numer karty kredytowej jest ważny przed wysłaniem formularza. Większość numerów kart kredytowych można zweryfikować za pomocą algorytmu Luhna. Algorytm Luhna można bardzo łatwo zaimplementować w Javascript, pozwalając na weryfikację formatu numeru karty kredytowej w przeglądarce. Należy pamiętać, że nie gwarantuje to, że karta kredytowa jest ważna do użytku, a jedynie, że numer faktycznie reprezentuje prawidłowy numer karty kredytowej.

Pułapki, których należy unikać

  • Nie zapominaj, że określenie typu karty kredytowej to nie to samo, co sprawdzenie karty kredytowej. Numer IIN może być ważny, podczas gdy reszta numeru jest fałszywa.
  • Nigdy nie polegaj wyłącznie na JavaScript do weryfikacji poufnych informacji, takich jak numery kart kredytowych. Zawsze musisz mieć również walidację na serwerze.
  • Jeśli akceptujesz tylko kilka typów kart kredytowych, upewnij się, że jest to oczywiste w interfejsie użytkownika.
  • Nie zapisuj automatycznie wykrytego typu karty kredytowej w polu formularza w celu przesłania na serwer.

Rzeczy do zrobienia

  • Zastosuj tę samą logikę do wykrywania typu karty kredytowej na serwerze.
  • Jeśli istnieje typ karty kredytowej, którego nie wykrywasz automatycznie, pamiętaj o zapewnieniu użytkownikowi sposobu na ręczne określenie typu. Amazon robi to, wyświetlając listę dostępnych typów kart kredytowych, jeśli nie może wykryć automatycznie.

Dalsze czytanie

  • „Electronic Payment Schemes”, W3C, 18 grudnia 1995
  • „ISO / IEC 7812”, Wikipedia, 30 listopada 2011
  • „Numery kart kredytowych”, Wikipedia, 30 listopada 2011
  • Sprawdź numery kont finanso karty kredytowej, Paypal
  • „Informatyka w JavaScript: sprawdzanie poprawności numerów kart kredytowych”, NCZOnline, 4 sierpnia 2009
  • „Luhn Algorithm”, Wikipedia, 30 listopada 2011

Jak upraszczasz wprowadzanie formularzy przez użytkowników?

Twój Szerpa

Nicholas Zakas

Nicholas C. Zakas jest konsultantem, autorem i mówcą.