@rebilly/framepay-react 8.2.0 → 9.0.0

package/CHANGELOG.md

@@ -1,6 +1,26 @@
-## [8.2.0](https://github.com/Rebilly/rebilly/compare/framepay-react-v8.1.2...framepay-react-v8.2.0) (2024-11-19)
+## [9.0.0](https://github.com/Rebilly/rebilly/compare/framepay-react-v8.3.0...framepay-react-v9.0.0) (2024-11-26)
 
 
+### ⚠ BREAKING CHANGES
+
+* **framepay-react:** use @rebilly/framepay in framepay-react (#8702)
+* **framepay-npm:** initial release (#8815)
+
 ### Features
 
-* **api-metadata, rebilly-js-sdk:** Update resources based on latest api definitions ([#8551](https://github.com/Rebilly/rebilly/issues/8551)) ([34ed640](https://github.com/Rebilly/rebilly/commit/34ed640a778915b586b87188c163840b30297afd))
+* **cashier:** Add hosted app ([#8723](https://github.com/Rebilly/rebilly/issues/8723)) ([49481ec](https://github.com/Rebilly/rebilly/commit/49481ec1336a518d5ba513b53b24a46fdcc47acb))
+* **framepay-npm:** initial release ([#8815](https://github.com/Rebilly/rebilly/issues/8815)) ([4029127](https://github.com/Rebilly/rebilly/commit/402912752363d7da51424b38185ac239bae7afe6))
+* **framepay-npm:** Prepare for publishing, and add error propagation ([#8765](https://github.com/Rebilly/rebilly/issues/8765)) ([b4ab4a5](https://github.com/Rebilly/rebilly/commit/b4ab4a52bba2de2c986b1292896391598194ace8))
+
+
+### Bug Fixes
+
+* **cashier, framepay-npm:** use framepay-npm types ([#8830](https://github.com/Rebilly/rebilly/issues/8830)) ([8bdeeea](https://github.com/Rebilly/rebilly/commit/8bdeeeaf7accec1d79f2ce4cbdb67a7d4ec76b74))
+* **framepay-npm:** add the main export for the outdated build tools ([#8766](https://github.com/Rebilly/rebilly/issues/8766)) ([abcd6ea](https://github.com/Rebilly/rebilly/commit/abcd6eaec41223b964b0e71dec8a6893916359de))
+* **framepay-npm:** publish package publically ([#8817](https://github.com/Rebilly/rebilly/issues/8817)) ([ccc245c](https://github.com/Rebilly/rebilly/commit/ccc245ccc142ea891695233ecd6e62bc905ddeda))
+* **framepay-react:** fix undefined error ([#8837](https://github.com/Rebilly/rebilly/issues/8837)) ([8d4f6e6](https://github.com/Rebilly/rebilly/commit/8d4f6e65a5edd6d707c3bf36c008a42e67519877))
+
+
+### Refactors
+
+* **framepay-react:** use @rebilly/framepay in framepay-react ([#8702](https://github.com/Rebilly/rebilly/issues/8702)) ([87ef705](https://github.com/Rebilly/rebilly/commit/87ef7058f67abe0dfa790cc681adedb0aa710c93))

package/README.md

@@ -76,13 +76,13 @@ FramePayProvider provides settings to the FramePay API. See [Framepay.initialize
 // index.js
 import React from 'react';
 import { render } from 'react-dom';
-import { FramePayProvider } from 'framepay-react';
+import { FramePayProvider } from '@rebilly/framepay-react';
 
 import MyCardPageComponent from './MyCardPageComponent';
 
 const App = () => {
     return (
-        <FramePayProvider injectStyle publishableKey="pk_sandbox_1234567890">
+        <FramePayProvider publishableKey="pk_sandbox_1234567890">
             <MyCardPageComponent/>
         </FramePayProvider>
     );
@@ -159,7 +159,7 @@ Wrapper for the payment card features.
 ```jsx harmony
 // MyCardPageComponent.js
 import React from 'react';
-import { withFramePayCardComponent } from 'framepay-react';
+import { withFramePayCardComponent } from '@rebilly/framepay-react';
 
 class MyCardPageComponent extends React.Component {
     constructor(props) {
@@ -216,7 +216,7 @@ export default withFramePayCardComponent(MyCardPageComponent);
 Wrapper for the ACH features.
 ```jsx harmony
 import React from 'react';
-import { withFramePayBankComponent } from 'framepay-react';
+import { withFramePayBankComponent } from '@rebilly/framepay-react';
 
 class MyBankPageComponent extends React.Component {
     constructor(props) {
@@ -275,10 +275,8 @@ export default withFramePayBankComponent(MyBankPageComponent);
 The **framepay-react** package supports all the [FramePay](https://www.rebilly.com/docs/dev-docs/framepay/) initialization settings.
 See [Framepay.initialize](https://www.rebilly.com/docs/dev-docs/framepay-global-reference/#framepay.initialize) for all customizations.
 
-Additionally `injectStyle` is available. When defined in the `FramePayProvider` it will add the default FramePay CSS in the header of your application.
-
 ```jsx harmony
-<FramePayProvider injectStyle publishableKey="pk_sandbox_1234567890">
+<FramePayProvider publishableKey="pk_sandbox_1234567890">
     <MyCardPageComponent/>
 </FramePayProvider>
 ```
@@ -296,7 +294,7 @@ The methods `withFramePay`, `withFramePayCardComponent` and `withFramePayBankCom
 ##### Incorrect
 ```jsx harmony
 import * as React from 'react';
-import {withFramePayCardComponent} from 'framepay-react'
+import {withFramePayCardComponent} from '@rebilly/framepay-react'
 
 class SomeComponent extends React.Component {
     render(){
@@ -310,7 +308,7 @@ class SomeComponent extends React.Component {
 ##### Correct
 ```jsx harmony
 import * as React from 'react';
-import {withFramePayCardComponent} from 'framepay-react'
+import {withFramePayCardComponent} from '@rebilly/framepay-react'
 
 const MyCardElement = withFramePayCardComponent(MyCardComponent);
 

package/build/lib/components/provider.d.ts

@@ -2,7 +2,6 @@ import * as React from 'react';
 export default class Provider extends React.Component<ProviderProps, FramePayContext> {
     static readonly defaultProps: {
         injectScript: boolean;
-        injectStyle: boolean;
         onError: () => {};
         onReady: () => {};
         onTokenReady: () => {};

package/build/lib/components/provider.js

@@ -113,9 +113,6 @@ var Provider = /** @class */ (function (_super) {
                 onReady: function () { return _this.onApiReady(); },
             });
         }
-        if (this.props.injectStyle) {
-            (0, dom_util_1.injectStyle)();
-        }
     };
     Provider.prototype.onApiError = function () {
         return this.setState({
@@ -131,12 +128,12 @@ var Provider = /** @class */ (function (_super) {
     };
     Provider.prototype.onApiReady = function () {
         return __awaiter(this, void 0, void 0, function () {
-            var api, _a, injectStyle_1, children, settings;
+            var api, _a, children, settings;
             var _this = this;
             return __generator(this, function (_b) {
                 api = (0, get_framepay_api_1.default)();
                 try {
-                    _a = this.props, injectStyle_1 = _a.injectStyle, children = _a.children, settings = __rest(_a, ["injectStyle", "children"]);
+                    _a = this.props, children = _a.children, settings = __rest(_a, ["children"]);
                     api.initialize(settings);
                     api.on('ready', function () {
                         _this.setState({ ready: true, api: api, error: null });
@@ -185,7 +182,6 @@ var Provider = /** @class */ (function (_super) {
     };
     Provider.defaultProps = {
         injectScript: true,
-        injectStyle: false,
         onError: function () { return ({}); },
         onReady: function () { return ({}); },
         onTokenReady: function () { return ({}); },
@@ -193,4 +189,4 @@ var Provider = /** @class */ (function (_super) {
     return Provider;
 }(React.Component));
 exports.default = Provider;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHJvdmlkZXIuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvbGliL2NvbXBvbmVudHMvcHJvdmlkZXIudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztBQUFBLDJDQUErQjtBQUMvQiwwQ0FBb0Q7QUFDcEQsc0NBQTZDO0FBQzdDLHdDQUF3RDtBQUN4RCxxRUFBOEM7QUFDOUMseUVBQWlEO0FBRWpEO0lBQXNDLDRCQUdyQztJQUhEOztRQVlhLFdBQUssR0FBb0I7WUFDOUIsR0FBRyxFQUFFLElBQUEsMEJBQWMsR0FBRTtZQUNyQixLQUFLLEVBQUUsSUFBSTtZQUNYLEtBQUssRUFBRSxLQUFLO1NBQ2YsQ0FBQzs7SUF1Rk4sQ0FBQztJQXJGRyxvQ0FBaUIsR0FBakI7UUFBQSxpQkFVQztRQVRHLElBQUksSUFBSSxDQUFDLEtBQUssQ0FBQyxZQUFZLEVBQUUsQ0FBQztZQUMxQixJQUFBLHVCQUFZLEVBQUM7Z0JBQ1QsT0FBTyxFQUFFLGNBQU0sT0FBQSxLQUFJLENBQUMsVUFBVSxFQUFFLEVBQWpCLENBQWlCO2dCQUNoQyxPQUFPLEVBQUUsY0FBTSxPQUFBLEtBQUksQ0FBQyxVQUFVLEVBQUUsRUFBakIsQ0FBaUI7YUFDbkMsQ0FBQyxDQUFDO1FBQ1AsQ0FBQztRQUNELElBQUksSUFBSSxDQUFDLEtBQUssQ0FBQyxXQUFXLEVBQUUsQ0FBQztZQUN6QixJQUFBLHNCQUFXLEdBQUUsQ0FBQztRQUNsQixDQUFDO0lBQ0wsQ0FBQztJQUVELDZCQUFVLEdBQVY7UUFDSSxPQUFPLElBQUksQ0FBQyxRQUFRLENBQ2hCO1lBQ0ksS0FBSyxFQUFFLHdCQUFhLENBQUMsS0FBSyxDQUFDLGlCQUFpQjtZQUM1QyxLQUFLLEVBQUUsS0FBSztTQUNmLEVBQ0Q7WUFDSSxJQUFNLEtBQUss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
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHJvdmlkZXIuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvbGliL2NvbXBvbmVudHMvcHJvdmlkZXIudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztBQUFBLDJDQUErQjtBQUMvQiwwQ0FBb0Q7QUFDcEQsc0NBQTZDO0FBQzdDLHdDQUEyQztBQUMzQyxxRUFBOEM7QUFDOUMseUVBQWlEO0FBRWpEO0lBQXNDLDRCQUdyQztJQUhEOztRQVdhLFdBQUssR0FBb0I7WUFDOUIsR0FBRyxFQUFFLElBQUEsMEJBQWMsR0FBRTtZQUNyQixLQUFLLEVBQUUsSUFBSTtZQUNYLEtBQUssRUFBRSxLQUFLO1NBQ2YsQ0FBQzs7SUFvRk4sQ0FBQztJQWxGRyxvQ0FBaUIsR0FBakI7UUFBQSxpQkFPQztRQU5HLElBQUksSUFBSSxDQUFDLEtBQUssQ0FBQyxZQUFZLEVBQUUsQ0FBQztZQUMxQixJQUFBLHVCQUFZLEVBQUM7Z0JBQ1QsT0FBTyxFQUFFLGNBQU0sT0FBQSxLQUFJLENBQUMsVUFBVSxFQUFFLEVBQWpCLENBQWlCO2dCQUNoQyxPQUFPLEVBQUUsY0FBTSxPQUFBLEtBQUksQ0FBQyxVQUFVLEVBQUUsRUFBakIsQ0FBaUI7YUFDbkMsQ0FBQyxDQUFDO1FBQ1AsQ0FBQztJQUNMLENBQUM7SUFFRCw2QkFBVSxHQUFWO1FBQ0ksT0FBTyxJQUFJLENBQUMsUUFBUSxDQUNoQjtZQUNJLEtBQUssRUFBRSx3QkFBYSxDQUFDLEtBQUssQ0FBQyxpQkFBaUI7WUFDNUMsS0FBSyxFQUFFLEtBQUs7U0FDZixFQUNEO1lBQ0ksSUFBTSxLQUFLLEdBQUcsSUFBQSx3QkFBYSxFQUFDO2dCQUN4QixJQUFJLEVBQUUsd0JBQWEsQ0FBQyxLQUFLLENBQUMsaUJBQWlCO2dCQUMzQyxPQUFPLEVBQUUs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

package/build/lib/constants.d.ts

@@ -12,11 +12,11 @@ export declare const REACT_VERSION: string;
 /**
  * Remote FramePay library CDN link.
  */
-export declare const FRAMEPAY_SCRIPT_LINK: string;
+export declare const FRAMEPAY_SCRIPT_LINK: string | undefined;
 /**
  * Remote FramePay style CDN link.
  */
-export declare const FRAMEPAY_STYLE_LINK: string;
+export declare const FRAMEPAY_STYLE_LINK: string | undefined;
 /**
  * Supported FramePay card types
  */

package/build/lib/constants.js

@@ -39,13 +39,11 @@ exports.REACT_VERSION = React.version;
 /**
  * Remote FramePay library CDN link.
  */
-exports.FRAMEPAY_SCRIPT_LINK = process.env.FRAMEPAY_SCRIPT_LINK ||
-    'https://framepay.rebilly.com/framepay.js';
+exports.FRAMEPAY_SCRIPT_LINK = typeof process === 'object' ? process.env.FRAMEPAY_SCRIPT_LINK : undefined;
 /**
  * Remote FramePay style CDN link.
  */
-exports.FRAMEPAY_STYLE_LINK = process.env.FRAMEPAY_STYLE_LINK ||
-    'https://framepay.rebilly.com/framepay.css';
+exports.FRAMEPAY_STYLE_LINK = typeof process === 'object' ? process.env.FRAMEPAY_STYLE_LINK : undefined;
 /**
  * Supported FramePay card types
  */
@@ -60,4 +58,4 @@ exports.SUPPORTED_CARD_BRANDS = {
     MasterCard: "MasterCard" /* SupportedCardBrands.MasterCard */,
     Visa: "Visa" /* SupportedCardBrands.Visa */,
 };
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29uc3RhbnRzLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vc3JjL2xpYi9jb25zdGFudHMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7QUFBQSwyQ0FBK0I7QUFFL0I7Ozs7O0dBS0c7QUFFSDs7O0dBR0c7QUFDVSxRQUFBLGFBQWEsR0FBRyxLQUFLLENBQUMsT0FBTyxDQUFDO0FBRTNDOztHQUVHO0FBQ1UsUUFBQSxvQkFBb0IsR0FDN0IsT0FBTyxDQUFDLEdBQUcsQ0FBQyxvQkFBb0I7SUFDaEMsMENBQTBDLENBQUM7QUFFL0M7O0dBRUc7QUFDVSxRQUFBLG1CQUFtQixHQUM1QixPQUFPLENBQUMsR0FBRyxDQUFDLG1CQUFtQjtJQUMvQiwyQ0FBMkMsQ0FBQztBQUVoRDs7R0FFRztBQUNVLFFBQUEscUJBQXFCLEdBQThCO0lBQzVELElBQUksbURBQTBCO0lBQzlCLFlBQVksd0RBQWtDO0lBQzlDLEdBQUcsK0NBQXlCO0lBQzVCLFVBQVUsb0RBQWdDO0lBQzFDLFFBQVEsK0NBQThCO0lBQ3RDLEdBQUcscUNBQXlCO0lBQzVCLE9BQU8sNkNBQTZCO0lBQ3BDLFVBQVUsbURBQWdDO0lBQzFDLElBQUksdUNBQTBCO0NBQ2pDLENBQUMifQ==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY29uc3RhbnRzLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vc3JjL2xpYi9jb25zdGFudHMudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7QUFBQSwyQ0FBK0I7QUFFL0I7Ozs7O0dBS0c7QUFFSDs7O0dBR0c7QUFDVSxRQUFBLGFBQWEsR0FBRyxLQUFLLENBQUMsT0FBTyxDQUFDO0FBRTNDOztHQUVHO0FBQ1UsUUFBQSxvQkFBb0IsR0FDN0IsT0FBTyxPQUFPLEtBQUssUUFBUSxDQUFDLENBQUMsQ0FBQyxPQUFPLENBQUMsR0FBRyxDQUFDLG9CQUFvQixDQUFDLENBQUMsQ0FBQyxTQUFTLENBQUM7QUFFL0U7O0dBRUc7QUFDVSxRQUFBLG1CQUFtQixHQUM1QixPQUFPLE9BQU8sS0FBSyxRQUFRLENBQUMsQ0FBQyxDQUFDLE9BQU8sQ0FBQyxHQUFHLENBQUMsbUJBQW1CLENBQUMsQ0FBQyxDQUFDLFNBQVMsQ0FBQztBQUU5RTs7R0FFRztBQUNVLFFBQUEscUJBQXFCLEdBQThCO0lBQzVELElBQUksbURBQTBCO0lBQzlCLFlBQVksd0RBQWtDO0lBQzlDLEdBQUcsK0NBQXlCO0lBQzVCLFVBQVUsb0RBQWdDO0lBQzFDLFFBQVEsK0NBQThCO0lBQ3RDLEdBQUcscUNBQXlCO0lBQzVCLE9BQU8sNkNBQTZCO0lBQ3BDLFVBQVUsbURBQWdDO0lBQzFDLElBQUksdUNBQTBCO0NBQ2pDLENBQUMifQ==

package/build/lib/dom-util.d.ts

@@ -2,6 +2,5 @@ interface ScriptProperties {
     readonly onReady: () => void;
     readonly onError: () => void;
 }
-export declare const injectScript: ({ onReady, onError }: ScriptProperties) => void;
-export declare const injectStyle: () => void;
+export declare const injectScript: ({ onReady, onError }: ScriptProperties) => Promise<void>;
 export {};

package/build/lib/dom-util.js

@@ -1,31 +1,66 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.injectStyle = exports.injectScript = void 0;
-var constants_1 = require("./constants");
-var injectScript = function (_a) {
-    var onReady = _a.onReady, onError = _a.onError;
-    var script = document.createElement('script');
-    var header = document.querySelector('head');
-    script.setAttribute('type', 'text/javascript');
-    script.setAttribute('async', 'true');
-    script.setAttribute('defer', 'true');
-    script.setAttribute('src', constants_1.FRAMEPAY_SCRIPT_LINK);
-    script.setAttribute('defer', 'true');
-    script.addEventListener('load', function () { return onReady(); });
-    script.addEventListener('error', function () { return onError(); });
-    if (header) {
-        header.appendChild(script);
-    }
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
 };
-exports.injectScript = injectScript;
-var injectStyle = function () {
-    var style = document.createElement('link');
-    var header = document.querySelector('head');
-    style.setAttribute('rel', 'stylesheet');
-    style.setAttribute('href', constants_1.FRAMEPAY_STYLE_LINK);
-    if (header) {
-        header.appendChild(style);
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            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;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
     }
 };
-exports.injectStyle = injectStyle;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZG9tLXV0aWwuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi9zcmMvbGliL2RvbS11dGlsLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7OztBQUFBLHlDQUF3RTtBQU9qRSxJQUFNLFlBQVksR0FBRyxVQUFDLEVBQXNDO1FBQXBDLE9BQU8sYUFBQSxFQUFFLE9BQU8sYUFBQTtJQUMzQyxJQUFNLE1BQU0sR0FBRyxRQUFRLENBQUMsYUFBYSxDQUFDLFFBQVEsQ0FBQyxDQUFDO0lBQ2hELElBQU0sTUFBTSxHQUFHLFFBQVEsQ0FBQyxhQUFhLENBQUMsTUFBTSxDQUFDLENBQUM7SUFDOUMsTUFBTSxDQUFDLFlBQVksQ0FBQyxNQUFNLEVBQUUsaUJBQWlCLENBQUMsQ0FBQztJQUMvQyxNQUFNLENBQUMsWUFBWSxDQUFDLE9BQU8sRUFBRSxNQUFNLENBQUMsQ0FBQztJQUNyQyxNQUFNLENBQUMsWUFBWSxDQUFDLE9BQU8sRUFBRSxNQUFNLENBQUMsQ0FBQztJQUNyQyxNQUFNLENBQUMsWUFBWSxDQUFDLEtBQUssRUFBRSxnQ0FBb0IsQ0FBQyxDQUFDO0lBQ2pELE1BQU0sQ0FBQyxZQUFZLENBQUMsT0FBTyxFQUFFLE1BQU0sQ0FBQyxDQUFDO0lBQ3JDLE1BQU0sQ0FBQyxnQkFBZ0IsQ0FBQyxNQUFNLEVBQUUsY0FBTSxPQUFBLE9BQU8sRUFBRSxFQUFULENBQVMsQ0FBQyxDQUFDO0lBQ2pELE1BQU0sQ0FBQyxnQkFBZ0IsQ0FBQyxPQUFPLEVBQUUsY0FBTSxPQUFBLE9BQU8sRUFBRSxFQUFULENBQVMsQ0FBQyxDQUFDO0lBQ2xELElBQUksTUFBTSxFQUFFLENBQUM7UUFDVCxNQUFNLENBQUMsV0FBVyxDQUFDLE1BQU0sQ0FBQyxDQUFDO0lBQy9CLENBQUM7QUFDTCxDQUFDLENBQUM7QUFiVyxRQUFBLFlBQVksZ0JBYXZCO0FBRUssSUFBTSxXQUFXLEdBQUc7SUFDdkIsSUFBTSxLQUFLLEdBQUcsUUFBUSxDQUFDLGFBQWEsQ0FBQyxNQUFNLENBQUMsQ0FBQztJQUM3QyxJQUFNLE1BQU0sR0FBRyxRQUFRLENBQUMsYUFBYSxDQUFDLE1BQU0sQ0FBQyxDQUFDO0lBQzlDLEtBQUssQ0FBQyxZQUFZLENBQUMsS0FBSyxFQUFFLFlBQVksQ0FBQyxDQUFDO0lBQ3hDLEtBQUssQ0FBQyxZQUFZLENBQUMsTUFBTSxFQUFFLCtCQUFtQixDQUFDLENBQUM7SUFDaEQsSUFBSSxNQUFNLEVBQUUsQ0FBQztRQUNULE1BQU0sQ0FBQyxXQUFXLENBQUMsS0FBSyxDQUFDLENBQUM7SUFDOUIsQ0FBQztBQUNMLENBQUMsQ0FBQztBQVJXLFFBQUEsV0FBVyxlQVF0QiJ9
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.injectScript = void 0;
+var constants_1 = require("./constants");
+var framepay_1 = require("@rebilly/framepay");
+var injectScript = function (_a) { return __awaiter(void 0, [_a], void 0, function (_b) {
+    var _error_1;
+    var onReady = _b.onReady, onError = _b.onError;
+    return __generator(this, function (_c) {
+        switch (_c.label) {
+            case 0:
+                _c.trys.push([0, 2, , 3]);
+                return [4 /*yield*/, (0, framepay_1.loadFramepay)({
+                        scriptLink: constants_1.FRAMEPAY_SCRIPT_LINK,
+                        styleLink: constants_1.FRAMEPAY_STYLE_LINK,
+                    })];
+            case 1:
+                _c.sent();
+                onReady();
+                return [3 /*break*/, 3];
+            case 2:
+                _error_1 = _c.sent();
+                onError();
+                return [3 /*break*/, 3];
+            case 3: return [2 /*return*/];
+        }
+    });
+}); };
+exports.injectScript = injectScript;
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZG9tLXV0aWwuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi9zcmMvbGliL2RvbS11dGlsLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztBQUFBLHlDQUF3RTtBQUN4RSw4Q0FBaUQ7QUFPMUMsSUFBTSxZQUFZLEdBQUcsaUVBQU8sRUFBc0M7O1FBQXBDLE9BQU8sYUFBQSxFQUFFLE9BQU8sYUFBQTs7Ozs7Z0JBRTdDLHFCQUFNLElBQUEsdUJBQVksRUFBQzt3QkFDZixVQUFVLEVBQUUsZ0NBQW9CO3dCQUNoQyxTQUFTLEVBQUUsK0JBQW1CO3FCQUNqQyxDQUFDLEVBQUE7O2dCQUhGLFNBR0UsQ0FBQztnQkFDSCxPQUFPLEVBQUUsQ0FBQzs7OztnQkFFVixPQUFPLEVBQUUsQ0FBQzs7Ozs7S0FFakIsQ0FBQztBQVZXLFFBQUEsWUFBWSxnQkFVdkIifQ==

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@rebilly/framepay-react",
-    "version": "8.2.0",
+    "version": "9.0.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",
@@ -59,6 +59,7 @@
         "react-dom": "^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
     },
     "dependencies": {
+        "@rebilly/framepay": "*",
         "create-react-context": "^0.3.0"
     },
     "devDependencies": {

package/src/lib/components/provider.spec.tsx

@@ -1,49 +1,8 @@
 import { render } from '@testing-library/react';
 import * as React from 'react';
-import { FRAMEPAY_SCRIPT_LINK, FRAMEPAY_STYLE_LINK } from '../constants';
 import Provider from './provider';
 
 describe('Provider', () => {
-    it('should add the FramePay script on the page', () => {
-        const props = { publishableKey: 'pk_sandbox_1234567890' };
-
-        class ChildComponent extends React.Component {
-            render() {
-                return <div>child</div>;
-            }
-        }
-
-        expect(document.head.innerHTML).not.toContain(FRAMEPAY_SCRIPT_LINK);
-
-        render(
-            <Provider {...props}>
-                <ChildComponent />
-            </Provider>,
-        );
-        expect(document.head.innerHTML).toContain(FRAMEPAY_SCRIPT_LINK);
-    });
-
-    it('should add the FramePay styles on the page', () => {
-        const props = {
-            injectStyle: true,
-            publishableKey: 'pk_sandbox_1234567890',
-        };
-
-        class ChildComponent extends React.Component {
-            render() {
-                return <div>child</div>;
-            }
-        }
-
-        expect(document.head.innerHTML).not.toContain(FRAMEPAY_STYLE_LINK);
-        render(
-            <Provider {...props}>
-                <ChildComponent />
-            </Provider>,
-        );
-        expect(document.head.innerHTML).toContain(FRAMEPAY_STYLE_LINK);
-    });
-
     it('should render with single child component', () => {
         const props = { publishableKey: 'pk_sandbox_1234567890' };
 

package/src/lib/components/provider.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { FRAMEPAY_SCRIPT_LINK } from '../constants';
 import { ContextProvider } from '../context';
-import { injectScript, injectStyle } from '../dom-util';
+import { injectScript } from '../dom-util';
 import FramePayError from '../framepay-error';
 import getFramepayApi from '../get-framepay-api';
 
@@ -11,7 +11,6 @@ export default class Provider extends React.Component<
 > {
     static readonly defaultProps = {
         injectScript: true,
-        injectStyle: false,
         onError: () => ({}),
         onReady: () => ({}),
         onTokenReady: () => ({}),
@@ -30,9 +29,6 @@ export default class Provider extends React.Component<
                 onReady: () => this.onApiReady(),
             });
         }
-        if (this.props.injectStyle) {
-            injectStyle();
-        }
     }
 
     onApiError() {
@@ -55,7 +51,7 @@ export default class Provider extends React.Component<
         const api = getFramepayApi();
         try {
             // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            const { injectStyle, children, ...settings } = this.props;
+            const { children, ...settings } = this.props;
             api.initialize(settings);
             api.on('ready', () => {
                 this.setState({ ready: true, api, error: null });

package/src/lib/constants.ts

@@ -16,16 +16,14 @@ export const REACT_VERSION = React.version;
 /**
  * Remote FramePay library CDN link.
  */
-export const FRAMEPAY_SCRIPT_LINK: string =
-    process.env.FRAMEPAY_SCRIPT_LINK ||
-    'https://framepay.rebilly.com/framepay.js';
+export const FRAMEPAY_SCRIPT_LINK =
+    typeof process === 'object' ? process.env.FRAMEPAY_SCRIPT_LINK : undefined;
 
 /**
  * Remote FramePay style CDN link.
  */
-export const FRAMEPAY_STYLE_LINK: string =
-    process.env.FRAMEPAY_STYLE_LINK ||
-    'https://framepay.rebilly.com/framepay.css';
+export const FRAMEPAY_STYLE_LINK =
+    typeof process === 'object' ? process.env.FRAMEPAY_STYLE_LINK : undefined;
 
 /**
  * Supported FramePay card types

package/src/lib/dom-util.ts

@@ -1,31 +1,19 @@
 import { FRAMEPAY_SCRIPT_LINK, FRAMEPAY_STYLE_LINK } from './constants';
+import { loadFramepay } from '@rebilly/framepay';
 
 interface ScriptProperties {
     readonly onReady: () => void;
     readonly onError: () => void;
 }
 
-export const injectScript = ({ onReady, onError }: ScriptProperties) => {
-    const script = document.createElement('script');
-    const header = document.querySelector('head');
-    script.setAttribute('type', 'text/javascript');
-    script.setAttribute('async', 'true');
-    script.setAttribute('defer', 'true');
-    script.setAttribute('src', FRAMEPAY_SCRIPT_LINK);
-    script.setAttribute('defer', 'true');
-    script.addEventListener('load', () => onReady());
-    script.addEventListener('error', () => onError());
-    if (header) {
-        header.appendChild(script);
-    }
-};
-
-export const injectStyle = () => {
-    const style = document.createElement('link');
-    const header = document.querySelector('head');
-    style.setAttribute('rel', 'stylesheet');
-    style.setAttribute('href', FRAMEPAY_STYLE_LINK);
-    if (header) {
-        header.appendChild(style);
+export const injectScript = async ({ onReady, onError }: ScriptProperties) => {
+    try {
+        await loadFramepay({
+            scriptLink: FRAMEPAY_SCRIPT_LINK,
+            styleLink: FRAMEPAY_STYLE_LINK,
+        });
+        onReady();
+    } catch (_error) {
+        onError();
     }
 };

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

@@ -30,7 +30,6 @@ class App extends Component {
     render() {
         return (
             <FramePayProvider
-                injectStyle
                 {...params}
                 onReady={() => {
                     console.log('FramePayProvider.onReady');

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

@@ -311,7 +311,7 @@ const BankElement = withFramePayBankComponent(CardElementComponent);
 class App extends Component {
     render() {
         return (
-            <FramePayProvider injectStyle {...params}>
+            <FramePayProvider {...params}>
                 <div>
                     {ReactVersion()}
                     <BankElement />

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

@@ -364,7 +364,7 @@ const CardElement = withFramePayCardComponent(CardElementComponent);
 class App extends Component {
     render() {
         return (
-            <FramePayProvider injectStyle {...params}>
+            <FramePayProvider {...params}>
                 <div>
                     {ReactVersion()}
                     <CardElement />

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

@@ -259,7 +259,7 @@ const CardElement = withFramePayCardComponent(CardElementComponent);
 class App extends Component {
     render() {
         return (
-            <FramePayProvider injectStyle {...params}>
+            <FramePayProvider {...params}>
                 <div>
                     {ReactVersion()}
                     <CardElement />

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

@@ -316,7 +316,7 @@ const CardElement = withFramePayCardComponent(CardElementComponent);
 class App extends Component {
     render() {
         return (
-            <FramePayProvider injectStyle {...params}>
+            <FramePayProvider {...params}>
                 <div>
                     {ReactVersion()}
                     <CardElement />

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

@@ -236,7 +236,7 @@ const CardElement = withFramePayCardComponent(CardElementComponent);
 class App extends Component {
     render() {
         return (
-            <FramePayProvider injectStyle {...params}>
+            <FramePayProvider {...params}>
                 <div>
                     {ReactVersion()}
                     <CardElement />

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

@@ -30,7 +30,6 @@ class App extends Component {
     render() {
         return (
             <FramePayProvider
-                injectStyle
                 {...params}
                 onReady={() => {
                     console.log('FramePayProvider.onReady');

package/test/e2e/fixtures/iban.js

@@ -228,7 +228,7 @@ const IBANElement = withFramePayIBANComponent(IBANlementComponent);
 class App extends Component {
     render() {
         return (
-            <FramePayProvider injectStyle {...params}>
+            <FramePayProvider {...params}>
                 <div>
                     {ReactVersion()};
                     <IBANElement />

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

@@ -257,7 +257,6 @@ class App extends Component {
     render() {
         return (
             <FramePayProvider
-                injectStyle
                 {...params}
                 onTokenReady={(token) =>
                     this.deepUpdateState({ error: false, data: token })

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

@@ -451,7 +451,6 @@ class App extends Component {
     render() {
         return (
             <FramePayProvider
-                injectStyle
                 {...params}
                 onTokenReady={(token) =>
                     this.deepUpdateState({ error: false, data: token })

package/test/e2e/fixtures/paypal.js

@@ -26,7 +26,6 @@ class App extends Component {
     render() {
         return (
             <FramePayProvider
-                injectStyle
                 {...params}
                 onReady={() => {
                     console.log('FramePayProvider.onReady');

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

@@ -30,7 +30,6 @@ class App extends Component {
     render() {
         return (
             <FramePayProvider
-                injectStyle
                 {...params}
                 onReady={() => {
                     console.log('FramePayProvider.onReady');

package/types/provider.d.ts

@@ -1,6 +1,5 @@
 interface ProviderProps extends FramePaySettings {
     children?: React.ReactNode | undefined;
-    readonly injectStyle?: boolean;
     readonly injectScript?: boolean;
     readonly onReady?: () => void;
     readonly onError?: (error: object) => void;