@gr4vy/secure-fields-react 2.7.0 → 2.7.1
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 +13 -0
- package/README.md +35 -29
- package/package.json +3 -3
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,16 @@
|
|
|
1
|
+
# v2.7.1 (Wed May 20 2026)
|
|
2
|
+
|
|
3
|
+
#### 🐛 Bug Fix
|
|
4
|
+
|
|
5
|
+
- task: update scheme detection docs [#1222](https://github.com/gr4vy/secure-fields/pull/1222) ([@luca-gr4vy](https://github.com/luca-gr4vy) [@GiordanoArman](https://github.com/GiordanoArman))
|
|
6
|
+
|
|
7
|
+
#### Authors: 2
|
|
8
|
+
|
|
9
|
+
- GiordanoArman ([@GiordanoArman](https://github.com/GiordanoArman))
|
|
10
|
+
- Luca Allievi ([@luca-gr4vy](https://github.com/luca-gr4vy))
|
|
11
|
+
|
|
12
|
+
---
|
|
13
|
+
|
|
1
14
|
# v2.7.0 (Tue May 19 2026)
|
|
2
15
|
|
|
3
16
|
#### 🚀 Enhancement
|
package/README.md
CHANGED
|
@@ -50,19 +50,19 @@ const { SecureFields } = require("@gr4vy/secure-fields-react")
|
|
|
50
50
|
> **Note**: Replace `[GR4VY_ID]` and `[SESSION_ID]` with the ID of your instance
|
|
51
51
|
> and the Session ID obtained from calling the [Checkout Sessions API](https://gr4vy.com/docs/reference#tag/Checkout-Sessions).
|
|
52
52
|
|
|
53
|
-
| Prop Name | Description
|
|
54
|
-
| -------------------- |
|
|
55
|
-
| `gr4vyId` | Your Gr4vy ID.
|
|
56
|
-
| `environment` | Your Gr4vy environment. Can be either `sandbox` or `production`.
|
|
57
|
-
| `sessionId` | The Session ID.
|
|
58
|
-
| `paymentMethod` | An optional object `{ id: string, scheme: string }` for stored payment methods.
|
|
59
|
-
| `paymentMethodId` | An optional uuid for stored payment methods. **Deprecated**: This prop is no longer recommended for use and will be removed in a future release. Please use `paymentMethod` instead.
|
|
60
|
-
| `debug` | Enables / disables the debug mode.
|
|
61
|
-
| `font` | Loads a custom font from [Google Fonts](https://fonts.google.com/) to be used inside inputs. You can define the font family as well as styles or weights as a string (e.g. "Lato:400,600"). To use the loaded font, add the correct `fontFamily` property to the styles object when rendering fields.
|
|
62
|
-
| `onReady` | An event handler that listens for Secure Fields to be securely loaded. It listens for the [`READY`](https://docs.gr4vy.com/guides/payments/secure-fields/events) event and accepts a callback function.
|
|
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.
|
|
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.
|
|
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.
|
|
53
|
+
| Prop Name | Description |
|
|
54
|
+
| -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
55
|
+
| `gr4vyId` | Your Gr4vy ID. |
|
|
56
|
+
| `environment` | Your Gr4vy environment. Can be either `sandbox` or `production`. |
|
|
57
|
+
| `sessionId` | The Session ID. |
|
|
58
|
+
| `paymentMethod` | An optional object `{ id: string, scheme: string }` for stored payment methods. |
|
|
59
|
+
| `paymentMethodId` | An optional uuid for stored payment methods. **Deprecated**: This prop is no longer recommended for use and will be removed in a future release. Please use `paymentMethod` instead. |
|
|
60
|
+
| `debug` | Enables / disables the debug mode. |
|
|
61
|
+
| `font` | Loads a custom font from [Google Fonts](https://fonts.google.com/) to be used inside inputs. You can define the font family as well as styles or weights as a string (e.g. "Lato:400,600"). To use the loaded font, add the correct `fontFamily` property to the styles object when rendering fields. |
|
|
62
|
+
| `onReady` | An event handler that listens for Secure Fields to be securely loaded. It listens for the [`READY`](https://docs.gr4vy.com/guides/payments/secure-fields/events) event and accepts a callback function. |
|
|
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. |
|
|
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. |
|
|
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
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. |
|
|
67
67
|
|
|
68
68
|
### Creating a form
|
|
@@ -126,20 +126,20 @@ const { Field } = require('@gr4vy/secure-fields-react')
|
|
|
126
126
|
|
|
127
127
|
The available secure fields components are `CardNumber`, `ExpiryDate`, `SecurityCode` and `Field`. You can pass the following props to customize each of them.
|
|
128
128
|
|
|
129
|
-
| Prop Name
|
|
130
|
-
|
|
|
131
|
-
| `placeholder`
|
|
132
|
-
| `pattern`
|
|
133
|
-
| `styles`
|
|
134
|
-
| `onBlur`
|
|
135
|
-
| `onFocus`
|
|
136
|
-
| `onInput`
|
|
137
|
-
| `onRedact`
|
|
138
|
-
| `onUnredact`
|
|
139
|
-
| `autoFocus`
|
|
140
|
-
| `maskInput`
|
|
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`
|
|
129
|
+
| Prop Name | Description |
|
|
130
|
+
| ---------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
131
|
+
| `placeholder` | Input placeholder text. |
|
|
132
|
+
| `pattern` | A pattern the field value should match, defined as a string (regular expression). Only for postal code fields. |
|
|
133
|
+
| `styles` | An object of CSS rules to style the input inside the iframe. See [Styles](https://docs.gr4vy.com/guides/payments/secure-fields/theming) for more information. |
|
|
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`). |
|
|
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`). |
|
|
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 card scheme icons inside the card number field. Icons update in real-time as the user types and are refined when the API confirms the scheme. Accepts `true` to show scheme and additional scheme icons, or an object for granular control which accepts:<br><br>• `scheme`: (boolean) show detected scheme<br>• `additionalSchemes`: (boolean) show co-branded icons<br>• `placeholders`: (boolean) show Visa/Mastercard/Amex before detection<br><br>A maximum of 3 icons are shown — ensure the input is wide enough to accommodate them. Only available on `CardNumber`. |
|
|
143
143
|
|
|
144
144
|
Each field component supports a `ref` that exposes `clear()`, `redactValue()`, and `unredactValue()` methods.
|
|
145
145
|
|
|
@@ -156,10 +156,16 @@ const CardNumberWithClear = () => {
|
|
|
156
156
|
<button type="button" onClick={() => cardNumberRef.current?.clear()}>
|
|
157
157
|
Clear
|
|
158
158
|
</button>
|
|
159
|
-
<button
|
|
159
|
+
<button
|
|
160
|
+
type="button"
|
|
161
|
+
onClick={() => cardNumberRef.current?.redactValue()}
|
|
162
|
+
>
|
|
160
163
|
Mask
|
|
161
164
|
</button>
|
|
162
|
-
<button
|
|
165
|
+
<button
|
|
166
|
+
type="button"
|
|
167
|
+
onClick={() => cardNumberRef.current?.unredactValue()}
|
|
168
|
+
>
|
|
163
169
|
Unmask
|
|
164
170
|
</button>
|
|
165
171
|
</>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gr4vy/secure-fields-react",
|
|
3
|
-
"version": "2.7.
|
|
3
|
+
"version": "2.7.1",
|
|
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",
|
|
@@ -42,7 +42,7 @@
|
|
|
42
42
|
"react-dom": ">=17.0.0"
|
|
43
43
|
},
|
|
44
44
|
"dependencies": {
|
|
45
|
-
"@gr4vy/secure-fields": "^2.7.
|
|
45
|
+
"@gr4vy/secure-fields": "^2.7.1"
|
|
46
46
|
},
|
|
47
47
|
"devDependencies": {
|
|
48
48
|
"@testing-library/react": "^12.1.5",
|
|
@@ -56,5 +56,5 @@
|
|
|
56
56
|
"access": "public",
|
|
57
57
|
"registry": "https://registry.npmjs.org"
|
|
58
58
|
},
|
|
59
|
-
"gitHead": "
|
|
59
|
+
"gitHead": "83a98fd6f3322aaa7229e49ae89671b4453cfde4"
|
|
60
60
|
}
|