@tap-payments/apple-pay-button 0.0.56-development → 0.0.58-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,15 @@ 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 })));
+                color: textColor,
+                pointerEvents: 'none'
+            } }, sx), disabled: disabled, rounded: rounded, onClick: onClick }, rest, { children: children })));
 }
 ActionButton.defaultProps = {
     children: 'Pay',

package/build/components/InitialLoader/InitialLoader.js

@@ -11,19 +11,16 @@ var StyledLottie = styled(Lottie, {
     return ({
         border: 'none',
         width: '100%',
-        borderRadius: edges === Edges.STRAIGHT ? '0' : '10px',
+        borderRadius: edges === Edges.STRAIGHT ? '0px' : '30px',
         overflow: 'hidden',
         height: '48px',
         maxWidth: '360px',
-        minWidth: '170px',
-        '& svg': {
-            width: '100%'
-        }
+        minWidth: '170px'
     });
 });
 export default function InitialLoader(_a) {
     var open = _a.open, themeMode = _a.themeMode, edges = _a.edges;
     if (!open)
         return null;
-    return (_jsx(StyledLottie, { animationData: themeMode === ThemeMode.DARK ? DarkLoader : LightLoader, edges: edges, loop: true }));
+    return (_jsx(StyledLottie, { "data-testid": 'InitialLoader-StyledLottie', animationData: themeMode === ThemeMode.DARK ? DarkLoader : LightLoader, edges: edges, loop: true }));
 }

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

@@ -5,18 +5,12 @@ export interface PayButtonProps {
     isRounded?: boolean;
     isFailed?: boolean;
     isSuccess?: boolean;
+    disabled?: boolean;
     bgColor?: string;
     gradientColor?: string;
     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, disabled = _a.disabled, 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, disabled: disabled, style: {
                 borderRadius: edges === Edges.STRAIGHT ? '0px' : '30px'
             } }, { children: renderButtonLabel() })) })));
 };

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

@@ -3,9 +3,3 @@ import { Edges } from '../../@types';
 export declare const StyledContainerLoader: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
     edges?: Edges | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {}>;
-export declare const DisabledButton: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
-    edges?: Edges | undefined;
-    backgroundColor?: string | undefined;
-    color?: string | undefined;
-    font?: string | undefined;
-}, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;

package/build/components/PayButton/style.js

@@ -17,25 +17,3 @@ export var StyledContainerLoader = styled('section', {
         overflow: 'hidden'
     });
 });
-export var DisabledButton = styled('button', {
-    shouldForwardProp: function (prop) { return !['edges', 'backgroundColor', 'color', 'font'].includes(prop); }
-})(function (_a) {
-    var edges = _a.edges, backgroundColor = _a.backgroundColor, color = _a.color, font = _a.font;
-    return ({
-        border: 'none',
-        width: 'calc(100% - 16px)',
-        borderRadius: edges === Edges.STRAIGHT ? '0px' : '30px',
-        overflow: 'hidden',
-        height: '48px',
-        color: color,
-        backgroundColor: backgroundColor,
-        maxWidth: '360px',
-        minWidth: '170px',
-        pointerEvents: 'none',
-        cursor: 'not-allowed',
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-        font: font
-    });
-});

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, _d;
+    var _e = useApplePay({ buttonProps: props }), onClick = _e.onClick, loading = _e.loading, onApplePayButtonClicked = _e.onApplePayButtonClicked, disabled = _e.disabled, applePayRequestData = _e.applePayRequestData, isIframeIntegration = _e.isIframeIntegration, applePayRequestConfiguration = _e.applePayRequestConfiguration, mappedProps = _e.mappedProps, theme = _e.theme, isRounded = _e.isRounded, success = _e.success, error = _e.error, backgroundColor = _e.backgroundColor, gradientColor = _e.gradientColor, titleAsset = _e.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', edges: (_a = mappedProps.interface) === null || _a === void 0 ? void 0 : _a.edges }, { children: loading ? (_jsx(InitialLoader, { open: true, themeMode: (_b = mappedProps.interface) === null || _b === void 0 ? void 0 : _b.theme, edges: (_c = mappedProps.interface) === null || _c === void 0 ? void 0 : _c.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: (_d = mappedProps.interface) === null || _d === void 0 ? void 0 : _d.edges, disabled: disabled, onClick: onClick }) })) })));
 });
 export function ApplePayButton(props) {
     return _jsx(ApplePay, __assign({}, props));

package/build/features/ApplePayButton/style.d.ts

@@ -1,2 +1,5 @@
 /// <reference types="react" />
-export declare const StyledContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {}>;
+import { Edges } from '../../@types';
+export declare const StyledContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+    edges?: Edges | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, {}>;

package/build/features/ApplePayButton/style.js

@@ -1,12 +1,20 @@
 import { styled } from '@mui/material';
-export var StyledContainer = styled('section')(function () { return ({
-    width: '100%',
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-    flexDirection: 'column',
-    margin: '0 auto',
-    height: '48px',
-    maxWidth: '360px',
-    minWidth: '170px'
-}); });
+import { Edges } from '../../@types';
+export var StyledContainer = styled('section', {
+    shouldForwardProp: function (prop) { return !['edges'].includes(prop); }
+})(function (_a) {
+    var edges = _a.edges;
+    return ({
+        width: '100%',
+        display: 'flex',
+        borderRadius: edges === Edges.STRAIGHT ? '0px' : '30px',
+        overflow: 'hidden',
+        justifyContent: 'center',
+        alignItems: 'center',
+        flexDirection: 'column',
+        margin: '0 auto',
+        height: '48px',
+        maxWidth: '360px',
+        minWidth: '170px'
+    });
+});

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,22 +45,32 @@ 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;
+    var isIframeIntegration = buttonProps.integration === 'iframe';
     useMerchantApplePay({
-        isIframeIntegration: integration === 'iframe',
+        isIframeIntegration: isIframeIntegration,
         onError: onError,
         onSuccess: onSuccess,
         scope: scope,
@@ -71,8 +81,52 @@ export var useApplePay = function (_a) {
         transaction: transaction,
         operator: operator,
         post: post,
-        redirect: redirect
+        redirect: redirect,
+        setError: setError,
+        setSuccess: setSuccess,
+        setIsRounded: setIsRounded
     });
+    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 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 +214,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;
@@ -197,7 +248,7 @@ export var useApplePay = function (_a) {
                                     console.info('Creating merchant session and validating merchant session');
                                     console.info('onvalidatemerchant event', event);
                                 }
-                                setLoading(true);
+                                setDisabled(true);
                                 _a.label = 1;
                             case 1:
                                 _a.trys.push([1, 3, , 4]);
@@ -219,7 +270,7 @@ export var useApplePay = function (_a) {
                                 session_1.completePayment({ status: ApplePaySession.STATUS_FAILURE });
                                 throw error_1;
                             case 4:
-                                setLoading(false);
+                                setDisabled(false);
                                 return [2];
                         }
                     });
@@ -235,6 +286,7 @@ export var useApplePay = function (_a) {
                                 _b.label = 1;
                             case 1:
                                 _b.trys.push([1, 7, 8, 9]);
+                                setIsRounded === null || setIsRounded === void 0 ? void 0 : setIsRounded(true);
                                 _a = scope;
                                 switch (_a) {
                                     case Scope.APPLE_PAY_TOKEN: return [3, 2];
@@ -248,6 +300,7 @@ export var useApplePay = function (_a) {
                             case 3: return [4, appService.tapTokenization(event.payment.token.paymentData)];
                             case 4:
                                 data = _b.sent();
+                                setSuccess === null || setSuccess === void 0 ? void 0 : setSuccess(true);
                                 onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess(data);
                                 session_1.completePayment({ status: ApplePaySession.STATUS_SUCCESS });
                                 return [3, 6];
@@ -261,10 +314,12 @@ export var useApplePay = function (_a) {
                                 error_2 = _b.sent();
                                 if (debug)
                                     console.error('error in onpaymentauthorized', error_2);
+                                setError(true);
                                 session_1.completePayment({ status: ApplePaySession.STATUS_FAILURE });
                                 throw error_2;
                             case 8:
                                 setLoading(false);
+                                setIsRounded === null || setIsRounded === void 0 ? void 0 : setIsRounded(false);
                                 return [7];
                             case 9: return [2];
                         }
@@ -297,11 +352,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

@@ -3,6 +3,9 @@ interface ApplePayRequestData {
     isIframeIntegration: boolean;
     onError?: (error: any) => void;
     onSuccess?: (data: Record<string, any>) => void;
+    setIsRounded?: (loading: boolean) => void;
+    setSuccess?: (success: boolean) => void;
+    setError?: (error: boolean) => void;
     scope: typeof Scope[keyof typeof Scope];
     profileData?: Pick<MetaData, 'merchant' | 'payment_options'>;
     merchant: Pick<MetaData['merchant'], 'id'>;
@@ -13,5 +16,5 @@ interface ApplePayRequestData {
     redirect?: ApplePayButtonProps['redirect'];
     post?: ApplePayButtonProps['post'];
 }
-export declare const useMerchantApplePay: ({ isIframeIntegration, onError, onSuccess, scope, profileData, order, customer, transaction, operator, redirect, post }: ApplePayRequestData) => void;
+export declare const useMerchantApplePay: ({ isIframeIntegration, onError, onSuccess, merchant, setIsRounded, setError, setSuccess, scope, profileData, order, customer, transaction, operator, redirect, post }: ApplePayRequestData) => void;
 export {};

package/build/hooks/useMerchantApplePay.js

@@ -36,14 +36,14 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
 };
 import * as React from 'react';
 import appService from '../api/app.service';
-import { Scope } from '../@types';
+import { Scope, CHARGE_CODE } 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;
+    var isIframeIntegration = _a.isIframeIntegration, onError = _a.onError, onSuccess = _a.onSuccess, merchant = _a.merchant, setIsRounded = _a.setIsRounded, setError = _a.setError, setSuccess = _a.setSuccess, scope = _a.scope, profileData = _a.profileData, order = _a.order, customer = _a.customer, transaction = _a.transaction, operator = _a.operator, redirect = _a.redirect, post = _a.post;
     var onMessageReceived = React.useCallback(function (_a) {
         var message = _a.data;
         return __awaiter(void 0, void 0, void 0, function () {
-            var _b, event, data, _c, response, tokenId, supportCurrency, transactionRequest, transactionResponse, _d, e_1;
+            var _b, event, data, _c, response, tokenId, supportCurrency, transactionRequest, transactionResponse, _d, successState, e_1;
             var _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
             return __generator(this, function (_w) {
                 switch (_w.label) {
@@ -65,12 +65,17 @@ export var useMerchantApplePay = function (_a) {
                     case 2:
                         onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess(data);
                         return [3, 12];
-                    case 3: return [4, appService.tapTokenization(data)];
+                    case 3:
+                        setIsRounded === null || setIsRounded === void 0 ? void 0 : setIsRounded(true);
+                        return [4, appService.tapTokenization(data)];
                     case 4:
                         response = _w.sent();
+                        setSuccess === null || setSuccess === void 0 ? void 0 : setSuccess(true);
                         onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess(response);
                         return [3, 12];
-                    case 5: return [4, appService.tapTokenization(data)];
+                    case 5:
+                        setIsRounded === null || setIsRounded === void 0 ? void 0 : setIsRounded(true);
+                        return [4, appService.tapTokenization(data)];
                     case 6:
                         tokenId = (_w.sent()).id;
                         supportCurrency = ((_f = (_e = profileData === null || profileData === void 0 ? void 0 : profileData.payment_options) === null || _e === void 0 ? void 0 : _e.supported_currencies) !== null && _f !== void 0 ? _f : [])[0];
@@ -122,6 +127,13 @@ export var useMerchantApplePay = function (_a) {
                         _w.label = 10;
                     case 10:
                         transactionResponse = _d;
+                        successState = scope === Scope.AUTHORIZE ? CHARGE_CODE.AUTHORIZED : CHARGE_CODE.SUCCESS;
+                        if ((transactionResponse === null || transactionResponse === void 0 ? void 0 : transactionResponse.response.code) === successState) {
+                            setSuccess === null || setSuccess === void 0 ? void 0 : setSuccess(true);
+                        }
+                        else {
+                            setError === null || setError === void 0 ? void 0 : setError(true);
+                        }
                         onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess(transactionResponse);
                         return [3, 12];
                     case 11:

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.58-development",
 	"description": "Apple Pay Button React Component",
 	"main": "build/index.js",
 	"module": "build/index.js",