@gr4vy/secure-fields-react 2.5.0 → 2.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +19 -0
- package/README.md +17 -3
- package/lib/components/Field/Field.js +1 -1
- package/lib/components/Field/Field.js.map +1 -1
- package/package.json +3 -3
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,22 @@
|
|
|
1
|
+
# v2.6.0 (Wed May 13 2026)
|
|
2
|
+
|
|
3
|
+
#### 🚀 Enhancement
|
|
4
|
+
|
|
5
|
+
- chore(docs): Add UX enhancements documentation to READMEs [#1183](https://github.com/gr4vy/secure-fields/pull/1183) ([@cbetta](https://github.com/cbetta) [@luca-gr4vy](https://github.com/luca-gr4vy))
|
|
6
|
+
- task: add card scheme icon [#1209](https://github.com/gr4vy/secure-fields/pull/1209) ([@luca-gr4vy](https://github.com/luca-gr4vy) [@GiordanoArman](https://github.com/GiordanoArman))
|
|
7
|
+
|
|
8
|
+
#### 🐛 Bug Fix
|
|
9
|
+
|
|
10
|
+
- fix: README badges causing Avast alerts [#1215](https://github.com/gr4vy/secure-fields/pull/1215) ([@luca-gr4vy](https://github.com/luca-gr4vy))
|
|
11
|
+
|
|
12
|
+
#### Authors: 3
|
|
13
|
+
|
|
14
|
+
- Cristiano Betta ([@cbetta](https://github.com/cbetta))
|
|
15
|
+
- GiordanoArman ([@GiordanoArman](https://github.com/GiordanoArman))
|
|
16
|
+
- Luca Allievi ([@luca-gr4vy](https://github.com/luca-gr4vy))
|
|
17
|
+
|
|
18
|
+
---
|
|
19
|
+
|
|
1
20
|
# v2.5.0 (Thu May 07 2026)
|
|
2
21
|
|
|
3
22
|
#### 🚀 Enhancement
|
package/README.md
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
[](https://github.com/gr4vy/secure-fields/blob/main/LICENSE)
|
|
5
|
-
[](https://
|
|
5
|
+
[](https://github.com/gr4vy/secure-fields/blob/main/CHANGELOG.md)
|
|
6
6
|
|
|
7
7
|
Add Secure Fields in your React app.
|
|
8
8
|
|
|
@@ -38,6 +38,7 @@ const { SecureFields } = require("@gr4vy/secure-fields-react")
|
|
|
38
38
|
// paymentMethodId='[PAYMENT_METHOD_ID]' // uuid of a stored payment method
|
|
39
39
|
debug
|
|
40
40
|
font="Lato"
|
|
41
|
+
// autoAdvance={{ enabled: true, fieldOrder: ['number', 'expiryDate', 'securityCode'] }}
|
|
41
42
|
onReady={(data) => console.log('Secure Fields loaded', data)}
|
|
42
43
|
onCardVaultSuccess={() => console.log('Card tokenization successful')}
|
|
43
44
|
onCardVaultFailure={(data) => console.error('Card tokenization failed', data)}
|
|
@@ -62,6 +63,7 @@ const { SecureFields } = require("@gr4vy/secure-fields-react")
|
|
|
62
63
|
| `onFormChange` | An event handler that listens for Secure Fields change. It listens for the [`FORM_CHANGE`](https://docs.gr4vy.com/guides/payments/secure-fields/events) event and accepts a callback function. |
|
|
63
64
|
| `onCardVaultSuccess` | An event handler that listens for card data to be securely vaulted. It listens for the [`CARD_VAULT_SUCCESS`](https://docs.gr4vy.com/guides/payments/secure-fields/events) event and accepts a callback function. |
|
|
64
65
|
| `onCardVaultFailure` | An event handler that listens for any failures when storing any card data. It listens for the [`CARD_VAULT_FAILURE`](https://docs.gr4vy.com/guides/payments/secure-fields/events) event and accepts a callback function. |
|
|
66
|
+
| `autoAdvance` | Enable auto-advance to automatically move focus to the next field when the current field's value is complete and valid. Accepts `{ enabled: boolean, fieldOrder?: Array<FieldType> }`. See [UX options](https://docs.gr4vy.com/guides/payments/secure-fields/ux-options#auto-advance) for more details. |
|
|
65
67
|
|
|
66
68
|
### Creating a form
|
|
67
69
|
|
|
@@ -132,8 +134,14 @@ The available secure fields components are `CardNumber`, `ExpiryDate`, `Security
|
|
|
132
134
|
| `onBlur` | Attaches an event handler to the input, listening for the blur event. The data available in the passed callback includes an `id` representing the field type (e.g. `expiryDate`). |
|
|
133
135
|
| `onFocus` | Attaches an event handler to the input, listening for the focus event. The data available in the passed callback includes an `id` representing the field type (e.g. `expiryDate`). |
|
|
134
136
|
| `onInput` | Attaches an event handler to the input, listening for the input event. The data available in the passed callback includes an `id` representing the field type (e.g. `expiryDate`) and some useful card validation information, such as the current scheme (e.g. `visa`) and security code label (e.g. `CVV`). |
|
|
137
|
+
| `onRedact` | Attaches an event handler to the input, listening for the `redacted` event (fired when the field value is masked, either automatically via `maskInput` or programmatically via `redactValue()`). |
|
|
138
|
+
| `onUnredact` | Attaches an event handler to the input, listening for the `unredacted` event (fired when the field value is unmasked, either automatically or programmatically via `unredactValue()`). |
|
|
139
|
+
| `autoFocus` | Automatically focus the field when loaded. |
|
|
140
|
+
| `maskInput` | Enable input masking. Accepts `true` for default masking, or an object with `character` (masking character, default `•`), `showLastFour` (keep last 4 digits visible, `CardNumber` only — ignored on `SecurityCode`), and `maskOnInput` (mask in real-time). Only available on `CardNumber` and `SecurityCode`. |
|
|
141
|
+
| `onCardDetailsChanged` | Attaches an event handler to the input, listening for the `card-details-changed` event. Fired when the API confirms card details for the entered BIN, including the confirmed `scheme`. Only available on `CardNumber`. |
|
|
142
|
+
| `showSchemeIcons` | Display the detected card scheme icon (e.g. Visa, Mastercard) inside the card number field. The icon updates in real-time as the user types and is refined when the API confirms the scheme. Only available on `CardNumber`. |
|
|
135
143
|
|
|
136
|
-
Each field component supports a `ref` that exposes
|
|
144
|
+
Each field component supports a `ref` that exposes `clear()`, `redactValue()`, and `unredactValue()` methods.
|
|
137
145
|
|
|
138
146
|
```jsx
|
|
139
147
|
import { useRef } from 'react'
|
|
@@ -144,10 +152,16 @@ const CardNumberWithClear = () => {
|
|
|
144
152
|
|
|
145
153
|
return (
|
|
146
154
|
<>
|
|
147
|
-
<CardNumber ref={cardNumberRef} />
|
|
155
|
+
<CardNumber ref={cardNumberRef} maskInput />
|
|
148
156
|
<button type="button" onClick={() => cardNumberRef.current?.clear()}>
|
|
149
157
|
Clear
|
|
150
158
|
</button>
|
|
159
|
+
<button type="button" onClick={() => cardNumberRef.current?.redactValue()}>
|
|
160
|
+
Mask
|
|
161
|
+
</button>
|
|
162
|
+
<button type="button" onClick={() => cardNumberRef.current?.unredactValue()}>
|
|
163
|
+
Unmask
|
|
164
|
+
</button>
|
|
151
165
|
</>
|
|
152
166
|
)
|
|
153
167
|
}
|
|
@@ -27,7 +27,7 @@ var jsx_runtime_1 = require("react/jsx-runtime");
|
|
|
27
27
|
var react_1 = require("react");
|
|
28
28
|
var use_secure_input_1 = require("../../hooks/use-secure-input");
|
|
29
29
|
exports.Field = (0, react_1.forwardRef)(function (props, handleRef) {
|
|
30
|
-
var autoFocus = props.autoFocus, maskInput = props.maskInput, onRedacted = props.onRedacted, onUnredacted = props.onUnredacted, onCardDetailsChanged = props.onCardDetailsChanged, rest = __rest(props, ["autoFocus", "maskInput", "onRedacted", "onUnredacted", "onCardDetailsChanged"]);
|
|
30
|
+
var autoFocus = props.autoFocus, maskInput = props.maskInput, showSchemeIcons = props.showSchemeIcons, onRedacted = props.onRedacted, onUnredacted = props.onUnredacted, onCardDetailsChanged = props.onCardDetailsChanged, rest = __rest(props, ["autoFocus", "maskInput", "showSchemeIcons", "onRedacted", "onUnredacted", "onCardDetailsChanged"]);
|
|
31
31
|
var ref = (0, react_1.useRef)(null);
|
|
32
32
|
var field = (0, use_secure_input_1.useSecureInput)(__assign(__assign({}, props), { ref: ref }));
|
|
33
33
|
(0, react_1.useImperativeHandle)(handleRef, function () { return ({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Field.js","sourceRoot":"","sources":["../../../src/components/Field/Field.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+BAA+D;AAC/D,iEAAuD;AAG1C,QAAA,KAAK,GAAG,IAAA,kBAAU,EAC7B,UAAC,KAAK,EAAE,SAAS;IAEb,IAAA,SAAS,
|
|
1
|
+
{"version":3,"file":"Field.js","sourceRoot":"","sources":["../../../src/components/Field/Field.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+BAA+D;AAC/D,iEAAuD;AAG1C,QAAA,KAAK,GAAG,IAAA,kBAAU,EAC7B,UAAC,KAAK,EAAE,SAAS;IAEb,IAAA,SAAS,GAOP,KAAK,UAPE,EACT,SAAS,GAMP,KAAK,UANE,EACT,eAAe,GAKb,KAAK,gBALQ,EACf,UAAU,GAIR,KAAK,WAJG,EACV,YAAY,GAGV,KAAK,aAHK,EACZ,oBAAoB,GAElB,KAAK,qBAFa,EACjB,IAAI,UACL,KAAK,EARH,mGAQL,CADQ,CACA;IACT,IAAM,GAAG,GAAG,IAAA,cAAM,EAAC,IAAI,CAAC,CAAA;IACxB,IAAM,KAAK,GAAG,IAAA,iCAAc,wBAAM,KAAK,KAAE,GAAG,KAAA,IAAG,CAAA;IAE/C,IAAA,2BAAmB,EACjB,SAAS,EACT,cAAM,OAAA,CAAC;QACL,KAAK,EAAE,sBAAM,OAAA,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,KAAK,qDAAI,CAAA,EAAA;QAC7B,WAAW,EAAE,sBAAM,OAAA,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,WAAW,qDAAI,CAAA,EAAA;QACzC,aAAa,EAAE,sBAAM,OAAA,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,aAAa,qDAAI,CAAA,EAAA;KAC9C,CAAC,EAJI,CAIJ,EACF,CAAC,KAAK,CAAC,CACR,CAAA;IAED,OAAO,2CAAO,GAAG,EAAE,GAAG,IAAM,IAAI,EAAI,CAAA;AACtC,CAAC,CACF,CAAA;AAED,aAAK,CAAC,WAAW,GAAG,OAAO,CAAA"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gr4vy/secure-fields-react",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.6.0",
|
|
4
4
|
"description": "Gr4vy-hosted secure fields offering advanced theming, PCI compliance, event handling, and more.",
|
|
5
5
|
"main": "lib/index",
|
|
6
6
|
"types": "lib/index",
|
|
@@ -41,7 +41,7 @@
|
|
|
41
41
|
"react-dom": ">=17.0.0"
|
|
42
42
|
},
|
|
43
43
|
"dependencies": {
|
|
44
|
-
"@gr4vy/secure-fields": "^2.
|
|
44
|
+
"@gr4vy/secure-fields": "^2.6.0"
|
|
45
45
|
},
|
|
46
46
|
"devDependencies": {
|
|
47
47
|
"@testing-library/react": "^12.1.5",
|
|
@@ -55,5 +55,5 @@
|
|
|
55
55
|
"access": "public",
|
|
56
56
|
"registry": "https://registry.npmjs.org"
|
|
57
57
|
},
|
|
58
|
-
"gitHead": "
|
|
58
|
+
"gitHead": "680b6d541e78acf43fc5b6703d7aad37e9881684"
|
|
59
59
|
}
|