@visa/nova-react
Version:
Visa Product Design System Nova React library
79 lines (78 loc) • 4 kB
TypeScript
/**
* Copyright (c) 2025 Visa, Inc.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*
**/
import { CardBrand, CardValidator } from './utils';
export type UseCardNumberValidationProps<Brand extends string = CardBrand> = {
/** Allowed brands array, if undefined all brands allowed. This is used for validation only and will not filter the validators. */
allowedBrands?: Brand[];
/** Default card number input state */
defaultCardNumberInputValue?: string;
/** Filtered brands array, if undefined no brands will be filtered. Only these brands will be checked for, the rest will be filtered out. */
filteredForBrands?: Brand[];
/** Remove all digits passed the matching card validator's max length */
trimToMaxLength?: boolean;
/** Custom validators if our validators don't fit your use cases */
validators?: Record<Brand, CardValidator<Brand>>;
};
/**
* @docs {@link https://design.visa.com/react/hooks/use-card-number-validation | See Docs}
* @description This hook is used to to validate card numbers. This hook uses BIN regex's, length, Luhn checksum algorithm (modulo 10 check), and brands to check card number validity. This hook is designed to be flexible and allow for custom validators.
* @devNote This hook's validation is not comprehensive and is subject to change. VPDS does not maintain acceptance marks for all brands for legal reasons. This hook is designed to let you bring your own validators, if custom validators are required for your use case.
* @related input, select
*/
export declare const useCardNumberValidation: {
<Brand extends string = CardBrand>(useCardNumberValidationOptions?: UseCardNumberValidationProps<Brand>): {
/** BIN is valid */
binValid: boolean;
/** Brand if BIN is valid, undefined if BIN is not valid */
brand: Brand | undefined;
/** The brand input is included in allowedBrands */
brandValid: boolean;
/** Raw input value state sent from onCardNumberChange */
cardNumberInputValue: string;
/** Card validator from BIN if BIN is matched, undefined if BIN not recognized */
cardNumberValidator: CardValidator<Brand> | undefined;
/** cardNumberInputValue with non digit values filtered out, and/or max characters removed */
cleanCardNumber: string;
/** cleanCardNumber with the proper spacing */
formattedCardNumber: string;
/** Valid last digit based off mod 10 check */
lastDigitValid: boolean;
/** The card number length is valid, validated with cleanCardNumber */
lengthValid: boolean;
/** Setter for cardNumberInputValue state */
onCardNumberChange: (cardNumberInputValue: string) => void;
/** The card number is fully valid based on BIN regex's, allowed brands, length, and modulo 10 check */
valid: boolean;
};
displayName: string;
defaultProps: {
allowedBrands: undefined;
defaultCardNumber: string;
filteredForBrands: undefined;
trimToMaxLength: boolean;
validators: {
AMERICAN_EXPRESS: CardValidator<CardBrand>;
DISCOVER: CardValidator<CardBrand>;
ELO: CardValidator<CardBrand>;
MASTER_CARD: CardValidator<CardBrand>;
MAESTRO: CardValidator<CardBrand>;
VISA: CardValidator<CardBrand>;
};
};
};
export default useCardNumberValidation;
export * from './utils';