@rebilly/framepay-react 6.45.1 → 6.45.3

Sign up to get free protection for your applications and to get access to all the features.
Files changed (7) hide show
  1. package/CHANGELOG.md +6 -1
  2. package/package.json +1 -1
  3. package/test/e2e/fixtures/inject-metadata.html +15 -0
  4. package/test/e2e/fixtures/inject-metadata.js +275 -0
  5. package/test/e2e/fixtures/nav.js +1 -0
  6. package/test/e2e/specs/inject-riskMetadata.cy.ts +48 -0
  7. package/types/rebilly/settings.d.ts +20 -0
package/CHANGELOG.md CHANGED
@@ -1 +1,6 @@
1
- ## [6.45.1](https://github.com/Rebilly/rebilly/compare/framepay-react-v6.45.0...framepay-react-v6.45.1) (2024-09-16)
1
+ ## [6.45.3](https://github.com/Rebilly/rebilly/compare/framepay-react-v6.45.2...framepay-react-v6.45.3) (2024-09-18)
2
+
3
+
4
+ ### Bug Fixes
5
+
6
+ * **framepay-react:** Allow injection of Risk Metadata ([#7643](https://github.com/Rebilly/rebilly/issues/7643)) ([b272717](https://github.com/Rebilly/rebilly/commit/b2727177938b8a5c93828b66f11ad53c61b96199))
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rebilly/framepay-react",
3
- "version": "6.45.1",
3
+ "version": "6.45.3",
4
4
  "description": "A React wrapper for Rebilly's FramePay offering out-of-the-box support for Redux and other common React features",
5
5
  "main": "build/index.js",
6
6
  "author": "Rebilly",
package/test/e2e/fixtures/inject-metadata.html ADDED
@@ -0,0 +1,15 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+
4
+ <head>
5
+ <meta charset="utf-8" />
6
+ <title>Test Inject Metadata</title>
7
+ </head>
8
+
9
+ <body>
10
+ <div id="app"></div>
11
+ <script src="inject-metadata.js"></script>
12
+ <script src="nav.js"></script>
13
+ </body>
14
+
15
+ </html>
package/test/e2e/fixtures/inject-metadata.js ADDED
@@ -0,0 +1,275 @@
1
+ import React, { Component } from 'react';
2
+ import ReactDOM from 'react-dom';
3
+
4
+ import { FramePayProvider, withFramePayCardComponent } from '../../../build';
5
+ import { deepMerge, prettyDebugRender, ReactVersion } from './util';
6
+ import './style.css';
7
+
8
+ const params = {
9
+ publishableKey: 'pk_sandbox_c6cqKLddciVikuBOjhcng-rLccTz70NT4W_qZ_h',
10
+ style: {
11
+ base: {
12
+ color: 'green',
13
+ fontSize: '12px',
14
+ webkitFontSmoothing: 'auto',
15
+ fontFeatureSettings: 'test',
16
+ fontStyle: 'italic',
17
+ fontVariant: 'normal',
18
+ fontStretch: 'none',
19
+ fontSomething: 'not-included',
20
+ fontOtherThing: 'not-included',
21
+ lineHeight: '20px',
22
+ },
23
+ invalid: {
24
+ fontWeight: 'bold',
25
+ },
26
+ },
27
+ classes: {
28
+ base: 'rebilly-framepay',
29
+ focus: 'rebilly-framepay-focus',
30
+ valid: 'rebilly-framepay-valid',
31
+ invalid: 'rebilly-framepay-invalid',
32
+ buttons: 'rebilly-framepay-buttons',
33
+ webkitAutofill: 'rebilly-framepay-webkit-autofill',
34
+ },
35
+ icon: {
36
+ foobar: 123,
37
+ display: true,
38
+ color: 'blue',
39
+ },
40
+ riskMetadata: {
41
+ browserData: {
42
+ colorDepth: '48',
43
+ isJavaEnabled: 'true',
44
+ language: 'en',
45
+ screenHeight: '100',
46
+ screenWidth: '100',
47
+ timeZoneOffset: '0',
48
+ },
49
+ extraData: {
50
+ kountFraudSessionId: null,
51
+ },
52
+ fingerprint: 'fingerprint123',
53
+ },
54
+ };
55
+
56
+ class CardElementComponent extends Component {
57
+ constructor(props) {
58
+ super(props);
59
+ this.state = {
60
+ events: {
61
+ onReady: null,
62
+ onError: null,
63
+ onChange: null,
64
+ onFocus: null,
65
+ onBlur: null,
66
+ },
67
+ billingAddress: {
68
+ firstName: 'first-name-value',
69
+ lastName: 'last-name-value',
70
+ address: 'address-value',
71
+ country: 'GB',
72
+ region: 'region-value',
73
+ },
74
+ token: {
75
+ error: null,
76
+ data: null,
77
+ },
78
+ };
79
+ this.handleSubmit = this.handleSubmit.bind(this);
80
+ }
81
+
82
+ handleSubmit(e) {
83
+ e.preventDefault();
84
+ /**
85
+ *
86
+ * @see https://www.rebilly.com/docs/dev-docs/framepay-global-reference/#framepay.createtoken
87
+ *
88
+ */
89
+ const billingAddress = {
90
+ ...this.state.billingAddress,
91
+ };
92
+ if (billingAddress.emails) {
93
+ billingAddress.emails = [
94
+ {
95
+ label: 'Email',
96
+ value: billingAddress.emails,
97
+ },
98
+ ];
99
+ }
100
+ if (billingAddress.phoneNumbers) {
101
+ billingAddress.phoneNumbers = [
102
+ {
103
+ label: 'Phone Number',
104
+ value: billingAddress.phoneNumbers,
105
+ },
106
+ ];
107
+ }
108
+
109
+ this.props.Framepay.createToken(this.formNode, { billingAddress })
110
+ .then((data) => {
111
+ this.deepUpdateState({ token: { error: false, data } });
112
+ })
113
+ .catch((err) => {
114
+ this.deepUpdateState({ token: { error: true, data: err } });
115
+ });
116
+ }
117
+
118
+ deepUpdateState(data) {
119
+ this.setState((prevState) => {
120
+ return deepMerge(prevState, data);
121
+ });
122
+ }
123
+
124
+ render() {
125
+ return (
126
+ <div>
127
+ <h2>{this.props.title}</h2>
128
+ <h3>FramePay version: {this.props.Framepay.version}</h3>
129
+ <div className="flex-wrapper">
130
+ {prettyDebugRender(this.state)}
131
+ <div className="example-2">
132
+ <form
133
+ id="form"
134
+ ref={(node) => (this.formNode = node)}
135
+ method="post"
136
+ onSubmit={this.handleSubmit}
137
+ >
138
+ <fieldset>
139
+ <div className="field">
140
+ <input
141
+ type="text"
142
+ name="firstName"
143
+ placeholder="First Name"
144
+ defaultValue={
145
+ this.state.billingAddress.firstName
146
+ }
147
+ onChange={(e) => {
148
+ this.deepUpdateState({
149
+ billingAddress: {
150
+ firstName: e.target.value,
151
+ },
152
+ });
153
+ }}
154
+ />
155
+ </div>
156
+ <div className="field">
157
+ <input
158
+ type="text"
159
+ name="lastName"
160
+ placeholder="Last Name"
161
+ defaultValue={
162
+ this.state.billingAddress.lastName
163
+ }
164
+ onChange={(e) => {
165
+ this.deepUpdateState({
166
+ billingAddress: {
167
+ lastName: e.target.value,
168
+ },
169
+ });
170
+ }}
171
+ />
172
+ </div>
173
+ <div className="field">
174
+ <input
175
+ type="text"
176
+ name="email"
177
+ placeholder="Email"
178
+ defaultValue={
179
+ this.state.billingAddress.emails
180
+ }
181
+ onChange={(e) => {
182
+ this.deepUpdateState({
183
+ billingAddress: {
184
+ emails: e.target.value,
185
+ },
186
+ });
187
+ }}
188
+ />
189
+ </div>
190
+ <div className="field">
191
+ <input
192
+ type="text"
193
+ name="phone"
194
+ placeholder="Phone"
195
+ defaultValue={
196
+ this.state.billingAddress
197
+ .phoneNumbers
198
+ }
199
+ onChange={(e) => {
200
+ this.deepUpdateState({
201
+ billingAddress: {
202
+ phoneNumbers:
203
+ e.target.value,
204
+ },
205
+ });
206
+ }}
207
+ />
208
+ </div>
209
+ <div className="field">
210
+ <this.props.CardElement
211
+ onError={(err) =>
212
+ this.deepUpdateState({
213
+ events: { onError: err },
214
+ })
215
+ }
216
+ onReady={() =>
217
+ this.deepUpdateState({
218
+ events: { onReady: true },
219
+ })
220
+ }
221
+ onChange={(data) =>
222
+ this.deepUpdateState({
223
+ events: { onChange: data },
224
+ })
225
+ }
226
+ onFocus={() =>
227
+ this.deepUpdateState({
228
+ events: { onFocus: true },
229
+ })
230
+ }
231
+ onBlur={() =>
232
+ this.deepUpdateState({
233
+ events: { onBlur: true },
234
+ })
235
+ }
236
+ />
237
+ </div>
238
+ </fieldset>
239
+ <button id="submit">Make Payment</button>
240
+ </form>
241
+ </div>
242
+ </div>
243
+ </div>
244
+ );
245
+ }
246
+ }
247
+
248
+ const CardElement = withFramePayCardComponent(CardElementComponent);
249
+
250
+ class App extends Component {
251
+ deepUpdateState(data) {
252
+ this.setState((prevState) => {
253
+ return deepMerge(prevState, data);
254
+ });
255
+ }
256
+
257
+ render() {
258
+ return (
259
+ <FramePayProvider
260
+ injectStyle
261
+ {...params}
262
+ onTokenReady={(token) =>
263
+ this.deepUpdateState({ error: false, data: token })
264
+ }
265
+ >
266
+ <div>
267
+ {ReactVersion()}
268
+ <CardElement />
269
+ </div>
270
+ </FramePayProvider>
271
+ );
272
+ }
273
+ }
274
+
275
+ ReactDOM.render(<App />, document.getElementById('app'));
package/test/e2e/fixtures/nav.js CHANGED
@@ -11,6 +11,7 @@ setTimeout(() => {
11
11
  'iban',
12
12
  'multiple-methods',
13
13
  'paypal',
14
+ 'inject-metadata',
14
15
  ].forEach((route) => {
15
16
  node.innerHTML += `<li><a href="/${route}.html">${route}</a></li>`;
16
17
  });
package/test/e2e/specs/inject-riskMetadata.cy.ts ADDED
@@ -0,0 +1,48 @@
1
+ describe('checkout-combined', () => {
2
+ beforeEach(() => {
3
+ cy.visit({ url: '/inject-metadata' });
4
+ });
5
+
6
+ it('should load the page', () => {
7
+ cy.title().should('eq', 'Test Inject Metadata');
8
+ });
9
+
10
+ it('should inject the card iframe into the page', () => {
11
+ cy.get('iframe#card');
12
+ });
13
+
14
+ it('should be call the on-ready hook', () => {
15
+ cy.get('#events-onReady-true');
16
+ });
17
+
18
+ it('should call the on-change hook', () => {
19
+ cy.get('#events-onReady-true');
20
+ cy.get('#submit').click();
21
+ cy.get('#key-onChange');
22
+ cy.get('#token-data-code-invalid-payment-card');
23
+ });
24
+
25
+ it('should show provided data in token', () => {
26
+ cy.get('#events-onReady-true');
27
+
28
+ cy.iframe('iframe#card').within(() => {
29
+ const cardNumber = '4111111111111111';
30
+ const expiry =
31
+ String('0' + (new Date().getMonth() + 1)).substr(-2) +
32
+ String(new Date().getFullYear()).substr(-2);
33
+ const cvv = '123';
34
+
35
+ cy.findByTestId('cardnumber').type(cardNumber);
36
+ cy.findByTestId('exp-date').type(expiry);
37
+ cy.findByTestId('cvv').type(cvv);
38
+ });
39
+
40
+ cy.get('#submit').click();
41
+
42
+ cy.get('#token-data-fingerprint')
43
+ .invoke('text')
44
+ .should((fingerprint) => {
45
+ expect(fingerprint).to.equal('fingerprint123');
46
+ });
47
+ });
48
+ });
package/types/rebilly/settings.d.ts CHANGED
@@ -71,6 +71,25 @@ interface FramePayCardExpiry {
71
71
  readonly type: supportedCardExpiryTypes;
72
72
  }
73
73
 
74
+ interface FramePaySettingsRiskMetadataBrowserData {
75
+ readonly colorDepth: string;
76
+ readonly isJavaEnabled: string;
77
+ readonly language: string;
78
+ readonly screenHeight: string;
79
+ readonly screenWidth: string;
80
+ readonly timeZoneOffset: string;
81
+ }
82
+
83
+ interface FramePaySettingsRiskMetadataExtraData {
84
+ readonly kountFraudSessionId?: string;
85
+ readonly payPalMerchantSessionId?: string;
86
+ }
87
+ interface FramePaySettingsRiskMetadata {
88
+ readonly browserData?: FramePaySettingsRiskMetadataBrowserData;
89
+ readonly extraData?: FramePaySettingsRiskMetadataExtraData;
90
+ readonly fingerprint?: string;
91
+ }
92
+
74
93
  type supportedCardCvvTypes = 'text' | 'password';
75
94
 
76
95
  interface FramePayCardCVV {
@@ -114,4 +133,5 @@ interface FramePaySettings {
114
133
  readonly applePay?: ApplePayDisplayOptions;
115
134
  readonly googlePay?: GooglePayDisplayOptions;
116
135
  readonly paypal?: PaypalDisplayOptions;
136
+ readonly riskMetadata?: FramePaySettingsRiskMetadata;
117
137
  }