@gr4vy/secure-fields-react 1.23.0 → 1.24.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.
Files changed (3) hide show
  1. package/CHANGELOG.md +13 -0
  2. package/README.md +13 -9
  3. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -1,3 +1,16 @@
1
+ # v1.24.0 (Thu Jul 31 2025)
2
+
3
+ #### 🚀 Enhancement
4
+
5
+ - feat(stored-payment-method): add scheme-based CVV validation [#934](https://github.com/gr4vy/secure-fields/pull/934) ([@brunodesde1987](https://github.com/brunodesde1987) [@luca-gr4vy](https://github.com/luca-gr4vy))
6
+
7
+ #### Authors: 2
8
+
9
+ - Bruno Carvalho ([@brunodesde1987](https://github.com/brunodesde1987))
10
+ - Luca Allievi ([@luca-gr4vy](https://github.com/luca-gr4vy))
11
+
12
+ ---
13
+
1
14
  # v1.23.0 (Thu Jun 12 2025)
2
15
 
3
16
  #### 🚀 Enhancement
package/README.md CHANGED
@@ -32,7 +32,10 @@ const { SecureFields } = require("@gr4vy/secure-fields-react")
32
32
  gr4vyId='[GR4VY_ID]'
33
33
  environment='sandbox'
34
34
  sessionId='[SESSION_ID]'
35
- // paymentMethodId='[PAYMENT_METHOD_ID]' // uuid of a stored payment method (optional)
35
+ // For stored payment methods (optional):
36
+ // paymentMethod={{ id: '[PAYMENT_METHOD_ID]', scheme: [PAYMENT_METHOD_SCHEME] }}
37
+ // Deprecated:
38
+ // paymentMethodId='[PAYMENT_METHOD_ID]' // uuid of a stored payment method
36
39
  debug
37
40
  font="Lato"
38
41
  onReady={(data) => console.log('Secure Fields loaded', data)}
@@ -51,13 +54,14 @@ const { SecureFields } = require("@gr4vy/secure-fields-react")
51
54
  | `gr4vyId` | Your Gr4vy ID. |
52
55
  | `environment` | Your Gr4vy environment. Can be either `sandbox` or `production`. |
53
56
  | `sessionId` | The Session ID. |
54
- | `paymentMethodId` | An optional uuid that can be passed to use Secure Fields with a stored payment method. |
57
+ | `paymentMethod` | An optional object `{ id: string, scheme: string }` for stored payment methods. |
58
+ | `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. |
55
59
  | `debug` | Enables / disables the debug mode. |
56
60
  | `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. |
57
- | `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. |
58
- | `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. |
59
- | `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. |
60
- | `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. |
61
+ | `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. |
62
+ | `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
+ | `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
+ | `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. |
61
65
 
62
66
  ### Creating a form
63
67
 
@@ -111,7 +115,7 @@ The available secure fields components are `CardNumber`, `ExpiryDate` and `Secur
111
115
  | Prop Name | Description |
112
116
  | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
113
117
  | `placeholder` | Input placeholder text. |
114
- | `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. |
118
+ | `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. |
115
119
  | `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`). |
116
120
  | `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`). |
117
121
  | `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`). |
@@ -201,8 +205,8 @@ The `ClickToPay` component accepts the following props:
201
205
 
202
206
  The following props can be used on the `SecureFields` component to listen to specific Click to Pay events.
203
207
 
204
- | Prop Name | Description |
205
- | --------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
208
+ | Prop Name | Description |
209
+ | --------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
206
210
  | `onClickToPayInitialized` | An event handler that listens for Click to Pay to be securely initialized. It listens for the [`CLICK_TO_PAY_INITIALIZED`](https://docs.gr4vy.com/guides/payments/secure-fields/events#global-events) event and accepts a callback function with a `clickToPay` instance as argument. |
207
211
  | `onClickToPayReady` | An event handler that listens for Click to Pay to be ready. It listens for the [`CLICK_TO_PAY_READY`](https://docs.gr4vy.com/guides/payments/secure-fields/events#global-events) event and accepts a callback function with an object `{ buyerExists: boolean }`. |
208
212
  | `onClickToPaySignOut` | An event handler that listens for users signing out of Click to Pay. It listens for the [`CLICK_TO_PAY_SIGN_OUT`](https://docs.gr4vy.com/guides/payments/secure-fields/events#global-events) event and accepts a callback function. |
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gr4vy/secure-fields-react",
3
- "version": "1.23.0",
3
+ "version": "1.24.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": "^1.23.0"
44
+ "@gr4vy/secure-fields": "^1.24.0"
45
45
  },
46
46
  "devDependencies": {
47
47
  "@testing-library/react": "^12.1.5",
@@ -54,5 +54,5 @@
54
54
  "publishConfig": {
55
55
  "access": "public"
56
56
  },
57
- "gitHead": "8f78925935318c6e9d20d6146cf3a7369039ac62"
57
+ "gitHead": "4cd1a05920f65e596ece0d2bfc9242cf66c7112e"
58
58
  }