@rebilly/framepay-react 6.45.2 → 6.45.4
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
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
## [6.45.
|
|
1
|
+
## [6.45.4](https://github.com/Rebilly/rebilly/compare/framepay-react-v6.45.3...framepay-react-v6.45.4) (2024-09-19)
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
### Bug Fixes
|
|
5
5
|
|
|
6
|
-
* **revel:**
|
|
6
|
+
* **revel:** Remove vue template compiler ([#7653](https://github.com/Rebilly/rebilly/issues/7653)) ([92a65f9](https://github.com/Rebilly/rebilly/commit/92a65f9d757fc8accdac196636fca8f590162210))
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@rebilly/framepay-react",
|
|
3
|
-
"version": "6.45.
|
|
3
|
+
"version": "6.45.4",
|
|
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",
|
|
@@ -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
|
@@ -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
|
+
});
|
|
@@ -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
|
}
|