| Name | Description | Default | Type |
|---|---|---|---|
className | Additional CSS classes. | | string |
formattingOptions | Options to define formatting. | | { obfuscation: ObfuscationMode;} |
ref | Ref for the wrapping element. | | Ref<HTMLSpanElement> |
value | Number value. | | string |
CreditCardDisplay
core package3.2.2
Note: All components shown on this site are supported by the Constellation design system. To learn how to configure Theme Cosmos, visit Pega Community.
The CreditCardDisplay component shows an auto-formatted credit card number with optional obfuscation of sensitive digits.
Usage
The CreditCardDisplay component will display any valid credit card as plain text with automatic spacing between groups of digits. If you would like to hide sensitive digits from the credit card number, you can do so with the obfuscation prop that is passed in through formattingOptions. If full, all digits will be hidden. If partial, then all but the last 4 digits will be hidden.