Import
import { PaymentCardNumberModule } from '@backbase/ui-ang/payment-card-number-pipe'
Usage
Use the paymentCardNumber pipe to format payment card numbers. The pipe applies masking and segmentation based on either a custom configuration or the global card number format configuration.
<!-- Basic payment card number formatting -->
<p>{{ 1234567891234567 | paymentCardNumber }}</p>
With custom configuration
Pass a configuration object to customize the length, mask range, and segment pattern.
<!-- Custom configuration -->
<p>{{ 1234567891234567 | paymentCardNumber : { length: 16, maskRange: [0, 12], segments: 4 } }}</p>
With custom mask character
Specify a custom character for masking (defaults to '•').
<!-- Custom mask character -->
<p>{{ 1234567891234567 | paymentCardNumber : { length: 16, maskRange: [0, 12], segments: 4 } : '*' }}</p>
Parameters
|
Parameter |
Type |
Description |
|---|---|---|
|
config |
PaymentCardNumberFormat |
Configuration for length, mask range, and segments |
|
maskChar |
string |
Character to use for masking |
|
value (required) |
string | number |
The payment card number to format |
config
The config parameter specifies how the card number should be formatted. It accepts an object with three properties: length, maskRange, and segments.
If not provided, uses the global format configuration for card numbers from the ACCOUNTS_DISPLAYING_FORMAT token.
Configuration properties:
- length: Total length of the payment card number
- maskRange: Index range [start, end] of characters to mask
- segments: Size or array of sizes for segments
<!-- With custom configuration -->
<p>{{ 1234567891234567 | paymentCardNumber : { length: 16, maskRange: [0, 12], segments: 4 } }}</p>
<!-- American Express format (15 digits, different segments) -->
<p>{{ 123456789123456 | paymentCardNumber : { length: 15, maskRange: [0, 11], segments: [4, 6, 5] } }}</p>
maskChar
The maskChar parameter specifies the character used for masking digits. Defaults to '•'.
<!-- Using asterisk for masking -->
<p>{{ 1234567891234567 | paymentCardNumber : { length: 16, maskRange: [0, 12], segments: 4 } : '*' }}</p>
<!-- Using bullet point for masking -->
<p>{{ 1234567891234567 | paymentCardNumber : { length: 16, maskRange: [0, 12], segments: 4 } : '•' }}</p>
value
The value parameter accepts the payment card number to be formatted. It can be a string or number.
<!-- Card number as number -->
<p>{{ 1234567891234567 | paymentCardNumber }}</p>
<!-- Card number as string -->
<p>{{ '1234567891234567' | paymentCardNumber }}</p>
Global configuration
The payment card number pipe uses the ACCOUNTS_DISPLAYING_FORMAT injection token to determine the default format for card numbers. This is the same token used by the Account Number Pipe.
import { ACCOUNTS_DISPLAYING_FORMAT } from '@backbase/ui-ang/account-number-pipe';
const accountsFormatConfig = {
cardNumber: {
segments: 4,
cardProviders: {
visa: { segments: [4, 4, 4, 4] },
mastercard: { segments: [4, 4, 4, 4] },
'american-express': { segments: [4, 6, 5] }
}
}
};
@NgModule({
providers: [
{ provide: ACCOUNTS_DISPLAYING_FORMAT, useValue: accountsFormatConfig }
]
})
export class AppModule {}
Numbers masking synchronization
The SYNCHRONIZE_NUMBERS_MASKING token enables synchronization of number masking with the backend. When set to true, the frontend does not apply any masking and relies on backend masking behavior.
import { SYNCHRONIZE_NUMBERS_MASKING } from '@backbase/ui-ang/payment-card-number-pipe';
@NgModule({
providers: [
{ provide: SYNCHRONIZE_NUMBERS_MASKING, useValue: true }
]
})
export class AppModule {}