@rebilly/framepay-react 13.64.0 → 13.66.0

package/CHANGELOG.md

@@ -1,6 +1,6 @@
-## [13.64.0](https://github.com/Rebilly/rebilly/compare/framepay-react-v13.63.0...framepay-react-v13.64.0) (2026-02-26)
+## [13.66.0](https://github.com/Rebilly/rebilly/compare/framepay-react-v13.65.0...framepay-react-v13.66.0) (2026-03-02)
 
 
 ### Features
 
-* **api-metadata, rebilly-js-sdk:** Update resources based on latest api definitions ([#19177](https://github.com/Rebilly/rebilly/issues/19177)) ([1641ed9](https://github.com/Rebilly/rebilly/commit/1641ed91e176672c9a078e13744a97c814ebd4d5))
+* **api-metadata, rebilly-js-sdk:** Update resources based on latest api definitions ([#19229](https://github.com/Rebilly/rebilly/issues/19229)) ([4ceca33](https://github.com/Rebilly/rebilly/commit/4ceca33151c9b46453e4efcb8423e0ef2ee8d6de))

package/README.md

@@ -334,4 +334,4 @@ Unit tests can be run using the `test:unit` command.
 - Run one of the following commands:
     - `test:e2e:pr` - runs a smaller subset of E2E tests tests headlessly.
     - `test:e2e:post-merge` - runs the complete set of E2E tests tests headlessly.
-    - `test:e2e:open` - opens the cypress GUI, allowing you to interact with each test visually.
+    - `test:e2e:open` - opens the PlayWright GUI, allowing you to interact with each test visually.

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@rebilly/framepay-react",
-    "version": "13.64.0",
+    "version": "13.66.0",
     "description": "A React wrapper for Rebilly's FramePay offering out-of-the-box support for Redux and other common React features",
     "main": "build/index.js",
     "author": "Rebilly",
@@ -46,7 +46,7 @@
         "serve:e2e": "run-s dotenv build:* && node test/e2e/local-server.mjs",
         "serve:e2e:no-build": "node test/e2e/local-server.mjs",
         "test:unit": "jest --config ./test/unit/jest.config.js",
-        "test:e2e:base": "START_SERVER_AND_TEST_INSECURE=1 start-server-and-test 'pnpm serve:e2e:no-build' https-get://localhost:8000 'pnpm test:e2e:run'",
+        "test:e2e:base": "pnpm test:e2e:run",
         "test:e2e:react-14": "cross-env REACT_VERSION=0.14.0 run-s set-react-14 dotenv build:e2e test:e2e:base clean-react-alias",
         "test:e2e:react-15": "cross-env REACT_VERSION=15.0.0 run-s set-react-15 dotenv build:e2e clean-react-alias test:e2e:base",
         "test:e2e:react-16": "cross-env REACT_VERSION=16 run-s set-react-16 dotenv build:e2e clean-react-alias test:e2e:base",
@@ -55,8 +55,8 @@
         "test:e2e:react-19": "cross-env REACT_VERSION=19 run-s set-react-19 dotenv build:e2e clean-react-alias test:e2e:base",
         "test:e2e:pr": "npm run test:e2e:react-19",
         "test:e2e:post-merge": "run-s test:e2e:react-*",
-        "test:e2e:open": "cypress open",
-        "test:e2e:run": "cypress run",
+        "test:e2e:open": "playwright test --ui",
+        "test:e2e:run": "playwright test --reporter=list",
         "watch": "run-s build && run-p \"build -- --w\"",
         "clean:e2e": "rm -rf test/e2e/build"
     },
@@ -70,18 +70,16 @@
         "prop-types": "^15.8.1"
     },
     "devDependencies": {
+        "@playwright/test": "^1.57.0",
         "@fluffy-spoon/substitute": "^1.89.0",
         "@rebilly/eslint-config": "*",
         "@small-tech/auto-encrypt-localhost": "^8.4.0",
-        "@testing-library/cypress": "^10.1.0",
         "@testing-library/react": "^15.0.7",
         "@types/jest": "^29.5.1",
         "@types/node": "^22.15.30",
         "@types/react": "^19.2.7",
         "core-js": "^3.42.0",
         "cross-env": "^10.1.0",
-        "cypress": "^15.8.2",
-        "cypress-iframe": "^1.0.1",
         "dotenv": "^16.5.0",
         "eslint-plugin-react": "^7.37.5",
         "express": "^5.1.0",
@@ -96,7 +94,6 @@
         "react-dom": "^19.2.1",
         "react-dom-19": "npm:react-dom@^19.2.1",
         "scheduler": "^0.26.0",
-        "start-server-and-test": "^2.0.11",
         "ts-jest": "^29.3.2",
         "typescript": "^5.8.3",
         "warning": "^4.0.3"

package/test/e2e/specs/bank-separate.plw.ts

@@ -0,0 +1,29 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('bank-separate', () => {
+    test.beforeEach(async ({ page }) => {
+        await page.goto('/bank-separate');
+    });
+
+    test('should load the page', async ({ page }) => {
+        await expect(page).toHaveTitle('Test Bank Page Separate Fields');
+    });
+
+    test('should inject the bank iframes into the page', async ({ page }) => {
+        await expect(page.locator('iframe#bbanAccountType')).toBeVisible();
+        await expect(page.locator('iframe#bbanAccountNumber')).toBeVisible();
+        await expect(page.locator('iframe#bbanRoutingNumber')).toBeVisible();
+    });
+
+    test('should call the on-ready BankAccountType element hook', async ({ page }) => {
+        await expect(page.locator('#events-bankAccountType-onReady-true')).toBeAttached();
+    });
+
+    test('should call the on-ready BankAccountNumber element hook', async ({ page }) => {
+        await expect(page.locator('#events-bankAccountNumber-onReady-true')).toBeAttached();
+    });
+
+    test('should call the on-ready BankRoutingNumber element hook', async ({ page }) => {
+        await expect(page.locator('#events-bankRoutingNumber-onReady-true')).toBeAttached();
+    });
+});

package/test/e2e/specs/card-separate-brands.plw.ts

@@ -0,0 +1,68 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('card-separate-brands', () => {
+    test.beforeEach(async ({ page }) => {
+        await page.goto('/card-separate-brands');
+    });
+
+    test('should load the page', async ({ page }) => {
+        await expect(page).toHaveTitle('Test Card Page Separate Fields allowed Brands');
+    });
+
+    test('should inject the card iframes into the page', async ({ page }) => {
+        await expect(page.locator('iframe#cardNumber')).toBeVisible();
+        await expect(page.locator('iframe#cardCvv')).toBeVisible();
+        await expect(page.locator('iframe#cardExpiration')).toBeVisible();
+    });
+
+    test('should be call the on-ready card element hook', async ({ page }) => {
+        await expect(page.locator('#events-number-onReady-true')).toBeAttached();
+    });
+
+    test('should be call the on-ready cvv element hook', async ({ page }) => {
+        await expect(page.locator('#events-cvv-onReady-true')).toBeAttached();
+    });
+
+    test('should be call the on-ready expiry element hook', async ({ page }) => {
+        await expect(page.locator('#events-expiry-onReady-true')).toBeAttached();
+    });
+
+    test('should decline the MasterCard by default', async ({ page }) => {
+        await expect(page.locator('#events-number-onReady-true')).toBeAttached();
+
+        await page.frameLocator('iframe#cardNumber')
+            .getByTestId('cardnumber')
+            .fill('4111 1111 1111 1111');
+
+        await expect(page.locator('#events-number-onChange-error-code-unavailable-card-brand')).toBeAttached();
+    });
+
+    test('should allow the Visa after update and decline after restore', async ({ page }) => {
+        await page.frameLocator('iframe#cardNumber')
+            .getByTestId('cardnumber')
+            .fill('4111 1111 1111 1111');
+
+        await page.frameLocator('iframe#cardCvv')
+            .getByTestId('cvv')
+            .fill('123');
+
+        const now = new Date();
+        const month = String('0' + (now.getMonth() + 1)).slice(-2);
+        const year = String(now.getFullYear()).slice(-2);
+        const expiry = month + year;
+        await page.frameLocator('iframe#cardExpiration')
+            .getByTestId('exp-date')
+            .fill(expiry);
+
+        const errorIndicator = page.locator('#events-number-onChange-error-code-unavailable-card-brand');
+        await expect(errorIndicator).toBeAttached();
+
+        await page.locator('#btn-update').click();
+
+        await expect(errorIndicator).not.toBeAttached();
+
+        await page.locator('#btn-restore').click();
+
+        await expect(errorIndicator).toBeAttached();
+    });
+});

package/test/e2e/specs/card-separate.plw.ts

@@ -0,0 +1,29 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('card-separate', () => {
+    test.beforeEach(async ({ page }) => {
+        await page.goto('/card-separate');
+    });
+
+    test('should load the page', async ({ page }) => {
+        await expect(page).toHaveTitle('Test Card Page Separate Fields');
+    });
+
+    test('should inject the card iframes into the page', async ({ page }) => {
+        await expect(page.locator('iframe#cardNumber')).toBeVisible();
+        await expect(page.locator('iframe#cardCvv')).toBeVisible();
+        await expect(page.locator('iframe#cardExpiration')).toBeVisible();
+    });
+
+    test('should be call the on-ready card element hook', async ({ page }) => {
+        await expect(page.locator('#events-number-onReady-true')).toBeAttached();
+    });
+
+    test('should be call the on-ready cvv element hook', async ({ page }) => {
+        await expect(page.locator('#events-cvv-onReady-true')).toBeAttached();
+    });
+
+    test('should be call the on-ready expiry element hook', async ({ page }) => {
+        await expect(page.locator('#events-expiry-onReady-true')).toBeAttached();
+    });
+});

package/test/e2e/specs/checkout-combined.plw.ts

@@ -0,0 +1,26 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('checkout-combined', () => {
+    test.beforeEach(async ({ page }) => {
+        await page.goto('/checkout-combined');
+    });
+
+    test('should load the page', async ({ page }) => {
+        await expect(page).toHaveTitle('Test Checkout Page Combined Field');
+    });
+
+    test('should inject the card iframe into the page', async ({ page }) => {
+        await expect(page.locator('iframe#card')).toBeVisible();
+    });
+
+    test('should be call the on-ready hook', async ({ page }) => {
+        await expect(page.locator('#events-onReady-true')).toBeAttached();
+    });
+
+    test('should call the on-change hook', async ({ page }) => {
+        await expect(page.locator('#events-onReady-true')).toBeAttached();
+        await page.locator('#submit').click();
+        await expect(page.locator('#key-onChange')).toBeVisible();
+        await expect(page.locator('#token-data-code-invalid-payment-card')).toBeAttached();
+    });
+});

package/test/e2e/specs/google-pay.plw.ts

@@ -0,0 +1,15 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('google-pay', () => {
+    test.beforeEach(async ({ page }) => {
+        await page.goto('/google-pay');
+    });
+
+    test('should load the page', async ({ page }) => {
+        await expect(page).toHaveTitle('Test Google Pay');
+    });
+
+    test('should inject the Google pay iframe into the page', async ({ page }) => {
+        await expect(page.locator('iframe#googlePay')).toBeVisible();
+    });
+});

package/test/e2e/specs/iban.plw.ts

@@ -0,0 +1,19 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('iban', () => {
+    test.beforeEach(async ({ page }) => {
+        await page.goto('/iban');
+    });
+
+    test('should load the page', async ({ page }) => {
+        await expect(page).toHaveTitle('Test IBAN Field');
+    });
+
+    test('should inject the card iframe into the page', async ({ page }) => {
+        await expect(page.locator('iframe#iban')).toBeVisible();
+    });
+
+    test('should call the on-ready iban element hook', async ({ page }) => {
+        await expect(page.locator('#events-iban-onReady-true')).toBeAttached();
+    });
+});

package/test/e2e/specs/inject-riskMetadata.plw.ts

@@ -0,0 +1,46 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('inject-riskMetadata', () => {
+    test.beforeEach(async ({ page }) => {
+        await page.goto('/inject-metadata');
+    });
+
+    test('should load the page', async ({ page }) => {
+        await expect(page).toHaveTitle('Test Inject Metadata');
+    });
+
+    test('should inject the card iframe into the page', async ({ page }) => {
+        await expect(page.locator('iframe#card')).toBeVisible();
+    });
+
+    test('should be call the on-ready hook', async ({ page }) => {
+        await expect(page.locator('#events-onReady-true')).toBeAttached();
+    });
+
+    test('should call the on-change hook', async ({ page }) => {
+        await expect(page.locator('#events-onReady-true')).toBeAttached();
+        await page.locator('#submit').click();
+        await expect(page.locator('#key-onChange')).toBeVisible();
+        await expect(page.locator('#token-data-code-invalid-payment-card')).toBeAttached();
+    });
+
+    test('should show provided data in token', async ({ page }) => {
+        await expect(page.locator('#events-onReady-true')).toBeAttached();
+
+        const now = new Date();
+        const month = String('0' + (now.getMonth() + 1)).slice(-2);
+        const year = String(now.getFullYear()).slice(-2);
+        const expiry = month + year;
+        const cardNumber = '4111111111111111';
+        const cvv = '123';
+
+        const cardFrame = page.frameLocator('iframe#card');
+        await cardFrame.getByTestId('cardnumber').fill(cardNumber);
+        await cardFrame.getByTestId('exp-date').fill(expiry);
+        await cardFrame.getByTestId('cvv').fill(cvv);
+
+        await page.locator('#submit').click();
+
+        await expect(page.locator('#token-data-fingerprint')).toHaveText('fingerprint123');
+    });
+});

package/test/e2e/specs/multiple-methods.plw.ts

@@ -0,0 +1,130 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('multiple-methods', () => {
+    test.beforeEach(async ({ page }) => {
+        await page.goto('/multiple-methods');
+    });
+
+    test('should load the page', async ({ page }) => {
+        await expect(page).toHaveTitle('Test Multiple Methods');
+    });
+
+    test('should call the on-ready card element hook', async ({ page }) => {
+        await expect(page.locator('#events-card-onReady-true')).toBeAttached();
+    });
+
+    test('should init with payment-card method by default', async ({ page }) => {
+        await expect(page.locator('#events-card-onReady-true')).toBeAttached();
+        await expect(page.locator('#events-bankAccountType-onReady-false')).toBeAttached();
+        await expect(page.locator('#events-bankAccountNumber-onReady-false')).toBeAttached();
+        await expect(page.locator('#events-bankRoutingNumber-onReady-false')).toBeAttached();
+        await expect(page.locator('#events-iban-onReady-false')).toBeAttached();
+    });
+
+    test('should load other methods', async ({ page }) => {
+        await expect(page.locator('#events-card-onReady-true')).toBeAttached();
+
+        await page.locator('#set-active-element-bank').click();
+
+        // check other methods are disabled
+        await expect(page.locator('#events-card-onReady-false')).toBeAttached();
+        await expect(page.locator('#events-iban-onReady-false')).toBeAttached();
+
+        // check bank is loaded
+        await expect(page.locator('#events-bankAccountNumber-onReady-true')).toBeAttached();
+        await expect(page.locator('#events-bankAccountType-onReady-true')).toBeAttached();
+        await expect(page.locator('#events-bankRoutingNumber-onReady-true')).toBeAttached();
+
+        // load IBAN
+        await page.locator('#set-active-element-iban').click();
+
+        // check other methods are disabled
+        await expect(page.locator('#events-card-onReady-false')).toBeAttached();
+        await expect(page.locator('#events-bankAccountType-onReady-false')).toBeAttached();
+        await expect(page.locator('#events-bankAccountNumber-onReady-false')).toBeAttached();
+        await expect(page.locator('#events-bankRoutingNumber-onReady-false')).toBeAttached();
+
+        // check IBAN is loaded
+        await expect(page.locator('#events-iban-onReady-true')).toBeAttached();
+
+        // load Google Pay
+        await page.locator('#set-active-element-googlepay').click();
+
+        // check other methods are disabled
+        await expect(page.locator('#events-card-onReady-false')).toBeAttached();
+        await expect(page.locator('#events-bankAccountType-onReady-false')).toBeAttached();
+        await expect(page.locator('#events-bankAccountNumber-onReady-false')).toBeAttached();
+        await expect(page.locator('#events-bankRoutingNumber-onReady-false')).toBeAttached();
+        await expect(page.locator('#events-iban-onReady-false')).toBeAttached();
+
+        // check Google Pay is loaded
+        await expect(page.locator('iframe#googlePay')).toBeVisible();
+    });
+
+    test('should generate the card token', async ({ page }) => {
+        await expect(page.locator('#events-card-onReady-true')).toBeAttached();
+
+        const now = new Date();
+        const month = String('0' + (now.getMonth() + 1)).slice(-2);
+        const year = String(now.getFullYear()).slice(-2);
+        const expiry = month + year;
+
+        const cardFrame = page.frameLocator('iframe#card');
+        await cardFrame.getByTestId('cardnumber').fill('4111111111111111');
+        await cardFrame.getByTestId('exp-date').fill(expiry);
+        await cardFrame.getByTestId('cvv').fill('123');
+
+        await page.locator('#submit').click();
+
+        await expect(page.locator('#events-card-onChange-valid-true')).toBeAttached();
+        await expect(page.locator('#events-card-onChange-source-card')).toBeAttached();
+        await expect(page.locator('#token-error-false')).toBeAttached();
+        await expect(page.locator('#token-data-method-payment-card')).toBeAttached();
+        await expect(page.locator('#token-data-paymentInstrument-brand-Visa')).toBeAttached();
+    });
+
+    test('should generate the bank token', async ({ page }) => {
+        await page.locator('#set-active-element-bank').click();
+
+        await expect(page.locator('#events-bankAccountType-onReady-true')).toBeAttached();
+        await expect(page.locator('#events-bankAccountNumber-onReady-true')).toBeAttached();
+        await expect(page.locator('#events-bankRoutingNumber-onReady-true')).toBeAttached();
+
+        await page.frameLocator('iframe#bbanAccountType')
+            .getByTestId('savings')
+            .click();
+        await page.frameLocator('iframe#bbanAccountNumber')
+            .getByTestId('bbanAccountNumber')
+            .fill('22222222');
+        await page.frameLocator('iframe#bbanRoutingNumber')
+            .getByTestId('bbanRoutingNumber')
+            .fill('11111111');
+
+        await page.locator('#submit').click();
+
+        await expect(page.locator('#events-bankAccountNumber-onChange-valid-true')).toBeAttached();
+        await expect(page.locator('#events-bankAccountNumber-onChange-source-bankAccountNumber')).toBeAttached();
+        await expect(page.locator('#events-bankRoutingNumber-onChange-valid-true')).toBeAttached();
+        await expect(page.locator('#events-bankRoutingNumber-onChange-source-bankRoutingNumber')).toBeAttached();
+        await expect(page.locator('#events-bankAccountType-onChange-valid-true')).toBeAttached();
+        await expect(page.locator('#events-bankAccountType-onChange-source-bankAccountType')).toBeAttached();
+        await expect(page.locator('#token-error-false')).toBeAttached();
+        await expect(page.locator('#token-data-method-ach')).toBeAttached();
+    });
+
+    test('should generate the iban token', async ({ page }) => {
+        await page.locator('#set-active-element-iban').click();
+
+        await expect(page.locator('#events-iban-onReady-true')).toBeAttached();
+
+        await page.frameLocator('iframe#iban')
+            .getByTestId('iban')
+            .fill('DE89 3704 0044 0532 0130 00');
+
+        await page.locator('#submit').click();
+
+        await expect(page.locator('#events-iban-onChange-valid-true')).toBeAttached();
+        await expect(page.locator('#token-error-false')).toBeAttached();
+        await expect(page.locator('#token-data-method-ach')).toBeAttached();
+    });
+});

package/test/e2e/specs/paypal.plw.ts

@@ -0,0 +1,15 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('paypal', () => {
+    test.beforeEach(async ({ page }) => {
+        await page.goto('/paypal');
+    });
+
+    test('should load the page', async ({ page }) => {
+        await expect(page).toHaveTitle('Test Paypal');
+    });
+
+    test('should inject the PayPal iframe into the page', async ({ page }) => {
+        await expect(page.locator('iframe[title="PayPal-paypal"]:not(.invisible)')).toBeVisible();
+    });
+});

package/test/e2e/specs/react-version.plw.ts

@@ -0,0 +1,10 @@
+import { test, expect } from '@playwright/test';
+// eslint-disable-next-line @typescript-eslint/no-require-imports
+const pkg = require('../../../package.json');
+const expectedVersion = process.env.REACT_VERSION ?? pkg.devDependencies.react.slice(1);
+
+test(`should render with correct react version (${expectedVersion})`, async ({ page }) => {
+    await page.goto('/');
+    const versionRegex = new RegExp(`^${expectedVersion}`);
+    await expect(page.locator('#react-version')).toHaveText(versionRegex);
+});

package/test/e2e/switch-react-version.js

@@ -15,7 +15,7 @@ const lockfilePath = '../../../pnpm-lock.yaml';
 const lockfileBackupPath = '../../../pnpm-lock.yaml.backup';
 
 function runInstallCommand() {
-    execSync('pnpm install', { stdio: 'inherit' });
+    execSync('pnpm install --no-frozen-lockfile', { stdio: 'inherit' });
 }
 
 function backupFiles() {

package/test/e2e/cypress-support.js

@@ -1,2 +0,0 @@
-import '@testing-library/cypress/add-commands';
-import 'cypress-iframe';

package/test/e2e/cypress.d.ts

@@ -1 +0,0 @@
-///<reference types="cypress-iframe" />

package/test/e2e/specs/bank-separate.cy.ts

@@ -1,27 +0,0 @@
-describe('bank-separate', () => {
-    beforeEach(() => {
-        cy.visit({ url: '/bank-separate' });
-    });
-
-    it('should load the page', () => {
-        cy.title().should('eq', 'Test Bank Page Separate Fields');
-    });
-
-    it('should inject the bank iframes into the page', () => {
-        cy.get('iframe#bbanAccountType');
-        cy.get('iframe#bbanAccountNumber');
-        cy.get('iframe#bbanRoutingNumber');
-    });
-
-    it('should call the on-ready BankAccountType element hook', () => {
-        cy.get('#events-bankAccountType-onReady-true');
-    });
-
-    it('should call the on-ready BankAccountNumber element hook', () => {
-        cy.get('#events-bankAccountNumber-onReady-true');
-    });
-
-    it('should call the on-ready BankRoutingNumber element hook', () => {
-        cy.get('#events-bankRoutingNumber-onReady-true');
-    });
-});

package/test/e2e/specs/card-separate-brands.cy.ts

@@ -1,68 +0,0 @@
-describe('card-separate-brands', () => {
-    beforeEach(() => {
-        cy.visit({ url: '/card-separate-brands' });
-    });
-
-    it('should load the page', () => {
-        cy.title().should(
-            'eq',
-            'Test Card Page Separate Fields allowed Brands',
-        );
-    });
-
-    it('should inject the card iframes into the page', () => {
-        cy.get('iframe#cardNumber');
-        cy.get('iframe#cardCvv');
-        cy.get('iframe#cardExpiration');
-    });
-
-    it('should be call the on-ready card element hook', () => {
-        cy.get('#events-number-onReady-true');
-    });
-
-    it('should be call the on-ready cvv element hook', () => {
-        cy.get('#events-cvv-onReady-true');
-    });
-
-    it('should be call the on-ready expiry element hook', () => {
-        cy.get('#events-expiry-onReady-true');
-    });
-
-    it('should decline the MasterCard by default', () => {
-        cy.get('#events-number-onReady-true');
-
-        cy.iframe('iframe#cardNumber')
-            .findByTestId('cardnumber')
-            .type('4111 1111 1111 1111');
-
-        cy.get('#events-number-onChange-error-code-unavailable-card-brand');
-    });
-
-    it('should allow the Visa after update and decline after restore', () => {
-        cy.iframe('iframe#cardNumber')
-            .findByTestId('cardnumber')
-            .type('4111 1111 1111 1111');
-
-        cy.iframe('iframe#cardCvv').findByTestId('cvv').type('123');
-
-        cy.iframe('iframe#cardExpiration').within(() => {
-            const expiry =
-                String('0' + (new Date().getMonth() + 1)).substr(-2) +
-                String(new Date().getFullYear()).substr(-2);
-
-            cy.findByTestId('exp-date').type(expiry);
-        });
-
-        cy.get('#events-number-onChange-error-code-unavailable-card-brand');
-
-        cy.get('#btn-update').click();
-
-        cy.get(
-            '#events-number-onChange-error-code-unavailable-card-brand',
-        ).should('not.exist');
-
-        cy.get('#btn-restore').click();
-
-        cy.get('#events-number-onChange-error-code-unavailable-card-brand');
-    });
-});

package/test/e2e/specs/card-separate.cy.ts

@@ -1,27 +0,0 @@
-describe('card-separate', () => {
-    beforeEach(() => {
-        cy.visit({ url: '/card-separate' });
-    });
-
-    it('should load the page', () => {
-        cy.title().should('eq', 'Test Card Page Separate Fields');
-    });
-
-    it('should inject the card iframes into the page', () => {
-        cy.get('iframe#cardNumber');
-        cy.get('iframe#cardCvv');
-        cy.get('iframe#cardExpiration');
-    });
-
-    it('should be call the on-ready card element hook', () => {
-        cy.get('#events-number-onReady-true');
-    });
-
-    it('should be call the on-ready cvv element hook', () => {
-        cy.get('#events-cvv-onReady-true');
-    });
-
-    it('should be call the on-ready expiry element hook', () => {
-        cy.get('#events-expiry-onReady-true');
-    });
-});

package/test/e2e/specs/checkout-combined.cy.ts

@@ -1,24 +0,0 @@
-describe('checkout-combined', () => {
-    beforeEach(() => {
-        cy.visit({ url: '/checkout-combined' });
-    });
-
-    it('should load the page', () => {
-        cy.title().should('eq', 'Test Checkout Page Combined Field');
-    });
-
-    it('should inject the card iframe into the page', () => {
-        cy.get('iframe#card');
-    });
-
-    it('should be call the on-ready hook', () => {
-        cy.get('#events-onReady-true');
-    });
-
-    it('should call the on-change hook', () => {
-        cy.get('#events-onReady-true');
-        cy.get('#submit').click();
-        cy.get('#key-onChange');
-        cy.get('#token-data-code-invalid-payment-card');
-    });
-});

package/test/e2e/specs/google-pay.cy.ts

@@ -1,13 +0,0 @@
-describe('google-pay', () => {
-    beforeEach(() => {
-        cy.visit({ url: '/google-pay' });
-    });
-
-    it('should load the page', () => {
-        cy.title().should('eq', 'Test Google Pay');
-    });
-
-    it('should inject the Google pay iframe into the page', () => {
-        cy.get('iframe#googlePay');
-    });
-});

package/test/e2e/specs/iban.cy.ts

@@ -1,17 +0,0 @@
-describe('iban', () => {
-    beforeEach(() => {
-        cy.visit({ url: '/iban' });
-    });
-
-    it('should load the page', () => {
-        cy.title().should('eq', 'Test IBAN Field');
-    });
-
-    it('should inject the card iframe into the page', () => {
-        cy.get('iframe#iban');
-    });
-
-    it('should call the on-ready iban element hook', () => {
-        cy.get('#events-iban-onReady-true');
-    });
-});

package/test/e2e/specs/inject-riskMetadata.cy.ts

@@ -1,48 +0,0 @@
-describe('checkout-combined', () => {
-    beforeEach(() => {
-        cy.visit({ url: '/inject-metadata' });
-    });
-
-    it('should load the page', () => {
-        cy.title().should('eq', 'Test Inject Metadata');
-    });
-
-    it('should inject the card iframe into the page', () => {
-        cy.get('iframe#card');
-    });
-
-    it('should be call the on-ready hook', () => {
-        cy.get('#events-onReady-true');
-    });
-
-    it('should call the on-change hook', () => {
-        cy.get('#events-onReady-true');
-        cy.get('#submit').click();
-        cy.get('#key-onChange');
-        cy.get('#token-data-code-invalid-payment-card');
-    });
-
-    it('should show provided data in token', () => {
-        cy.get('#events-onReady-true');
-
-        cy.iframe('iframe#card').within(() => {
-            const cardNumber = '4111111111111111';
-            const expiry =
-                String('0' + (new Date().getMonth() + 1)).substr(-2) +
-                String(new Date().getFullYear()).substr(-2);
-            const cvv = '123';
-
-            cy.findByTestId('cardnumber').type(cardNumber);
-            cy.findByTestId('exp-date').type(expiry);
-            cy.findByTestId('cvv').type(cvv);
-        });
-
-        cy.get('#submit').click();
-
-        cy.get('#token-data-fingerprint')
-            .invoke('text')
-            .should((fingerprint) => {
-                expect(fingerprint).to.equal('fingerprint123');
-            });
-    });
-});

package/test/e2e/specs/multiple-methods.cy.ts

@@ -1,128 +0,0 @@
-describe('multiple-methods', () => {
-    beforeEach(() => {
-        cy.visit({ url: '/multiple-methods' });
-    });
-
-    it('should load the page', () => {
-        cy.title().should('eq', 'Test Multiple Methods');
-    });
-
-    it('should call the on-ready card element hook', () => {
-        cy.get('#events-card-onReady-true');
-    });
-
-    it('should init with payment-card method by default', () => {
-        cy.get('#events-card-onReady-true');
-        cy.get('#events-bankAccountType-onReady-false');
-        cy.get('#events-bankAccountNumber-onReady-false');
-        cy.get('#events-bankRoutingNumber-onReady-false');
-        cy.get('#events-iban-onReady-false');
-    });
-
-    it('should load other methods', () => {
-        cy.get('#events-card-onReady-true');
-
-        cy.get('#set-active-element-bank').click();
-
-        // check other methods are disabled
-        cy.get('#events-card-onReady-false');
-        cy.get('#events-iban-onReady-false');
-
-        // check bank is loaded
-        cy.get('#events-bankAccountNumber-onReady-true');
-        cy.get('#events-bankAccountType-onReady-true');
-        cy.get('#events-bankRoutingNumber-onReady-true');
-
-        // load IBAN
-        cy.get('#set-active-element-iban').click();
-
-        // check other methods are disabled
-        cy.get('#events-card-onReady-false');
-        cy.get('#events-bankAccountType-onReady-false');
-        cy.get('#events-bankAccountNumber-onReady-false');
-        cy.get('#events-bankRoutingNumber-onReady-false');
-
-        // check IBAN is loaded
-        cy.get('#events-iban-onReady-true');
-
-        // load Google Pay
-        cy.get('#set-active-element-googlepay').click();
-
-        // check other methods are disabled
-        cy.get('#events-card-onReady-false');
-        cy.get('#events-bankAccountType-onReady-false');
-        cy.get('#events-bankAccountNumber-onReady-false');
-        cy.get('#events-bankRoutingNumber-onReady-false');
-        cy.get('#events-iban-onReady-false');
-
-        // check Google Pay is loaded
-        cy.iframe('#googlePay');
-    });
-
-    it('should generate the card token', () => {
-        cy.get('#events-card-onReady-true');
-
-        cy.iframe('iframe#card').within(() => {
-            const cardNumber = '4111111111111111';
-            const expiry =
-                String('0' + (new Date().getMonth() + 1)).substr(-2) +
-                String(new Date().getFullYear()).substr(-2);
-            const cvv = '123';
-
-            cy.findByTestId('cardnumber').type(cardNumber);
-            cy.findByTestId('exp-date').type(expiry);
-            cy.findByTestId('cvv').type(cvv);
-        });
-
-        cy.get('#submit').click();
-
-        cy.get('#events-card-onChange-valid-true');
-        cy.get('#events-card-onChange-source-card');
-        cy.get('#token-error-false');
-        cy.get('#token-data-method-payment-card');
-        cy.get('#token-data-paymentInstrument-brand-Visa');
-    });
-
-    it('should generate the bank token', () => {
-        cy.get('#set-active-element-bank').click();
-
-        cy.get('#events-bankAccountType-onReady-true');
-        cy.get('#events-bankAccountNumber-onReady-true');
-        cy.get('#events-bankRoutingNumber-onReady-true');
-
-        cy.iframe('iframe#bbanAccountType').findByTestId('savings').click();
-        cy.iframe('iframe#bbanAccountNumber')
-            .findByTestId('bbanAccountNumber')
-            .type('22222222');
-        cy.iframe('iframe#bbanRoutingNumber')
-            .findByTestId('bbanRoutingNumber')
-            .type('11111111');
-
-        cy.get('#submit').click();
-
-        cy.get('#events-bankAccountNumber-onChange-valid-true');
-        cy.get('#events-bankAccountNumber-onChange-source-bankAccountNumber');
-        cy.get('#events-bankRoutingNumber-onChange-valid-true');
-        cy.get('#events-bankRoutingNumber-onChange-source-bankRoutingNumber');
-        cy.get('#events-bankAccountType-onChange-valid-true');
-        cy.get('#events-bankAccountType-onChange-source-bankAccountType');
-        cy.get('#token-error-false');
-        cy.get('#token-data-method-ach');
-    });
-
-    it('should generate the iban token', () => {
-        cy.get('#set-active-element-iban').click();
-
-        cy.get('#events-iban-onReady-true');
-
-        cy.iframe('iframe#iban')
-            .findByTestId('iban')
-            .type('DE89 3704 0044 0532 0130 00');
-
-        cy.get('#submit').click();
-
-        cy.get('#events-iban-onChange-valid-true');
-        cy.get('#token-error-false');
-        cy.get('#token-data-method-ach');
-    });
-});

package/test/e2e/specs/paypal.cy.ts

@@ -1,13 +0,0 @@
-describe('paypal', () => {
-    beforeEach(() => {
-        cy.visit({ url: '/paypal' });
-    });
-
-    it('should load the page', () => {
-        cy.title().should('eq', 'Test Paypal');
-    });
-
-    it('should inject the PayPal iframe into the page', () => {
-        cy.get('iframe[title="PayPal-paypal"]');
-    });
-});

package/test/e2e/specs/react-version.cy.ts

@@ -1,13 +0,0 @@
-// eslint-disable-next-line @typescript-eslint/no-require-imports
-const pkg = require('../../../package.json');
-const expectedVersion =
-    Cypress.env('REACT_VERSION') ?? pkg.devDependencies.react.slice(1);
-
-it(`should render with correct react version (${expectedVersion})`, () => {
-    cy.visit('/');
-    cy.get('#react-version')
-        .invoke('text')
-        .should((actualVersion) => {
-            expect(actualVersion.startsWith(expectedVersion)).to.be.true;
-        });
-});

package/test/e2e/tsconfig.json

@@ -1,8 +0,0 @@
-{
-    "compilerOptions": {
-        "target": "es5",
-        "lib": ["es5", "dom"],
-        "types": ["cypress", "@testing-library/cypress"]
-    },
-    "include": ["**/*.ts", "./cypress.d.ts"]
-}