@rebilly/framepay-react 13.123.0 → 13.125.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.
- package/CHANGELOG.md +2 -2
- package/README.md +148 -104
- package/build/lib/components/injector.js +1 -1
- package/package.json +1 -1
- package/src/lib/components/injector.tsx +12 -12
- package/tests/e2e/fixtures/apple-pay.html +10 -12
- package/tests/e2e/fixtures/bank-separate.html +10 -10
- package/tests/e2e/fixtures/card-separate-brands.html +10 -10
- package/tests/e2e/fixtures/card-separate-rebilly-fields.html +10 -12
- package/tests/e2e/fixtures/card-separate.html +10 -10
- package/tests/e2e/fixtures/checkout-combined.html +10 -10
- package/tests/e2e/fixtures/google-pay.html +10 -12
- package/tests/e2e/fixtures/iban.html +10 -10
- package/tests/e2e/fixtures/inject-metadata.html +10 -12
- package/tests/e2e/fixtures/multiple-methods.html +10 -10
- package/tests/e2e/fixtures/paypal.html +10 -12
- package/tests/e2e/fixtures/samsung-pay.html +10 -12
- package/tests/e2e/fixtures/style.css +1 -1
- package/tests/e2e/local-server.mjs +1 -1
- package/tests/e2e/server.mjs +2 -2
- package/tests/e2e/specs/bank-separate.plw.ts +18 -6
- package/tests/e2e/specs/card-separate-brands.plw.ts +34 -12
- package/tests/e2e/specs/card-separate.plw.ts +9 -3
- package/tests/e2e/specs/checkout-combined.plw.ts +3 -1
- package/tests/e2e/specs/google-pay.plw.ts +4 -2
- package/tests/e2e/specs/inject-riskMetadata.plw.ts +6 -2
- package/tests/e2e/specs/multiple-methods.plw.ts +96 -32
- package/tests/e2e/specs/paypal.plw.ts +3 -1
- package/tests/e2e/specs/react-version.plw.ts +5 -2
- package/tests/e2e/switch-react-version.js +5 -5
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
<!
|
|
1
|
+
<!doctype html>
|
|
2
2
|
<html>
|
|
3
|
-
<head>
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
</head>
|
|
7
|
-
<body>
|
|
8
|
-
<div id="app"></div>
|
|
9
|
-
<script type="module" src="bank-separate.js"></script>
|
|
10
|
-
<script src="nav.js"></script>
|
|
11
|
-
</body>
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8" />
|
|
5
|
+
<title>Test Bank Page Separate Fields</title>
|
|
6
|
+
</head>
|
|
7
|
+
<body>
|
|
8
|
+
<div id="app"></div>
|
|
9
|
+
<script type="module" src="bank-separate.js"></script>
|
|
10
|
+
<script src="nav.js"></script>
|
|
11
|
+
</body>
|
|
12
12
|
</html>
|
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
<!
|
|
1
|
+
<!doctype html>
|
|
2
2
|
<html>
|
|
3
|
-
<head>
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
</head>
|
|
7
|
-
<body>
|
|
8
|
-
<div id="app"></div>
|
|
9
|
-
<script type="module" src="card-separate-brands.js"></script>
|
|
10
|
-
<script src="nav.js"></script>
|
|
11
|
-
</body>
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8" />
|
|
5
|
+
<title>Test Card Page Separate Fields allowed Brands</title>
|
|
6
|
+
</head>
|
|
7
|
+
<body>
|
|
8
|
+
<div id="app"></div>
|
|
9
|
+
<script type="module" src="card-separate-brands.js"></script>
|
|
10
|
+
<script src="nav.js"></script>
|
|
11
|
+
</body>
|
|
12
12
|
</html>
|
|
@@ -1,15 +1,13 @@
|
|
|
1
|
-
<!
|
|
1
|
+
<!doctype html>
|
|
2
2
|
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8" />
|
|
5
|
+
<title>Test Card Page Separate Fields</title>
|
|
6
|
+
</head>
|
|
3
7
|
|
|
4
|
-
<
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
<body>
|
|
10
|
-
<div id="app"></div>
|
|
11
|
-
<script type="module" src="card-separate-rebilly-fields.js"></script>
|
|
12
|
-
<script src="nav.js"></script>
|
|
13
|
-
</body>
|
|
14
|
-
|
|
8
|
+
<body>
|
|
9
|
+
<div id="app"></div>
|
|
10
|
+
<script type="module" src="card-separate-rebilly-fields.js"></script>
|
|
11
|
+
<script src="nav.js"></script>
|
|
12
|
+
</body>
|
|
15
13
|
</html>
|
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
<!
|
|
1
|
+
<!doctype html>
|
|
2
2
|
<html>
|
|
3
|
-
<head>
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
</head>
|
|
7
|
-
<body>
|
|
8
|
-
<div id="app"></div>
|
|
9
|
-
<script type="module" src="card-separate.js"></script>
|
|
10
|
-
<script src="nav.js"></script>
|
|
11
|
-
</body>
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8" />
|
|
5
|
+
<title>Test Card Page Separate Fields</title>
|
|
6
|
+
</head>
|
|
7
|
+
<body>
|
|
8
|
+
<div id="app"></div>
|
|
9
|
+
<script type="module" src="card-separate.js"></script>
|
|
10
|
+
<script src="nav.js"></script>
|
|
11
|
+
</body>
|
|
12
12
|
</html>
|
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
<!
|
|
1
|
+
<!doctype html>
|
|
2
2
|
<html>
|
|
3
|
-
<head>
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
</head>
|
|
7
|
-
<body>
|
|
8
|
-
<div id="app"></div>
|
|
9
|
-
<script type="module" src="checkout-combined.js"></script>
|
|
10
|
-
<script src="nav.js"></script>
|
|
11
|
-
</body>
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8" />
|
|
5
|
+
<title>Test Checkout Page Combined Field</title>
|
|
6
|
+
</head>
|
|
7
|
+
<body>
|
|
8
|
+
<div id="app"></div>
|
|
9
|
+
<script type="module" src="checkout-combined.js"></script>
|
|
10
|
+
<script src="nav.js"></script>
|
|
11
|
+
</body>
|
|
12
12
|
</html>
|
|
@@ -1,15 +1,13 @@
|
|
|
1
|
-
<!
|
|
1
|
+
<!doctype html>
|
|
2
2
|
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8" />
|
|
5
|
+
<title>Test Google Pay</title>
|
|
6
|
+
</head>
|
|
3
7
|
|
|
4
|
-
<
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
<body>
|
|
10
|
-
<div id="app"></div>
|
|
11
|
-
<script type="module" src="google-pay.js"></script>
|
|
12
|
-
<script src="nav.js"></script>
|
|
13
|
-
</body>
|
|
14
|
-
|
|
8
|
+
<body>
|
|
9
|
+
<div id="app"></div>
|
|
10
|
+
<script type="module" src="google-pay.js"></script>
|
|
11
|
+
<script src="nav.js"></script>
|
|
12
|
+
</body>
|
|
15
13
|
</html>
|
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
<!
|
|
1
|
+
<!doctype html>
|
|
2
2
|
<html>
|
|
3
|
-
<head>
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
</head>
|
|
7
|
-
<body>
|
|
8
|
-
<div id="app"></div>
|
|
9
|
-
<script type="module" src="iban.js"></script>
|
|
10
|
-
<script src="nav.js"></script>
|
|
11
|
-
</body>
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8" />
|
|
5
|
+
<title>Test IBAN Field</title>
|
|
6
|
+
</head>
|
|
7
|
+
<body>
|
|
8
|
+
<div id="app"></div>
|
|
9
|
+
<script type="module" src="iban.js"></script>
|
|
10
|
+
<script src="nav.js"></script>
|
|
11
|
+
</body>
|
|
12
12
|
</html>
|
|
@@ -1,15 +1,13 @@
|
|
|
1
|
-
<!
|
|
1
|
+
<!doctype html>
|
|
2
2
|
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8" />
|
|
5
|
+
<title>Test Inject Metadata</title>
|
|
6
|
+
</head>
|
|
3
7
|
|
|
4
|
-
<
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
<body>
|
|
10
|
-
<div id="app"></div>
|
|
11
|
-
<script type="module" src="inject-metadata.js"></script>
|
|
12
|
-
<script src="nav.js"></script>
|
|
13
|
-
</body>
|
|
14
|
-
|
|
8
|
+
<body>
|
|
9
|
+
<div id="app"></div>
|
|
10
|
+
<script type="module" src="inject-metadata.js"></script>
|
|
11
|
+
<script src="nav.js"></script>
|
|
12
|
+
</body>
|
|
15
13
|
</html>
|
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
<!
|
|
1
|
+
<!doctype html>
|
|
2
2
|
<html>
|
|
3
|
-
<head>
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
</head>
|
|
7
|
-
<body>
|
|
8
|
-
<div id="app"></div>
|
|
9
|
-
<script type="module" src="multiple-methods.js"></script>
|
|
10
|
-
<script src="nav.js"></script>
|
|
11
|
-
</body>
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8" />
|
|
5
|
+
<title>Test Multiple Methods</title>
|
|
6
|
+
</head>
|
|
7
|
+
<body>
|
|
8
|
+
<div id="app"></div>
|
|
9
|
+
<script type="module" src="multiple-methods.js"></script>
|
|
10
|
+
<script src="nav.js"></script>
|
|
11
|
+
</body>
|
|
12
12
|
</html>
|
|
@@ -1,15 +1,13 @@
|
|
|
1
|
-
<!
|
|
1
|
+
<!doctype html>
|
|
2
2
|
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8" />
|
|
5
|
+
<title>Test Paypal</title>
|
|
6
|
+
</head>
|
|
3
7
|
|
|
4
|
-
<
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
<body>
|
|
10
|
-
<div id="app"></div>
|
|
11
|
-
<script type="module" src="paypal.js"></script>
|
|
12
|
-
<script src="nav.js"></script>
|
|
13
|
-
</body>
|
|
14
|
-
|
|
8
|
+
<body>
|
|
9
|
+
<div id="app"></div>
|
|
10
|
+
<script type="module" src="paypal.js"></script>
|
|
11
|
+
<script src="nav.js"></script>
|
|
12
|
+
</body>
|
|
15
13
|
</html>
|
|
@@ -1,15 +1,13 @@
|
|
|
1
|
-
<!
|
|
1
|
+
<!doctype html>
|
|
2
2
|
<html>
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8" />
|
|
5
|
+
<title>Test Samsung Pay</title>
|
|
6
|
+
</head>
|
|
3
7
|
|
|
4
|
-
<
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
<body>
|
|
10
|
-
<div id="app"></div>
|
|
11
|
-
<script type="module" src="samsung-pay.js"></script>
|
|
12
|
-
<script src="nav.js"></script>
|
|
13
|
-
</body>
|
|
14
|
-
|
|
8
|
+
<body>
|
|
9
|
+
<div id="app"></div>
|
|
10
|
+
<script type="module" src="samsung-pay.js"></script>
|
|
11
|
+
<script src="nav.js"></script>
|
|
12
|
+
</body>
|
|
15
13
|
</html>
|
package/tests/e2e/server.mjs
CHANGED
|
@@ -20,7 +20,7 @@ app.use(express.static(staticFiles));
|
|
|
20
20
|
|
|
21
21
|
const addDirRoutes = (dir, category) => {
|
|
22
22
|
fs.readdirSync(dir)
|
|
23
|
-
.filter(name => Boolean(name.includes('.html')))
|
|
23
|
+
.filter((name) => Boolean(name.includes('.html')))
|
|
24
24
|
.forEach((name) => {
|
|
25
25
|
const basename = path.basename(name, path.extname(name));
|
|
26
26
|
const url = category ? `/${category}/${basename}` : `/${basename}`;
|
|
@@ -42,4 +42,4 @@ export default function () {
|
|
|
42
42
|
resolve({ port, server, app });
|
|
43
43
|
});
|
|
44
44
|
});
|
|
45
|
-
}
|
|
45
|
+
}
|
|
@@ -15,15 +15,27 @@ test.describe('bank-separate', () => {
|
|
|
15
15
|
await expect(page.locator('iframe#bbanRoutingNumber')).toBeVisible();
|
|
16
16
|
});
|
|
17
17
|
|
|
18
|
-
test('should call the on-ready BankAccountType element hook', async ({
|
|
19
|
-
|
|
18
|
+
test('should call the on-ready BankAccountType element hook', async ({
|
|
19
|
+
page,
|
|
20
|
+
}) => {
|
|
21
|
+
await expect(
|
|
22
|
+
page.locator('#events-bankAccountType-onReady-true'),
|
|
23
|
+
).toBeAttached();
|
|
20
24
|
});
|
|
21
25
|
|
|
22
|
-
test('should call the on-ready BankAccountNumber element hook', async ({
|
|
23
|
-
|
|
26
|
+
test('should call the on-ready BankAccountNumber element hook', async ({
|
|
27
|
+
page,
|
|
28
|
+
}) => {
|
|
29
|
+
await expect(
|
|
30
|
+
page.locator('#events-bankAccountNumber-onReady-true'),
|
|
31
|
+
).toBeAttached();
|
|
24
32
|
});
|
|
25
33
|
|
|
26
|
-
test('should call the on-ready BankRoutingNumber element hook', async ({
|
|
27
|
-
|
|
34
|
+
test('should call the on-ready BankRoutingNumber element hook', async ({
|
|
35
|
+
page,
|
|
36
|
+
}) => {
|
|
37
|
+
await expect(
|
|
38
|
+
page.locator('#events-bankRoutingNumber-onReady-true'),
|
|
39
|
+
).toBeAttached();
|
|
28
40
|
});
|
|
29
41
|
});
|
|
@@ -6,7 +6,9 @@ test.describe('card-separate-brands', () => {
|
|
|
6
6
|
});
|
|
7
7
|
|
|
8
8
|
test('should load the page', async ({ page }) => {
|
|
9
|
-
await expect(page).toHaveTitle(
|
|
9
|
+
await expect(page).toHaveTitle(
|
|
10
|
+
'Test Card Page Separate Fields allowed Brands',
|
|
11
|
+
);
|
|
10
12
|
});
|
|
11
13
|
|
|
12
14
|
test('should inject the card iframes into the page', async ({ page }) => {
|
|
@@ -16,33 +18,50 @@ test.describe('card-separate-brands', () => {
|
|
|
16
18
|
});
|
|
17
19
|
|
|
18
20
|
test('should be call the on-ready card element hook', async ({ page }) => {
|
|
19
|
-
await expect(
|
|
21
|
+
await expect(
|
|
22
|
+
page.locator('#events-number-onReady-true'),
|
|
23
|
+
).toBeAttached();
|
|
20
24
|
});
|
|
21
25
|
|
|
22
26
|
test('should be call the on-ready cvv element hook', async ({ page }) => {
|
|
23
27
|
await expect(page.locator('#events-cvv-onReady-true')).toBeAttached();
|
|
24
28
|
});
|
|
25
29
|
|
|
26
|
-
test('should be call the on-ready expiry element hook', async ({
|
|
27
|
-
|
|
30
|
+
test('should be call the on-ready expiry element hook', async ({
|
|
31
|
+
page,
|
|
32
|
+
}) => {
|
|
33
|
+
await expect(
|
|
34
|
+
page.locator('#events-expiry-onReady-true'),
|
|
35
|
+
).toBeAttached();
|
|
28
36
|
});
|
|
29
37
|
|
|
30
38
|
test('should decline the MasterCard by default', async ({ page }) => {
|
|
31
|
-
await expect(
|
|
39
|
+
await expect(
|
|
40
|
+
page.locator('#events-number-onReady-true'),
|
|
41
|
+
).toBeAttached();
|
|
32
42
|
|
|
33
|
-
await page
|
|
43
|
+
await page
|
|
44
|
+
.frameLocator('iframe#cardNumber')
|
|
34
45
|
.getByTestId('cardnumber')
|
|
35
46
|
.fill('4111 1111 1111 1111');
|
|
36
47
|
|
|
37
|
-
await expect(
|
|
48
|
+
await expect(
|
|
49
|
+
page.locator(
|
|
50
|
+
'#events-number-onChange-error-code-unavailable-card-brand',
|
|
51
|
+
),
|
|
52
|
+
).toBeAttached();
|
|
38
53
|
});
|
|
39
54
|
|
|
40
|
-
test('should allow the Visa after update and decline after restore', async ({
|
|
41
|
-
|
|
55
|
+
test('should allow the Visa after update and decline after restore', async ({
|
|
56
|
+
page,
|
|
57
|
+
}) => {
|
|
58
|
+
await page
|
|
59
|
+
.frameLocator('iframe#cardNumber')
|
|
42
60
|
.getByTestId('cardnumber')
|
|
43
61
|
.fill('4111 1111 1111 1111');
|
|
44
62
|
|
|
45
|
-
await page
|
|
63
|
+
await page
|
|
64
|
+
.frameLocator('iframe#cardCvv')
|
|
46
65
|
.getByTestId('cvv')
|
|
47
66
|
.fill('123');
|
|
48
67
|
|
|
@@ -50,11 +69,14 @@ test.describe('card-separate-brands', () => {
|
|
|
50
69
|
const month = String('0' + (now.getMonth() + 1)).slice(-2);
|
|
51
70
|
const year = String(now.getFullYear()).slice(-2);
|
|
52
71
|
const expiry = month + year;
|
|
53
|
-
await page
|
|
72
|
+
await page
|
|
73
|
+
.frameLocator('iframe#cardExpiration')
|
|
54
74
|
.getByTestId('exp-date')
|
|
55
75
|
.fill(expiry);
|
|
56
76
|
|
|
57
|
-
const errorIndicator = page.locator(
|
|
77
|
+
const errorIndicator = page.locator(
|
|
78
|
+
'#events-number-onChange-error-code-unavailable-card-brand',
|
|
79
|
+
);
|
|
58
80
|
await expect(errorIndicator).toBeAttached();
|
|
59
81
|
|
|
60
82
|
await page.locator('#btn-update').click();
|
|
@@ -16,14 +16,20 @@ test.describe('card-separate', () => {
|
|
|
16
16
|
});
|
|
17
17
|
|
|
18
18
|
test('should be call the on-ready card element hook', async ({ page }) => {
|
|
19
|
-
await expect(
|
|
19
|
+
await expect(
|
|
20
|
+
page.locator('#events-number-onReady-true'),
|
|
21
|
+
).toBeAttached();
|
|
20
22
|
});
|
|
21
23
|
|
|
22
24
|
test('should be call the on-ready cvv element hook', async ({ page }) => {
|
|
23
25
|
await expect(page.locator('#events-cvv-onReady-true')).toBeAttached();
|
|
24
26
|
});
|
|
25
27
|
|
|
26
|
-
test('should be call the on-ready expiry element hook', async ({
|
|
27
|
-
|
|
28
|
+
test('should be call the on-ready expiry element hook', async ({
|
|
29
|
+
page,
|
|
30
|
+
}) => {
|
|
31
|
+
await expect(
|
|
32
|
+
page.locator('#events-expiry-onReady-true'),
|
|
33
|
+
).toBeAttached();
|
|
28
34
|
});
|
|
29
35
|
});
|
|
@@ -21,6 +21,8 @@ test.describe('checkout-combined', () => {
|
|
|
21
21
|
await expect(page.locator('#events-onReady-true')).toBeAttached();
|
|
22
22
|
await page.locator('#submit').click();
|
|
23
23
|
await expect(page.locator('#key-onChange')).toBeVisible();
|
|
24
|
-
await expect(
|
|
24
|
+
await expect(
|
|
25
|
+
page.locator('#token-data-code-invalid-payment-card'),
|
|
26
|
+
).toBeAttached();
|
|
25
27
|
});
|
|
26
28
|
});
|
|
@@ -9,7 +9,9 @@ test.describe('google-pay', () => {
|
|
|
9
9
|
await expect(page).toHaveTitle('Test Google Pay');
|
|
10
10
|
});
|
|
11
11
|
|
|
12
|
-
test('should inject the Google pay iframe into the page', async ({
|
|
12
|
+
test('should inject the Google pay iframe into the page', async ({
|
|
13
|
+
page,
|
|
14
|
+
}) => {
|
|
13
15
|
await expect(page.locator('iframe#googlePay')).toBeVisible();
|
|
14
16
|
});
|
|
15
|
-
});
|
|
17
|
+
});
|
|
@@ -21,7 +21,9 @@ test.describe('inject-riskMetadata', () => {
|
|
|
21
21
|
await expect(page.locator('#events-onReady-true')).toBeAttached();
|
|
22
22
|
await page.locator('#submit').click();
|
|
23
23
|
await expect(page.locator('#key-onChange')).toBeVisible();
|
|
24
|
-
await expect(
|
|
24
|
+
await expect(
|
|
25
|
+
page.locator('#token-data-code-invalid-payment-card'),
|
|
26
|
+
).toBeAttached();
|
|
25
27
|
});
|
|
26
28
|
|
|
27
29
|
test('should show provided data in token', async ({ page }) => {
|
|
@@ -41,6 +43,8 @@ test.describe('inject-riskMetadata', () => {
|
|
|
41
43
|
|
|
42
44
|
await page.locator('#submit').click();
|
|
43
45
|
|
|
44
|
-
await expect(page.locator('#token-data-fingerprint')).toHaveText(
|
|
46
|
+
await expect(page.locator('#token-data-fingerprint')).toHaveText(
|
|
47
|
+
'fingerprint123',
|
|
48
|
+
);
|
|
45
49
|
});
|
|
46
50
|
});
|