@rebilly/framepay-react 4.0.5 → 5.0.0

package/build/lib/framepay-error.d.ts

@@ -1,7 +1,7 @@
 export declare const ERROR_CODES: ErrorCodes;
 export declare const defaultErrorMessages: DefaultErrorMessages;
 declare const FramePayError: {
-    ({ code, details, trace }: {
+    ({ code, details, trace, }: {
         readonly code: FramePayErrorCode;
         readonly details?: string | undefined;
         readonly trace?: any;

package/build/lib/framepay-error.js

@@ -5,7 +5,7 @@ exports.defaultErrorMessages = exports.ERROR_CODES = void 0;
 exports.ERROR_CODES = {
     elementMountError: 'element-mount-error',
     initializeError: 'initialize-error',
-    remoteScriptError: 'remote-script-error'
+    remoteScriptError: 'remote-script-error',
 };
 exports.defaultErrorMessages = (_a = {},
     _a[exports.ERROR_CODES.remoteScriptError] = "Can't load the FramePay remote script",
@@ -21,7 +21,7 @@ var ErrorBuilder = /** @class */ (function () {
             code: code,
             details: details,
             message: exports.defaultErrorMessages[code],
-            trace: trace || null
+            trace: trace || null,
         };
     };
     return ErrorBuilder;
@@ -32,9 +32,9 @@ var FramePayError = function (_a) {
     return handler.make({
         code: code,
         details: details,
-        trace: trace
+        trace: trace,
     });
 };
 FramePayError.codes = exports.ERROR_CODES;
 exports.default = FramePayError;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZnJhbWVwYXktZXJyb3IuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi9zcmMvbGliL2ZyYW1lcGF5LWVycm9yLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7QUFBYSxRQUFBLFdBQVcsR0FBRztJQUN2QixpQkFBaUIsRUFBRSxxQkFBcUI7SUFDeEMsZUFBZSxFQUFFLGtCQUFrQjtJQUNuQyxpQkFBaUIsRUFBRSxxQkFBcUI7Q0FDN0IsQ0FBQztBQUVILFFBQUEsb0JBQW9CLEdBQUcsQ0FBQTtJQUNoQyxHQUFDLG1CQUFXLENBQUMsaUJBQWlCLElBQUcsdUNBQXVDO0lBQ3hFLEdBQUMsbUJBQVcsQ0FBQyxpQkFBaUIsSUFBRyxtQ0FBbUM7SUFDcEUsR0FBQyxtQkFBVyxDQUFDLGVBQWUsSUFBRyxvUEFHMkQ7TUFDckUsQ0FBQSxDQUFDO0FBRTFCO0lBQUE7SUFzQkEsQ0FBQztJQXJCRywyQkFBSSxHQUFKLFVBQUssRUFRSjtZQVBHLElBQUksVUFBQSxFQUNKLE9BQU8sYUFBQSxFQUNQLEtBQUssV0FBQTtRQVdMLE9BQU87WUFDSCxJQUFJLE1BQUE7WUFDSixPQUFPLFNBQUE7WUFDUCxPQUFPLEVBQUUsNEJBQW9CLENBQUMsSUFBSSxDQUFDO1lBQ25DLEtBQUssRUFBRSxLQUFLLElBQUksSUFBSTtTQUN2QixDQUFDO0lBQ04sQ0FBQztJQUNMLG1CQUFDO0FBQUQsQ0FBQyxBQXRCRCxJQXNCQztBQUVELElBQU0sT0FBTyxHQUFHLElBQUksWUFBWSxFQUFFLENBQUM7QUFFbkMsSUFBTSxhQUFhLEdBQUcsVUFBQyxFQVF0QjtRQVBHLElBQUksVUFBQSxFQUNKLGVBQVksRUFBWixPQUFPLG1CQUFHLEVBQUUsS0FBQSxFQUNaLGFBQVUsRUFBVixLQUFLLG1CQUFHLEVBQUUsS0FBQTtJQU1WLE9BQUEsT0FBTyxDQUFDLElBQUksQ0FBQztRQUNULElBQUksTUFBQTtRQUNKLE9BQU8sU0FBQTtRQUNQLEtBQUssT0FBQTtLQUNSLENBQUM7QUFKRixDQUlFLENBQUM7QUFFUCxhQUFhLENBQUMsS0FBSyxHQUFHLG1CQUFXLENBQUM7QUFFbEMsa0JBQWUsYUFBYSxDQUFDIn0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZnJhbWVwYXktZXJyb3IuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi9zcmMvbGliL2ZyYW1lcGF5LWVycm9yLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7QUFBYSxRQUFBLFdBQVcsR0FBRztJQUN2QixpQkFBaUIsRUFBRSxxQkFBcUI7SUFDeEMsZUFBZSxFQUFFLGtCQUFrQjtJQUNuQyxpQkFBaUIsRUFBRSxxQkFBcUI7Q0FDN0IsQ0FBQztBQUVILFFBQUEsb0JBQW9CLEdBQUcsQ0FBQTtJQUNoQyxHQUFDLG1CQUFXLENBQUMsaUJBQWlCLElBQUcsdUNBQXVDO0lBQ3hFLEdBQUMsbUJBQVcsQ0FBQyxpQkFBaUIsSUFBRyxtQ0FBbUM7SUFDcEUsR0FBQyxtQkFBVyxDQUFDLGVBQWUsSUFBRyxvUEFHMkQ7TUFDckUsQ0FBQSxDQUFDO0FBRTFCO0lBQUE7SUF3QkEsQ0FBQztJQXZCRywyQkFBSSxHQUFKLFVBQUssRUFTSjtZQVJHLElBQUksVUFBQSxFQUNKLE9BQU8sYUFBQSxFQUNQLEtBQUssV0FBQTtRQWFMLE9BQU87WUFDSCxJQUFJLE1BQUE7WUFDSixPQUFPLFNBQUE7WUFDUCxPQUFPLEVBQUUsNEJBQW9CLENBQUMsSUFBSSxDQUFDO1lBQ25DLEtBQUssRUFBRSxLQUFLLElBQUksSUFBSTtTQUN2QixDQUFDO0lBQ04sQ0FBQztJQUNMLG1CQUFDO0FBQUQsQ0FBQyxBQXhCRCxJQXdCQztBQUVELElBQU0sT0FBTyxHQUFHLElBQUksWUFBWSxFQUFFLENBQUM7QUFFbkMsSUFBTSxhQUFhLEdBQUcsVUFBQyxFQVN0QjtRQVJHLElBQUksVUFBQSxFQUNKLGVBQVksRUFBWixPQUFPLG1CQUFHLEVBQUUsS0FBQSxFQUNaLGFBQVUsRUFBVixLQUFLLG1CQUFHLEVBQUUsS0FBQTtJQU9WLE9BQUEsT0FBTyxDQUFDLElBQUksQ0FBQztRQUNULElBQUksTUFBQTtRQUNKLE9BQU8sU0FBQTtRQUNQLEtBQUssT0FBQTtLQUNSLENBQUM7QUFKRixDQUlFLENBQUM7QUFFUCxhQUFhLENBQUMsS0FBSyxHQUFHLG1CQUFXLENBQUM7QUFFbEMsa0JBQWUsYUFBYSxDQUFDIn0=

package/build/lib/get-rebilly-api.js

@@ -4,11 +4,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
  * Just simple wrapper of remote FramePay api
  */
 var remoteApi = function () {
-    // @ts-ignore
+    // @ts-ignore todo setup typescript config correctly
     return typeof window !== 'undefined' ? window.Rebilly : undefined;
 };
 function getRebillyApi() {
     return remoteApi();
 }
 exports.default = getRebillyApi;
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZ2V0LXJlYmlsbHktYXBpLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vc3JjL2xpYi9nZXQtcmViaWxseS1hcGkudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7QUFBQTs7R0FFRztBQUNILElBQU0sU0FBUyxHQUFHO0lBQ2QsYUFBYTtJQUNiLE9BQU8sT0FBTyxNQUFNLEtBQUssV0FBVyxDQUFDLENBQUMsQ0FBQyxNQUFNLENBQUMsT0FBTyxDQUFDLENBQUMsQ0FBQyxTQUFTLENBQUM7QUFDdEUsQ0FBQyxDQUFDO0FBRUYsU0FBd0IsYUFBYTtJQUNqQyxPQUFPLFNBQVMsRUFBRSxDQUFDO0FBQ3ZCLENBQUM7QUFGRCxnQ0FFQyJ9
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZ2V0LXJlYmlsbHktYXBpLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vc3JjL2xpYi9nZXQtcmViaWxseS1hcGkudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7QUFBQTs7R0FFRztBQUNILElBQU0sU0FBUyxHQUFHO0lBQ2Qsb0RBQW9EO0lBQ3BELE9BQU8sT0FBTyxNQUFNLEtBQUssV0FBVyxDQUFDLENBQUMsQ0FBQyxNQUFNLENBQUMsT0FBTyxDQUFDLENBQUMsQ0FBQyxTQUFTLENBQUM7QUFDdEUsQ0FBQyxDQUFDO0FBRUYsU0FBd0IsYUFBYTtJQUNqQyxPQUFPLFNBQVMsRUFBRSxDQUFDO0FBQ3ZCLENBQUM7QUFGRCxnQ0FFQyJ9

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@rebilly/framepay-react",
-    "version": "4.0.5",
+    "version": "5.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",
@@ -25,8 +25,7 @@
         "LICENSE",
         "env.js",
         "tsconfig.json",
-        "tsconfig.spec.json",
-        "tslint.json"
+        "tsconfig.spec.json"
     ],
     "scripts": {
         "set-react-14": "cross-env REACT_VERSION=0.14.0 node ./test/e2e/switch-react-version",
@@ -41,10 +40,8 @@
         "dev:e2e": "cross-env NODE_ENV=development && run-s dotenv && parcel ./test/e2e/fixtures/* --no-cache --out-dir test/e2e/build",
         "serve:e2e": "run-s dotenv build:* && node test/e2e/local-server.mjs",
         "serve:e2e:no-build": "node test/e2e/local-server.mjs",
-        "fix": "run-s fix:*",
-        "fix:prettier": "prettier \"src/**/*.ts\" \"src/**/*.tsx\" \"test/**/*.ts\" \"test/**/*.tsx\" \"./*.json\" --write",
-        "fix:tslint": "tslint --fix --project .",
-        "lint:no-fix": "tslint --project . && prettier \"src/**/*.ts\" \"src/**/*.tsx\" \"test/**/*.ts\" \"test/**/*.tsx\" \"./*.json\" --list-different",
+        "lint": "eslint --ext .ts,.js,.tsx --max-warnings 0 src test --fix",
+        "lint:no-fix": "yarn lint --no-fix",
         "test:unit": "jest --config ./test/unit/jest.config.js",
         "test:e2e:base": "START_SERVER_AND_TEST_INSECURE=1 start-server-and-test serve:e2e:no-build https-get://localhost:8000 test:e2e:run",
         "test:e2e:react-14": "cross-env REACT_VERSION=0.14.0 run-s set-react-14 dotenv build:e2e clean-react-alias test:e2e:base",
@@ -68,6 +65,7 @@
     },
     "devDependencies": {
         "@fluffy-spoon/substitute": "^1.89.0",
+        "@rebilly/eslint-config": "*",
         "@small-tech/auto-encrypt-localhost": "^8.3.2",
         "@testing-library/cypress": "^9.0.0",
         "@testing-library/jest-dom": "^5.17.0",
@@ -79,32 +77,23 @@
         "cypress": "^12.17.4",
         "cypress-iframe": "^1.0.1",
         "dotenv": "^16.0.3",
+        "eslint-plugin-react": "^7.33.2",
         "express": "^4.17.3",
         "jest": "^29.5.0",
         "jest-environment-jsdom": "^29.5.0",
         "npm-run-all": "^4.1.5",
         "parcel-bundler": "^1.12.5",
         "portfinder": "^1.0.20",
-        "prettier": "^2.8.8",
         "prop-types": "^15.0.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
-        "start-server-and-test": "^2.0.0",
+        "start-server-and-test": "^2.0.1",
         "ts-jest": "^29.1.1",
-        "tslint": "^5.11.0",
-        "tslint-config-prettier": "^1.17.0",
-        "tslint-immutable": "^6.0.1",
         "typescript": "4.5.5"
     },
-    "prettier": {
-        "singleQuote": true,
-        "trailingComma": "none",
-        "arrowParens": "avoid"
-    },
     "resolutions": {
         "yargs-parser": "^13.1.2",
         "dot-prop": "^4.2.1",
-        "node-notifier": "^8.0.1",
         "glob-parent": "^5.1.2",
         "trim-newlines": "^4.0.2",
         "node-forge": "^1.0.0",

package/src/index.spec.ts

@@ -9,7 +9,7 @@ const exportKeys: ReadonlyArray<string> = [
     'withFramePayBankComponent',
     'withFramePayGooglePayComponent',
     'withFramePayIBANComponent',
-    'withFramePayPaypalComponent'
+    'withFramePayPaypalComponent',
 ].sort();
 
 describe('lib/index', () => {

package/src/index.ts

@@ -7,7 +7,7 @@ import {
     withFramePayCardComponent,
     withFramePayGooglePayComponent,
     withFramePayIBANComponent,
-    withFramePayPaypalComponent
+    withFramePayPaypalComponent,
 } from './lib/components/injector';
 
 import FramePayProvider from './lib/components/provider';
@@ -19,7 +19,7 @@ import {
     FramePayComponentProps,
     FramePayGooglePayProps,
     FramePayIBANProps,
-    FramePayPaypalProps
+    FramePayPaypalProps,
 } from '../types/injector';
 
 export {
@@ -38,5 +38,5 @@ export {
     FramePayIBANProps,
     FramePayApplePayProps,
     FramePayGooglePayProps,
-    FramePayPaypalProps
+    FramePayPaypalProps,
 };

package/src/lib/components/elements/applepay-element.tsx

@@ -15,7 +15,7 @@ export default class ApplePayElement extends BaseElement<
             if (!this.elementNode) {
                 throw FramePayError({
                     code: FramePayError.codes.elementMountError,
-                    details: `ApplePayElement invalid elementNode`
+                    details: `ApplePayElement invalid elementNode`,
                 });
             }
 
@@ -25,7 +25,7 @@ export default class ApplePayElement extends BaseElement<
                 throw FramePayError({
                     code: FramePayError.codes.elementMountError,
                     details: `ApplePayElement error in remote api call`,
-                    trace: e
+                    trace: e,
                 });
             }
         };

package/src/lib/components/elements/bank-element.spec.tsx

@@ -10,7 +10,7 @@ describe('BankElement', () => {
 
         const setupElementSpy = jest.spyOn(
             BankElement.prototype,
-            'setupElement'
+            'setupElement',
         );
 
         render(
@@ -19,10 +19,10 @@ describe('BankElement', () => {
                 Rebilly={{
                     ...props.Rebilly,
                     bankAccount: props.Rebilly.bankAccount,
-                    ready: false
+                    ready: false,
                 }}
                 elementType="bankRoutingNumber"
-            />
+            />,
         );
 
         expect(setupElementSpy).not.toHaveBeenCalled();
@@ -33,7 +33,7 @@ describe('BankElement', () => {
 
         const setupElementSpy = jest.spyOn(
             BankElement.prototype,
-            'setupElement'
+            'setupElement',
         );
 
         render(
@@ -42,16 +42,16 @@ describe('BankElement', () => {
                 Rebilly={{
                     ...props.Rebilly,
                     bankAccount: props.Rebilly.bankAccount,
-                    ready: true
+                    ready: true,
                 }}
                 elementType="bankAccountType"
-            />
+            />,
         );
 
         expect(setupElementSpy).toHaveBeenCalled();
     });
 
-    it('should destroy the element on component unmount', done => {
+    it('should destroy the element on component unmount', (done) => {
         const props = Substitute.for<BankProps>();
         const element = Substitute.for<PaymentElement>();
 
@@ -69,7 +69,7 @@ describe('BankElement', () => {
                         Rebilly={{
                             ...props.Rebilly,
                             bankAccount: props.Rebilly.bankAccount,
-                            ready: true
+                            ready: true,
                         }}
                         elementType="bankRoutingNumber"
                     />
@@ -87,7 +87,7 @@ describe('BankElement', () => {
         props.Rebilly.ready.returns(true);
 
         const { container } = render(
-            <BankElement {...props} Rebilly={props.Rebilly} />
+            <BankElement {...props} Rebilly={props.Rebilly} />,
         );
         expect(container.firstChild).toMatchInlineSnapshot(`<div />`);
     });
@@ -103,12 +103,12 @@ describe('BankElement', () => {
                         ...props.Rebilly,
                         bankAccount: {
                             ...props.Rebilly.bankAccount,
-                            mount: null
+                            mount: null,
                         },
-                        ready: true
+                        ready: true,
                     }}
                     elementType="bankAccountNumber"
-                />
+                />,
             );
             // never
             expect(true).toEqual(false);

package/src/lib/components/elements/bank-element.tsx

@@ -14,14 +14,14 @@ export default class BankElement extends BaseElement<BankProps, BankState> {
                     code: FramePayError.codes.elementMountError,
                     details: `BankElement invalid elementNode, elementType: ${
                         elementType || 'default'
-                    }`
+                    }`,
                 });
             }
 
             try {
                 return this.props.Rebilly.bankAccount.mount(
                     this.elementNode,
-                    elementType
+                    elementType,
                 );
             } catch (e) {
                 throw FramePayError({
@@ -29,7 +29,7 @@ export default class BankElement extends BaseElement<BankProps, BankState> {
                     details: `BankElement error in remote api call, elementType: ${
                         elementType || 'default'
                     }`,
-                    trace: e
+                    trace: e,
                 });
             }
         };
@@ -70,7 +70,7 @@ export default class BankElement extends BaseElement<BankProps, BankState> {
                 details: `BankElement events binding error, elementType: ${
                     elementType || 'default'
                 }`,
-                trace: e
+                trace: e,
             });
         }
     }

package/src/lib/components/elements/base-element.tsx

@@ -2,24 +2,20 @@ import * as React from 'react';
 
 export default class BaseElement<
     T extends PaymentComponentProps,
-    S extends PaymentComponentState
+    S extends PaymentComponentState,
 > extends React.Component<T, S> {
     readonly state = {
         element: null,
         mounted: false,
-        ready: false
+        ready: false,
     } as S;
 
-    /* tslint:disable:readonly-keyword */
     protected elementNode: HTMLDivElement | null = null;
 
-    /* tslint:enable:readonly-keyword */
-
     componentWillUnmount() {
         if (this.state.mounted && !this.state.element) {
-            // tslint:disable-next-line:no-console
             console.log(
-                `WARNING Element does not exist, please fix the setupElement method and add setState({element})`
+                `WARNING Element does not exist, please fix the setupElement method and add setState({element})`,
             );
             return;
         }
@@ -58,34 +54,38 @@ export default class BaseElement<
         /**
          * Setup field
          */
-        // @ts-ignore
+        // @ts-ignore todo fix type issue
+        // eslint-disable-next-line react/no-direct-mutation-state
         this.state.mounted = true;
         this.setupElement();
     }
 
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     shouldComponentUpdate(nextProps: any, nextState: any) {
         // we can't use the componentDidUpdate, componentWillReceiveProps methods
         // also, we can't return true here (to avoid the dom element re-render)
         // so, in that case we had to use that method as componentDidUpdate or componentWillReceiveProps
         // with some magic
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const rules: ReadonlyArray<any> = [
-            // @ts-ignore
+            // @ts-ignore todo fix typing issues
             [this.props.Rebilly.ready, nextProps.Rebilly.ready],
-            // @ts-ignore
+            // @ts-ignore todo fix typing issues
             [this.state.mounted, nextState.mounted],
-            // @ts-ignore
+            // @ts-ignore todo fix typing issues
             [this.state.ready, nextState.ready],
-            // @ts-ignore
-            [!!this.state.element, !!nextState.element]
+            // @ts-ignore todo fix typing issues
+            [!!this.state.element, !!nextState.element],
         ];
 
         const shouldUpdate = rules.find(([prev, next]) => prev !== next);
 
         if (shouldUpdate) {
-            // @ts-ignore
+            // @ts-ignore todo fix typing issues
             this.props = nextProps;
             this.handleSetupElement();
-            // @ts-ignore
+            // @ts-ignore todo fix typing issues
+            // eslint-disable-next-line react/no-direct-mutation-state
             this.state = { ...nextState };
         }
 
@@ -94,7 +94,7 @@ export default class BaseElement<
 
     render() {
         return (
-            <div id={this.props.id} ref={node => (this.elementNode = node)} />
+            <div id={this.props.id} ref={(node) => (this.elementNode = node)} />
         );
     }
 }

package/src/lib/components/elements/card-element.spec.tsx

@@ -12,7 +12,7 @@ describe('CardElement', () => {
 
         const setupElementSpy = jest.spyOn(
             CardElement.prototype,
-            'setupElement'
+            'setupElement',
         );
 
         render(<CardElement {...props} Rebilly={props.Rebilly} />);
@@ -24,15 +24,15 @@ describe('CardElement', () => {
         const props = Substitute.for<CardProps>();
         const setupElementSpy = jest.spyOn(
             CardElement.prototype,
-            'setupElement'
+            'setupElement',
         );
 
         const { rerender } = render(
             <CardElement
                 Rebilly={{
-                    ready: false
+                    ready: false,
                 }}
-            />
+            />,
         );
 
         expect(setupElementSpy).toHaveBeenCalledTimes(0);
@@ -41,9 +41,9 @@ describe('CardElement', () => {
             <CardElement
                 Rebilly={{
                     card: props.Rebilly.card,
-                    ready: true
+                    ready: true,
                 }}
-            />
+            />,
         );
 
         expect(setupElementSpy).toHaveBeenCalledTimes(1);
@@ -52,12 +52,12 @@ describe('CardElement', () => {
     it('should render the empty div element', () => {
         const props = Substitute.for<CardProps>();
         const { container } = render(
-            <CardElement {...props} Rebilly={props.Rebilly} />
+            <CardElement {...props} Rebilly={props.Rebilly} />,
         );
         expect(container.firstChild).toMatchInlineSnapshot(`<div />`);
     });
 
-    it('should destroy the element on component unmount', done => {
+    it('should destroy the element on component unmount', (done) => {
         const props = Substitute.for<CardProps>();
         const element = Substitute.for<PaymentElement>();
 
@@ -74,9 +74,9 @@ describe('CardElement', () => {
                             ...props.Rebilly,
                             card: {
                                 ...props.Rebilly.card,
-                                mount: () => element
+                                mount: () => element,
                             },
-                            ready: true
+                            ready: true,
                         }}
                     />
                 );
@@ -98,11 +98,11 @@ describe('CardElement', () => {
                         ...props.Rebilly,
                         card: {
                             ...props.Rebilly.card,
-                            mount: null
+                            mount: null,
                         },
-                        ready: true
+                        ready: true,
                     }}
-                />
+                />,
             );
             // never
             expect(true).toEqual(false);

package/src/lib/components/elements/card-element.tsx

@@ -14,14 +14,14 @@ export default class CardElement extends BaseElement<CardProps, CardState> {
                     code: FramePayError.codes.elementMountError,
                     details: `CardElement invalid elementNode, elementType: ${
                         elementType || 'default'
-                    }`
+                    }`,
                 });
             }
 
             try {
                 return this.props.Rebilly.card.mount(
                     this.elementNode,
-                    elementType
+                    elementType,
                 );
             } catch (e) {
                 throw FramePayError({
@@ -29,7 +29,7 @@ export default class CardElement extends BaseElement<CardProps, CardState> {
                     details: `CardElement error in remote api call, elementType: ${
                         elementType || 'default'
                     }`,
-                    trace: e
+                    trace: e,
                 });
             }
         };
@@ -69,7 +69,7 @@ export default class CardElement extends BaseElement<CardProps, CardState> {
                 details: `CardElement events binding error, elementType: ${
                     elementType || 'default'
                 }`,
-                trace: e
+                trace: e,
             });
         }
     }

package/src/lib/components/elements/googlepay-element.tsx

@@ -15,7 +15,7 @@ export default class GooglePayElement extends BaseElement<
             if (!this.elementNode) {
                 throw FramePayError({
                     code: FramePayError.codes.elementMountError,
-                    details: `GooglePayElement invalid elementNode`
+                    details: `GooglePayElement invalid elementNode`,
                 });
             }
 
@@ -25,7 +25,7 @@ export default class GooglePayElement extends BaseElement<
                 throw FramePayError({
                     code: FramePayError.codes.elementMountError,
                     details: `GooglePayElement error in remote api call`,
-                    trace: e
+                    trace: e,
                 });
             }
         };

package/src/lib/components/elements/iban-element.spec.tsx

@@ -23,7 +23,7 @@ describe('IBANElement', () => {
         props.Rebilly.ready.returns(false);
 
         const { rerender } = render(
-            <IBANElement {...props} Rebilly={props.Rebilly} />
+            <IBANElement {...props} Rebilly={props.Rebilly} />,
         );
 
         expect(spy).toHaveBeenCalledTimes(0);
@@ -34,7 +34,7 @@ describe('IBANElement', () => {
             <IBANElement
                 {...nextProps}
                 Rebilly={{ iban: nextProps.Rebilly.iban, ready: true }}
-            />
+            />,
         );
 
         expect(spy).toHaveBeenCalledTimes(1);
@@ -43,12 +43,12 @@ describe('IBANElement', () => {
     it('should render the empty div element', () => {
         const props = Substitute.for<IBANProps>();
         const { container } = render(
-            <IBANElement {...props} Rebilly={props.Rebilly} />
+            <IBANElement {...props} Rebilly={props.Rebilly} />,
         );
         expect(container.firstChild).toMatchInlineSnapshot(`<div />`);
     });
 
-    it('should destroy the element on component unmount', done => {
+    it('should destroy the element on component unmount', (done) => {
         const props = Substitute.for<IBANProps>();
         const element = Substitute.for<PaymentElement>();
 
@@ -65,9 +65,9 @@ describe('IBANElement', () => {
                             ...props.Rebilly,
                             iban: {
                                 ...props.Rebilly.iban,
-                                mount: () => element
+                                mount: () => element,
                             },
-                            ready: true
+                            ready: true,
                         }}
                     />
                 );
@@ -89,11 +89,11 @@ describe('IBANElement', () => {
                         ...props.Rebilly,
                         iban: {
                             ...props.Rebilly.iban,
-                            mount: null
+                            mount: null,
                         },
-                        ready: true
+                        ready: true,
                     }}
-                />
+                />,
             );
             // never
             expect(true).toEqual(false);

package/src/lib/components/elements/iban-element.tsx

@@ -14,7 +14,7 @@ export default class IBANElement extends BaseElement<IBANProps, IBANState> {
                     code: FramePayError.codes.elementMountError,
                     details: `IBANElement invalid elementNode, elementType: ${
                         elementType || 'default'
-                    }`
+                    }`,
                 });
             }
 
@@ -26,7 +26,7 @@ export default class IBANElement extends BaseElement<IBANProps, IBANState> {
                     details: `IBANElement error in remote api call, elementType: ${
                         elementType || 'default'
                     }`,
-                    trace: e
+                    trace: e,
                 });
             }
         };
@@ -67,12 +67,12 @@ export default class IBANElement extends BaseElement<IBANProps, IBANState> {
                 details: `IBANElement events binding error, elementType: ${
                     elementType || 'default'
                 }`,
-                trace: e
+                trace: e,
             });
         }
     }
 
     render() {
-        return <div ref={node => (this.elementNode = node)} />;
+        return <div ref={(node) => (this.elementNode = node)} />;
     }
 }

package/src/lib/components/elements/paypal-element.tsx

@@ -15,7 +15,7 @@ export default class PaypalElement extends BaseElement<
             if (!this.elementNode) {
                 throw FramePayError({
                     code: FramePayError.codes.elementMountError,
-                    details: `PaypalElement invalid elementNode`
+                    details: `PaypalElement invalid elementNode`,
                 });
             }
 
@@ -25,7 +25,7 @@ export default class PaypalElement extends BaseElement<
                 throw FramePayError({
                     code: FramePayError.codes.elementMountError,
                     details: `PaypalElement error in remote api call`,
-                    trace: e
+                    trace: e,
                 });
             }
         };