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

package/build/@types/ApplePayButtonProps.d.ts

@@ -1,5 +1,5 @@
 import { CheckoutProfileResponse } from './checkoutProfile';
-import { Locale, Environment, ThemeMode, Edges, Scope, MerchantCapabilities, SupportedNetworks, ButtonType } from './enums';
+import { Locale, Environment, ThemeMode, Edges, Scope, MerchantCapabilities, SupportedNetworks, ButtonType, ColorStyle } from './enums';
 export interface ApplePayRequestData {
     countryCode: string;
     currencyCode: string;
@@ -29,6 +29,8 @@ export interface Interface {
     theme?: ThemeMode;
     edges?: Edges;
     type?: ButtonType;
+    colorStyle?: ColorStyle;
+    loader?: boolean;
 }
 export interface Customer {
     id?: string;

package/build/components/ActionButton/ActionButton.d.ts

@@ -11,13 +11,6 @@ interface IProps extends ButtonProps {
     bgColor?: string;
     textColor?: string;
     gradientColor?: string;
-    showDisabledButton: boolean;
-    disableButton: {
-        text: string;
-        font: string | undefined;
-        color: string;
-        backgroundColor: string;
-    };
 }
 declare function ActionButton(props: IProps): JSX.Element;
 declare namespace ActionButton {

package/build/components/ActionButton/ActionButton.js

@@ -44,14 +44,14 @@ var StyledButton = styled(Button, {
     });
 });
 export default function ActionButton(props) {
-    var children = props.children, onClick = props.onClick, disabled = props.disabled, rounded = props.rounded, bgColor = props.bgColor, textColor = props.textColor, gradientColor = props.gradientColor, disableButton = props.disableButton, showDisabledButton = props.showDisabledButton, sx = props.sx, rest = __rest(props, ["children", "onClick", "disabled", "rounded", "bgColor", "textColor", "gradientColor", "disableButton", "showDisabledButton", "sx"]);
-    var background = showDisabledButton ? disableButton.backgroundColor : rounded ? bgColor : gradientColor || bgColor;
+    var children = props.children, onClick = props.onClick, disabled = props.disabled, rounded = props.rounded, bgColor = props.bgColor, textColor = props.textColor, gradientColor = props.gradientColor, sx = props.sx, rest = __rest(props, ["children", "onClick", "disabled", "rounded", "bgColor", "textColor", "gradientColor", "sx"]);
+    var background = rounded ? bgColor : gradientColor || bgColor;
     return (_jsx(StyledButton, __assign({ "data-testid": 'ActionButton', "data-is-rounded": rounded, sx: __assign({ background: background, color: textColor, '&:hover': {
                 background: background
             }, '&:disabled': {
                 background: background,
                 color: textColor
-            } }, sx), disabled: disabled || showDisabledButton, rounded: rounded, onClick: onClick }, rest, { children: children })));
+            } }, sx), disabled: disabled, rounded: rounded, onClick: onClick }, rest, { children: children })));
 }
 ActionButton.defaultProps = {
     children: 'Pay',

package/build/components/PayButton/PayButton.d.ts

@@ -10,13 +10,6 @@ export interface PayButtonProps {
     edges?: Edges;
     titleAsset?: string;
     onClick: () => void;
-    showDisabledButton: boolean;
-    disableButton: {
-        text: string;
-        font: string | undefined;
-        color: string;
-        backgroundColor: string;
-    };
 }
 declare const _default: React.NamedExoticComponent<PayButtonProps>;
 export default _default;

package/build/components/PayButton/PayButton.js

@@ -20,7 +20,7 @@ import BlackErrorGif from '../../assets/gif/error-black.gif';
 import { StyledContainerLoader } from './style';
 import { Edges, ThemeMode } from '../../@types/enums';
 var PayButton = function (_a) {
-    var theme = _a.theme, isRounded = _a.isRounded, isFailed = _a.isFailed, isSuccess = _a.isSuccess, bgColor = _a.bgColor, gradientColor = _a.gradientColor, edges = _a.edges, titleAsset = _a.titleAsset, onClick = _a.onClick, showDisabledButton = _a.showDisabledButton, disableButton = _a.disableButton;
+    var theme = _a.theme, isRounded = _a.isRounded, isFailed = _a.isFailed, isSuccess = _a.isSuccess, bgColor = _a.bgColor, gradientColor = _a.gradientColor, edges = _a.edges, titleAsset = _a.titleAsset, onClick = _a.onClick;
     var renderButtonLabel = function () {
         if (isFailed) {
             return _jsx("img", { src: theme === ThemeMode.DARK ? BlackErrorGif : WhiteErrorGif, alt: 'error', width: 30, height: 30 });
@@ -33,7 +33,7 @@ var PayButton = function (_a) {
         }
         return _jsx("img", { src: titleAsset, alt: 'logo' });
     };
-    return (_jsx(StyledContainerLoader, __assign({ "data-testid": 'PayButton', "data-src": 'apple-pay-button-element', "data-is-rounded": isRounded, "data-is-error": isFailed, "data-is-success": isSuccess, "data-show-disabled-button": showDisabledButton, edges: edges }, { children: _jsx(ActionButton, __assign({ "data-testid": 'PayButton-ActionButton', "data-src": 'apple-pay-button-element', "data-is-error": isFailed, "data-is-success": isSuccess, "data-show-disabled-button": showDisabledButton, gradientColor: gradientColor, bgColor: bgColor, rounded: isRounded, disableButton: disableButton, showDisabledButton: showDisabledButton, onClick: onClick, style: {
+    return (_jsx(StyledContainerLoader, __assign({ "data-testid": 'PayButton', "data-src": 'apple-pay-button-element', "data-is-rounded": isRounded, "data-is-error": isFailed, "data-is-success": isSuccess, edges: edges }, { children: _jsx(ActionButton, __assign({ "data-testid": 'PayButton-ActionButton', "data-src": 'apple-pay-button-element', "data-is-error": isFailed, "data-is-success": isSuccess, gradientColor: gradientColor, bgColor: bgColor, rounded: isRounded, onClick: onClick, style: {
                 borderRadius: edges === Edges.STRAIGHT ? '0px' : '30px'
             } }, { children: renderButtonLabel() })) })));
 };

package/build/features/ApplePayButton/ApplePayButton.js

@@ -9,40 +9,24 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from 'react';
 import { createRoot } from 'react-dom/client';
 import { findOrCreateElementAndInject } from '../../utils';
 import { useApplePay } from '../../hooks/useApplePay';
-import { getDefaultValues } from '../../utils/defaultValues';
-import { ButtonStyle, Edges, ThemeMode } from '../../@types/enums';
 import InitialLoader from '../../components/InitialLoader';
 import './ApplePayButton.css';
 import { StyledContainer } from './style';
+import PayButton from '../../components/PayButton';
 var ApplePay = React.memo(function (props) {
-    var _a, _b;
-    var mappedProps = getDefaultValues(props);
-    var _c = useApplePay(mappedProps), loading = _c.loading, onApplePayButtonClicked = _c.onApplePayButtonClicked, disabled = _c.disabled, applePayRequestData = _c.applePayRequestData, applePayRequestConfiguration = _c.applePayRequestConfiguration;
-    var isIframeIntegration = props.integration === 'iframe';
-    var handleClick = function () {
-        var _a, _b;
-        if (isIframeIntegration) {
-            (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, __assign(__assign({}, applePayRequestConfiguration), { applePayRequestData: applePayRequestData }));
-            return;
-        }
-        onApplePayButtonClicked();
-        (_b = props.onClick) === null || _b === void 0 ? void 0 : _b.call(props);
-    };
+    var _a, _b, _c;
+    var _d = useApplePay({ buttonProps: props }), onClick = _d.onClick, loading = _d.loading, onApplePayButtonClicked = _d.onApplePayButtonClicked, disabled = _d.disabled, applePayRequestData = _d.applePayRequestData, isIframeIntegration = _d.isIframeIntegration, applePayRequestConfiguration = _d.applePayRequestConfiguration, mappedProps = _d.mappedProps, theme = _d.theme, isRounded = _d.isRounded, success = _d.success, error = _d.error, backgroundColor = _d.backgroundColor, gradientColor = _d.gradientColor, titleAsset = _d.titleAsset;
     React.useEffect(function () {
         if (props.debug) {
             console.log('ApplePayButtonProps', props);
         }
     }, []);
-    return (_jsx(StyledContainer, __assign({ "data-src": 'apple-pay-button-element', "data-testid": 'ApplePayButton-section' }, { children: loading ? (_jsx(InitialLoader, { open: true, themeMode: (_a = mappedProps.interface) === null || _a === void 0 ? void 0 : _a.theme, edges: (_b = mappedProps.interface) === null || _b === void 0 ? void 0 : _b.edges })) : (_jsx("button", { type: 'button', onClick: handleClick, title: 'Apple Pay Button', "data-src": 'apple-pay-button-element', "data-testid": 'ApplePayButton', disabled: loading || disabled, lang: mappedProps.interface.locale, className: 'button-applepay-tap', style: {
-                ApplePayButtonType: mappedProps.interface.type,
-                ApplePayButtonStyle: mappedProps.interface.theme === ThemeMode.DARK ? ButtonStyle.Black : ButtonStyle.White,
-                borderRadius: mappedProps.interface.edges === Edges.STRAIGHT ? '0' : '10px'
-            } })) })));
+    return (_jsx(StyledContainer, __assign({ "data-src": 'apple-pay-button-element', "data-testid": 'ApplePayButton-section' }, { children: loading ? (_jsx(InitialLoader, { open: true, themeMode: (_a = mappedProps.interface) === null || _a === void 0 ? void 0 : _a.theme, edges: (_b = mappedProps.interface) === null || _b === void 0 ? void 0 : _b.edges })) : (_jsx(_Fragment, { children: _jsx(PayButton, { "data-src": 'apple-pay-button-element', "data-testid": 'ApplePayButton', theme: theme, isRounded: isRounded, isSuccess: success, isFailed: error, bgColor: backgroundColor, gradientColor: gradientColor, titleAsset: titleAsset, edges: (_c = mappedProps.interface) === null || _c === void 0 ? void 0 : _c.edges, onClick: onClick }) })) })));
 });
 export function ApplePayButton(props) {
     return _jsx(ApplePay, __assign({}, props));

package/build/hooks/useApplePay.d.ts

@@ -1,11 +1,91 @@
-import { ApplePayButtonProps, ApplePayDataToLunchSDKFromMerchantSide, ApplePayRequestData } from '../@types';
-declare type UseApplePayProps = Omit<ApplePayButtonProps, 'buttonStyle'>;
-interface UseApplePayReturnProps {
+import { Locale, Scope } from '../@types/enums';
+import { ApplePayButtonProps, ApplePayDataToLunchSDKFromMerchantSide, ApplePayRequestData, MetaData } from '../@types';
+interface UsaApplePayProps {
+    buttonProps: ApplePayButtonProps;
+}
+export declare const useApplePay: ({ buttonProps }: UsaApplePayProps) => {
+    onClick: () => void;
     loading: boolean;
+    isIframeIntegration: boolean;
     onApplePayButtonClicked: () => Promise<void>;
     disabled: boolean;
-    applePayRequestData?: ApplePayRequestData;
-    applePayRequestConfiguration?: Omit<ApplePayDataToLunchSDKFromMerchantSide, 'applePayRequestData'>;
-}
-export declare const useApplePay: ({ environment, interface: interfaceObj, merchant, customer, acceptance, scope, debug, onError, onSuccess, onCancel, onReady, metaData, headers, operator, order, onOrderCreated, integration, transaction, post, redirect }: UseApplePayProps) => UseApplePayReturnProps;
+    applePayRequestData: ApplePayRequestData | undefined;
+    applePayRequestConfiguration: Omit<ApplePayDataToLunchSDKFromMerchantSide, "applePayRequestData"> | undefined;
+    mappedProps: {
+        interface: {
+            locale?: Locale | undefined;
+            theme?: import("../@types").ThemeMode | undefined;
+            edges?: import("../@types").Edges | undefined;
+            type?: import("../@types").ButtonType | undefined;
+            colorStyle?: import("../@types").ColorStyle | undefined;
+            loader?: boolean | undefined;
+        };
+        operator: {
+            publicKey: string;
+            hashstring?: string | undefined;
+        };
+        merchant: {
+            id: string;
+        };
+        scope: Scope;
+        environment: import("../@types").Environment;
+        customer?: import("../@types").Customer | undefined;
+        acceptance?: import("../@types").Acceptance | undefined;
+        transaction?: {
+            authentication?: boolean | undefined;
+            authorize?: {
+                auto: {
+                    type: string;
+                    time: number;
+                };
+            } | undefined;
+            metadata?: Record<string, string> | undefined;
+            reference?: string | undefined;
+            paymentAgreement?: {
+                id: string;
+                contract?: {
+                    id: string;
+                } | undefined;
+            } | undefined;
+            destinations?: Record<string, any> | undefined;
+        } | undefined;
+        invoice?: {
+            id: string;
+        } | undefined;
+        order: {
+            amount: number;
+            currency: string;
+            id?: string | undefined;
+            description?: string | undefined;
+            metadata?: Record<string, string> | undefined;
+            reference?: string | undefined;
+        };
+        post?: {
+            url: string;
+        } | undefined;
+        redirect?: {
+            url: string;
+        } | undefined;
+        onOrderCreated?: ((orderId: string) => void) | undefined;
+        onCancel?: (() => void) | undefined;
+        onError?: ((error: any) => void) | undefined;
+        onSuccess?: ((data: Record<string, any>) => void) | undefined;
+        onClick?: ((data?: ApplePayDataToLunchSDKFromMerchantSide | undefined) => void) | undefined;
+        onReady?: (() => void) | undefined;
+        metaData?: MetaData | undefined;
+        debug?: boolean | undefined;
+        integration?: "sdk" | "iframe" | undefined;
+        headers?: {
+            mdn: string;
+            application: string;
+        } | undefined;
+    };
+    theme: import("../@types").ThemeMode;
+    isRounded: boolean;
+    success: boolean;
+    error: boolean;
+    backgroundColor: string | undefined;
+    gradientColor: string | undefined;
+    titleAsset: string | undefined;
+};
 export {};

package/build/hooks/useApplePay.js

@@ -45,20 +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 { 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,
@@ -73,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;
@@ -160,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;
@@ -297,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/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

@@ -6,6 +6,8 @@ export declare const getDefaultValues: (mainObject: ApplePayButtonProps) => {
         theme?: ThemeMode | undefined;
         edges?: Edges | undefined;
         type?: ButtonType | undefined;
+        colorStyle?: import("../@types").ColorStyle | undefined;
+        loader?: boolean | undefined;
     };
     operator: {
         publicKey: string;

package/build/utils/theme.d.ts

@@ -1,2 +1,12 @@
-import { ThemeMode } from '../@types/enums';
+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

@@ -1,4 +1,18 @@
-import { ThemeMode } from '../@types/enums';
+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
@@ -6,3 +20,42 @@ export var getDefaultThemeMode = function (themeMode) {
             : 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.56-development",
+	"version": "0.0.57-development",
 	"description": "Apple Pay Button React Component",
 	"main": "build/index.js",
 	"module": "build/index.js",