@gr4vy/secure-fields-react 0.7.0 → 1.0.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 +29 -0
- package/README.md +53 -58
- package/lib/hooks/use-secure-fields.js +3 -2
- package/lib/hooks/use-secure-fields.js.map +1 -1
- package/lib/types.d.ts +1 -0
- package/package.json +3 -3
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,32 @@
|
|
|
1
|
+
# v1.0.0 (Tue Oct 18 2022)
|
|
2
|
+
|
|
3
|
+
#### 🏠 Internal
|
|
4
|
+
|
|
5
|
+
- fix: jsdom local testing issue [#92](https://github.com/gr4vy/secure-fields/pull/92) ([@luca-gr4vy](https://github.com/luca-gr4vy))
|
|
6
|
+
|
|
7
|
+
#### 📝 Documentation
|
|
8
|
+
|
|
9
|
+
- Update README.md [#58](https://github.com/gr4vy/secure-fields/pull/58) ([@cbetta](https://github.com/cbetta))
|
|
10
|
+
|
|
11
|
+
#### Authors: 2
|
|
12
|
+
|
|
13
|
+
- Cristiano Betta ([@cbetta](https://github.com/cbetta))
|
|
14
|
+
- Luca Allievi ([@luca-gr4vy](https://github.com/luca-gr4vy))
|
|
15
|
+
|
|
16
|
+
---
|
|
17
|
+
|
|
18
|
+
# v0.8.0 (Thu Oct 06 2022)
|
|
19
|
+
|
|
20
|
+
#### 🚀 Enhancement
|
|
21
|
+
|
|
22
|
+
- feat: google fonts support [#57](https://github.com/gr4vy/secure-fields/pull/57) ([@luca-gr4vy](https://github.com/luca-gr4vy))
|
|
23
|
+
|
|
24
|
+
#### Authors: 1
|
|
25
|
+
|
|
26
|
+
- Luca Allievi ([@luca-gr4vy](https://github.com/luca-gr4vy))
|
|
27
|
+
|
|
28
|
+
---
|
|
29
|
+
|
|
1
30
|
# v0.6.3 (Mon Oct 03 2022)
|
|
2
31
|
|
|
3
32
|
#### 🏠 Internal
|
package/README.md
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
|
|
4
4
|
[](https://github.com/gr4vy/secure-fields/blob/main/LICENSE)
|
|
5
5
|
|
|
6
|
-
|
|
6
|
+
Add Secure Fields in your React app.
|
|
7
7
|
|
|
8
8
|
Use [`@gr4vy/secure-fields`](../secure-fields) in a non-React application.
|
|
9
9
|
|
|
@@ -13,27 +13,26 @@ Via the command line, install this package as follows.
|
|
|
13
13
|
|
|
14
14
|
```bash
|
|
15
15
|
npm install @gr4vy/secure-fields-react --save-prod
|
|
16
|
-
# yarn add @gr4vy/secure-fields-react
|
|
16
|
+
# yarn add @gr4vy/secure-fields-react
|
|
17
17
|
```
|
|
18
18
|
|
|
19
19
|
## Get started
|
|
20
20
|
|
|
21
21
|
To use Secure Fields, import the `SecureFields` Provider component and wrap your app with it, making sure you pass the necessary configuration props and any event handlers.
|
|
22
22
|
|
|
23
|
-
```
|
|
23
|
+
```jsx
|
|
24
24
|
const { SecureFields } = require(`@gr4vy/secure-fields-react`)
|
|
25
25
|
// import { SecureFields } from (`@gr4vy/secure-fields-react)
|
|
26
26
|
|
|
27
27
|
<SecureFields
|
|
28
|
-
environment='sandbox'
|
|
29
28
|
gr4vyId='[GR4VY_ID]'
|
|
29
|
+
environment='sandbox'
|
|
30
30
|
sessionId='[SESSION_ID]'
|
|
31
31
|
debug
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
}
|
|
36
|
-
onCardVaultFailure={() => console.error('Failed to tokenize card data')}
|
|
32
|
+
font="Lato"
|
|
33
|
+
onReady={(data) => console.log('Secure Fields loaded', data)}
|
|
34
|
+
onCardVaultSuccess={() => console.log('Card tokenization successful')}
|
|
35
|
+
onCardVaultFailure={() => console.error('Card tokenization failed')}
|
|
37
36
|
>
|
|
38
37
|
<Form />
|
|
39
38
|
</SecureFields>
|
|
@@ -42,74 +41,70 @@ const { SecureFields } = require(`@gr4vy/secure-fields-react`)
|
|
|
42
41
|
> **Note**: Replace `[GR4VY_ID]` and `[SESSION_ID]` with the ID of your instance
|
|
43
42
|
> and the Session ID obtained from calling the [Checkout Sessions API](https://gr4vy.com/docs/reference#tag/Checkout-Sessions).
|
|
44
43
|
|
|
45
|
-
| Prop Name | Description
|
|
46
|
-
| -------------------- |
|
|
47
|
-
| `
|
|
48
|
-
| `
|
|
49
|
-
| `sessionId` | The Session ID.
|
|
50
|
-
| `debug` | Enables / disables the debug mode
|
|
51
|
-
| `
|
|
52
|
-
| `
|
|
53
|
-
| `
|
|
44
|
+
| Prop Name | Description |
|
|
45
|
+
| -------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
46
|
+
| `gr4vyId` | Your Gr4vy ID. |
|
|
47
|
+
| `environment` | Your Gr4vy environment. Can be either `sandbox` or `production`. |
|
|
48
|
+
| `sessionId` | The Session ID. |
|
|
49
|
+
| `debug` | Enables / disables the debug mode. |
|
|
50
|
+
| `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. |
|
|
51
|
+
| `onReady` | An event handler that listens for Secure Fields to be securely loaded. It listens for the [`READY`](../secure-fields/README.md#events) event and accepts a callback function. |
|
|
52
|
+
| `onCardVaultSuccess` | An event handler that listens for card data to be securely vaulted. It listens for the [`CARD_VAULT_SUCCESS`](../secure-fields/README.md#events) event and accepts a callback function. |
|
|
53
|
+
| `onCardVaultFailure` | An event handler that listens for any failures when storing any card data. It listens for the [`CARD_VAULT_FAILURE`](../secure-fields/README.md#events) event and accepts a callback function. |
|
|
54
|
+
|
|
55
|
+
### Creating a form
|
|
54
56
|
|
|
55
|
-
|
|
57
|
+
Within the `SecureFields` provider you can now create your own card form using each of the Secure Field components.
|
|
56
58
|
|
|
57
|
-
|
|
59
|
+
Additionally, a `useSecureFields` hook is available to get the configured Secure Fields instance which can be
|
|
60
|
+
used to `submit()` the card form, and check if `debug` is enabled or not.
|
|
58
61
|
|
|
59
62
|
```js
|
|
60
63
|
const {
|
|
61
64
|
CardNumber,
|
|
62
65
|
ExpiryDate,
|
|
63
66
|
SecurityCode,
|
|
64
|
-
} = require(
|
|
65
|
-
|
|
67
|
+
} = require('@gr4vy/secure-fields-react')
|
|
68
|
+
|
|
69
|
+
// Alternatively:
|
|
70
|
+
// import {
|
|
71
|
+
// CardNumber,
|
|
72
|
+
// ExpiryDate,
|
|
73
|
+
// SecurityCode
|
|
74
|
+
// } from ('@gr4vy/secure-fields-react')
|
|
66
75
|
|
|
67
76
|
const Form = () => {
|
|
68
77
|
const { secureFields } = useSecureFields()
|
|
69
78
|
|
|
70
|
-
const
|
|
71
|
-
e.preventDefault()
|
|
79
|
+
const handleSubmit = () => {
|
|
72
80
|
secureFields.submit()
|
|
73
81
|
}
|
|
74
82
|
|
|
75
83
|
return (
|
|
76
|
-
|
|
77
|
-
<
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
</
|
|
87
|
-
|
|
88
|
-
<label htmlFor="cc-number">Card Number</label>
|
|
89
|
-
<CardNumber />
|
|
90
|
-
</div>
|
|
91
|
-
<div className="form-group">
|
|
92
|
-
<label htmlFor="cc-expiry-date">Expiry Date</label>
|
|
93
|
-
<ExpiryDate />
|
|
94
|
-
</div>
|
|
95
|
-
<div className="form-group">
|
|
96
|
-
<label htmlFor="cc-security-code">{securityCodeLabel}</label>
|
|
97
|
-
<SecurityCode />
|
|
98
|
-
</div>
|
|
99
|
-
<button>Submit</button>
|
|
100
|
-
</form>
|
|
84
|
+
<>
|
|
85
|
+
<label htmlFor="cc-number">Card number</label>
|
|
86
|
+
<CardNumber />
|
|
87
|
+
|
|
88
|
+
<label htmlFor="cc-expiry-date">Expiry date</label>
|
|
89
|
+
<ExpiryDate />
|
|
90
|
+
|
|
91
|
+
<label htmlFor="cc-security-code">Security code</label>
|
|
92
|
+
<SecurityCode />
|
|
93
|
+
|
|
94
|
+
<button onClick={handleSubmit}>Submit</button>
|
|
95
|
+
</>
|
|
101
96
|
)
|
|
102
97
|
}
|
|
103
98
|
```
|
|
104
99
|
|
|
105
|
-
|
|
100
|
+
## Field Components
|
|
106
101
|
|
|
107
|
-
The available secure fields components are `CardNumber`, `ExpiryDate` and `SecurityCode`. You can pass the following props to customize them
|
|
102
|
+
The available secure fields components are `CardNumber`, `ExpiryDate` and `SecurityCode`. You can pass the following props to customize each of them.
|
|
108
103
|
|
|
109
|
-
| Prop Name | Description
|
|
110
|
-
| ------------- |
|
|
111
|
-
| `placeholder` | Input placeholder text |
|
|
112
|
-
| `styles` | An object of CSS rules to style the input inside the iframe. See [Styles](../secure-fields/README.md#styles) for more information |
|
|
113
|
-
| `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`) |
|
|
114
|
-
| `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`) |
|
|
115
|
-
| `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`) |
|
|
104
|
+
| Prop Name | Description |
|
|
105
|
+
| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
106
|
+
| `placeholder` | Input placeholder text. |
|
|
107
|
+
| `styles` | An object of CSS rules to style the input inside the iframe. See [Styles](../secure-fields/README.md#styles) for more information. |
|
|
108
|
+
| `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`). |
|
|
109
|
+
| `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`). |
|
|
110
|
+
| `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`). |
|
|
@@ -29,14 +29,15 @@ var react_1 = require("react");
|
|
|
29
29
|
exports.SecureFieldsContext = (0, react_1.createContext)(null);
|
|
30
30
|
var SecureFieldsProvider = function (_a) {
|
|
31
31
|
var children = _a.children, config = __rest(_a, ["children"]);
|
|
32
|
-
var sessionId = config.sessionId, debug = config.debug, onReady = config.onReady, onCardVaultSuccess = config.onCardVaultSuccess, onCardVaultFailure = config.onCardVaultFailure;
|
|
32
|
+
var sessionId = config.sessionId, debug = config.debug, font = config.font, onReady = config.onReady, onCardVaultSuccess = config.onCardVaultSuccess, onCardVaultFailure = config.onCardVaultFailure;
|
|
33
33
|
var _b = (0, react_1.useState)(), secureFields = _b[0], setSecureFields = _b[1];
|
|
34
34
|
(0, react_1.useEffect)(function () {
|
|
35
35
|
setSecureFields(new secure_fields_1.SecureFields(config));
|
|
36
36
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
37
37
|
}, [sessionId]);
|
|
38
|
-
(0, react_1.
|
|
38
|
+
(0, react_1.useLayoutEffect)(function () {
|
|
39
39
|
secureFields === null || secureFields === void 0 ? void 0 : secureFields.setDebug(debug);
|
|
40
|
+
font && (secureFields === null || secureFields === void 0 ? void 0 : secureFields.addFont(font));
|
|
40
41
|
onReady &&
|
|
41
42
|
(secureFields === null || secureFields === void 0 ? void 0 : secureFields.addEventListener(secure_fields_1.SecureFields.Events.READY, onReady));
|
|
42
43
|
onCardVaultSuccess &&
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"use-secure-fields.js","sourceRoot":"","sources":["../../src/hooks/use-secure-fields.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,sDAAmD;AACnD,+
|
|
1
|
+
{"version":3,"file":"use-secure-fields.js","sourceRoot":"","sources":["../../src/hooks/use-secure-fields.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,sDAAmD;AACnD,+BAOc;AAGD,QAAA,mBAAmB,GAAG,IAAA,qBAAa,EAG7C,IAAI,CAAC,CAAA;AAED,IAAM,oBAAoB,GAAG,UAAC,EAGT;IAF1B,IAAA,QAAQ,cAAA,EACL,MAAM,cAF0B,YAGpC,CADU;IAGP,IAAA,SAAS,GAMP,MAAM,UANC,EACT,KAAK,GAKH,MAAM,MALH,EACL,IAAI,GAIF,MAAM,KAJJ,EACJ,OAAO,GAGL,MAAM,QAHD,EACP,kBAAkB,GAEhB,MAAM,mBAFU,EAClB,kBAAkB,GAChB,MAAM,mBADU,CACV;IACJ,IAAA,KAAkC,IAAA,gBAAQ,GAAgB,EAAzD,YAAY,QAAA,EAAE,eAAe,QAA4B,CAAA;IAEhE,IAAA,iBAAS,EAAC;QACR,eAAe,CAAC,IAAI,4BAAY,CAAC,MAAM,CAAC,CAAC,CAAA;QACzC,uDAAuD;IACzD,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAA;IAEf,IAAA,uBAAe,EAAC;QACd,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,QAAQ,CAAC,KAAK,CAAC,CAAA;QAE7B,IAAI,KAAI,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,OAAO,CAAC,IAAI,CAAC,CAAA,CAAA;QAEnC,OAAO;aACL,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,gBAAgB,CAAC,4BAAY,CAAC,MAAM,CAAC,KAAK,EAAE,OAAO,CAAC,CAAA,CAAA;QACpE,kBAAkB;aAChB,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,gBAAgB,CAC5B,4BAAY,CAAC,MAAM,CAAC,kBAAkB,EACtC,kBAAkB,CACnB,CAAA,CAAA;QACH,kBAAkB;aAChB,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,gBAAgB,CAC5B,4BAAY,CAAC,MAAM,CAAC,kBAAkB,EACtC,kBAAkB,CACnB,CAAA,CAAA;QAEH,OAAO;YACL,OAAO;iBACL,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,mBAAmB,CAAC,4BAAY,CAAC,MAAM,CAAC,KAAK,EAAE,OAAO,CAAC,CAAA,CAAA;YACvE,kBAAkB;iBAChB,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,mBAAmB,CAC/B,4BAAY,CAAC,MAAM,CAAC,kBAAkB,EACtC,kBAAkB,CACnB,CAAA,CAAA;YACH,kBAAkB;iBAChB,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,mBAAmB,CAC/B,4BAAY,CAAC,MAAM,CAAC,kBAAkB,EACtC,kBAAkB,CACnB,CAAA,CAAA;QACL,CAAC,CAAA;QACD,uDAAuD;IACzD,CAAC,EAAE,CAAC,YAAY,CAAC,CAAC,CAAA;IAElB,OAAO,CACL,uBAAC,2BAAmB,CAAC,QAAQ,aAAC,KAAK,EAAE,EAAE,YAAY,cAAA,EAAE,KAAK,OAAA,EAAE,gBACzD,QAAQ,IACoB,CAChC,CAAA;AACH,CAAC,CAAA;AA3DY,QAAA,oBAAoB,wBA2DhC;AAEM,IAAM,eAAe,GAAG;IAC7B,OAAO,IAAA,kBAAU,EAAC,2BAAmB,CAAC,CAAA;AACxC,CAAC,CAAA;AAFY,QAAA,eAAe,mBAE3B"}
|
package/lib/types.d.ts
CHANGED
|
@@ -2,6 +2,7 @@ import { Config as BaseConfig, Field as BaseField } from '@gr4vy/secure-fields';
|
|
|
2
2
|
import { MutableRefObject } from 'react';
|
|
3
3
|
export declare type Config = BaseConfig & {
|
|
4
4
|
debug?: boolean;
|
|
5
|
+
font?: string;
|
|
5
6
|
onReady?: (config: {
|
|
6
7
|
version: string;
|
|
7
8
|
} & BaseConfig) => void;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gr4vy/secure-fields-react",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "1.0.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",
|
|
@@ -38,7 +38,7 @@
|
|
|
38
38
|
"react-dom": ">=17.0.0"
|
|
39
39
|
},
|
|
40
40
|
"dependencies": {
|
|
41
|
-
"@gr4vy/secure-fields": "^0.
|
|
41
|
+
"@gr4vy/secure-fields": "^1.0.0"
|
|
42
42
|
},
|
|
43
43
|
"devDependencies": {
|
|
44
44
|
"@testing-library/react-hooks": "^8.0.1",
|
|
@@ -48,5 +48,5 @@
|
|
|
48
48
|
"publishConfig": {
|
|
49
49
|
"access": "public"
|
|
50
50
|
},
|
|
51
|
-
"gitHead": "
|
|
51
|
+
"gitHead": "382a4f03693139980b4acd32c04008990924e7b6"
|
|
52
52
|
}
|