From fb2fe068b9d8080be5520c53016f0845cf3fd180 Mon Sep 17 00:00:00 2001 From: Aadarsh Date: Fri, 28 Nov 2025 15:48:46 +0530 Subject: [PATCH 1/4] SK-235 Add Readme and Sample for Input formatting --- README.md | 55 +++++-- samples/SkyflowElements/src/App.tsx | 8 + .../src/components/InputFormatting/index.tsx | 140 ++++++++++++++++++ 3 files changed, 192 insertions(+), 11 deletions(-) create mode 100644 samples/SkyflowElements/src/components/InputFormatting/index.tsx diff --git a/README.md b/README.md index 6ea0df0..6451440 100644 --- a/README.md +++ b/README.md @@ -323,7 +323,8 @@ Along with Collect Element we can define other options which takes a object of o const options = { required: false, // Optional, indicates whether the field is marked as required. Defaults to 'false'. enableCardIcon: true, // Optional, indicates whether card icon should be enabled (only applicable for CARD_NUMBER ElementType). - format: String, // Optional, format for the element (only applicable currently for EXPIRATION_DATE ElementType). + format: String, // Optional, format for the element. + translation: {}, // Optional, indicates the allowed data type value for format. 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). @@ -336,25 +337,57 @@ const options = { - `enableCardIcon` parameter indicates whether the icon is visible for the CARD_NUMBER element, defaults to true -- `format` parameter takes string value and indicates the format pattern applicable to the element type, It's currently only applicable to `EXPIRATION_DATE` and `EXPIRATION_YEAR` element types. - `enableCopy` parameter indicates whether the copy icon is visible in collect and reveal elements. - `allowedFileType` parameter indicates the allowedFileType extensions to be uploaded. -The values that are accepted for `EXPIRATION_DATE` are +- `format`: A string value that indicates the format pattern applicable to the element type. + Only applicable to EXPIRATION_DATE, CARD_NUMBER, EXPIRATION_YEAR, and INPUT_FIELD elements. -- `MM/YY` (default) -- `MM/YYYY` -- `YY/MM` -- `YYYY/MM` + - For INPUT_FIELD elements, + - the length of `format` determines the expected length of the user input. + - if `translation` isn't specified, the `format` value is considered a string literal. -The values that are accepted for `EXPIRATION_YEAR` are + `translation`: An object of key value pairs, where the key is a character that appears in `format` and the value is a simple regex pattern of acceptable inputs for that character. Each key can only appear once. Only applicable for INPUT_FIELD elements. -- `YY` (default) -- `YYYY` + Accepted values by element type: + + | Element type | `format`and `translation` values | Examples | + | --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------ | + | EXPIRATION_DATE |
  • `format`
    • | | + | EXPIRATION_YEAR |
  • `format`
    • | | + | CARD_NUMBER |
  • `format`
    • | | + | INPUT_FIELD |
  • `format`: A string that matches the desired output, with placeholder characters of your choice.
  • `translation`: An object of key/value pairs. Defaults to `{"X": "[0-9]"}`
    • | With a `format` of `+91 XXXX-XX-XXXX` and a `translation` of `[ "X": "[0-9]"]`, user input of "1234121234" displays as "+91 1234-12-1234". | + + + `NOTE`: If not specified or invalid value is passed to the `format` then it takes default value. + +**Collect Element Options examples for INPUT_FIELD** + +Example 1 +```js +const options = { + format:'+91 XXXX-XX-XXXX', + translation: { 'X': '[0-9]' } +} +``` + +User input: "1234121234" +Value displayed in INPUT_FIELD: "+91 1234-12-1234" + +Example 2 +```js +const options = { + required: true, + enableCardIcon: true, + format: 'AY XX-XXX-XXXX', + translation: { 'X': '[0-9]', 'Y': '[A-Z]' } +} +``` +User input: "B1234121234" +Value displayed in INPUT_FIELD: "AB 12-341-2123" -`NOTE`: If not specified or invalid value is passed to the `format` then it takes default value. - `cardMetadata`: An object of metadata keys to control card number element behavior. It supports an optional key called `scheme`, which accepts an array of Skyflow accept card types based on which SDK will display card brand choice dropdown in the card number element. `CardType` is an enum with all skyflow supported card schemes. diff --git a/samples/SkyflowElements/src/App.tsx b/samples/SkyflowElements/src/App.tsx index 48a0da1..b4d758e 100644 --- a/samples/SkyflowElements/src/App.tsx +++ b/samples/SkyflowElements/src/App.tsx @@ -16,6 +16,7 @@ import CardBrandChoice from './components/CardBrandChoice'; import ThreeDSHelperFunctions from './components/3DSHelperFunctions'; import OverrideDefaultErrors from './components/OverrideDefaultErrors' import Masking from './components/Masking'; +import InputFormatting from './components/InputFormatting'; const App = () => { @@ -67,6 +68,13 @@ const App = () => {
    +
    +

    + Sample for Input Formatting +

    + +
    +
    ); From 4bcc37e77ff85ed13e8e3cf4ed78ae7804e1f688 Mon Sep 17 00:00:00 2001 From: Aadarsh Date: Tue, 2 Dec 2025 18:11:15 +0530 Subject: [PATCH 3/4] SK-235 Testing Signed Commit --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 0631d20..27d1b76 100644 --- a/README.md +++ b/README.md @@ -385,8 +385,8 @@ const options = { translation: { 'X': '[0-9]', 'Y': '[A-Z]' } } ``` -User input: "B123412123" -Value displayed in INPUT_FIELD: "AB 12-341-2123" +User input: "B123412124" +Value displayed in INPUT_FIELD: "AB 12-341-2124" - `cardMetadata`: An object of metadata keys to control card number element behavior. It supports an optional key called `scheme`, which accepts an array of Skyflow accept card types based on which SDK will display card brand choice dropdown in the card number element. `CardType` is an enum with all skyflow supported card schemes. From 145c5ec2da6c6a56f60df295c1b83f5b22fa1c48 Mon Sep 17 00:00:00 2001 From: Aadarsh Date: Wed, 3 Dec 2025 12:52:02 +0530 Subject: [PATCH 4/4] SK-235 Resolved review comments --- README.md | 46 +++++++++++++++++++++++----------------------- 1 file changed, 23 insertions(+), 23 deletions(-) diff --git a/README.md b/README.md index 27d1b76..974fa5d 100644 --- a/README.md +++ b/README.md @@ -353,7 +353,7 @@ const options = { Accepted values by element type: - | Element type | `format`and `translation` values | Examples | + | Element type | `format` and `translation` values | Examples | | --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------ | | EXPIRATION_DATE |
  • `format`
    • `mm/yy` (default)
    • `mm/yyyy`
    • `yy/mm`
    • `yyyy/mm`
    |
    • 12/27
    • 12/2027
    • 27/12
    • 2027/12
    | | EXPIRATION_YEAR |
  • `format`
    • `yy` (default)
    • `yyyy`
    |
    • 27
    • 2027
    | @@ -361,32 +361,32 @@ const options = { | INPUT_FIELD |
  • `format`: A string that matches the desired output, with placeholder characters of your choice.
  • `translation`: An object of key/value pairs. Defaults to `{"X": "[0-9]"}`
    • | With a `format` of `+91 XXXX-XX-XXXX` and a `translation` of `{"X": "[0-9]"}`, user input of "1234121234" displays as "+91 1234-12-1234". | - `NOTE`: If not specified or invalid value is passed to the `format` then it takes default value. + **Note:** If `format` isn't specified or receives an invalid value, it uses the element type's default value. -**Collect Element Options examples for INPUT_FIELD** + **Collect Element Options examples for INPUT_FIELD** -Example 1 -```js -const options = { - format:'+91 XXXX-XX-XXXX', - translation: { 'X': '[0-9]' } -} -``` + Example 1 + ```js + const options = { + format:'+91 XXXX-XX-XXXX', + translation: { 'X': '[0-9]' } + } + ``` -User input: "1234121234" -Value displayed in INPUT_FIELD: "+91 1234-12-1234" + User input: "1234121234" + Value displayed in INPUT_FIELD: "+91 1234-12-1234" -Example 2 -```js -const options = { - required: true, - enableCardIcon: true, - format: 'AY XX-XXX-XXXX', - translation: { 'X': '[0-9]', 'Y': '[A-Z]' } -} -``` -User input: "B123412124" -Value displayed in INPUT_FIELD: "AB 12-341-2124" + Example 2 + ```js + const options = { + required: true, + enableCardIcon: true, + format: 'AY XX-XXX-XXXX', + translation: { 'X': '[0-9]', 'Y': '[A-Z]' } + } + ``` + User input: "B123412124" + Value displayed in INPUT_FIELD: "AB 12-341-2124" - `cardMetadata`: An object of metadata keys to control card number element behavior. It supports an optional key called `scheme`, which accepts an array of Skyflow accept card types based on which SDK will display card brand choice dropdown in the card number element. `CardType` is an enum with all skyflow supported card schemes.