Card number, expiry and security code inputs with formatting and card brand detection.
The security code. Use with |
cardExpiry | string | – | The expiry date as |
cardNumber | string | – | The card number, spaced in groups as it is shown. Use with |
cardZip | string | – | The postal code. Use with |
children | ReactNode | – | The content of the component. |
defaultCardCvc | string | – | The security code at first, when it isn't controlled. |
defaultCardExpiry | string | – | The expiry date at first, when it isn't controlled. |
defaultCardNumber | string | – | The card number at first, when it isn't controlled. |
defaultCardZip | string | – | The postal code at first, when it isn't controlled. |
defaultPaymentMethod | "card"|"upi" | card | The payment method selected at first, when it isn't controlled. |
defaultUpiId | string | – | The UPI ID at first, when it isn't controlled. |
disabled | boolean | false | Whether the component should ignore user interaction. |
labels | Partial<InputPaymentLabels> | – | Replaces the built-in text — field names, placeholders and validation messages — for this instance. See |
onCardCvcChange | ((val: string) => void) | – | Called with the security code as the user types, cut to the card brand's length. |
onCardExpiryChange | ((val: string) => void) | – | Called with the formatted expiry date as the user types. |
onCardNumberChange | ((val: string) => void) | – | Called with the formatted card number as the user types. |
onCardZipChange | ((val: string) => void) | – | Called with the postal code as the user types. |
onPaymentMethodChange | ((method: PaymentMethod) => void) | – | Called with the new method when the user switches between card and UPI. |
onUpiIdChange | ((val: string) => void) | – | Called with the UPI ID as the user types. |
onValidationChange | ((isValid: boolean, errors: PaymentInputErrors) => void) | – | Called whenever the details become valid or invalid, with a message for each field that has an error. |
paymentMethod | "card"|"upi" | – | Whether the user is paying by |
readOnly | boolean | false | Whether the value can be seen but not changed. |
upiId | string | – | The UPI ID, such as |
Accepts render, plus every native <div> attribute.
Accepts className, style and render, plus every native attribute of the element it renders.
Accepts className, style and render, plus every native attribute of the element it renders.
Accepts className, style and render, plus every native attribute of the element it renders.
Accepts render, plus every native <div> attribute.
Accepts className, style and render, plus every native attribute of the element it renders.
Accepts render, plus every native <div> attribute.
Accepts className, style and render, plus every native attribute of the element it renders.
Accepts render, plus every native <div> attribute.
Accepts className, style and render, plus every native attribute of the element it renders.
