@gr4vy/secure-fields-react 1.22.1 → 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.
- package/CHANGELOG.md +39 -0
- package/README.md +21 -17
- package/lib/style.css +1 -1
- package/package.json +5 -4
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,42 @@
|
|
|
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
|
+
|
|
14
|
+
# v1.23.0 (Thu Jun 12 2025)
|
|
15
|
+
|
|
16
|
+
#### 🚀 Enhancement
|
|
17
|
+
|
|
18
|
+
- test: enable tests [#904](https://github.com/gr4vy/secure-fields/pull/904) ([@brunodesde1987](https://github.com/brunodesde1987))
|
|
19
|
+
|
|
20
|
+
#### 🐛 Bug Fix
|
|
21
|
+
|
|
22
|
+
- fix: update invalid color to #e52424 across styles [#903](https://github.com/gr4vy/secure-fields/pull/903) ([@brunodesde1987](https://github.com/brunodesde1987))
|
|
23
|
+
- task: fix html element must have a lang attribute [#896](https://github.com/gr4vy/secure-fields/pull/896) ([@luca-gr4vy](https://github.com/luca-gr4vy))
|
|
24
|
+
- task: set up accessibility tooling [#886](https://github.com/gr4vy/secure-fields/pull/886) ([@luca-gr4vy](https://github.com/luca-gr4vy))
|
|
25
|
+
- fix(docs): Link to public docs in readme [#874](https://github.com/gr4vy/secure-fields/pull/874) ([@cbetta](https://github.com/cbetta))
|
|
26
|
+
|
|
27
|
+
#### 🏠 Internal
|
|
28
|
+
|
|
29
|
+
- chore(dev-deps): update dependency typescript-transform-paths to ^3.5.5 [#844](https://github.com/gr4vy/secure-fields/pull/844) ([@renovate[bot]](https://github.com/renovate[bot]))
|
|
30
|
+
|
|
31
|
+
#### Authors: 4
|
|
32
|
+
|
|
33
|
+
- [@renovate[bot]](https://github.com/renovate[bot])
|
|
34
|
+
- Bruno Carvalho ([@brunodesde1987](https://github.com/brunodesde1987))
|
|
35
|
+
- Cristiano Betta ([@cbetta](https://github.com/cbetta))
|
|
36
|
+
- Luca Allievi ([@luca-gr4vy](https://github.com/luca-gr4vy))
|
|
37
|
+
|
|
38
|
+
---
|
|
39
|
+
|
|
1
40
|
# v1.22.0 (Wed Jan 08 2025)
|
|
2
41
|
|
|
3
42
|
#### 🏠 Internal
|
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
|
-
//
|
|
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
|
-
| `
|
|
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`](
|
|
58
|
-
| `onFormChange` | An event handler that listens for Secure Fields change. It listens for the [`FORM_CHANGE`](
|
|
59
|
-
| `onCardVaultSuccess` | An event handler that listens for card data to be securely vaulted. It listens for the [`CARD_VAULT_SUCCESS`](
|
|
60
|
-
| `onCardVaultFailure` | An event handler that listens for any failures when storing any card data. It listens for the [`CARD_VAULT_FAILURE`](
|
|
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](
|
|
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,13 +205,13 @@ 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
|
-
| --------------------------------- |
|
|
206
|
-
| `onClickToPayInitialized` | An event handler that listens for Click to Pay to be securely initialized. It listens for the [`CLICK_TO_PAY_INITIALIZED`](
|
|
207
|
-
| `onClickToPayReady` | An event handler that listens for Click to Pay to be ready. It listens for the [`CLICK_TO_PAY_READY`](
|
|
208
|
-
| `onClickToPaySignOut` | An event handler that listens for users signing out of Click to Pay. It listens for the [`CLICK_TO_PAY_SIGN_OUT`](
|
|
209
|
-
| `onClickToPayError` | An event handler that listens for any errors thrown by Click to Pay. It listens for the [`CLICK_TO_PAY_ERROR`](
|
|
210
|
-
| `onClickToPayCancel` | An event handler that listens for users closing / cancelling Click to Pay. It listens for the [`CLICK_TO_PAY_CANCEL`](
|
|
211
|
-
| `onClickToPayCheckoutWithNewCard` | An event handler that listens for users checking out with a new card. It listens for the [`CLICK_TO_PAY_CHECKOUT_WITH_NEW_CARD`](
|
|
212
|
-
| `onClickToPayUnableToLoadDpa` | An event handler that listens for Click to Pay not being able to load the provided DPA. It listens for the [`CLICK_TO_PAY_UNABLE_TO_LOAD_DPA`](
|
|
213
|
-
| `onMethodChange` | An event handler that listens for users selecting a different method (either `card` or `click-to-pay`). It listens for the [`METHOD_CHANGE`](
|
|
208
|
+
| Prop Name | Description |
|
|
209
|
+
| --------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
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. |
|
|
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 }`. |
|
|
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. |
|
|
213
|
+
| `onClickToPayError` | An event handler that listens for any errors thrown by Click to Pay. It listens for the [`CLICK_TO_PAY_ERROR`](https://docs.gr4vy.com/guides/payments/secure-fields/events#global-events) event and accepts a callback function with the error type (one of \| 'RETRIES_EXCEEDED' \| 'CODE_INVALID' \| 'INVALID_CARD' \| 'SIGN_OUT_FAILED' \| 'ACCT_INACCESSIBLE' \| 'UNKNOWN' \| 'USER_NOT_RECOGNIZED'). |
|
|
214
|
+
| `onClickToPayCancel` | An event handler that listens for users closing / cancelling Click to Pay. It listens for the [`CLICK_TO_PAY_CANCEL`](https://docs.gr4vy.com/guides/payments/secure-fields/events#global-events) event and accepts a callback function. |
|
|
215
|
+
| `onClickToPayCheckoutWithNewCard` | An event handler that listens for users checking out with a new card. It listens for the [`CLICK_TO_PAY_CHECKOUT_WITH_NEW_CARD`](https://docs.gr4vy.com/guides/payments/secure-fields/events#global-events) event and accepts a callback function. |
|
|
216
|
+
| `onClickToPayUnableToLoadDpa` | An event handler that listens for Click to Pay not being able to load the provided DPA. It listens for the [`CLICK_TO_PAY_UNABLE_TO_LOAD_DPA`](https://docs.gr4vy.com/guides/payments/secure-fields/events#global-events) event and accepts a callback function. |
|
|
217
|
+
| `onMethodChange` | An event handler that listens for users selecting a different method (either `card` or `click-to-pay`). It listens for the [`METHOD_CHANGE`](https://docs.gr4vy.com/guides/payments/secure-fields/events#global-events) event and accepts a callback function with the selected method. |
|
package/lib/style.css
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gr4vy/secure-fields-react",
|
|
3
|
-
"version": "1.
|
|
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,17 +41,18 @@
|
|
|
41
41
|
"react-dom": ">=17.0.0"
|
|
42
42
|
},
|
|
43
43
|
"dependencies": {
|
|
44
|
-
"@gr4vy/secure-fields": "^1.
|
|
44
|
+
"@gr4vy/secure-fields": "^1.24.0"
|
|
45
45
|
},
|
|
46
46
|
"devDependencies": {
|
|
47
|
+
"@testing-library/react": "^12.1.5",
|
|
47
48
|
"@testing-library/react-hooks": "^8.0.1",
|
|
48
49
|
"react": "^17.0.2",
|
|
49
50
|
"react-dom": "^17.0.2",
|
|
50
51
|
"ts-patch": "^2.1.0",
|
|
51
|
-
"typescript-transform-paths": "^3.5.
|
|
52
|
+
"typescript-transform-paths": "^3.5.5"
|
|
52
53
|
},
|
|
53
54
|
"publishConfig": {
|
|
54
55
|
"access": "public"
|
|
55
56
|
},
|
|
56
|
-
"gitHead": "
|
|
57
|
+
"gitHead": "4cd1a05920f65e596ece0d2bfc9242cf66c7112e"
|
|
57
58
|
}
|