@gr4vy/secure-fields-react 0.6.2 → 0.6.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 +12 -0
- package/README.md +105 -0
- package/package.json +3 -3
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,15 @@
|
|
|
1
|
+
# v0.6.3 (Mon Oct 03 2022)
|
|
2
|
+
|
|
3
|
+
#### 🏠 Internal
|
|
4
|
+
|
|
5
|
+
- Update README.md [#55](https://github.com/gr4vy/secure-fields/pull/55) ([@luca-gr4vy](https://github.com/luca-gr4vy))
|
|
6
|
+
|
|
7
|
+
#### Authors: 1
|
|
8
|
+
|
|
9
|
+
- Luca Allievi ([@luca-gr4vy](https://github.com/luca-gr4vy))
|
|
10
|
+
|
|
11
|
+
---
|
|
12
|
+
|
|
1
13
|
# v0.6.0 (Wed Sep 21 2022)
|
|
2
14
|
|
|
3
15
|
#### 🚀 Enhancement
|
package/README.md
CHANGED
|
@@ -8,3 +8,108 @@ Load Secure Fields in your React app.
|
|
|
8
8
|
Use [`@gr4vy/secure-fields`](../secure-fields) in a non-React application.
|
|
9
9
|
|
|
10
10
|
## Usage
|
|
11
|
+
|
|
12
|
+
Via the command line, install this package as follows.
|
|
13
|
+
|
|
14
|
+
```bash
|
|
15
|
+
npm install @gr4vy/secure-fields-react --save-prod
|
|
16
|
+
# yarn add @gr4vy/secure-fields-react --save
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
## Get started
|
|
20
|
+
|
|
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
|
+
|
|
23
|
+
```js
|
|
24
|
+
const { SecureFields } = require(`@gr4vy/secure-fields-react`)
|
|
25
|
+
// import { SecureFields } from (`@gr4vy/secure-fields-react)
|
|
26
|
+
|
|
27
|
+
<SecureFields
|
|
28
|
+
environment='sandbox'
|
|
29
|
+
gr4vyId='[GR4VY_ID]'
|
|
30
|
+
sessionId='[SESSION_ID]'
|
|
31
|
+
debug
|
|
32
|
+
onReady={(data) => console.warn('Secure Fields loaded', data)}
|
|
33
|
+
onCardVaultSuccess={() =>
|
|
34
|
+
console.warn('Card has been tokenized successfully!')
|
|
35
|
+
}
|
|
36
|
+
onCardVaultFailure={() => console.error('Failed to tokenize card data')}
|
|
37
|
+
>
|
|
38
|
+
<Form />
|
|
39
|
+
</SecureFields>
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
> **Note**: Replace `[GR4VY_ID]` and `[SESSION_ID]` with the ID of your instance
|
|
43
|
+
> and the Session ID obtained from calling the [Checkout Sessions API](https://gr4vy.com/docs/reference#tag/Checkout-Sessions).
|
|
44
|
+
|
|
45
|
+
| Prop Name | Description |
|
|
46
|
+
| -------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
47
|
+
| `environment` | Your Gr4vy environment. Can be either `sandbox` or `production` |
|
|
48
|
+
| `gr4vyId` | Your Gr4vy ID. |
|
|
49
|
+
| `sessionId` | The Session ID. |
|
|
50
|
+
| `debug` | Enables / disables the debug mode |
|
|
51
|
+
| `onReady` | Attaches an event handler to the SecureFields instance, listening for the [`READY`](../secure-fields/README.md#events) event. Accepts a callback function |
|
|
52
|
+
| `onCardVaultSuccess` | Attaches an event handler to the SecureFields instance, listening for the [`CARD_VAULT_SUCCESS`](../secure-fields/README.md#events) event. Accepts a callback function |
|
|
53
|
+
| `onCardVaultFailure` | Attaches an event handler to the SecureFields instance, listening for the [`CARD_VAULT_FAILURE`](../secure-fields/README.md#events) event. Accepts a callback function |
|
|
54
|
+
|
|
55
|
+
### Form
|
|
56
|
+
|
|
57
|
+
The Provider should wrap a component rendering a form containing placeholder components that will be replaced by secure fields (`iframe`s). Inside the component's body, call `useSecureFields` to get the configured Secure Fields instance from the context, and use it to call the submit method. The hook will also give you back a `debug` variable, indicating whether the debug mode is enabled or not.
|
|
58
|
+
|
|
59
|
+
```js
|
|
60
|
+
const {
|
|
61
|
+
CardNumber,
|
|
62
|
+
ExpiryDate,
|
|
63
|
+
SecurityCode,
|
|
64
|
+
} = require(`@gr4vy/secure-fields-react`)
|
|
65
|
+
// import { CardNumber, ExpiryDate, SecurityCode } from (`@gr4vy/secure-fields-react)
|
|
66
|
+
|
|
67
|
+
const Form = () => {
|
|
68
|
+
const { secureFields } = useSecureFields()
|
|
69
|
+
|
|
70
|
+
const handleFormSubmit = (e) => {
|
|
71
|
+
e.preventDefault()
|
|
72
|
+
secureFields.submit()
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
return (
|
|
76
|
+
<form onSubmit={handleFormSubmit}>
|
|
77
|
+
<div className="form-group">
|
|
78
|
+
<label htmlFor="cc-holder-name" className="form-label">
|
|
79
|
+
Cardholder Name
|
|
80
|
+
</label>
|
|
81
|
+
<input
|
|
82
|
+
id="cc-holder-name"
|
|
83
|
+
className="form-control"
|
|
84
|
+
placeholder="Name on the card"
|
|
85
|
+
/>
|
|
86
|
+
</div>
|
|
87
|
+
<div className="form-group">
|
|
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>
|
|
101
|
+
)
|
|
102
|
+
}
|
|
103
|
+
```
|
|
104
|
+
|
|
105
|
+
#### Field Components
|
|
106
|
+
|
|
107
|
+
The available secure fields components are `CardNumber`, `ExpiryDate` and `SecurityCode`. You can pass the following props to customize them:
|
|
108
|
+
|
|
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`) |
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gr4vy/secure-fields-react",
|
|
3
|
-
"version": "0.6.
|
|
3
|
+
"version": "0.6.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",
|
|
@@ -38,7 +38,7 @@
|
|
|
38
38
|
"react-dom": ">=17.0.0"
|
|
39
39
|
},
|
|
40
40
|
"dependencies": {
|
|
41
|
-
"@gr4vy/secure-fields": "^0.6.
|
|
41
|
+
"@gr4vy/secure-fields": "^0.6.3"
|
|
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": "2f177d349556f03e6987449b6c2fe07997e36842"
|
|
52
52
|
}
|