frames-react-native 1.1.8 → 1.2.2
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/.github/workflows/cd.yml +6 -6
- package/.github/workflows/ci.yml +3 -3
- package/__mocks__/fileTransformer.js +9 -0
- package/__tests__/Integration.test.tsx +109 -373
- package/dist/Frames.d.ts +1 -1
- package/dist/Frames.js +5 -5
- package/dist/Frames.js.map +1 -1
- package/dist/components/CardNumber.js +17 -16
- package/dist/components/CardNumber.js.map +1 -1
- package/dist/components/Cvv.d.ts +1 -1
- package/dist/components/Cvv.js +9 -8
- package/dist/components/Cvv.js.map +1 -1
- package/dist/components/ExpiryDate.d.ts +1 -1
- package/dist/components/ExpiryDate.js +9 -8
- package/dist/components/ExpiryDate.js.map +1 -1
- package/dist/components/SubmitButton.js +11 -11
- package/dist/components/SubmitButton.js.map +1 -1
- package/dist/types/types.d.ts +16 -16
- package/dist/types/types.js +1 -0
- package/dist/utils/card.d.ts +5 -4
- package/dist/utils/card.js +14 -10
- package/dist/utils/card.js.map +1 -1
- package/dist/utils/date.js.map +1 -1
- package/dist/utils/http.d.ts +1 -1
- package/dist/utils/http.js +5 -6
- package/dist/utils/http.js.map +1 -1
- package/dist/utils/logger.d.ts +1 -1
- package/dist/utils/logger.js +1 -1
- package/dist/utils/logger.js.map +1 -1
- package/dist/utils/reducer.d.ts +5 -28
- package/dist/utils/reducer.js +7 -7
- package/dist/utils/reducer.js.map +1 -1
- package/package.json +18 -15
package/.github/workflows/cd.yml
CHANGED
|
@@ -13,10 +13,10 @@ jobs:
|
|
|
13
13
|
runs-on: ubuntu-latest
|
|
14
14
|
steps:
|
|
15
15
|
- uses: actions/checkout@master
|
|
16
|
-
- uses: actions/checkout@
|
|
17
|
-
- uses: actions/setup-node@
|
|
16
|
+
- uses: actions/checkout@v4
|
|
17
|
+
- uses: actions/setup-node@v4
|
|
18
18
|
with:
|
|
19
|
-
node-version:
|
|
19
|
+
node-version: 21
|
|
20
20
|
- run: npm ci
|
|
21
21
|
- run: npm test
|
|
22
22
|
- name: Upload coverage to Codecov
|
|
@@ -29,10 +29,10 @@ jobs:
|
|
|
29
29
|
needs: test-and-coverage
|
|
30
30
|
runs-on: ubuntu-latest
|
|
31
31
|
steps:
|
|
32
|
-
- uses: actions/checkout@
|
|
33
|
-
- uses: actions/setup-node@
|
|
32
|
+
- uses: actions/checkout@v4
|
|
33
|
+
- uses: actions/setup-node@v4
|
|
34
34
|
with:
|
|
35
|
-
node-version:
|
|
35
|
+
node-version: 21
|
|
36
36
|
registry-url: https://registry.npmjs.org/
|
|
37
37
|
- run: npm ci
|
|
38
38
|
- run: npm run build
|
package/.github/workflows/ci.yml
CHANGED
|
@@ -7,9 +7,9 @@ jobs:
|
|
|
7
7
|
runs-on: ubuntu-latest
|
|
8
8
|
steps:
|
|
9
9
|
- uses: actions/checkout@master
|
|
10
|
-
- uses: actions/checkout@
|
|
11
|
-
- uses: actions/setup-node@
|
|
10
|
+
- uses: actions/checkout@v4
|
|
11
|
+
- uses: actions/setup-node@v4
|
|
12
12
|
with:
|
|
13
|
-
node-version:
|
|
13
|
+
node-version: 21
|
|
14
14
|
- run: npm ci
|
|
15
15
|
- run: npm test
|
|
@@ -2,400 +2,136 @@ import React from "react";
|
|
|
2
2
|
import { render, fireEvent, waitFor } from "@testing-library/react-native";
|
|
3
3
|
|
|
4
4
|
import {
|
|
5
|
-
CardNumber,
|
|
6
5
|
Frames,
|
|
6
|
+
CardNumber,
|
|
7
7
|
ExpiryDate,
|
|
8
8
|
Cvv,
|
|
9
9
|
SubmitButton,
|
|
10
10
|
} from "../src/index";
|
|
11
11
|
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
config={{
|
|
21
|
-
publicKey: PK,
|
|
22
|
-
debug: true,
|
|
23
|
-
}}
|
|
24
|
-
cardTokenized={tokenized}
|
|
25
|
-
>
|
|
26
|
-
<CardNumber placeholder="card-number" />
|
|
27
|
-
<ExpiryDate placeholder="expiry-date" />
|
|
28
|
-
<Cvv placeholder="cvv" />
|
|
29
|
-
<SubmitButton
|
|
30
|
-
title="Pay Now"
|
|
31
|
-
testID={"submit-button"}
|
|
32
|
-
onPress={() => {}}
|
|
33
|
-
/>
|
|
34
|
-
</Frames>
|
|
35
|
-
);
|
|
36
|
-
|
|
37
|
-
let cardNumber = getByPlaceholderText("card-number");
|
|
38
|
-
let expiryDate = getByPlaceholderText("expiry-date");
|
|
39
|
-
let cvv = getByPlaceholderText("cvv");
|
|
40
|
-
let pay = getByTestId("submit-button");
|
|
41
|
-
fireEvent.changeText(cardNumber, "4242424242424242");
|
|
42
|
-
fireEvent.changeText(expiryDate, "1128");
|
|
43
|
-
fireEvent.changeText(cvv, "100");
|
|
44
|
-
fireEvent.press(pay);
|
|
45
|
-
await waitFor(() => {
|
|
46
|
-
expect(tokenized).toHaveBeenCalledTimes(1);
|
|
47
|
-
});
|
|
48
|
-
expect(tokenized.mock.calls[0][0].last4).toEqual("4242");
|
|
49
|
-
});
|
|
50
|
-
|
|
51
|
-
it("shared the card bin", async () => {
|
|
52
|
-
const binChange = jest.fn();
|
|
53
|
-
|
|
54
|
-
const { getByPlaceholderText, getByTestId } = render(
|
|
55
|
-
<Frames
|
|
56
|
-
config={{
|
|
57
|
-
publicKey: PK,
|
|
58
|
-
debug: true,
|
|
59
|
-
}}
|
|
60
|
-
cardTokenized={() => {}}
|
|
61
|
-
cardBinChanged={binChange}
|
|
62
|
-
>
|
|
63
|
-
<CardNumber placeholder="card-number" />
|
|
64
|
-
<ExpiryDate placeholder="expiry-date" />
|
|
65
|
-
<Cvv placeholder="cvv" />
|
|
66
|
-
<SubmitButton
|
|
67
|
-
title="Pay Now"
|
|
68
|
-
testID={"submit-button"}
|
|
69
|
-
onPress={() => {}}
|
|
70
|
-
/>
|
|
71
|
-
</Frames>
|
|
72
|
-
);
|
|
73
|
-
|
|
74
|
-
let cardNumber = getByPlaceholderText("card-number");
|
|
75
|
-
let expiryDate = getByPlaceholderText("expiry-date");
|
|
76
|
-
let cvv = getByPlaceholderText("cvv");
|
|
77
|
-
let pay = getByTestId("submit-button");
|
|
78
|
-
fireEvent.changeText(cardNumber, "42424242");
|
|
79
|
-
expect(binChange).toHaveBeenCalledTimes(1);
|
|
80
|
-
});
|
|
81
|
-
|
|
82
|
-
it("fails the card tokenization when the card number is invalid", async () => {
|
|
83
|
-
const failed = jest.fn();
|
|
84
|
-
|
|
85
|
-
const { getByPlaceholderText, getByTestId } = render(
|
|
86
|
-
<Frames
|
|
87
|
-
config={{
|
|
88
|
-
publicKey: PK,
|
|
89
|
-
}}
|
|
90
|
-
cardTokenized={() => {}}
|
|
91
|
-
cardTokenizationFailed={failed}
|
|
92
|
-
>
|
|
93
|
-
<CardNumber placeholder="card-number" />
|
|
94
|
-
<ExpiryDate placeholder="expiry-date" />
|
|
95
|
-
<Cvv placeholder="cvv" />
|
|
96
|
-
<SubmitButton
|
|
97
|
-
title="Pay Now"
|
|
98
|
-
testID={"submit-button"}
|
|
99
|
-
onPress={() => {}}
|
|
100
|
-
/>
|
|
101
|
-
</Frames>
|
|
102
|
-
);
|
|
103
|
-
|
|
104
|
-
let cardNumber = getByPlaceholderText("card-number");
|
|
105
|
-
let expiryDate = getByPlaceholderText("expiry-date");
|
|
106
|
-
let cvv = getByPlaceholderText("cvv");
|
|
107
|
-
let pay = getByTestId("submit-button");
|
|
108
|
-
fireEvent.changeText(cardNumber, "12345");
|
|
109
|
-
fireEvent.changeText(expiryDate, "1128");
|
|
110
|
-
fireEvent.changeText(cvv, "100");
|
|
111
|
-
fireEvent.press(pay);
|
|
112
|
-
await waitFor(() => {
|
|
113
|
-
expect(failed).toHaveBeenCalledTimes(1);
|
|
114
|
-
});
|
|
115
|
-
});
|
|
116
|
-
|
|
117
|
-
it("throws when the pay button is outside of context", async () => {
|
|
118
|
-
expect(() => {
|
|
119
|
-
render(
|
|
120
|
-
<SubmitButton
|
|
121
|
-
title="Pay Now"
|
|
122
|
-
testID={"submit-button"}
|
|
123
|
-
onPress={() => {}}
|
|
124
|
-
/>
|
|
125
|
-
);
|
|
126
|
-
}).toThrow(
|
|
127
|
-
"It looks like you are trying to render the SubmitButton outside of the Frames Component."
|
|
128
|
-
);
|
|
129
|
-
});
|
|
130
|
-
|
|
131
|
-
it("throws allow then use of the onPress handler", async () => {
|
|
132
|
-
const press = jest.fn();
|
|
133
|
-
|
|
134
|
-
const { getByPlaceholderText, getByTestId } = render(
|
|
135
|
-
<Frames
|
|
136
|
-
config={{
|
|
137
|
-
publicKey: PK,
|
|
138
|
-
debug: true,
|
|
139
|
-
cardholder: {
|
|
140
|
-
name: "John Smith",
|
|
141
|
-
billingAddress: {
|
|
142
|
-
addressLine1: "Wall Street",
|
|
143
|
-
addressLine2: "Dollar Avenue",
|
|
144
|
-
city: "London",
|
|
145
|
-
state: "London",
|
|
146
|
-
zip: "W1W 8GY",
|
|
147
|
-
country: "GB",
|
|
148
|
-
},
|
|
149
|
-
phone: "07123456789",
|
|
150
|
-
},
|
|
151
|
-
}}
|
|
152
|
-
cardTokenized={() => {}}
|
|
153
|
-
>
|
|
154
|
-
<CardNumber placeholder="card-number" />
|
|
155
|
-
<ExpiryDate placeholder="expiry-date" />
|
|
156
|
-
<Cvv placeholder="cvv" />
|
|
157
|
-
<SubmitButton
|
|
158
|
-
title="Pay Now"
|
|
159
|
-
testID={"submit-button"}
|
|
160
|
-
onPress={press}
|
|
161
|
-
/>
|
|
162
|
-
</Frames>
|
|
163
|
-
);
|
|
164
|
-
let cardNumber = getByPlaceholderText("card-number");
|
|
165
|
-
let expiryDate = getByPlaceholderText("expiry-date");
|
|
166
|
-
let cvv = getByPlaceholderText("cvv");
|
|
167
|
-
let pay = getByTestId("submit-button");
|
|
168
|
-
fireEvent.changeText(cardNumber, "4242424242424242");
|
|
169
|
-
fireEvent.changeText(expiryDate, "1128");
|
|
170
|
-
fireEvent.changeText(cvv, "100");
|
|
171
|
-
fireEvent.press(pay);
|
|
172
|
-
|
|
173
|
-
fireEvent.press(pay);
|
|
174
|
-
expect(press).toHaveBeenCalled();
|
|
175
|
-
});
|
|
176
|
-
|
|
177
|
-
it("fails tokenization", async () => {
|
|
178
|
-
const failed = jest.fn();
|
|
179
|
-
|
|
180
|
-
const { getByPlaceholderText, getByTestId } = render(
|
|
181
|
-
<Frames
|
|
182
|
-
config={{
|
|
183
|
-
publicKey: "pk_test_baabd05f-1cdb-43d9-851e-635a79f6e7ad", // this account does not have Visa enabled
|
|
184
|
-
debug: true,
|
|
185
|
-
}}
|
|
186
|
-
cardTokenized={() => {}}
|
|
187
|
-
frameValidationChanged={(e) => {}}
|
|
188
|
-
paymentMethodChanged={(e) => {}}
|
|
189
|
-
cardValidationChanged={(e) => {}}
|
|
190
|
-
cardTokenizationFailed={failed}
|
|
191
|
-
>
|
|
192
|
-
<CardNumber placeholder="card-number" />
|
|
193
|
-
<ExpiryDate placeholder="expiry-date" />
|
|
194
|
-
<Cvv placeholder="cvv" />
|
|
195
|
-
<SubmitButton
|
|
196
|
-
title="Pay Now"
|
|
197
|
-
testID={"submit-button"}
|
|
198
|
-
onPress={() => {}}
|
|
199
|
-
/>
|
|
200
|
-
</Frames>
|
|
201
|
-
);
|
|
202
|
-
|
|
203
|
-
let cardNumber = getByPlaceholderText("card-number");
|
|
204
|
-
let expiryDate = getByPlaceholderText("expiry-date");
|
|
205
|
-
let cvv = getByPlaceholderText("cvv");
|
|
206
|
-
let pay = getByTestId("submit-button");
|
|
207
|
-
fireEvent.changeText(cardNumber, "4242424242424242");
|
|
208
|
-
fireEvent.changeText(expiryDate, "0628");
|
|
209
|
-
fireEvent.changeText(cvv, "100");
|
|
210
|
-
fireEvent.press(pay);
|
|
211
|
-
await waitFor(() => {
|
|
212
|
-
expect(failed).toHaveBeenCalledTimes(1);
|
|
213
|
-
});
|
|
214
|
-
});
|
|
215
|
-
|
|
216
|
-
it("triggers the card tokenization with billing details", async () => {
|
|
217
|
-
const tokenized = jest.fn();
|
|
218
|
-
|
|
219
|
-
const { getByPlaceholderText, getByTestId } = render(
|
|
220
|
-
<Frames
|
|
221
|
-
config={{
|
|
222
|
-
publicKey: PK,
|
|
223
|
-
debug: true,
|
|
224
|
-
cardholder: {
|
|
225
|
-
name: "John Smith",
|
|
226
|
-
billingAddress: {
|
|
227
|
-
addressLine1: "Wall Street",
|
|
228
|
-
addressLine2: "Dollar Avenue",
|
|
229
|
-
city: "London",
|
|
230
|
-
state: "London",
|
|
231
|
-
zip: "W1W 8GY",
|
|
232
|
-
country: "GB",
|
|
233
|
-
},
|
|
234
|
-
phone: "07123456789",
|
|
235
|
-
},
|
|
236
|
-
}}
|
|
237
|
-
cardTokenized={tokenized}
|
|
238
|
-
>
|
|
239
|
-
<CardNumber placeholder="card-number" />
|
|
240
|
-
<ExpiryDate placeholder="expiry-date" />
|
|
241
|
-
<Cvv placeholder="cvv" />
|
|
242
|
-
<SubmitButton
|
|
243
|
-
title="Pay Now"
|
|
244
|
-
testID={"submit-button"}
|
|
245
|
-
onPress={() => {}}
|
|
246
|
-
/>
|
|
247
|
-
</Frames>
|
|
248
|
-
);
|
|
249
|
-
|
|
250
|
-
let cardNumber = getByPlaceholderText("card-number");
|
|
251
|
-
let expiryDate = getByPlaceholderText("expiry-date");
|
|
252
|
-
let cvv = getByPlaceholderText("cvv");
|
|
253
|
-
let pay = getByTestId("submit-button");
|
|
254
|
-
fireEvent.changeText(cardNumber, "4242424242424242");
|
|
255
|
-
fireEvent.changeText(expiryDate, "1128");
|
|
256
|
-
fireEvent.changeText(cvv, "100");
|
|
257
|
-
fireEvent.press(pay);
|
|
258
|
-
await waitFor(() => {
|
|
259
|
-
expect(tokenized).toHaveBeenCalledTimes(1);
|
|
260
|
-
});
|
|
261
|
-
expect(tokenized.mock.calls[0][0].billing_address.address_line1).toEqual(
|
|
262
|
-
"Wall Street"
|
|
263
|
-
);
|
|
264
|
-
});
|
|
12
|
+
// Mock network-dependent modules to avoid real HTTP requests
|
|
13
|
+
jest.mock("../src/utils/http", () => {
|
|
14
|
+
const actual = jest.requireActual("../src/utils/http");
|
|
15
|
+
return {
|
|
16
|
+
...actual,
|
|
17
|
+
tokenize: jest.fn(),
|
|
18
|
+
};
|
|
19
|
+
});
|
|
265
20
|
|
|
266
|
-
|
|
267
|
-
|
|
21
|
+
jest.mock("../src/utils/logger", () => {
|
|
22
|
+
const actual = jest.requireActual("../src/utils/logger");
|
|
23
|
+
return {
|
|
24
|
+
...actual,
|
|
25
|
+
log: jest.fn(),
|
|
26
|
+
};
|
|
27
|
+
});
|
|
268
28
|
|
|
269
|
-
|
|
29
|
+
describe("Frames integration", () => {
|
|
30
|
+
const validVisa = "4242 4242 4242 4242"; // Visa test number
|
|
31
|
+
const validExpiry = "12/30"; // future year
|
|
32
|
+
const validCvv = "123";
|
|
33
|
+
|
|
34
|
+
const config = {
|
|
35
|
+
publicKey: "pk_test_4296fd52-efba-4a38-b6ce-cf0d93639d8a",
|
|
36
|
+
debug: true,
|
|
37
|
+
cardholder: {
|
|
38
|
+
name: "John Doe",
|
|
39
|
+
phone: "+1234567890",
|
|
40
|
+
billingAddress: {
|
|
41
|
+
addressLine1: "123 Test St",
|
|
42
|
+
city: "Test City",
|
|
43
|
+
state: "TS",
|
|
44
|
+
zip: "12345",
|
|
45
|
+
country: "US",
|
|
46
|
+
},
|
|
47
|
+
},
|
|
48
|
+
};
|
|
49
|
+
|
|
50
|
+
it("emits validation and bin events, and tokenizes on submit", async () => {
|
|
51
|
+
const { tokenize } = require("../src/utils/http");
|
|
52
|
+
|
|
53
|
+
const mockTokenResponse = {
|
|
54
|
+
type: "card",
|
|
55
|
+
token: "tok_test_123",
|
|
56
|
+
expires_on: "2030-12-31T23:59:59Z",
|
|
57
|
+
expiry_month: "12",
|
|
58
|
+
expiry_year: "2030",
|
|
59
|
+
scheme: "Visa",
|
|
60
|
+
last4: "4242",
|
|
61
|
+
bin: "424242",
|
|
62
|
+
};
|
|
63
|
+
|
|
64
|
+
tokenize.mockResolvedValueOnce(mockTokenResponse);
|
|
65
|
+
|
|
66
|
+
const frameValidationChanged = jest.fn();
|
|
67
|
+
const paymentMethodChanged = jest.fn();
|
|
68
|
+
const cardValidationChanged = jest.fn();
|
|
69
|
+
const cardTokenized = jest.fn();
|
|
70
|
+
const cardTokenizationFailed = jest.fn();
|
|
71
|
+
const cardBinChanged = jest.fn();
|
|
72
|
+
|
|
73
|
+
const screen = render(
|
|
270
74
|
<Frames
|
|
271
|
-
config={
|
|
272
|
-
|
|
273
|
-
}
|
|
274
|
-
|
|
75
|
+
config={config}
|
|
76
|
+
frameValidationChanged={frameValidationChanged}
|
|
77
|
+
paymentMethodChanged={paymentMethodChanged}
|
|
78
|
+
cardValidationChanged={cardValidationChanged}
|
|
79
|
+
cardTokenized={cardTokenized}
|
|
80
|
+
cardTokenizationFailed={cardTokenizationFailed}
|
|
81
|
+
cardBinChanged={cardBinChanged}
|
|
275
82
|
>
|
|
276
|
-
<CardNumber
|
|
277
|
-
<ExpiryDate
|
|
278
|
-
<Cvv
|
|
279
|
-
<SubmitButton
|
|
280
|
-
title="Pay Now"
|
|
281
|
-
testID={"submit-button"}
|
|
282
|
-
onPress={() => {}}
|
|
283
|
-
/>
|
|
83
|
+
<CardNumber />
|
|
84
|
+
<ExpiryDate />
|
|
85
|
+
<Cvv />
|
|
86
|
+
<SubmitButton title="Pay" />
|
|
284
87
|
</Frames>
|
|
285
88
|
);
|
|
286
89
|
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
let pay = getByTestId("submit-button");
|
|
291
|
-
fireEvent.changeText(cardNumber, "378282246310005");
|
|
292
|
-
fireEvent.changeText(expiryDate, "1128");
|
|
293
|
-
fireEvent.changeText(cvv, "1000");
|
|
294
|
-
fireEvent.press(pay);
|
|
295
|
-
await waitFor(() => {
|
|
296
|
-
expect(tokenized).toHaveBeenCalledTimes(1);
|
|
297
|
-
});
|
|
298
|
-
});
|
|
90
|
+
const cardNumberInput = screen.getByPlaceholderText("•••• •••• •••• ••••");
|
|
91
|
+
const expiryInput = screen.getByPlaceholderText("MM/YY");
|
|
92
|
+
const cvvInput = screen.getByPlaceholderText("•••");
|
|
299
93
|
|
|
300
|
-
|
|
301
|
-
|
|
94
|
+
// Enter card number -> should emit bin and payment method changes
|
|
95
|
+
fireEvent.changeText(cardNumberInput, validVisa);
|
|
302
96
|
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
publicKey: PK,
|
|
307
|
-
debug: true,
|
|
308
|
-
cardholder: {
|
|
309
|
-
name: "John Smith",
|
|
310
|
-
billingAddress: {
|
|
311
|
-
addressLine1: "Wall Street",
|
|
312
|
-
addressLine2: "Dollar Avenue",
|
|
313
|
-
},
|
|
314
|
-
},
|
|
315
|
-
}}
|
|
316
|
-
cardTokenized={tokenized}
|
|
317
|
-
cardTokenizationFailed={(e) => {
|
|
318
|
-
console.log(e);
|
|
319
|
-
}}
|
|
320
|
-
>
|
|
321
|
-
<CardNumber placeholder="card-number" />
|
|
322
|
-
<ExpiryDate placeholder="expiry-date" />
|
|
323
|
-
<Cvv placeholder="cvv" />
|
|
324
|
-
<SubmitButton
|
|
325
|
-
title="Pay Now"
|
|
326
|
-
testID={"submit-button"}
|
|
327
|
-
onPress={() => {}}
|
|
328
|
-
/>
|
|
329
|
-
</Frames>
|
|
97
|
+
await waitFor(() => expect(paymentMethodChanged).toHaveBeenCalled());
|
|
98
|
+
expect(paymentMethodChanged).toHaveBeenCalledWith(
|
|
99
|
+
expect.objectContaining({ paymentMethod: "Visa", isValid: false })
|
|
330
100
|
);
|
|
331
101
|
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
fireEvent.changeText(cvv, "100");
|
|
339
|
-
fireEvent.press(pay);
|
|
340
|
-
await waitFor(() => {
|
|
341
|
-
expect(tokenized).toHaveBeenCalledTimes(1);
|
|
342
|
-
});
|
|
343
|
-
expect(tokenized.mock.calls[0][0].billing_address.address_line1).toEqual(
|
|
344
|
-
"Wall Street"
|
|
102
|
+
await waitFor(() => expect(cardBinChanged).toHaveBeenCalled());
|
|
103
|
+
expect(cardBinChanged).toHaveBeenCalledWith(
|
|
104
|
+
expect.objectContaining({
|
|
105
|
+
bin: expect.stringMatching(/^42424242/),
|
|
106
|
+
scheme: "Visa",
|
|
107
|
+
})
|
|
345
108
|
);
|
|
346
|
-
});
|
|
347
|
-
|
|
348
|
-
it("triggers throws if you render the card number outside of context", async () => {
|
|
349
|
-
let exception;
|
|
350
|
-
try {
|
|
351
|
-
render(<CardNumber placeholder="card-number" />);
|
|
352
|
-
} catch (e) {
|
|
353
|
-
exception = e;
|
|
354
|
-
}
|
|
355
|
-
expect(exception).toEqual(
|
|
356
|
-
"It looks like you are trying to render the CardNumber outside of the Frames Component."
|
|
357
|
-
);
|
|
358
|
-
});
|
|
359
109
|
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
expect(
|
|
368
|
-
|
|
110
|
+
// Enter expiry date
|
|
111
|
+
fireEvent.changeText(expiryInput, validExpiry);
|
|
112
|
+
|
|
113
|
+
// Enter cvv
|
|
114
|
+
fireEvent.changeText(cvvInput, validCvv);
|
|
115
|
+
|
|
116
|
+
// After all fields valid, cardValidationChanged should report isValid: true
|
|
117
|
+
await waitFor(() => expect(cardValidationChanged).toHaveBeenCalled());
|
|
118
|
+
expect(cardValidationChanged).toHaveBeenLastCalledWith(
|
|
119
|
+
expect.objectContaining({
|
|
120
|
+
isValid: true,
|
|
121
|
+
isElementValid: expect.objectContaining({
|
|
122
|
+
cardNumber: true,
|
|
123
|
+
expiryDate: true,
|
|
124
|
+
cvv: true,
|
|
125
|
+
}),
|
|
126
|
+
})
|
|
369
127
|
);
|
|
370
|
-
});
|
|
371
128
|
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
render(<Cvv placeholder="cvv" />);
|
|
376
|
-
} catch (e) {
|
|
377
|
-
exception = e;
|
|
378
|
-
}
|
|
379
|
-
expect(exception).toEqual(
|
|
380
|
-
"It looks like you are trying to render the Cvv outside of the Frames Component."
|
|
381
|
-
);
|
|
382
|
-
});
|
|
129
|
+
// Submit and expect tokenization to be called and success event emitted
|
|
130
|
+
const payButton = screen.getByText("Pay");
|
|
131
|
+
fireEvent.press(payButton);
|
|
383
132
|
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
render(
|
|
388
|
-
<SubmitButton
|
|
389
|
-
title="Pay Now"
|
|
390
|
-
testID={"submit-button"}
|
|
391
|
-
onPress={() => {}}
|
|
392
|
-
/>
|
|
393
|
-
);
|
|
394
|
-
} catch (e) {
|
|
395
|
-
exception = e;
|
|
396
|
-
}
|
|
397
|
-
expect(exception).toEqual(
|
|
398
|
-
"It looks like you are trying to render the SubmitButton outside of the Frames Component."
|
|
399
|
-
);
|
|
133
|
+
await waitFor(() => expect(tokenize).toHaveBeenCalledTimes(1));
|
|
134
|
+
expect(cardTokenized).toHaveBeenCalledWith(mockTokenResponse);
|
|
135
|
+
expect(cardTokenizationFailed).not.toHaveBeenCalled();
|
|
400
136
|
});
|
|
401
137
|
});
|
package/dist/Frames.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { FramesContextType, FramesProps } from "./types/types";
|
|
3
3
|
export declare const FramesContext: React.Context<FramesContextType>;
|
|
4
|
-
declare const Frames: (props: FramesProps) => JSX.Element;
|
|
4
|
+
declare const Frames: (props: FramesProps) => React.JSX.Element;
|
|
5
5
|
export default Frames;
|
|
6
6
|
export declare const FramesConsumer: React.Consumer<FramesContextType>;
|
|
7
7
|
export declare const FramesProvider: React.Provider<FramesContextType>;
|
package/dist/Frames.js
CHANGED
|
@@ -13,7 +13,7 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
|
|
|
13
13
|
function verb(n) { return function (v) { return step([n, v]); }; }
|
|
14
14
|
function step(op) {
|
|
15
15
|
if (f) throw new TypeError("Generator is already executing.");
|
|
16
|
-
while (_) try {
|
|
16
|
+
while (g && (g = 0, op[0] && (_ = 0)), _) try {
|
|
17
17
|
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
|
|
18
18
|
if (y = 0, t) op = [op[0] & 2, t.value];
|
|
19
19
|
switch (op[0]) {
|
|
@@ -41,8 +41,7 @@ import { log } from "./utils/logger";
|
|
|
41
41
|
import { tokenize, formatDataForTokenization } from "./utils/http";
|
|
42
42
|
export var FramesContext = React.createContext({});
|
|
43
43
|
var Frames = function (props) {
|
|
44
|
-
|
|
45
|
-
var _a = React.useReducer(framesReducer, {
|
|
44
|
+
var initialState = {
|
|
46
45
|
cardNumber: null,
|
|
47
46
|
cardBin: {
|
|
48
47
|
bin: null,
|
|
@@ -59,7 +58,8 @@ var Frames = function (props) {
|
|
|
59
58
|
cvv: false,
|
|
60
59
|
card: false,
|
|
61
60
|
},
|
|
62
|
-
}
|
|
61
|
+
};
|
|
62
|
+
var _a = React.useReducer(framesReducer, initialState), state = _a[0], dispatch = _a[1];
|
|
63
63
|
var submitCard = function () { return __awaiter(void 0, void 0, void 0, function () {
|
|
64
64
|
var response, error_1;
|
|
65
65
|
return __generator(this, function (_a) {
|
|
@@ -82,7 +82,7 @@ var Frames = function (props) {
|
|
|
82
82
|
console.info("Emitting \"cardTokenizationFailed\"", error_1);
|
|
83
83
|
if (props.cardTokenizationFailed)
|
|
84
84
|
props.cardTokenizationFailed(error_1);
|
|
85
|
-
log("error", "com.checkout.frames-mobile-sdk.exception", props.config, error_1);
|
|
85
|
+
log("error", "com.checkout.frames-mobile-sdk.exception", props.config, error_1 || {});
|
|
86
86
|
return [3 /*break*/, 3];
|
|
87
87
|
case 3: return [2 /*return*/];
|
|
88
88
|
}
|
package/dist/Frames.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Frames.js","sourceRoot":"","sources":["../src/Frames.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAChD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;
|
|
1
|
+
{"version":3,"file":"Frames.js","sourceRoot":"","sources":["../src/Frames.tsx"],"names":[],"mappings":"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"}
|