Proposing New Component - Obfuscate Card Number - Areteans

[s-thutupalli]

Title: Obfuscate Card Number

Overview

A Number Masking React Component is a user interface utility designed to display sensitive numerical data, such as card numbers, in a masked format for security and privacy. This component is commonly used in financial and e-commerce applications to prevent exposure of complete card numbers, showing only the last few digits for identification purposes.

For example, a credit card number like 1234 5678 9012 3456 can be masked as 1234 5678 90** ****. This ensures sensitive information is hidden while still allowing users to recognize their card.

Usage

This component is ideal for any scenario requiring secure handling and display of sensitive numerical data, particularly in financial and payment-related contexts.

Apart from masking the input, component also provides a toggle to hide/show the user details like name, expiry date, card type, masked card number on the card layout derived from a decision table and output it via datapage.

As of now, logic is in place to check the starting digit of the card number and returning the card provider (ex: Mastercard) using cardTypeprop.

Configurations:

dataPageName – will be name of the datapage which will be the source to determine the card type.

cardTypeprop – property reference to which the card type is mapped in the above mentioned datapage.

isShowCard – toggle to show/hide the card layout.

Dependencies:

Styled Components

npm install styled-components

Component benefits

1. Enhanced Privacy and Security -->
   a) Mask Sensitive Data: Displays only the last few digits of the card number.
   b) Compliance with Regulations: Helps meet privacy and security standards like PCI DSS by ensuring that full card numbers are not exposed unnecessarily.

2. Better User Experience – Obfuscated card numbers convey a sense of security, making users feel safer while interacting with the application.

3. Popular Use cases:
   a) Payment Gateways: To display saved cards securely.
   b) Order History: Showing transaction details while maintaining privacy.
   c) Account Settings: Listing linked cards or payment methods.

Attached the component code and detailed description with images below.

Obfuscate_Card_Number.docx
ObfuscateCardNumber.zip

[ricmars]

Using a custom component to obfuscate the string is not the correct approach - you should configure the property on the server using access control policy to hide the value from the server so that the value is not sent to the server - if you want to hide on the client during input - you can use the password input component.
https://academy.pega.com/topic/creating-access-control-policy/v2
https://docs.pega.com/bundle/platform/page/platform/security/create-access-control-policy.html

see example

[ricmars]

If you disagree with my response above, please add more comments.
If I don't see any update in a couple of days, I will close this issue as no action.

[s-thutupalli]

One of our client’s requirements is to mask the value only at client side, as we will be needing the unmasked values top pass in the request to external web services. Hence, using access control policy would be maintenance overhead, as it masks the value at server side as well and has some limitations.

Please find attachment for more details.

ObfuscateCradNumber.docx

[ricmars]

Under review – current suggestion is to enhance the input mask component in the UI gallery to obfuscate all digits on blur