skyflow-js 2.1.3 → 2.2.1

package/README.md

@@ -344,7 +344,9 @@ const options = {
   enableCopy: false,    // Optional, enables the copy icon to collect elements to copy text to clipboard. Defaults to 'false').
   format: String,       // Optional, format for the element 
   translation: {},      // Optional, indicates the allowed data type value for format. 
-  cardMetadata:{}       // Optional, metadata to control card number element behavior. (only applicable for CARD_NUMBER ElementType).
+  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 '*'.
 };
 ```
 
@@ -421,6 +423,63 @@ const options = {
 User input: "B1234121234"
 Value displayed in INPUT_FIELD: "AB 12-341-2123"
 
+`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 with masking:
+
+Example for CVV:
+```js
+const options = {
+  required: true,
+  enableCopy: false, 
+  masking: true, 
+  maskingChar: '•',
+}
+```
+User input: "1234" 
+Value displayed in CVV: "••••"
+
+Example for CARDHOLDER_NAME:
+```js
+const options = {
+  required: true,
+  enableCopy: false, 
+  masking: true, 
+}
+```
+User input: "John Doe" 
+Value displayed in CARDHOLDER_NAME: "********"
+
+Example for CARD_NUMBER:
+```js
+const options = {
+  required: true,
+  enableCopy: false, 
+  masking: true, 
+  maskingChar: '#'
+}
+```
+User input: "4111 1111 1111 1111" 
+Value displayed in CARD_NUMBER: "#### #### #### ####"
+
+Example for PIN:
+```js
+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.
+
 Once the Element object and options has been defined, add it to the container using the `create(element, options)` method as shown below. The `element` param takes a Skyflow Element object and options as defined above:
 
 ```javascript