SK-1853 README and sample for masking (#175)

Author: skyflow-shravan

README.md

@@ -321,6 +321,8 @@ const options = {
   enableCopy: false, // Optional, enables the copy icon in collect and reveal elements to copy text to clipboard. Defaults to 'false').
   allowedFileType: string[], // Optional, allowed extensions for the file to be uploaded.
   cardMetadata: {}, // Optional, metadata to control card number element behavior. (only applicable for CARD_NUMBER ElementType).
+  masking: true,        // Optional, indicates whether the input should be masked. Defaults to 'false'.
+  maskingChar: '*',     // Optional, character used for masking input when masking is enabled. Defaults to '*'.
 }
 ```
 
@@ -371,6 +373,63 @@ const cardMetadata = {
 - `HIPERCARD`
 - `CARTES_BANCAIRES`
 
+`masking` : A boolean value for whether to mask the input of the element. When masking is enabled, user input will be replaced with a masking character.
+The default masking character is `*`, but you can customize masking character using the maskingChar property.
+
+`maskingChar`: A single character used to mask the input when masking is enabled. Defaults to `*`, but can be customized to any character of your choice.
+
+***Collect Element Options examples for masking***:
+
+Example for CVV:
+```jsx
+const options = {
+  required: true,
+  enableCopy: false, 
+  masking: true, 
+  maskingChar: '•',
+}
+```
+User input: "1234" 
+Value displayed in CVV: "••••"
+
+Example for CARDHOLDER_NAME:
+```jsx
+const options = {
+  required: true,
+  enableCopy: false, 
+  masking: true, 
+}
+```
+User input: "John Doe" 
+Value displayed in CARDHOLDER_NAME: "********"
+
+Example for CARD_NUMBER:
+```jsx
+const options = {
+  required: true,
+  enableCopy: false, 
+  masking: true, 
+  maskingChar: '#'
+}
+```
+User input: "4111 1111 1111 1111" 
+Value displayed in CARD_NUMBER: "#### #### #### ####"
+
+Example for PIN:
+```jsx
+const options = {
+  required: true,
+  enableCopy: false, 
+  masking: true, 
+  maskingChar: '&'
+}
+```
+User input: "98364721" 
+Value displayed in PIN: "&&&&&&&&"
+
+**Note**:
+- Unmasked data will be stored in  the vault.
+
 ### Step 3: Collect data from Elements
 
 When the form is ready to be submitted, call the `collect(options?)` method on the container object. The `options` parameter takes a object of optional parameters as shown below:

package.json

@@ -82,7 +82,7 @@
     "webpack-merge": "^5.8.0"
   },
   "dependencies": {
-    "skyflow-js": "^2.1.3",
+    "skyflow-js": "^2.2.0",
     "uuid": "^9.0.0"
   },
   "peerDependencies": {

samples/SkyflowElements/package.json

@@ -24,6 +24,6 @@
   "dependencies": {
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "skyflow-react-js": "^2.2.0"
+    "skyflow-react-js": "^2.3.0"
   }
 }

samples/SkyflowElements/src/App.tsx

@@ -15,6 +15,7 @@ import DynamicRevealElements from './components/DynamicRevealElements';
 import CardBrandChoice from './components/CardBrandChoice';
 import ThreeDSHelperFunctions from './components/3DSHelperFunctions';
 import OverrideDefaultErrors from './components/OverrideDefaultErrors'
+import Masking from './components/Masking';
 
 const App = () => {
 
@@ -107,6 +108,13 @@ const App = () => {
         </p>
         <OverrideDefaultErrors />
       </div>
+      <br />
+      <div id='Sample for masking'>
+        <p>
+          <b>Masking input</b>
+        </p>
+        <Masking />
+      </div>
     </div>
   );
 };

samples/SkyflowElements/src/components/Masking/index.tsx

@@ -0,0 +1,125 @@
+import React from 'react';
+import {
+  CardNumberElement,
+  useCollectContainer,
+  useMakeSkyflowStyles,
+  CardHolderNameElement,
+  CVVElement,
+  PinElement,
+  InputFieldElement,
+} from 'skyflow-react-js';
+
+const Masking = () => {
+  const container = useCollectContainer();
+
+  const handleCollect = () => {
+    const response = container.collect();
+    response
+      .then((res: unknown) => {
+        console.log(JSON.stringify(res));
+      })
+      .catch((e: unknown) => {
+        console.log(e);
+      });
+  };
+
+  const useStyles = useMakeSkyflowStyles({
+    inputStyles: {
+      base: {
+        border: '1px solid black',
+        borderRadius: '4px',
+        color: '#1d1d1d',
+        padding: '10px 16px',
+        fontFamily: '"Roboto", sans-serif'
+      },
+      complete: {
+        color: '#4caf50',
+      },
+      empty: {},
+      focus: {},
+      invalid: {
+        color: '#f44336',
+      },
+      global: {
+        '@import' :'url("https://fonts.googleapis.com/css2?family=Roboto&display=swap")',
+      }
+    },
+    labelStyles: {
+      base: {
+        fontSize: '16px',
+        fontWeight: 'bold',
+        fontFamily: '"Roboto", sans-serif'
+      },
+      global: {
+        '@import' :'url("https://fonts.googleapis.com/css2?family=Roboto&display=swap")',
+      },
+      requiredAsterisk:{
+        color: 'red'
+      }
+    },
+    errorTextStyles: {
+      base: {
+        color: 'red',
+        fontFamily: '"Roboto", sans-serif'
+      },
+      global: {
+        '@import' :'url("https://fonts.googleapis.com/css2?family=Roboto&display=swap")',
+      },
+    },
+  });
+
+  const classes = useStyles();
+
+  return (
+    <div>
+      <CardNumberElement
+        id={'collectCardNumber'}
+        container={container}
+        table={'cards'}
+        classes={classes}
+        column={'card_number'}
+        label='Card number'
+        options={{masking: true}}
+      />
+      <CardHolderNameElement
+        id={'collectCardholderName'}
+        container={container}
+        table={'cards'}
+        classes={classes}
+        column={'cardholder_name'}
+        label='Name'
+        options={{required: true, masking: false}}
+      />
+      <CVVElement
+        id={'collectCvv'}
+        container={container}
+        table={'cards'}
+        classes={classes}
+        column={'card_cvv'}
+        label='cvv'
+        options={{masking: true, maskingChar: "#"}}
+      />
+      <PinElement
+        id={'collectPin'}
+        container={container}
+        table={'cards'}
+        classes={classes}
+        column={'card_pin'}
+        label='Pin'
+        options={{masking: true, maskingChar: "&"}}
+      />
+      <InputFieldElement
+        id={'collectSSN'}
+        container={container}
+        table={'cards'}
+        classes={classes}
+        column={'ssn'}
+        label='SSN'
+        options={{format: 'XXX-XX-XXXX', masking: true}}
+      />
+      <button onClick={handleCollect}>Collect</button>
+    </div>
+  );
+};
+
+export default Masking;