@gr4vy/secure-fields-react 2.0.1 → 2.0.3
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 +14 -1
- package/package.json +3 -3
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,16 @@
|
|
|
1
|
+
# v2.0.2 (Thu Sep 11 2025)
|
|
2
|
+
|
|
3
|
+
#### 🐛 Bug Fix
|
|
4
|
+
|
|
5
|
+
- task: update internal docs to include postal code field [#966](https://github.com/gr4vy/secure-fields/pull/966) ([@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.0.0 (Mon Sep 08 2025)
|
|
2
15
|
|
|
3
16
|
#### 💥 Breaking Change
|
package/README.md
CHANGED
|
@@ -108,13 +108,26 @@ const Form = () => {
|
|
|
108
108
|
}
|
|
109
109
|
```
|
|
110
110
|
|
|
111
|
+
You can also collect other kind of information along with the card data. We currently support an additional postal code field, which can be added to your form using `Field` component, passing the specific `type` and the rest of the options.
|
|
112
|
+
|
|
113
|
+
```js
|
|
114
|
+
const { Field } = require('@gr4vy/secure-fields-react')
|
|
115
|
+
|
|
116
|
+
<label htmlFor="postal-code">Postal code</label>
|
|
117
|
+
<Field
|
|
118
|
+
type="postalCode"
|
|
119
|
+
pattern="[A-Z][0-9]\s[0-9][A-Z]{2}" // optional, defaults to 5 characters minimum
|
|
120
|
+
/>
|
|
121
|
+
```
|
|
122
|
+
|
|
111
123
|
## Field Components
|
|
112
124
|
|
|
113
|
-
The available secure fields components are `CardNumber`, `ExpiryDate` and `
|
|
125
|
+
The available secure fields components are `CardNumber`, `ExpiryDate`, `SecurityCode` and `Field`. You can pass the following props to customize each of them.
|
|
114
126
|
|
|
115
127
|
| Prop Name | Description |
|
|
116
128
|
| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
117
129
|
| `placeholder` | Input placeholder text. |
|
|
130
|
+
| `pattern` | A pattern the field value should match, defined as a string (regular expression). Only for postal code fields. |
|
|
118
131
|
| `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. |
|
|
119
132
|
| `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`). |
|
|
120
133
|
| `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`). |
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gr4vy/secure-fields-react",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.3",
|
|
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.0.
|
|
44
|
+
"@gr4vy/secure-fields": "^2.0.3"
|
|
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": "
|
|
57
|
+
"gitHead": "9cdf3d2a6622b72bbdcdd5cb5ced895b61408537"
|
|
58
58
|
}
|