search

pegasystems / constellation-ui-gallery

This open-source repository provides a collection of ready-to-use and customizable Constellation DX components. Use this resource to gain inspiration, best practices, and a solid foundation for implementing custom components.
https://pegasystems.github.io/constellation-ui-gallery/
Apache License 2.0
32 stars 28 forks source link

Proposing New Component - Obfuscate Card Number - Areteans #92

Open s-thutupalli opened 4 days ago

s-thutupalli commented 4 days ago

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 commented 8 hours ago

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 demo_accesscontrol

ricmars commented 8 hours ago

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.