@rebilly/framepay-react 9.50.0 → 9.51.0

package/CHANGELOG.md

@@ -1,6 +1,6 @@
-## [9.50.0](https://github.com/Rebilly/rebilly/compare/framepay-react-v9.49.0...framepay-react-v9.50.0) (2025-04-15)
+## [9.51.0](https://github.com/Rebilly/rebilly/compare/framepay-react-v9.50.0...framepay-react-v9.51.0) (2025-04-17)
 
 
 ### Features
 
-* **framepay:** add focus to public element api ([#11264](https://github.com/Rebilly/rebilly/issues/11264)) ([abebd90](https://github.com/Rebilly/rebilly/commit/abebd90e733aa93082a88123792d880b8d1ada66))
+* **framepay-react:** Add react 19 support ([#11287](https://github.com/Rebilly/rebilly/issues/11287)) ([3d2a7e1](https://github.com/Rebilly/rebilly/commit/3d2a7e13caf4ef4194089014dbf90664d85722fa))

package/README.md

@@ -5,7 +5,7 @@
 
 > React components for FramePay.js
 
-Supported: React 14 to 18.
+Supported: React 14 to 19.
 
 This package is a wrapper for [FramePay](https://www.rebilly.com/docs/dev-docs/framepay/) offering out-of-the-box support for Redux and other common React features.
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@rebilly/framepay-react",
-    "version": "9.50.0",
+    "version": "9.51.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",
@@ -33,6 +33,7 @@
         "set-react-16": "cross-env REACT_VERSION=16 node ./test/e2e/switch-react-version",
         "set-react-17": "cross-env REACT_VERSION=17 node ./test/e2e/switch-react-version",
         "set-react-18": "cross-env REACT_VERSION=18 node ./test/e2e/switch-react-version",
+        "set-react-19": "yarn clean-react-alias",
         "clean-react-alias": "cross-env REACT_VERSION=clean node ./test/e2e/switch-react-version",
         "dotenv": "node ./env.js",
         "build": "cross-env NODE_ENV=production tsc -p tsconfig.json",
@@ -47,7 +48,8 @@
         "test:e2e:react-16": "cross-env REACT_VERSION=16 run-s set-react-16 dotenv build:e2e clean-react-alias test:e2e:base",
         "test:e2e:react-17": "cross-env REACT_VERSION=17 run-s set-react-17 dotenv build:e2e clean-react-alias test:e2e:base",
         "test:e2e:react-18": "cross-env REACT_VERSION=18 run-s set-react-18 dotenv build:e2e clean-react-alias test:e2e:base",
-        "test:e2e:pr": "yarn test:e2e:react-18",
+        "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": "yarn test:e2e:react-19",
         "test:e2e:post-merge": "run-s test:e2e:react-*",
         "test:e2e:open": "cypress open",
         "test:e2e:run": "cypress run",
@@ -55,8 +57,8 @@
         "clean:e2e": "rm -rf test/e2e/build"
     },
     "peerDependencies": {
-        "react": "^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0",
-        "react-dom": "^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
+        "react": "^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
     },
     "dependencies": {
         "@rebilly/framepay": "*",
@@ -84,8 +86,9 @@
         "parcel-bundler": "^1.12.5",
         "portfinder": "^1.0.35",
         "prop-types": "^15.0.0",
-        "react": "^18.3.1",
-        "react-dom": "^18.3.1",
+        "react": "^19.1.0",
+        "react-dom": "^19.1.0",
+        "react-dom-19": "npm:react-dom@19.1.0",
         "start-server-and-test": "^2.0.11",
         "ts-jest": "^29.3.1",
         "typescript": "^5.4.5"

package/test/e2e/assets/README.md

@@ -0,0 +1,10 @@
+# UMD Builds for React Versions
+
+This folder contains UMD builds of various React versions. These builds are toggled
+using scripts defined in the `package.json` file (e.g., `set-react-*`).
+
+## React 19
+
+React 19 removed support for [UMD builds](https://react.dev/blog/2024/04/25/react-19-upgrade-guide#umd-builds-removed).
+
+For react 19 we are using the npm version in the package.json.

package/test/e2e/fixtures/apple-pay.js

@@ -1,11 +1,10 @@
 import React, { Component } from 'react';
-import ReactDOM from 'react-dom';
 
 import {
     FramePayProvider,
     withFramePayApplePayComponent,
 } from '../../../build';
-import { prettyDebugRender, ReactVersion } from './util';
+import { prettyDebugRender, ReactVersion, renderFixture } from './util';
 import './style.css';
 
 const params = {
@@ -55,4 +54,4 @@ class App extends Component {
 }
 
 const WrappedApp = withFramePayApplePayComponent(App);
-ReactDOM.render(<WrappedApp />, document.getElementById('app'));
+renderFixture(<WrappedApp />);

package/test/e2e/fixtures/bank-separate.js

@@ -1,8 +1,12 @@
 import React, { Component } from 'react';
-import ReactDOM from 'react-dom';
 
 import { FramePayProvider, withFramePayBankComponent } from '../../../build';
-import { deepMerge, prettyDebugRender, ReactVersion } from './util';
+import {
+    deepMerge,
+    prettyDebugRender,
+    ReactVersion,
+    renderFixture,
+} from './util';
 import './style.css';
 
 const params = {
@@ -321,4 +325,4 @@ class App extends Component {
     }
 }
 
-ReactDOM.render(<App />, document.getElementById('app'));
+renderFixture(<App />);

package/test/e2e/fixtures/card-separate-brands.js

@@ -1,16 +1,17 @@
 import React, { Component } from 'react';
-import ReactDOM from 'react-dom';
-
 import {
     FramePayProvider,
     SUPPORTED_CARD_BRANDS,
     withFramePayCardComponent,
 } from '../../../build';
-import { deepMerge, prettyDebugRender, ReactVersion } from './util';
+import {
+    deepMerge,
+    prettyDebugRender,
+    ReactVersion,
+    renderFixture,
+} from './util';
 import './style.css';
 
-console.log('SUPPORTED_CARD_BRANDS', SUPPORTED_CARD_BRANDS);
-
 const params = {
     publishableKey: 'pk_sandbox_c6cqKLddciVikuBOjhcng-rLccTz70NT4W_qZ_h',
     icon: {
@@ -374,4 +375,4 @@ class App extends Component {
     }
 }
 
-ReactDOM.render(<App />, document.getElementById('app'));
+renderFixture(<App />);

package/test/e2e/fixtures/card-separate-rebilly-fields.js

@@ -1,8 +1,12 @@
 import React, { Component } from 'react';
-import ReactDOM from 'react-dom';
 
 import { FramePayProvider, withFramePayCardComponent } from '../../../build';
-import { deepMerge, prettyDebugRender, ReactVersion } from './util';
+import {
+    deepMerge,
+    prettyDebugRender,
+    ReactVersion,
+    renderFixture,
+} from './util';
 import './style.css';
 
 const params = {
@@ -269,4 +273,4 @@ class App extends Component {
     }
 }
 
-ReactDOM.render(<App />, document.getElementById('app'));
+renderFixture(<App />);

package/test/e2e/fixtures/card-separate.js

@@ -1,8 +1,12 @@
 import React, { Component } from 'react';
-import ReactDOM from 'react-dom';
 
 import { FramePayProvider, withFramePayCardComponent } from '../../../build';
-import { deepMerge, prettyDebugRender, ReactVersion } from './util';
+import {
+    deepMerge,
+    prettyDebugRender,
+    ReactVersion,
+    renderFixture,
+} from './util';
 import './style.css';
 
 const params = {
@@ -326,4 +330,4 @@ class App extends Component {
     }
 }
 
-ReactDOM.render(<App />, document.getElementById('app'));
+renderFixture(<App />);

package/test/e2e/fixtures/checkout-combined.js

@@ -1,8 +1,12 @@
 import React, { Component } from 'react';
-import ReactDOM from 'react-dom';
 
 import { FramePayProvider, withFramePayCardComponent } from '../../../build';
-import { deepMerge, prettyDebugRender, ReactVersion } from './util';
+import {
+    deepMerge,
+    prettyDebugRender,
+    ReactVersion,
+    renderFixture,
+} from './util';
 import './style.css';
 
 const params = {
@@ -246,4 +250,4 @@ class App extends Component {
     }
 }
 
-ReactDOM.render(<App />, document.getElementById('app'));
+renderFixture(<App />);

package/test/e2e/fixtures/google-pay.js

@@ -1,11 +1,10 @@
 import React, { Component } from 'react';
-import ReactDOM from 'react-dom';
 
 import {
     FramePayProvider,
     withFramePayGooglePayComponent,
 } from '../../../build';
-import { prettyDebugRender, ReactVersion } from './util';
+import { prettyDebugRender, ReactVersion, renderFixture } from './util';
 import './style.css';
 
 const params = {
@@ -55,4 +54,4 @@ class App extends Component {
 }
 
 const WrappedApp = withFramePayGooglePayComponent(App);
-ReactDOM.render(<WrappedApp />, document.getElementById('app'));
+renderFixture(<WrappedApp />);

package/test/e2e/fixtures/iban.js

@@ -1,8 +1,12 @@
 import React, { Component } from 'react';
-import ReactDOM from 'react-dom';
 
 import { FramePayProvider, withFramePayIBANComponent } from '../../../build';
-import { deepMerge, prettyDebugRender, ReactVersion } from './util';
+import {
+    deepMerge,
+    prettyDebugRender,
+    ReactVersion,
+    renderFixture,
+} from './util';
 import './style.css';
 
 const params = {
@@ -238,4 +242,4 @@ class App extends Component {
     }
 }
 
-ReactDOM.render(<App />, document.getElementById('app'));
+renderFixture(<App />);

package/test/e2e/fixtures/inject-metadata.js

@@ -1,8 +1,12 @@
 import React, { Component } from 'react';
-import ReactDOM from 'react-dom';
 
 import { FramePayProvider, withFramePayCardComponent } from '../../../build';
-import { deepMerge, prettyDebugRender, ReactVersion } from './util';
+import {
+    deepMerge,
+    prettyDebugRender,
+    ReactVersion,
+    renderFixture,
+} from './util';
 import './style.css';
 
 const params = {
@@ -271,4 +275,4 @@ class App extends Component {
     }
 }
 
-ReactDOM.render(<App />, document.getElementById('app'));
+renderFixture(<App />);

package/test/e2e/fixtures/multiple-methods.js

@@ -1,8 +1,12 @@
 import React, { Component } from 'react';
-import ReactDOM from 'react-dom';
 
 import { FramePayProvider, withFramePay } from '../../../build';
-import { deepMerge, prettyDebugRender, ReactVersion } from './util';
+import {
+    deepMerge,
+    prettyDebugRender,
+    ReactVersion,
+    renderFixture,
+} from './util';
 import './style.css';
 
 const params = {
@@ -480,4 +484,4 @@ class App extends Component {
     }
 }
 
-ReactDOM.render(<App />, document.getElementById('app'));
+renderFixture(<App />);

package/test/e2e/fixtures/paypal.js

@@ -1,8 +1,7 @@
 import React, { Component } from 'react';
-import ReactDOM from 'react-dom';
 
 import { FramePayProvider, withFramePayPaypalComponent } from '../../../build';
-import { prettyDebugRender, ReactVersion } from './util';
+import { prettyDebugRender, ReactVersion, renderFixture } from './util';
 import './style.css';
 
 const params = {
@@ -51,4 +50,4 @@ class App extends Component {
 }
 
 const WrappedApp = withFramePayPaypalComponent(App);
-ReactDOM.render(<WrappedApp />, document.getElementById('app'));
+renderFixture(<WrappedApp />);

package/test/e2e/fixtures/samsung-pay.js

@@ -1,11 +1,10 @@
 import React, { Component } from 'react';
-import ReactDOM from 'react-dom';
 
 import {
     FramePayProvider,
     withFramePaySamsungPayComponent,
 } from '../../../build';
-import { prettyDebugRender, ReactVersion } from './util';
+import { prettyDebugRender, ReactVersion, renderFixture } from './util';
 import './style.css';
 
 const params = {
@@ -55,4 +54,4 @@ class App extends Component {
 }
 
 const WrappedApp = withFramePaySamsungPayComponent(App);
-ReactDOM.render(<WrappedApp />, document.getElementById('app'));
+renderFixture(<WrappedApp />);

package/test/e2e/fixtures/util.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import ReactDOM from 'react-dom';
 
 export const prettyRenderState = (data, parentKey) => {
     if (data !== null && typeof data === 'object') {
@@ -82,3 +83,24 @@ export const ReactVersion = () => {
         </div>
     );
 };
+
+// Render a test fixtures in the DOM.
+// Since react 19, ReactDOM.render is removed. Our test fixtures need to
+// support running in multiple versions of React.
+// We check if ReactDOM.render is available, if not we use the new API.
+// We must dynamically import react-dom-19/client to avoid breaking the build
+// in old versions. react-dom-19 must be a separate package in the package.json,
+// otherwise when react-dom is aliased to an older version, the /client import
+// will fail at build time.
+export const renderFixture = (component) => {
+    if (ReactDOM.render) {
+        ReactDOM.render(component, document.getElementById('app'));
+    } else {
+        const ReactDOM19 = import('react-dom-19/client');
+        ReactDOM19.then((ReactDOM) => {
+            ReactDOM.createRoot(document.getElementById('app')).render(
+                component,
+            );
+        });
+    }
+};