@tap-payments/apple-pay-button 0.0.85-development → 0.0.87-development

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

@@ -1,5 +1,6 @@
+import { type ButtonSDKProps } from '@tap-payments/acceptance-sdk';
 import { CheckoutProfileResponse } from './checkoutProfile';
-import { Locale, ThemeMode, Edges, Scope, MerchantCapabilities, SupportedNetworks, ButtonType, ColorStyle } from './enums';
+import { MerchantCapabilities, SupportedNetworks, IntegrationType } from './enums';
 export interface ApplePayRequestData {
     countryCode: string;
     currencyCode: string;
@@ -19,101 +20,26 @@ export interface ApplePayRequestData {
 export interface ApplePayDataToLunchSDKFromMerchantSide {
     headers: Record<string, any>;
     BASE_URL: string;
-    merchant: Record<string, string>;
+    merchant: Record<string, any>;
     applePayRequestData: ApplePayRequestData;
     debug?: boolean;
     applePaySDKVersion?: number;
 }
-export interface Interface {
-    locale?: Locale;
-    theme?: ThemeMode;
-    edges?: Edges;
-    type?: ButtonType;
-    colorStyle?: ColorStyle;
-    loader?: boolean;
-}
-export interface Customer {
-    id?: string;
-    name?: {
-        lang: Locale;
-        first: string;
-        last: string;
-        middle?: string;
-    }[];
-    contact?: {
-        email?: string;
-        phone?: {
-            countryCode: string;
-            number: string;
-        };
-    };
-}
-export interface Acceptance {
-    supportedSchemes?: Array<SupportedNetworks>;
-    supportedFundSource?: string[];
-    supportedPaymentAuthentications?: string[];
-}
-export interface ApplePayButtonProps {
-    operator: {
-        publicKey: string;
-        hashstring?: string;
-    };
-    merchant: {
-        id: string;
+export type Acceptance = Exclude<ButtonSDKProps['acceptance'], undefined>;
+export type ProfileData = Exclude<Exclude<ButtonSDKProps['metadata'], undefined>['profileData'], undefined>;
+export type Transaction = Exclude<ButtonSDKProps['transaction'], undefined>;
+export interface ApplePayButtonProps extends ButtonSDKProps {
+    merchant: ButtonSDKProps['merchant'] & {
         identifier?: string;
     };
-    scope: Scope;
-    interface?: Interface;
-    customer?: Customer;
-    acceptance?: Acceptance;
-    transaction?: {
-        authentication?: boolean;
-        authorize?: {
-            auto: {
-                type: string;
-                time: number;
-            };
-        };
-        metadata?: Record<string, string>;
-        reference?: string;
-        paymentAgreement?: {
-            id: string;
-            contract?: {
-                id: string;
-            };
-        };
-        destinations?: Record<string, any>;
-    };
-    invoice?: {
-        id: string;
-    };
-    order: {
-        amount: number;
-        currency: string;
-        id?: string;
-        description?: string;
-        metadata?: Record<string, string>;
-        reference?: string;
-    };
-    post?: {
-        url: string;
-    };
-    redirect?: {
-        url: string;
-    };
-    onOrderCreated?: (orderId: string) => void;
-    onCancel?: () => void;
-    onError?: (error: any) => void;
-    onSuccess?: (data: Record<string, any>) => Promise<void>;
     onClick?: (data?: ApplePayDataToLunchSDKFromMerchantSide) => void;
-    onReady?: () => void;
-    metaData?: MetaData;
-    debug?: boolean;
-    integration?: 'sdk' | 'iframe' | 'webview';
-    headers?: {
-        mdn: string;
-        application: string;
-    };
+    integration?: IntegrationType;
+}
+export interface MerchantValidationRequestData {
+    validationUrl: string;
+    origin: string;
+    merchantId: string;
+    merchantName: string;
 }
 export interface MerchantResponse {
     id: string;

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

@@ -52,6 +52,6 @@ export interface ChargeRequestBody {
 export interface AuthorizeRequestBody extends ChargeRequestBody {
     auto?: {
         type: string;
-        time: number;
+        time: string;
     };
 }

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

@@ -1,28 +1,3 @@
-export declare enum Locale {
-    EN = "en",
-    AR = "ar",
-    DYNAMIC = "dynamic"
-}
-export declare enum ThemeMode {
-    DARK = "dark",
-    LIGHT = "light",
-    DYNAMIC = "dynamic"
-}
-export declare enum Edges {
-    STRAIGHT = "straight",
-    CURVED = "curved",
-    CIRCULAR = "circular"
-}
-export declare enum ColorStyle {
-    COLORED = "colored",
-    MONOCHROME = "monochrome"
-}
-export declare enum Scope {
-    CHARGE = "charge",
-    AUTHORIZE = "authorize",
-    TAP_TOKEN = "taptoken",
-    APPLE_PAY_TOKEN = "applepaytoken"
-}
 export declare enum ButtonStyle {
     Black = "black",
     White = "white",
@@ -63,3 +38,8 @@ export declare enum SupportedNetworks {
     Jcb = "jcb",
     Maestro = "maestro"
 }
+export declare enum IntegrationType {
+    SDK = "sdk",
+    IFRAME = "iframe",
+    WEBVIEW = "webview"
+}

package/build/@types/enums.js

@@ -1,33 +1,3 @@
-export var Locale;
-(function (Locale) {
-    Locale["EN"] = "en";
-    Locale["AR"] = "ar";
-    Locale["DYNAMIC"] = "dynamic";
-})(Locale || (Locale = {}));
-export var ThemeMode;
-(function (ThemeMode) {
-    ThemeMode["DARK"] = "dark";
-    ThemeMode["LIGHT"] = "light";
-    ThemeMode["DYNAMIC"] = "dynamic";
-})(ThemeMode || (ThemeMode = {}));
-export var Edges;
-(function (Edges) {
-    Edges["STRAIGHT"] = "straight";
-    Edges["CURVED"] = "curved";
-    Edges["CIRCULAR"] = "circular";
-})(Edges || (Edges = {}));
-export var ColorStyle;
-(function (ColorStyle) {
-    ColorStyle["COLORED"] = "colored";
-    ColorStyle["MONOCHROME"] = "monochrome";
-})(ColorStyle || (ColorStyle = {}));
-export var Scope;
-(function (Scope) {
-    Scope["CHARGE"] = "charge";
-    Scope["AUTHORIZE"] = "authorize";
-    Scope["TAP_TOKEN"] = "taptoken";
-    Scope["APPLE_PAY_TOKEN"] = "applepaytoken";
-})(Scope || (Scope = {}));
 export var ButtonStyle;
 (function (ButtonStyle) {
     ButtonStyle["Black"] = "black";
@@ -74,3 +44,9 @@ export var SupportedNetworks;
     SupportedNetworks["Jcb"] = "jcb";
     SupportedNetworks["Maestro"] = "maestro";
 })(SupportedNetworks || (SupportedNetworks = {}));
+export var IntegrationType;
+(function (IntegrationType) {
+    IntegrationType["SDK"] = "sdk";
+    IntegrationType["IFRAME"] = "iframe";
+    IntegrationType["WEBVIEW"] = "webview";
+})(IntegrationType || (IntegrationType = {}));

package/build/api.d.ts

@@ -1,5 +1,7 @@
-import { MerchantResponse, CheckoutProfileRequest, ChargeRequestBody, AuthorizeRequestBody } from './@types';
-export declare const setAxiosGlobalHeaders: (headers: Record<string, string>) => void;
+import { CheckoutProfileRequest, ChargeRequestBody, AuthorizeRequestBody, MerchantValidationRequestData } from './@types';
+export declare const setAxiosGlobalHeaders: (headers: {
+    [x: string]: string | undefined;
+}) => void;
 export declare const getAxiosGlobalHeaders: () => {
     [x: string]: import("axios").AxiosHeaderValue | undefined;
     Accept?: import("axios").AxiosHeaderValue | undefined;
@@ -20,7 +22,7 @@ declare class APPService {
         merchant: any;
         payment_options: any;
     }>;
-    appleSession(merchant: Pick<MerchantResponse, 'name' | 'id'>, validationURL: string, merchantRegisteredDomain: string, merchantIdentifier: string): Promise<any>;
+    appleSession(body: MerchantValidationRequestData): Promise<any>;
     tapTokenization(applePaymentData: Record<string, string>): Promise<any>;
     createCharge(request: ChargeRequestBody): Promise<any>;
     createAuthorize(request: AuthorizeRequestBody): Promise<any>;

package/build/api.js

@@ -149,20 +149,12 @@ var APPService = (function () {
         enumerable: false,
         configurable: true,
         writable: true,
-        value: function (merchant, validationURL, merchantRegisteredDomain, merchantIdentifier) {
+        value: function (body) {
             return __awaiter(this, void 0, void 0, function () {
-                var body, data;
+                var data;
                 return __generator(this, function (_a) {
                     switch (_a.label) {
-                        case 0:
-                            body = {
-                                validationUrl: validationURL,
-                                origin: merchantRegisteredDomain,
-                                merchantIdentifier: merchantIdentifier,
-                                merchantId: merchant.id,
-                                merchantName: merchant.name
-                            };
-                            return [4, axiosInstance.post('/validatemerchant', body)];
+                        case 0: return [4, axiosInstance.post('/validatemerchant', body)];
                         case 1:
                             data = (_a.sent()).data;
                             if (data.errors)

package/build/features/ApplePayButton/ApplePayButton.js

@@ -12,12 +12,11 @@ var __assign = (this && this.__assign) || function () {
 import { jsx as _jsx } 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 { Locale, PayButton } from '@tap-payments/acceptance-sdk';
+import { findOrCreateElementAndInject, Locale, PayButton } from '@tap-payments/acceptance-sdk';
 var ApplePay = React.memo(function (props) {
     var _a, _b, _c;
-    var _d = useApplePay({ buttonProps: props }), onClick = _d.onClick, initialLoading = _d.initialLoading, mappedProps = _d.mappedProps, theme = _d.theme, isRounded = _d.isRounded, success = _d.success, error = _d.error, applePayPaymentMethodOptions = _d.applePayPaymentMethodOptions, profileData = _d.profileData;
+    var _d = useApplePay({ buttonProps: props }), onClick = _d.onClick, mappedProps = _d.mappedProps, theme = _d.theme, isRounded = _d.isRounded, success = _d.success, error = _d.error, applePayPaymentMethodOptions = _d.applePayPaymentMethodOptions, profileData = _d.profileData;
     React.useEffect(function () {
         if (props.debug) {
             console.log('ApplePayButtonProps', props);
@@ -27,7 +26,7 @@ var ApplePay = React.memo(function (props) {
             width: '100%',
             display: 'flex',
             justifyContent: 'center'
-        } }, { children: _jsx(PayButton, { shimmerLoader: !profileData || initialLoading || !applePayPaymentMethodOptions, locale: ((_a = mappedProps.interface) === null || _a === void 0 ? void 0 : _a.locale) || Locale.EN, theme: theme, edges: (_b = mappedProps.interface) === null || _b === void 0 ? void 0 : _b.edges, colorStyle: (_c = mappedProps.interface) === null || _c === void 0 ? void 0 : _c.colorStyle, isFailed: error, isRounded: isRounded, isSuccess: success, onClick: onClick, buttonStyle: applePayPaymentMethodOptions === null || applePayPaymentMethodOptions === void 0 ? void 0 : applePayPaymentMethodOptions.button_style }) })));
+        } }, { children: _jsx(PayButton, { shimmerLoader: !profileData || !applePayPaymentMethodOptions, locale: ((_a = mappedProps.interface) === null || _a === void 0 ? void 0 : _a.locale) || Locale.EN, theme: theme, edges: (_b = mappedProps.interface) === null || _b === void 0 ? void 0 : _b.edges, colorStyle: (_c = mappedProps.interface) === null || _c === void 0 ? void 0 : _c.colorStyle, isFailed: error, isRounded: isRounded, isSuccess: success, onClick: onClick, buttonStyle: applePayPaymentMethodOptions === null || applePayPaymentMethodOptions === void 0 ? void 0 : applePayPaymentMethodOptions.button_style }) })));
 });
 export function ApplePayButton(props) {
     return _jsx(ApplePay, __assign({}, props));

package/build/hooks/useApplePay.d.ts

@@ -1,8 +1,8 @@
-import { ApplePayButtonProps, ApplePayDataToLunchSDKFromMerchantSide, ApplePayRequestData, MetaData, Scope } from '../@types';
-interface UsaApplePayProps {
-    buttonProps: ApplePayButtonProps;
+import { ApplePayDataToLunchSDKFromMerchantSide, ApplePayRequestData } from '../@types';
+interface UseApplePayParams {
+    buttonProps: any;
 }
-export declare const useApplePay: ({ buttonProps }: UsaApplePayProps) => {
+export declare const useApplePay: ({ buttonProps }: UseApplePayParams) => {
     onClick: () => void;
     loading: boolean;
     isIframeIntegration: boolean;
@@ -10,84 +10,12 @@ export declare const useApplePay: ({ buttonProps }: UsaApplePayProps) => {
     disabled: boolean;
     applePayRequestData: ApplePayRequestData | undefined;
     applePayRequestConfiguration: Omit<ApplePayDataToLunchSDKFromMerchantSide, "applePayRequestData"> | undefined;
-    mappedProps: {
-        interface: {
-            locale?: import("@tap-payments/acceptance-sdk").Locale | undefined;
-            theme?: import("@tap-payments/acceptance-sdk").ThemeMode | undefined;
-            edges?: import("@tap-payments/acceptance-sdk").Edges | undefined;
-            colorStyle?: import("@tap-payments/acceptance-sdk").ColorStyle | undefined;
-            loader?: boolean | undefined;
-            userExperience?: "popup" | "page" | undefined;
-            powered?: boolean | undefined;
-            direction?: import("@tap-payments/acceptance-sdk").Direction | undefined;
-            cardDirection?: import("@tap-payments/acceptance-sdk").Direction | undefined;
-        } | undefined;
-        operator: {
-            publicKey: string;
-            hashstring?: string | undefined;
-        };
-        merchant: {
-            id: string;
-            identifier?: string | undefined;
-        };
-        scope: Scope;
-        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>) => Promise<void>) | undefined;
-        onClick?: ((data?: ApplePayDataToLunchSDKFromMerchantSide | undefined) => void) | undefined;
-        onReady?: (() => void) | undefined;
-        metaData?: MetaData | undefined;
-        debug?: boolean | undefined;
-        integration?: "iframe" | "sdk" | "webview" | undefined;
-        headers?: {
-            mdn: string;
-            application: string;
-        } | undefined;
-    };
-    theme: import("../@types").ThemeMode;
-    initialLoading: boolean;
+    mappedProps: any;
+    theme: import("@tap-payments/acceptance-sdk").ThemeMode;
     isRounded: boolean;
     success: boolean;
     error: boolean;
-    applePayPaymentMethodOptions: import("../@types").PaymentMethod | null;
-    profileData: Pick<MetaData, "merchant" | "payment_options"> | undefined;
+    applePayPaymentMethodOptions: import("@tap-payments/acceptance-sdk").PaymentMethod | null;
+    profileData: import("@tap-payments/acceptance-sdk").CheckoutProfileResponse | undefined;
 };
 export {};

package/build/hooks/useApplePay.js

@@ -45,41 +45,28 @@ 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 };
     }
 };
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { ApplePayVersion, MW_BASE_URL } from '../constants';
 import { prepareApplePayRequest, shallRenderApplePay } from '../utils/config';
-import { Scope } from '../@types';
+import { IntegrationType } from '../@types';
 import { useMerchantApplePay } from './useMerchantApplePay';
 import { getApplePayPaymentMethod, getDefaultThemeMode } from '../utils';
 import appService, { getAxiosGlobalHeaders, setAxiosGlobalHeaders } from '../api';
-import { ChargeCode, mappingInterface } from '@tap-payments/acceptance-sdk';
+import { areAllTheObjectStringValuesValid, ChargeCode, mappingInterface, Scope } from '@tap-payments/acceptance-sdk';
 export var useApplePay = function (_a) {
-    var _b;
     var buttonProps = _a.buttonProps;
-    var _c = useState(), applePayRequestData = _c[0], setApplePayRequestData = _c[1];
-    var _d = useState(), applePayRequestConfiguration = _d[0], setApplePayRequestConfiguration = _d[1];
-    var _e = useState(), profileData = _e[0], setProfile = _e[1];
-    var _f = useState(false), disabled = _f[0], setDisabled = _f[1];
-    var _g = useState(false), initialLoading = _g[0], setInitialLoading = _g[1];
-    var _h = useState(false), error = _h[0], setError = _h[1];
-    var _j = useState(false), success = _j[0], setSuccess = _j[1];
-    var _k = useState(false), loading = _k[0], setLoading = _k[1];
-    var _l = useState(false), isRounded = _l[0], setIsRounded = _l[1];
+    var _b = useState(), applePayRequestData = _b[0], setApplePayRequestData = _b[1];
+    var _c = useState(), applePayRequestConfiguration = _c[0], setApplePayRequestConfiguration = _c[1];
+    var _d = useState(false), disabled = _d[0], setDisabled = _d[1];
+    var _e = useState(false), error = _e[0], setError = _e[1];
+    var _f = useState(false), success = _f[0], setSuccess = _f[1];
+    var _g = useState(false), loading = _g[0], setLoading = _g[1];
+    var _h = useState(false), isRounded = _h[0], setIsRounded = _h[1];
     var mappedProps = __assign(__assign({}, buttonProps), { interface: mappingInterface(buttonProps.interface) });
-    var 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, transaction = mappedProps.transaction, post = mappedProps.post, redirect = mappedProps.redirect, integration = mappedProps.integration;
-    var isIframeIntegration = integration === 'iframe';
-    var isWebViewIntegration = integration === 'webview';
+    var _j = mappedProps, interfaceObj = _j.interface, merchant = _j.merchant, customer = _j.customer, acceptance = _j.acceptance, scope = _j.scope, debug = _j.debug, onError = _j.onError, onSuccess = _j.onSuccess, onCancel = _j.onCancel, onReady = _j.onReady, metadata = _j.metadata, operator = _j.operator, order = _j.order, onOrderCreated = _j.onOrderCreated, transaction = _j.transaction, post = _j.post, redirect = _j.redirect, integration = _j.integration;
+    var _k = metadata || {}, profileData = _k.profileData, headers = _k.headers;
+    var isIframeIntegration = integration === IntegrationType.IFRAME;
+    var isWebViewIntegration = integration === IntegrationType.WEBVIEW;
     useMerchantApplePay({
         isIframeIntegration: isIframeIntegration,
         onError: onError,
@@ -97,99 +84,76 @@ export var useApplePay = function (_a) {
         setSuccess: setSuccess,
         setLoading: setLoading
     });
-    var theme = getDefaultThemeMode((_b = mappedProps.interface) === null || _b === void 0 ? void 0 : _b.theme);
+    var theme = useMemo(function () { return getDefaultThemeMode(interfaceObj === null || interfaceObj === void 0 ? void 0 : interfaceObj.theme); }, [interfaceObj === null || interfaceObj === void 0 ? void 0 : interfaceObj.theme]);
     var applePayPaymentMethodOptions = useMemo(function () {
         if (!profileData)
             return null;
         return getApplePayPaymentMethod(profileData.payment_options.payment_methods || []);
     }, [profileData]);
-    var initialize = function (metaData) { return __awaiter(void 0, void 0, void 0, function () {
-        var headers_1, rest, applePayPreparedData_1, data, applePayPreparedData, err_1;
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
-        return __generator(this, function (_o) {
-            switch (_o.label) {
+    var merchantValidationRequestData = useMemo(function () {
+        if (!profileData)
+            return null;
+        return {
+            merchantId: merchant.id || (profileData === null || profileData === void 0 ? void 0 : profileData.merchant.id),
+            merchantName: profileData.merchant.name,
+            validationUrl: '',
+            origin: (isWebViewIntegration ? applePayPaymentMethodOptions === null || applePayPaymentMethodOptions === void 0 ? void 0 : applePayPaymentMethodOptions.identifier : merchant.identifier || merchant.id) ||
+                profileData.merchant.id
+        };
+    }, [merchant, profileData === null || profileData === void 0 ? void 0 : profileData.merchant, isWebViewIntegration, applePayPaymentMethodOptions === null || applePayPaymentMethodOptions === void 0 ? void 0 : applePayPaymentMethodOptions.identifier]);
+    var initialize = function () { return __awaiter(void 0, void 0, void 0, function () {
+        var session, _a, id, api_version, contact, applePayPreparedData, err_1;
+        var _b, _c, _d;
+        return __generator(this, function (_e) {
+            switch (_e.label) {
                 case 0:
-                    setInitialLoading(true);
-                    _o.label = 1;
-                case 1:
-                    _o.trys.push([1, 7, , 8]);
+                    _e.trys.push([0, 5, , 6]);
                     if (!shallRenderApplePay()) {
                         throw new Error('The device/customer is not eligible to use ApplePay');
                     }
-                    if (metaData) {
-                        headers_1 = metaData.headers, rest = __rest(metaData, ["headers"]);
-                        setAxiosGlobalHeaders(__assign({}, headers_1));
-                        setProfile(rest);
-                        applePayPreparedData_1 = prepareApplePayRequest(__assign(__assign({}, rest), { order: order, acceptance: acceptance, customer: customer }));
-                        setApplePayRequestData(applePayPreparedData_1.applePaySessionRequest);
-                        setInitialLoading(false);
-                        return [2];
+                    if (!profileData) {
+                        throw new Error('000::Profile data is not available');
                     }
-                    if (!headers) return [3, 3];
+                    session = headers === null || headers === void 0 ? void 0 : headers.session;
+                    setAxiosGlobalHeaders({ session: session });
+                    if (!(headers && areAllTheObjectStringValuesValid(headers))) return [3, 2];
                     return [4, appService.setHttpHeaders(__assign(__assign({}, headers), { authorization: operator.publicKey }))];
-                case 2:
-                    _o.sent();
-                    return [3, 5];
-                case 3: return [4, appService.setBrowserHeaders({
+                case 1:
+                    _e.sent();
+                    return [3, 4];
+                case 2: return [4, appService.setBrowserHeaders({
                         locale: interfaceObj === null || interfaceObj === void 0 ? void 0 : interfaceObj.locale,
                         domain: window.location.origin,
                         pk: operator.publicKey
                     })];
+                case 3:
+                    _e.sent();
+                    _e.label = 4;
                 case 4:
-                    _o.sent();
-                    _o.label = 5;
-                case 5: return [4, appService.checkoutProfile({
-                        supported_payment_methods: ['APPLE_PAY'],
-                        supported_currencies: [order.currency],
-                        transaction_mode: scope === Scope.AUTHORIZE ? 'AUTHORIZE_CAPTURE' : 'PURCHASE',
-                        currency: order.currency,
-                        merchant_id: merchant === null || merchant === void 0 ? void 0 : merchant.id,
-                        total_amount: Number(order.amount),
-                        order: __assign(__assign({ id: order === null || order === void 0 ? void 0 : order.id, amount: Number(order.amount), currency: order.currency, description: order === null || order === void 0 ? void 0 : order.description, metadata: order === null || order === void 0 ? void 0 : order.metadata }, (customer && {
-                            customer: {
-                                id: customer === null || customer === void 0 ? void 0 : customer.id,
-                                email: (_a = customer.contact) === null || _a === void 0 ? void 0 : _a.email,
-                                first_name: ((_b = customer.name) === null || _b === void 0 ? void 0 : _b.length) ? customer.name[0].first : '',
-                                last_name: ((_c = customer.name) === null || _c === void 0 ? void 0 : _c.length) ? customer.name[0].last : '',
-                                phone: {
-                                    country_code: (_f = (_e = (_d = customer.contact) === null || _d === void 0 ? void 0 : _d.phone) === null || _e === void 0 ? void 0 : _e.countryCode) !== null && _f !== void 0 ? _f : '',
-                                    number: (_j = (_h = (_g = customer.contact) === null || _g === void 0 ? void 0 : _g.phone) === null || _h === void 0 ? void 0 : _h.number) !== null && _j !== void 0 ? _j : ''
-                                }
-                            }
-                        })), { merchant: {
-                                id: merchant === null || merchant === void 0 ? void 0 : merchant.id
-                            }, items: [
-                                {
-                                    amount: Number(order.amount),
-                                    currency: order.currency,
-                                    name: "apple pay sdk button order item",
-                                    quantity: 1,
-                                    description: "apple pay sdk button order item description"
-                                }
-                            ] })
-                    })];
-                case 6:
-                    data = _o.sent();
-                    if (debug)
-                        console.log('merchant configuration: ', data);
-                    setProfile(data);
-                    applePayPreparedData = prepareApplePayRequest(__assign(__assign({}, data), { order: order, acceptance: acceptance, customer: customer }));
+                    if (debug) {
+                        _a = profileData.merchant, id = _a.id, api_version = _a.api_version, contact = _a.contact;
+                        console.log('merchant configuration: ', {
+                            id: id,
+                            api_version: api_version,
+                            contact: contact
+                        });
+                    }
+                    applePayPreparedData = prepareApplePayRequest(__assign(__assign({}, profileData), { order: order, acceptance: acceptance, customer: customer }));
                     setApplePayRequestData(applePayPreparedData.applePaySessionRequest);
-                    onOrderCreated === null || onOrderCreated === void 0 ? void 0 : onOrderCreated((_l = (_k = data.payment_options) === null || _k === void 0 ? void 0 : _k.order) === null || _l === void 0 ? void 0 : _l.id);
+                    onOrderCreated === null || onOrderCreated === void 0 ? void 0 : onOrderCreated((_c = (_b = profileData.payment_options) === null || _b === void 0 ? void 0 : _b.order) === null || _c === void 0 ? void 0 : _c.id);
                     setApplePayRequestConfiguration({
                         BASE_URL: MW_BASE_URL,
                         headers: getAxiosGlobalHeaders(),
-                        merchant: __assign(__assign({}, data.merchant), { id: merchant.id || ((_m = data.merchant) === null || _m === void 0 ? void 0 : _m.id) })
+                        merchant: __assign(__assign({}, profileData.merchant), { id: merchant.id || ((_d = profileData.merchant) === null || _d === void 0 ? void 0 : _d.id) })
                     });
-                    setInitialLoading(false);
                     onReady === null || onReady === void 0 ? void 0 : onReady();
-                    return [3, 8];
-                case 7:
-                    err_1 = _o.sent();
+                    return [3, 6];
+                case 5:
+                    err_1 = _e.sent();
                     onError === null || onError === void 0 ? void 0 : onError(err_1.errors || err_1);
                     console.log('error in initialize', err_1);
-                    return [3, 8];
-                case 8: return [2];
+                    return [3, 6];
+                case 6: return [2];
             }
         });
     }); };
@@ -234,8 +198,10 @@ export var useApplePay = function (_a) {
                                 if (debug) {
                                     console.info("creating merchant session for merchantData: ".concat(JSON.stringify(profileData.merchant), " and validationURL: ").concat(event.validationURL, " and merchant.domain: ").concat(window.location.hostname));
                                 }
-                                return [4, appService.appleSession(__assign(__assign({}, profileData.merchant), { id: merchant.id || profileData.merchant.id }), event.validationURL, window.location.hostname, (isWebViewIntegration ? applePayPaymentMethodOptions === null || applePayPaymentMethodOptions === void 0 ? void 0 : applePayPaymentMethodOptions.identifier : merchant.identifier || merchant.id) ||
-                                        profileData.merchant.id)];
+                                if (!merchantValidationRequestData) {
+                                    throw new Error('Merchant Validation Request Data is not prepared!');
+                                }
+                                return [4, appService.appleSession(__assign(__assign({}, merchantValidationRequestData), { validationUrl: event.validationURL }))];
                             case 2:
                                 merchantSession = _a.sent();
                                 if (debug)
@@ -270,7 +236,7 @@ export var useApplePay = function (_a) {
                                 _b = scope;
                                 switch (_b) {
                                     case Scope.APPLE_PAY_TOKEN: return [3, 2];
-                                    case Scope.TAP_TOKEN: return [3, 4];
+                                    case Scope.TOKEN: return [3, 4];
                                     case Scope.AUTHORIZE: return [3, 7];
                                     case Scope.CHARGE: return [3, 7];
                                 }
@@ -407,14 +373,21 @@ export var useApplePay = function (_a) {
     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 }));
+            (_a = buttonProps.onClick) === null || _a === void 0 ? void 0 : _a.call(buttonProps, __assign(__assign({}, applePayRequestConfiguration), { merchantValidationRequestData: merchantValidationRequestData, applePayRequestData: applePayRequestData }));
             return;
         }
         onApplePayButtonClicked();
         (_b = buttonProps.onClick) === null || _b === void 0 ? void 0 : _b.call(buttonProps);
-    }, [applePayRequestConfiguration, applePayRequestData, buttonProps, isIframeIntegration, onApplePayButtonClicked]);
+    }, [
+        applePayRequestConfiguration,
+        applePayRequestData,
+        buttonProps,
+        isIframeIntegration,
+        onApplePayButtonClicked,
+        merchantValidationRequestData
+    ]);
     useEffect(function () {
-        initialize(metaData);
+        initialize();
     }, []);
     useEffect(function () {
         setIsRounded(error || success || loading);
@@ -439,7 +412,6 @@ export var useApplePay = function (_a) {
         applePayRequestConfiguration: applePayRequestConfiguration,
         mappedProps: mappedProps,
         theme: theme,
-        initialLoading: initialLoading,
         isRounded: isRounded,
         success: success,
         error: error,

package/build/hooks/useMerchantApplePay.d.ts

@@ -1,4 +1,5 @@
-import { MetaData, ApplePayButtonProps, Scope } from '../@types';
+import { MetaData, ApplePayButtonProps, ProfileData } from '../@types';
+import { Scope } from '@tap-payments/acceptance-sdk';
 interface ApplePayRequestData {
     isIframeIntegration: boolean;
     onError?: (error: any) => void;
@@ -6,8 +7,8 @@ interface ApplePayRequestData {
     setLoading?: (loading: boolean) => void;
     setSuccess?: (success: boolean) => void;
     setError?: (error: boolean) => void;
-    scope: (typeof Scope)[keyof typeof Scope];
-    profileData?: Pick<MetaData, 'merchant' | 'payment_options'>;
+    scope: Scope;
+    profileData?: ProfileData;
     merchant: Pick<MetaData['merchant'], 'id'>;
     order: ApplePayButtonProps['order'];
     customer: ApplePayButtonProps['customer'];

package/build/hooks/useMerchantApplePay.js

@@ -47,7 +47,8 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
 };
 import * as React from 'react';
 import appService from '../api';
-import { Scope, CHARGE_CODE } from '../@types';
+import { CHARGE_CODE } from '../@types';
+import { Scope } from '@tap-payments/acceptance-sdk';
 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, setLoading = _a.setLoading, 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;
@@ -69,7 +70,7 @@ export var useMerchantApplePay = function (_a) {
                         _d = scope;
                         switch (_d) {
                             case Scope.APPLE_PAY_TOKEN: return [3, 2];
-                            case Scope.TAP_TOKEN: return [3, 3];
+                            case Scope.TOKEN: return [3, 3];
                             case Scope.AUTHORIZE: return [3, 5];
                             case Scope.CHARGE: return [3, 5];
                         }

package/build/index.d.ts

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

package/build/index.js

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

package/build/utils/config.d.ts

@@ -1,14 +1,14 @@
-import { Acceptance, ApplePayButtonProps, ApplePayRequestData, MetaData, PaymentMethod } from '../@types';
+import { Acceptance, ApplePayButtonProps, ApplePayRequestData, ProfileData } 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 getApplePayPaymentMethod: (paymentMethods: ProfileData['payment_options']['payment_methods']) => import("@tap-payments/acceptance-sdk").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 prepareApplePayRequest: ({ payment_options, merchant, order, customer, acceptance }: Pick<MetaData, 'merchant' | 'payment_options'> & Pick<ApplePayButtonProps, 'order' | 'customer' | 'acceptance'>) => {
+export declare const prepareApplePayRequest: ({ payment_options, merchant, order, customer, acceptance }: ProfileData & Pick<ApplePayButtonProps, 'order' | 'customer' | 'acceptance'>) => {
     applePaySessionRequest: ApplePayRequestData;
-    paymentMethod: PaymentMethod;
+    paymentMethod: import("@tap-payments/acceptance-sdk").PaymentMethod;
 };
 export declare const shallRenderApplePay: () => boolean;

package/build/utils/index.d.ts

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

package/build/utils/index.js

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

package/build/utils/theme.d.ts

@@ -1,6 +1,7 @@
 import { TapThemeResponse } from '../@types';
-import { ColorStyle, FullThemeMode, Locale, ThemeMode } from '../@types/enums';
+import { FullThemeMode } from '../@types/enums';
 import { ApplePayButtonProps } from '..';
+import { ColorStyle, Locale, ThemeMode } from '@tap-payments/acceptance-sdk';
 export declare const mappingInterface: (interfaceParam?: ApplePayButtonProps['interface']) => ApplePayButtonProps['interface'];
 export declare const getDefaultThemeMode: (themeMode?: ThemeMode) => ThemeMode;
 export declare const getDefaultLocale: (locale?: Locale) => Locale;

package/build/utils/theme.js

@@ -9,7 +9,8 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { ColorStyle, Edges, FullThemeMode, Locale, ThemeMode } from '../@types/enums';
+import { FullThemeMode } from '../@types/enums';
+import { ColorStyle, Edges, Locale, ThemeMode } from '@tap-payments/acceptance-sdk';
 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) });
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@tap-payments/apple-pay-button",
-	"version": "0.0.85-development",
+	"version": "0.0.87-development",
 	"description": "Apple Pay Button React Component",
 	"main": "build/index.js",
 	"module": "build/index.js",
@@ -29,7 +29,7 @@
 	},
 	"license": "ISC",
 	"dependencies": {
-		"@tap-payments/acceptance-sdk": "^0.0.46",
+		"@tap-payments/acceptance-sdk": "0.0.58",
 		"@tap-payments/browser-info": "^1.0.2",
 		"@tap-payments/web-error-handing": "^1.0.1",
 		"axios": "^1.2.2",

package/build/utils/html.d.ts

@@ -1 +0,0 @@
-export declare const findOrCreateElementAndInject: (id: string) => HTMLElement;

package/build/utils/html.js

@@ -1,9 +0,0 @@
-export var findOrCreateElementAndInject = function (id) {
-    var findElement = document.getElementById(id);
-    if (findElement)
-        return findElement;
-    var element = document.createElement('div');
-    element.setAttribute('id', id);
-    document.body.appendChild(element);
-    return element;
-};