@tap-payments/apple-pay-button 0.0.55-development → 0.0.57-development

package/build/hooks/useApplePay.js

@@ -45,19 +45,29 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
         if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
     }
 };
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import appService from '../api/app.service';
-import { ApplePayVersion, Scope } from '../constants';
 import { getAxiosGlobalHeaders, setAxiosGlobalHeaders } from '../api/httpClient';
+import { ApplePayVersion } from '../constants';
+import { Scope } from '../@types/enums';
 import { prepareApplePayRequest } from '../utils/config';
 import { useMerchantApplePay } from './useMerchantApplePay';
+import { getApplePayPaymentMethod, getDefaultThemeMode, getDefaultValues, getFullThemeMode } from '../utils';
 export var useApplePay = function (_a) {
-    var environment = _a.environment, interfaceObj = _a.interface, merchant = _a.merchant, customer = _a.customer, acceptance = _a.acceptance, scope = _a.scope, debug = _a.debug, onError = _a.onError, onSuccess = _a.onSuccess, onCancel = _a.onCancel, onReady = _a.onReady, metaData = _a.metaData, headers = _a.headers, operator = _a.operator, order = _a.order, onOrderCreated = _a.onOrderCreated, integration = _a.integration, transaction = _a.transaction, post = _a.post, redirect = _a.redirect;
-    var _b = useState(false), loading = _b[0], setLoading = _b[1];
-    var _c = useState(), profileData = _c[0], setProfile = _c[1];
-    var _d = useState(false), disabled = _d[0], setDisabled = _d[1];
-    var _e = useState(), applePayRequestData = _e[0], setApplePayRequestData = _e[1];
-    var _f = useState(), applePayRequestConfiguration = _f[0], setApplePayRequestConfiguration = _f[1];
+    var _b, _c, _d, _e, _f;
+    var buttonProps = _a.buttonProps;
+    var _g = useState(), applePayRequestData = _g[0], setApplePayRequestData = _g[1];
+    var _h = useState(), applePayRequestConfiguration = _h[0], setApplePayRequestConfiguration = _h[1];
+    var _j = useState(), profileData = _j[0], setProfile = _j[1];
+    var _k = useState(false), disabled = _k[0], setDisabled = _k[1];
+    var _l = useState(null), tapTheme = _l[0], setTapTheme = _l[1];
+    var _m = useState(), tapLocalization = _m[0], setTapLocalization = _m[1];
+    var _o = useState(false), error = _o[0], setError = _o[1];
+    var _p = useState(false), success = _p[0], setSuccess = _p[1];
+    var _q = useState(false), loading = _q[0], setLoading = _q[1];
+    var _r = useState(false), isRounded = _r[0], setIsRounded = _r[1];
+    var mappedProps = getDefaultValues(buttonProps);
+    var environment = mappedProps.environment, interfaceObj = mappedProps.interface, merchant = mappedProps.merchant, customer = mappedProps.customer, acceptance = mappedProps.acceptance, scope = mappedProps.scope, debug = mappedProps.debug, onError = mappedProps.onError, onSuccess = mappedProps.onSuccess, onCancel = mappedProps.onCancel, onReady = mappedProps.onReady, metaData = mappedProps.metaData, headers = mappedProps.headers, operator = mappedProps.operator, order = mappedProps.order, onOrderCreated = mappedProps.onOrderCreated, integration = mappedProps.integration, transaction = mappedProps.transaction, post = mappedProps.post, redirect = mappedProps.redirect;
     useMerchantApplePay({
         isIframeIntegration: integration === 'iframe',
         onError: onError,
@@ -72,6 +82,48 @@ export var useApplePay = function (_a) {
         post: post,
         redirect: redirect
     });
+    var lang = (_c = (_b = mappedProps.interface) === null || _b === void 0 ? void 0 : _b.locale) !== null && _c !== void 0 ? _c : 'en';
+    var theme = getDefaultThemeMode((_d = mappedProps.interface) === null || _d === void 0 ? void 0 : _d.theme);
+    var isIframeIntegration = buttonProps.integration === 'iframe';
+    var applePayPaymentMethodOptions = useMemo(function () {
+        if (!profileData)
+            return null;
+        return getApplePayPaymentMethod(profileData.payment_options.payment_methods || []);
+    }, [profileData]);
+    var gradientColor = useMemo(function () {
+        var _a, _b, _c;
+        if (!applePayPaymentMethodOptions)
+            return undefined;
+        var backgroundColor = (_a = applePayPaymentMethodOptions.button_style.background) === null || _a === void 0 ? void 0 : _a[getFullThemeMode((_b = buttonProps.interface) === null || _b === void 0 ? void 0 : _b.theme, (_c = buttonProps.interface) === null || _c === void 0 ? void 0 : _c.colorStyle)].background_colors;
+        if (backgroundColor.length > 1)
+            return "linear-gradient(-90deg,".concat(backgroundColor.join(','), ")");
+        return backgroundColor[0];
+    }, [applePayPaymentMethodOptions, buttonProps]);
+    var backgroundColor = useMemo(function () {
+        var _a, _b;
+        if (!applePayPaymentMethodOptions)
+            return undefined;
+        return applePayPaymentMethodOptions.button_style.background[getFullThemeMode((_a = buttonProps.interface) === null || _a === void 0 ? void 0 : _a.theme, (_b = buttonProps.interface) === null || _b === void 0 ? void 0 : _b.colorStyle)].base_color;
+    }, [applePayPaymentMethodOptions, buttonProps]);
+    var titleAsset = useMemo(function () {
+        var _a, _b, _c;
+        if (!applePayPaymentMethodOptions)
+            return undefined;
+        var imgSrc = (_a = profileData === null || profileData === void 0 ? void 0 : profileData.payment_options.payment_methods.find(function (method) { return method.name === applePayPaymentMethodOptions.name; })) === null || _a === void 0 ? void 0 : _a.button_style.title_asset;
+        var theme = getFullThemeMode((_b = buttonProps.interface) === null || _b === void 0 ? void 0 : _b.theme, (_c = buttonProps.interface) === null || _c === void 0 ? void 0 : _c.colorStyle);
+        var titleAsset = (imgSrc === null || imgSrc === void 0 ? void 0 : imgSrc.replace('{theme}', theme).replace('{lang}', lang)) + '.svg';
+        return titleAsset;
+    }, [
+        applePayPaymentMethodOptions,
+        lang,
+        profileData === null || profileData === void 0 ? void 0 : profileData.payment_options.payment_methods,
+        (_e = buttonProps.interface) === null || _e === void 0 ? void 0 : _e.colorStyle,
+        (_f = buttonProps.interface) === null || _f === void 0 ? void 0 : _f.theme
+    ]);
+    var showLoader = useMemo(function () {
+        var _a;
+        return ((_a = mappedProps.interface) === null || _a === void 0 ? void 0 : _a.loader) !== false;
+    }, [mappedProps]);
     var initialize = function (metaData) { return __awaiter(void 0, void 0, void 0, function () {
         var merchantProfile, payment_options, headers_1, data, err_1;
         var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
@@ -159,9 +211,6 @@ export var useApplePay = function (_a) {
             }
         });
     }); };
-    useEffect(function () {
-        initialize(metaData);
-    }, []);
     var onApplePayButtonClicked = function () { return __awaiter(void 0, void 0, void 0, function () {
         var ApplePaySession, session_1;
         var _a;
@@ -296,11 +345,43 @@ export var useApplePay = function (_a) {
             return [2];
         });
     }); };
+    var handleClick = useCallback(function () {
+        var _a, _b;
+        if (isIframeIntegration) {
+            (_a = buttonProps.onClick) === null || _a === void 0 ? void 0 : _a.call(buttonProps, __assign(__assign({}, applePayRequestConfiguration), { applePayRequestData: applePayRequestData }));
+            return;
+        }
+        onApplePayButtonClicked();
+        (_b = buttonProps.onClick) === null || _b === void 0 ? void 0 : _b.call(buttonProps);
+    }, [applePayRequestConfiguration, applePayRequestData, buttonProps, isIframeIntegration, onApplePayButtonClicked]);
+    useEffect(function () {
+        initialize(metaData);
+    }, []);
+    useEffect(function () {
+        if (!error)
+            return;
+        var timer = setTimeout(function () {
+            setError(false);
+            setLoading(false);
+            setIsRounded(false);
+        }, 2000);
+        return function () { return clearTimeout(timer); };
+    }, [error]);
     return {
+        onClick: handleClick,
         loading: loading,
+        isIframeIntegration: isIframeIntegration,
         onApplePayButtonClicked: onApplePayButtonClicked,
         disabled: !profileData || disabled || !applePayRequestData,
         applePayRequestData: applePayRequestData,
-        applePayRequestConfiguration: applePayRequestConfiguration
+        applePayRequestConfiguration: applePayRequestConfiguration,
+        mappedProps: mappedProps,
+        theme: theme,
+        isRounded: isRounded,
+        success: success,
+        error: error,
+        backgroundColor: backgroundColor,
+        gradientColor: gradientColor,
+        titleAsset: titleAsset
     };
 };

package/build/hooks/useMerchantApplePay.d.ts

@@ -1,5 +1,4 @@
-import { Scope } from '../constants';
-import { MetaData, ApplePayButtonProps } from '../@types';
+import { MetaData, ApplePayButtonProps, Scope } from '../@types';
 interface ApplePayRequestData {
     isIframeIntegration: boolean;
     onError?: (error: any) => void;

package/build/hooks/useMerchantApplePay.js

@@ -35,8 +35,8 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     }
 };
 import * as React from 'react';
-import { Scope } from '../constants';
 import appService from '../api/app.service';
+import { Scope } from '../@types';
 var EVENT_NAME = 'TAP_BUTTON::APPLE_PAY_ON_PAYMENT_AUTHORIZED';
 export var useMerchantApplePay = function (_a) {
     var isIframeIntegration = _a.isIframeIntegration, onError = _a.onError, onSuccess = _a.onSuccess, scope = _a.scope, profileData = _a.profileData, order = _a.order, customer = _a.customer, transaction = _a.transaction, operator = _a.operator, redirect = _a.redirect, post = _a.post;

package/build/hooks/useScript.d.ts

@@ -1 +1,3 @@
-export declare function useScript(src: string, async?: boolean): "error" | "loading" | "ready" | "idle";
+declare type Status = 'ready' | 'loading' | 'idle' | 'error';
+export declare function useScript(src: string, async?: boolean): Status;
+export {};

package/build/hooks/useScript.js

@@ -15,13 +15,14 @@ export function useScript(src, async) {
             script.setAttribute('data-status', 'loading');
             document.body.appendChild(script);
             var setAttributeFromEvent = function (event) {
-                script.setAttribute('data-status', event.type === 'load' ? 'ready' : 'error');
+                script === null || script === void 0 ? void 0 : script.setAttribute('data-status', event.type === 'load' ? 'ready' : 'error');
             };
             script.addEventListener('load', setAttributeFromEvent);
             script.addEventListener('error', setAttributeFromEvent);
         }
         else {
-            setStatus(script.getAttribute('data-status'));
+            var status_1 = script === null || script === void 0 ? void 0 : script.getAttribute('data-status');
+            setStatus(status_1);
         }
         var setStateFromEvent = function (event) {
             setStatus(event.type === 'load' ? 'ready' : 'error');

package/build/index.d.ts

@@ -1,4 +1,4 @@
 import { ApplePayButtonProps, ApplePayButton, ApplePayRequestData } from './features/ApplePayButton';
-import { ThemeMode, Scope, SupportedNetworks, Environment, Locale, ButtonType, Edges, MerchantCapabilities } from './constants';
+import { ThemeMode, Scope, SupportedNetworks, Environment, Locale, ButtonType, Edges, MerchantCapabilities } from './@types/enums';
 export type { ApplePayButtonProps, ApplePayRequestData };
 export { ApplePayButton, ThemeMode, Scope, SupportedNetworks, Environment, Locale, ButtonType, Edges, MerchantCapabilities };

package/build/index.js

@@ -1,5 +1,5 @@
 import { ApplePayButton, renderApplePayButton } from './features/ApplePayButton';
-import { ThemeMode, Scope, SupportedNetworks, Environment, Locale, ButtonType, Edges, MerchantCapabilities } from './constants';
+import { ThemeMode, Scope, SupportedNetworks, Environment, Locale, ButtonType, Edges, MerchantCapabilities } from './@types/enums';
 export { ApplePayButton, ThemeMode, Scope, SupportedNetworks, Environment, Locale, ButtonType, Edges, MerchantCapabilities };
 window['TapSDKs'] = {
     renderApplePayButton: renderApplePayButton,

package/build/utils/config.d.ts

@@ -1,12 +1,12 @@
 import { Acceptance, ApplePayButtonProps, ApplePayRequestData, MetaData, PaymentMethod } from '../@types';
 export declare const validateSupportedNetworks: (supportedNetworksOptions: Acceptance['supportedSchemes'], merchantSupportedNetworks?: Acceptance['supportedSchemes']) => Acceptance['supportedSchemes'];
+export declare const getApplePayPaymentMethod: (paymentMethods: Array<PaymentMethod>) => PaymentMethod;
 export declare const getApplePayRequest: ({ order, customer, supportedNetworks, merchantCapabilities, countryCode, name }: Pick<ApplePayButtonProps, "order" | "customer"> & {
     supportedNetworks: Acceptance['supportedSchemes'];
     merchantCapabilities: ApplePayRequestData['merchantCapabilities'];
     countryCode: string;
     name: string;
 }) => ApplePayRequestData;
-export declare const getApplePayPaymentMethod: (paymentMethods: Array<PaymentMethod>) => PaymentMethod;
 export declare const rsaSetup: (key: string) => (string: string) => string;
 export declare function generateApplicationHeader(obj: Record<string, string | any>): string;
 export declare const prepareApplePayRequest: ({ payment_options, merchant, order, customer, acceptance }: Pick<MetaData, 'merchant' | 'payment_options'> & Pick<ApplePayButtonProps, 'order' | 'customer' | 'acceptance'>) => ApplePayRequestData;

package/build/utils/config.js

@@ -16,6 +16,16 @@ export var validateSupportedNetworks = function (supportedNetworksOptions, merch
     }
     return supportedNetworks.map(toLowerCase);
 };
+export var getApplePayPaymentMethod = function (paymentMethods) {
+    var paymentMethod = paymentMethods.find(function (_a) {
+        var name = _a.name, payment_type = _a.payment_type;
+        return [name, payment_type].some(function (item) { return item.toLowerCase() === 'apple_pay'; });
+    });
+    if (!paymentMethod) {
+        throw new Error('apple_pay is not configured in your payment options');
+    }
+    return paymentMethod;
+};
 export var getApplePayRequest = function (_a) {
     var _b, _c, _d, _e, _f, _g, _h, _j, _k;
     var order = _a.order, customer = _a.customer, supportedNetworks = _a.supportedNetworks, merchantCapabilities = _a.merchantCapabilities, countryCode = _a.countryCode, name = _a.name;
@@ -36,16 +46,6 @@ export var getApplePayRequest = function (_a) {
         }
     };
 };
-export var getApplePayPaymentMethod = function (paymentMethods) {
-    var paymentMethod = paymentMethods.find(function (_a) {
-        var name = _a.name, payment_type = _a.payment_type;
-        return [name, payment_type].some(function (item) { return item.toLowerCase() === 'apple_pay'; });
-    });
-    if (!paymentMethod) {
-        throw new Error('Apple Pay is not configured in your payment options');
-    }
-    return paymentMethod;
-};
 export var rsaSetup = function (key) {
     var rsa = new JSEncrypt();
     rsa.setPublicKey(key);

package/build/utils/defaultValues.d.ts

@@ -1,10 +1,13 @@
 import { ApplePayButtonProps } from '../@types';
+import { ThemeMode, Locale, ButtonType, Edges, MerchantCapabilities } from '../@types/enums';
 export declare const getDefaultValues: (mainObject: ApplePayButtonProps) => {
     interface: {
-        locale?: "en" | "ar" | "dynamic" | undefined;
-        theme?: "dynamic" | "dark" | "light" | undefined;
-        edges?: "straight" | "curved" | undefined;
-        type?: "book" | "buy" | "check-out" | "pay" | "plain" | "subscribe" | undefined;
+        locale?: Locale | undefined;
+        theme?: ThemeMode | undefined;
+        edges?: Edges | undefined;
+        type?: ButtonType | undefined;
+        colorStyle?: import("../@types").ColorStyle | undefined;
+        loader?: boolean | undefined;
     };
     operator: {
         publicKey: string;
@@ -13,8 +16,8 @@ export declare const getDefaultValues: (mainObject: ApplePayButtonProps) => {
     merchant: {
         id: string;
     };
-    scope: "charge" | "authorize" | "taptoken" | "applepaytoken";
-    environment: "production" | "sandbox" | "beta" | "development" | "staging";
+    scope: import("../@types").Scope;
+    environment: import("../@types").Environment;
     customer?: import("../@types").Customer | undefined;
     acceptance?: import("../@types").Acceptance | undefined;
     transaction?: {
@@ -66,4 +69,4 @@ export declare const getDefaultValues: (mainObject: ApplePayButtonProps) => {
         application: string;
     } | undefined;
 };
-export declare const getMerchantCapabilities: (supportedCards?: Array<string>) => ("supports3DS" | "supportsCredit" | "supportsDebit")[];
+export declare const getMerchantCapabilities: (supportedCards?: Array<string>) => MerchantCapabilities[];

package/build/utils/defaultValues.js

@@ -18,7 +18,7 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     return to.concat(ar || Array.prototype.slice.call(from));
 };
-import { ThemeMode, Locale, ButtonType, Edges, MerchantCapabilities } from '../constants';
+import { ThemeMode, Locale, ButtonType, Edges, MerchantCapabilities } from '../@types/enums';
 export var getDefaultValues = function (mainObject) {
     var userThemeMode = window.matchMedia('(prefers-color-scheme: light)').matches ? ThemeMode.LIGHT : ThemeMode.DARK;
     var userLang = navigator.language.toLowerCase().includes(Locale.AR) ? Locale.AR : Locale.EN;

package/build/utils/index.d.ts

@@ -1 +1,4 @@
 export * from './html';
+export * from './theme';
+export * from './config';
+export * from './defaultValues';

package/build/utils/index.js

@@ -1 +1,4 @@
 export * from './html';
+export * from './theme';
+export * from './config';
+export * from './defaultValues';

package/build/utils/theme.d.ts

@@ -0,0 +1,12 @@
+import { TapThemeResponse } from '../@types';
+import { ColorStyle, FullThemeMode, Locale, ThemeMode } from '../@types/enums';
+import { ApplePayButtonProps } from '..';
+export declare const mappingInterface: (interfaceParam?: ApplePayButtonProps['interface']) => ApplePayButtonProps['interface'];
+export declare const getDefaultThemeMode: (themeMode?: ThemeMode) => ThemeMode;
+export declare const getDefaultLocale: (locale?: Locale) => Locale;
+export declare const getFullThemeMode: (themeMode?: ThemeMode, colorStyle?: ColorStyle) => FullThemeMode;
+export declare const appendColors: (colors: Record<string, string>) => void;
+export declare const getTapThemeValue: ({ tapTheme, value }: {
+    tapTheme: TapThemeResponse | null;
+    value?: string | undefined;
+}) => string;

package/build/utils/theme.js

@@ -0,0 +1,61 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { ColorStyle, Edges, FullThemeMode, Locale, ThemeMode } from '../@types/enums';
+export var mappingInterface = function (interfaceParam) {
+    return __assign(__assign({ edges: Edges.CURVED, colorStyle: ColorStyle.COLORED, loader: true }, interfaceParam), { locale: getDefaultLocale(interfaceParam === null || interfaceParam === void 0 ? void 0 : interfaceParam.locale), theme: getDefaultThemeMode(interfaceParam === null || interfaceParam === void 0 ? void 0 : interfaceParam.theme) });
+};
+export var getDefaultThemeMode = function (themeMode) {
+    return themeMode === ThemeMode.DYNAMIC || themeMode === undefined
+        ? window.matchMedia('(prefers-color-scheme: dark)').matches
+            ? ThemeMode.DARK
+            : ThemeMode.LIGHT
+        : themeMode;
+};
+export var getDefaultLocale = function (locale) {
+    var _a;
+    return locale === Locale.DYNAMIC || locale === undefined
+        ? (_a = window.navigator.language.split('-')) === null || _a === void 0 ? void 0 : _a[0]
+        : locale;
+};
+export var getFullThemeMode = function (themeMode, colorStyle) {
+    var themeModeValue = getDefaultThemeMode(themeMode);
+    if (themeModeValue === ThemeMode.DARK) {
+        return colorStyle === ColorStyle.MONOCHROME ? FullThemeMode.DARK : FullThemeMode.DARK_COLORED;
+    }
+    else {
+        return colorStyle === ColorStyle.MONOCHROME ? FullThemeMode.LIGHT_MONO : FullThemeMode.LIGHT;
+    }
+};
+export var appendColors = function (colors) {
+    try {
+        var root_1 = document.documentElement;
+        Object.entries(colors).forEach(function (_a) {
+            var key = _a[0], value = _a[1];
+            root_1.style.setProperty("--".concat(key), value);
+        });
+    }
+    catch (e) {
+        throw e;
+    }
+};
+export var getTapThemeValue = function (_a) {
+    var tapTheme = _a.tapTheme, value = _a.value;
+    if (!tapTheme)
+        return '';
+    if (!value)
+        return '';
+    if (value[0] === '#')
+        return value;
+    var colorsObject = tapTheme === null || tapTheme === void 0 ? void 0 : tapTheme.GlobalValues.Colors;
+    var valueFromGlobalColors = colorsObject === null || colorsObject === void 0 ? void 0 : colorsObject[value];
+    return valueFromGlobalColors !== null && valueFromGlobalColors !== void 0 ? valueFromGlobalColors : '';
+};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@tap-payments/apple-pay-button",
-	"version": "0.0.55-development",
+	"version": "0.0.57-development",
 	"description": "Apple Pay Button React Component",
 	"main": "build/index.js",
 	"module": "build/index.js",
@@ -10,15 +10,15 @@
 		"README.md"
 	],
 	"scripts": {
+		"start": "cross-env NODE_ENV=development webpack serve",
 		"prepare": "npx husky install",
 		"prettier": "prettier --list-different \"src/**/*.{md,mdx,ts,js,tsx,jsx,json}\" *.json *.js",
 		"prettier:fix": "prettier --write \"src/**/*.{ts,tsx,js,jsx,json,md,css,json}\"  *.json *.js",
 		"lint": "eslint src --color --ext .js,.jsx,.ts,.tsx,.json",
 		"lint:fix": "eslint src --ext .js,.jsx,.ts,.tsx --fix",
-		"start": "cross-env NODE_ENV=development webpack serve",
-		"build": "cross-env NODE_ENV=production webpack",
 		"copy:files": "copyfiles -u 1 src/**/*.css build/",
 		"tsc:alias": "tsc-alias -p tsconfig.json",
+		"build": "cross-env NODE_ENV=production webpack",
 		"ts:build": "rm -rf build && tsc && yarn tsc:alias && yarn copy:files",
 		"push": "npm publish --access public --tag development"
 	},
@@ -28,11 +28,24 @@
 		"email": "a.elsharkawy@tap.company"
 	},
 	"license": "ISC",
+	"dependencies": {
+		"@emotion/react": "^11.11.1",
+		"@emotion/styled": "^11.11.0",
+		"@mui/material": "^5.14.12",
+		"@tap-payments/browser-info": "^1.0.2",
+		"axios": "^1.2.2",
+		"framer-motion": "^10.16.5",
+		"jsencrypt": "^3.3.2",
+		"lottie-react": "^2.4.0",
+		"react": "^18.2.0",
+		"react-dom": "^18.2.0"
+	},
 	"devDependencies": {
 		"@babel/core": "^7.18.6",
 		"@babel/preset-env": "^7.18.6",
 		"@babel/preset-react": "^7.18.6",
 		"@babel/preset-typescript": "^7.18.6",
+		"@types/applepayjs": "^14.0.3",
 		"@types/crypto-js": "^4.1.1",
 		"@types/react": "^18.0.15",
 		"@types/react-dom": "^18.0.6",
@@ -71,13 +84,6 @@
 		"webpack-dev-server": "^4.9.3",
 		"webpack-merge": "^5.8.0"
 	},
-	"dependencies": {
-		"@tap-payments/browser-info": "^1.0.2",
-		"axios": "^1.2.2",
-		"jsencrypt": "^3.3.2",
-		"react": ">=17.0.2",
-		"react-dom": ">=17.0.2"
-	},
 	"peerDependencies": {
 		"react": ">=17.0.2",
 		"react-dom": ">=17.0.2"