카드번호 하이픈과 Luhn 검증

카드번호를 4-4-4-4(아메리칸 익스프레스는 4-6-5)로 나누고, Luhn 공식으로 오타를 걸러요.

무엇이 어려운가요

카드번호 마지막 자리는 Luhn 공식으로 만든 검사 숫자예요. 결제사에 보내기 전에 확인하면 숫자 하나를 잘못 친 경우를 바로 알려 줄 수 있어요.

아메리칸 익스프레스(34·37 로 시작)는 15자리 4-6-5 라서, 4자리씩 끊으면 틀려요.

직접 입력해 보세요

카드번호(시험용 번호)

결제사들이 공개한 시험용 번호예요. 실제 카드번호는 넣지 마세요

formatCardNumber(입력): '3782-822463-10005'
isValidCardNumber(입력): true
cardNumberLength(입력): 15
maskCardNumber(formatCardNumber(입력)): '3782-******-*0005'

코드

npm install @bestow-ui/korean-utils

import { cardNumberLength, formatCardNumber, isValidCardNumber } from '@bestow-ui/korean-utils';

formatCardNumber('4111111111111111'); // '4111-1111-1111-1111'
formatCardNumber('378282246310005');  // '3782-822463-10005'

isValidCardNumber('4111-1111-1111-1111'); // true
isValidCardNumber('4111-1111-1111-1112'); // false

cardNumberLength('3782'); // 15 (입력창 최대 자릿수)

알아 둘 점

Luhn 공식은 오타를 거르는 용도예요. 쓸 수 있는 카드인지는 결제사가 확인해요.
실제 카드번호는 직접 받지 말고 PG 결제창을 쓰는 것을 권해요. 이 함수는 법인카드 등록처럼 번호를 받아야 하는 화면에 써요.

React 입력 컴포넌트

CardNumberInput( @bestow-ui/react)는 이 함수를 쓰는 입력 칸이에요. 카드 종류에 맞게 하이픈을 넣고, 다 채우면 이 공식으로 확인해요.

CardNumberInput 문서 보기