@gr4vy/secure-fields-react 0.8.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.
Files changed (3) hide show
  1. package/CHANGELOG.md +17 -0
  2. package/README.md +47 -54
  3. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -1,3 +1,20 @@
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
+
1
18
  # v0.8.0 (Thu Oct 06 2022)
2
19
 
3
20
  #### 🚀 Enhancement
package/README.md CHANGED
@@ -3,7 +3,7 @@
3
3
  ![NPM Version](https://img.shields.io/npm/v/@gr4vy/secure-fields-react?color=green)
4
4
  [![GitHub license](https://img.shields.io/github/license/Naereen/StrapDown.js.svg)](https://github.com/gr4vy/secure-fields/blob/main/LICENSE)
5
5
 
6
- Load Secure Fields in your React app.
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,28 +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 --save
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
- ```js
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
32
  font="Lato"
33
- onReady={(data) => console.warn('Secure Fields loaded', data)}
34
- onCardVaultSuccess={() =>
35
- console.warn('Card has been tokenized successfully!')
36
- }
37
- onCardVaultFailure={() => console.error('Failed to tokenize card data')}
33
+ onReady={(data) => console.log('Secure Fields loaded', data)}
34
+ onCardVaultSuccess={() => console.log('Card tokenization successful')}
35
+ onCardVaultFailure={() => console.error('Card tokenization failed')}
38
36
  >
39
37
  <Form />
40
38
  </SecureFields>
@@ -45,73 +43,68 @@ const { SecureFields } = require(`@gr4vy/secure-fields-react`)
45
43
 
46
44
  | Prop Name | Description |
47
45
  | -------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
48
- | `environment` | Your Gr4vy environment. Can be either `sandbox` or `production` |
49
46
  | `gr4vyId` | Your Gr4vy ID. |
47
+ | `environment` | Your Gr4vy environment. Can be either `sandbox` or `production`. |
50
48
  | `sessionId` | The Session ID. |
51
- | `debug` | Enables / disables the debug mode |
49
+ | `debug` | Enables / disables the debug mode. |
52
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. |
53
- | `onReady` | Attaches an event handler to the SecureFields instance, listening for the [`READY`](../secure-fields/README.md#events) event. Accepts a callback function |
54
- | `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 |
55
- | `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 |
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
56
56
 
57
- ### Form
57
+ Within the `SecureFields` provider you can now create your own card form using each of the Secure Field components.
58
58
 
59
- 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.
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.
60
61
 
61
62
  ```js
62
63
  const {
63
64
  CardNumber,
64
65
  ExpiryDate,
65
66
  SecurityCode,
66
- } = require(`@gr4vy/secure-fields-react`)
67
- // import { CardNumber, ExpiryDate, SecurityCode } from (`@gr4vy/secure-fields-react)
67
+ } = require('@gr4vy/secure-fields-react')
68
+
69
+ // Alternatively:
70
+ // import {
71
+ // CardNumber,
72
+ // ExpiryDate,
73
+ // SecurityCode
74
+ // } from ('@gr4vy/secure-fields-react')
68
75
 
69
76
  const Form = () => {
70
77
  const { secureFields } = useSecureFields()
71
78
 
72
- const handleFormSubmit = (e) => {
73
- e.preventDefault()
79
+ const handleSubmit = () => {
74
80
  secureFields.submit()
75
81
  }
76
82
 
77
83
  return (
78
- <form onSubmit={handleFormSubmit}>
79
- <div className="form-group">
80
- <label htmlFor="cc-holder-name" className="form-label">
81
- Cardholder Name
82
- </label>
83
- <input
84
- id="cc-holder-name"
85
- className="form-control"
86
- placeholder="Name on the card"
87
- />
88
- </div>
89
- <div className="form-group">
90
- <label htmlFor="cc-number">Card Number</label>
91
- <CardNumber />
92
- </div>
93
- <div className="form-group">
94
- <label htmlFor="cc-expiry-date">Expiry Date</label>
95
- <ExpiryDate />
96
- </div>
97
- <div className="form-group">
98
- <label htmlFor="cc-security-code">{securityCodeLabel}</label>
99
- <SecurityCode />
100
- </div>
101
- <button>Submit</button>
102
- </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
+ </>
103
96
  )
104
97
  }
105
98
  ```
106
99
 
107
- #### Field Components
100
+ ## Field Components
108
101
 
109
- 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.
110
103
 
111
- | Prop Name | Description |
112
- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
113
- | `placeholder` | Input placeholder text |
114
- | `styles` | An object of CSS rules to style the input inside the iframe. See [Styles](../secure-fields/README.md#styles) for more information |
115
- | `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
- | `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
- | `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`). |
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gr4vy/secure-fields-react",
3
- "version": "0.8.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.8.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": "b5f4f0de1387377b37761fddc0ab7d4ee82a8de6"
51
+ "gitHead": "382a4f03693139980b4acd32c04008990924e7b6"
52
52
  }