@tap-payments/apple-pay-button 1.0.0 → 1.0.2

package/build/api/httpClient.js

@@ -1,16 +1,33 @@
-import axios from 'axios';
-var MW_BASE_URL = 'https://checkout.payments.tap.company/api';
-var httpClient = axios.create({
-    baseURL: MW_BASE_URL,
-    headers: {
-        'Content-Type': 'application/json',
-        Accept: 'application/json'
-    }
-});
-httpClient.interceptors.request.use(function (config) {
-    return config;
-});
-httpClient.interceptors.response.use(function (response) {
-    return response;
-});
-export default httpClient;
+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 axios from 'axios';
+export var MW_BASE_LIVE_URL = 'https://mw-sdk.tap.company/v2/checkout';
+export var MW_BASE_STAGING_URL = 'https://mw-sdk.staing.tap.company/v2/checkout';
+export var MW_BASE_DEV_URL = 'https://mw-sdk.dev.tap.company/v2/checkout';
+export var MW_BASE_BETA_URL = 'https://mw-sdk.dev.tap.company/v2/checkout';
+export var MW_BASE_SANDBOX_URL = 'https://mw-sdk.sandbox.tap.company/v2/checkout';
+var httpClient = axios.create({
+    headers: {
+        'Content-Type': 'application/json',
+        Accept: 'application/json'
+    }
+});
+httpClient.interceptors.request.use(function (config) {
+    return config;
+});
+httpClient.interceptors.response.use(function (response) {
+    return response;
+});
+export var setAxiosGlobalHeaders = function (headers) {
+    httpClient.defaults.headers.common = __assign(__assign({}, httpClient.defaults.headers.common), headers);
+};
+export default httpClient;

package/build/constants/index.d.ts

@@ -1,26 +1,51 @@
-export declare const Scope: {
-    readonly AppleToken: "AppleToken";
-    readonly TapToken: "TapToken";
-};
-export declare const ButtonStyle: {
-    readonly Black: "black";
-    readonly White: "white";
-    readonly WhiteOutline: "whiteOutline";
-};
-export declare const MerchantCapabilities: {
-    readonly Supports3DS: "supports3DS";
-    readonly SupportsCredit: "supportsCredit";
-    readonly SupportsDebit: "supportsDebit";
-};
-export declare const SupportedNetworks: {
-    readonly Amex: "amex";
-    readonly Mada: "mada";
-    readonly MasterCard: "masterCard";
-    readonly Visa: "visa";
-    readonly ChinaUnionPay: "chinaUnionPay";
-    readonly Discover: "discover";
-    readonly Electron: "electron";
-    readonly Jcb: "jcb";
-    readonly Maestro: "maestro";
-};
-export declare const ApplePayVersion = 5;
+export declare const Scope: {
+    readonly AppleToken: "AppleToken";
+    readonly TapToken: "TapToken";
+};
+export declare const ButtonStyle: {
+    readonly Black: "black";
+    readonly White: "white";
+    readonly WhiteOutline: "white-outline";
+};
+export declare const Locale: {
+    readonly EN: "en";
+    readonly AR: "ar";
+    readonly FR: "fr";
+};
+export declare const ButtonType: {
+    readonly BOOK: "book";
+    readonly BUY: "buy";
+    readonly CHECK_OUT: "check-out";
+    readonly PAY: "pay";
+    readonly PLAIN: "plain";
+    readonly SUBSCRIBE: "subscribe";
+};
+export declare const MerchantCapabilities: {
+    readonly Supports3DS: "supports3DS";
+    readonly SupportsCredit: "supportsCredit";
+    readonly SupportsDebit: "supportsDebit";
+};
+export declare const SupportedNetworks: {
+    readonly Amex: "amex";
+    readonly Mada: "mada";
+    readonly MasterCard: "masterCard";
+    readonly Visa: "visa";
+    readonly ChinaUnionPay: "chinaUnionPay";
+    readonly Discover: "discover";
+    readonly Electron: "electron";
+    readonly Jcb: "jcb";
+    readonly Maestro: "maestro";
+};
+export declare const ApplePayVersion = 5;
+export declare const Environment: {
+    readonly Production: "production";
+    readonly Sandbox: "sandbox";
+    readonly Beta: "beta";
+    readonly Development: "development";
+    readonly Staging: "staging";
+};
+export declare const RSA_DEV_MW_PUBLIC_KEY = "-----BEGIN PUBLIC KEY-----\nMIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQC8AX++RtxPZFtns4XzXFlDIxPBh0umN4qRXZaKDIlb6a3MknaB7psJWmf2l+e4Cfh9b5tey/+rZqpQ065eXTZfGCAuBLt+fYLQBhLfjRpk8S6hlIzc1Kdjg65uqzMwcTd0p7I4KLwHk1I0oXzuEu53fU1LSZhWp4Mnd6wjVgXAsQIDAQAB\n-----END PUBLIC KEY-----";
+export declare const RSA_SANDBOX_MW_PUBLIC_KEY = "";
+export declare const RSA_PRODUCTION_MW_PUBLIC_KEY = "";
+export declare const RSA_BETA_MW_PUBLIC_KEY = "-----BEGIN PUBLIC KEY-----\nMIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQC9hSRms7Ir1HmzdZxGXFYgmpi3\nez7VBFje0f8wwrxYS9oVoBtN4iAt0DOs3DbeuqtueI31wtpFVUMGg8W7R0SbtkZd\nGzszQNqt/wyqxpDC9q+97XdXwkWQFA72s76ud7eMXQlsWKsvgwhY+Ywzt0KlpNC3\nHj+N6UWFOYK98Xi+sQIDAQAB\n-----END PUBLIC KEY-----";
+export declare const RSA_STAGING_MW_PUBLIC_KEY = "-----BEGIN PUBLIC KEY-----\nMIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCi9W5jyTvA4Iwv3V5sfNQ7VdSz\n7WqwBbnWFbIUL/GjaaE93mvDv4zbgRSznHaHQPH6pxrMhMh0tV58njkvjHvQ/tvg\npwM8SemNPKEEAPl69tnMvCrJRPh2dWL3OHY8yCW4c38Hyx4fy56Zd5cdoVWfCReu\njCsvASLGz+cfRrj2swIDAQAB\n-----END PUBLIC KEY-----";

package/build/constants/index.js

@@ -1,26 +1,51 @@
-export var Scope = {
-    AppleToken: 'AppleToken',
-    TapToken: 'TapToken'
-};
-export var ButtonStyle = {
-    Black: 'black',
-    White: 'white',
-    WhiteOutline: 'whiteOutline'
-};
-export var MerchantCapabilities = {
-    Supports3DS: 'supports3DS',
-    SupportsCredit: 'supportsCredit',
-    SupportsDebit: 'supportsDebit'
-};
-export var SupportedNetworks = {
-    Amex: 'amex',
-    Mada: 'mada',
-    MasterCard: 'masterCard',
-    Visa: 'visa',
-    ChinaUnionPay: 'chinaUnionPay',
-    Discover: 'discover',
-    Electron: 'electron',
-    Jcb: 'jcb',
-    Maestro: 'maestro'
-};
-export var ApplePayVersion = 5;
+export var Scope = {
+    AppleToken: 'AppleToken',
+    TapToken: 'TapToken'
+};
+export var ButtonStyle = {
+    Black: 'black',
+    White: 'white',
+    WhiteOutline: 'white-outline'
+};
+export var Locale = {
+    EN: 'en',
+    AR: 'ar',
+    FR: 'fr'
+};
+export var ButtonType = {
+    BOOK: 'book',
+    BUY: 'buy',
+    CHECK_OUT: 'check-out',
+    PAY: 'pay',
+    PLAIN: 'plain',
+    SUBSCRIBE: 'subscribe'
+};
+export var MerchantCapabilities = {
+    Supports3DS: 'supports3DS',
+    SupportsCredit: 'supportsCredit',
+    SupportsDebit: 'supportsDebit'
+};
+export var SupportedNetworks = {
+    Amex: 'amex',
+    Mada: 'mada',
+    MasterCard: 'masterCard',
+    Visa: 'visa',
+    ChinaUnionPay: 'chinaUnionPay',
+    Discover: 'discover',
+    Electron: 'electron',
+    Jcb: 'jcb',
+    Maestro: 'maestro'
+};
+export var ApplePayVersion = 5;
+export var Environment = {
+    Production: 'production',
+    Sandbox: 'sandbox',
+    Beta: 'beta',
+    Development: 'development',
+    Staging: 'staging'
+};
+export var RSA_DEV_MW_PUBLIC_KEY = "-----BEGIN PUBLIC KEY-----\nMIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQC8AX++RtxPZFtns4XzXFlDIxPBh0umN4qRXZaKDIlb6a3MknaB7psJWmf2l+e4Cfh9b5tey/+rZqpQ065eXTZfGCAuBLt+fYLQBhLfjRpk8S6hlIzc1Kdjg65uqzMwcTd0p7I4KLwHk1I0oXzuEu53fU1LSZhWp4Mnd6wjVgXAsQIDAQAB\n-----END PUBLIC KEY-----";
+export var RSA_SANDBOX_MW_PUBLIC_KEY = "";
+export var RSA_PRODUCTION_MW_PUBLIC_KEY = "";
+export var RSA_BETA_MW_PUBLIC_KEY = "-----BEGIN PUBLIC KEY-----\nMIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQC9hSRms7Ir1HmzdZxGXFYgmpi3\nez7VBFje0f8wwrxYS9oVoBtN4iAt0DOs3DbeuqtueI31wtpFVUMGg8W7R0SbtkZd\nGzszQNqt/wyqxpDC9q+97XdXwkWQFA72s76ud7eMXQlsWKsvgwhY+Ywzt0KlpNC3\nHj+N6UWFOYK98Xi+sQIDAQAB\n-----END PUBLIC KEY-----";
+export var RSA_STAGING_MW_PUBLIC_KEY = "-----BEGIN PUBLIC KEY-----\nMIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCi9W5jyTvA4Iwv3V5sfNQ7VdSz\n7WqwBbnWFbIUL/GjaaE93mvDv4zbgRSznHaHQPH6pxrMhMh0tV58njkvjHvQ/tvg\npwM8SemNPKEEAPl69tnMvCrJRPh2dWL3OHY8yCW4c38Hyx4fy56Zd5cdoVWfCReu\njCsvASLGz+cfRrj2swIDAQAB\n-----END PUBLIC KEY-----";

package/build/features/ApplePayButton/ApplePayButton.css

@@ -1,51 +1,21 @@
-.button-applepay-tap {
-	appearance: none;
-	border: none;
-	cursor: pointer;
-	-webkit-user-select: none;
-	user-select: none;
-	display: flex;
-	position: relative;
-	-webkit-box-pack: center;
-	-ms-flex-pack: center;
-	-webkit-justify-content: center;
-	justify-content: center;
-	-webkit-align-items: center;
-	-webkit-box-align: center;
-	-ms-flex-align: center;
-	align-items: center;
-	-webkit-margin-end: 8px;
-	margin-inline-end: 8px;
-	min-width: 96px;
-	max-width: 300px;
-	min-height: 40px;
-	border-radius: 9px;
-	background-color: white;
-	width: 100%;
-}
-
-.button-applepay-tap:disabled {
-	cursor: default;
-}
-
-.img-container {
-	height: 24px;
-	max-width: 80px;
-}
-
-.img-container img {
-	height: 100%;
-	width: 100%;
-	transform: scale(1.5);
-	filter: invert(0);
-}
-
-.whiteOutline {
-	border: solid 1px gray;
-}
-.dark {
-	background-color: black;
-}
-.dark .img-container img {
-	filter: invert(1);
-}
+.button-applepay-tap {
+	-webkit-appearance: -apple-pay-button;
+	display: block;
+	width: 100%;
+	height: 48px;
+	min-height: 30px;
+	cursor: pointer;
+}
+.button-applepay-tap:disabled {
+	cursor: default;
+}
+.black {
+	-apple-pay-button-style: black;
+}
+.white {
+	-apple-pay-button-style: white;
+}
+.whiteOutline {
+	-apple-pay-button-style: white;
+	border: solid 1px gray;
+}

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

@@ -1,6 +1,6 @@
-/// <reference types="react" />
-import { ApplePayButtonProps } from '../../@types';
-import './ApplePayButton.css';
-export type { ApplePayButtonProps };
-export declare function ApplePayButton(props: ApplePayButtonProps): JSX.Element;
-export declare const renderApplePayButton: (props: ApplePayButtonProps, elementId: string) => any;
+/// <reference types="react" />
+import { ApplePayButtonProps } from '../../@types';
+import './ApplePayButton.css';
+export type { ApplePayButtonProps };
+export declare function ApplePayButton(props: ApplePayButtonProps): JSX.Element;
+export declare const renderApplePayButton: (props: ApplePayButtonProps, elementId: string) => any;

package/build/features/ApplePayButton/ApplePayButton.js

@@ -1,51 +1,80 @@
-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 { jsx as _jsx } from "react/jsx-runtime";
-import React from 'react';
-import { createRoot } from 'react-dom/client';
-import { findOrCreateElementAndInject } from '../../utils';
-import { useApplePay } from '../../hooks/useApplePay';
-import { ButtonStyle, Scope } from '../../constants';
-import './ApplePayButton.css';
-var ApplePay = React.memo(function (_a) {
-    var publicKey = _a.publicKey, merchant = _a.merchant, transaction = _a.transaction, billingContact = _a.billingContact, supportedNetworks = _a.supportedNetworks, onCancel = _a.onCancel, onError = _a.onError, onSuccess = _a.onSuccess, _b = _a.scope, scope = _b === void 0 ? Scope.TapToken : _b, _c = _a.buttonStyle, buttonStyle = _c === void 0 ? ButtonStyle.WhiteOutline : _c;
-    var _d = useApplePay({
-        publicKey: publicKey,
-        merchant: merchant,
-        transaction: transaction,
-        billingContact: billingContact,
-        supportedNetworks: supportedNetworks,
-        onCancel: onCancel,
-        onError: onError,
-        onSuccess: onSuccess,
-        scope: scope
-    }), loading = _d.loading, onApplePayButtonClicked = _d.onApplePayButtonClicked, disabled = _d.disabled;
-    return (_jsx("button", __assign({ className: "button-applepay-tap ".concat(buttonStyle), onClick: onApplePayButtonClicked, disabled: loading || disabled }, { children: _jsx("div", __assign({ className: 'img-container' }, { children: _jsx("img", { loading: 'eager', src: 'https://back-end.b-cdn.net/payment_methods/apple_pay.svg' }) })) })));
-});
-export function ApplePayButton(props) {
-    return _jsx(ApplePay, __assign({}, props));
-}
-var tapConnectInstance = null;
-export var renderApplePayButton = function (props, elementId) {
-    if (tapConnectInstance) {
-        return tapConnectInstance;
-    }
-    var el = findOrCreateElementAndInject(elementId);
-    var root = createRoot(el);
-    root.render(_jsx(ApplePayButton, __assign({}, props)));
-    var unmount = function () {
-        root.unmount();
-        tapConnectInstance = null;
-    };
-    tapConnectInstance = { unmount: unmount };
-    return tapConnectInstance;
-};
+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 { 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 { ButtonStyle, ButtonType, Locale, Scope } from '../../constants';
+import './ApplePayButton.css';
+var ApplePay = React.memo(function (_a) {
+    var publicKey = _a.publicKey, merchant = _a.merchant, transaction = _a.transaction, billingContact = _a.billingContact, supportedNetworks = _a.supportedNetworks, onCancel = _a.onCancel, onError = _a.onError, onSuccess = _a.onSuccess, onClick = _a.onClick, metaData = _a.metaData, _b = _a.scope, scope = _b === void 0 ? Scope.TapToken : _b, _c = _a.buttonStyle, buttonStyle = _c === void 0 ? ButtonStyle.WhiteOutline : _c, _d = _a.type, type = _d === void 0 ? ButtonType.PLAIN : _d, _e = _a.locale, locale = _e === void 0 ? Locale.EN : _e, debug = _a.debug, merchantIdentifier = _a.merchantIdentifier, environment = _a.environment, onReady = _a.onReady;
+    var _f = useApplePay({
+        publicKey: publicKey,
+        merchant: merchant,
+        transaction: transaction,
+        billingContact: billingContact,
+        supportedNetworks: supportedNetworks,
+        onError: onError,
+        onSuccess: onSuccess,
+        onCancel: onCancel,
+        scope: scope,
+        metaData: metaData,
+        debug: debug,
+        merchantIdentifier: merchantIdentifier,
+        environment: environment,
+        locale: locale,
+        onReady: onReady
+    }), loading = _f.loading, onApplePayButtonClicked = _f.onApplePayButtonClicked, disabled = _f.disabled;
+    React.useEffect(function () {
+        if (debug) {
+            console.log('ApplePayButtonProps', {
+                publicKey: publicKey,
+                merchant: merchant,
+                transaction: transaction,
+                billingContact: billingContact,
+                supportedNetworks: supportedNetworks,
+                metaData: metaData,
+                scope: scope,
+                buttonStyle: buttonStyle,
+                type: type,
+                locale: locale,
+                debug: debug
+            });
+        }
+    }, []);
+    return (_jsx("button", { className: 'button-applepay-tap', style: {
+            '-apple-pay-button-type': type,
+            '-apple-pay-button-style': buttonStyle
+        }, onClick: function () {
+            onApplePayButtonClicked();
+            onClick === null || onClick === void 0 ? void 0 : onClick();
+        }, lang: locale, disabled: loading || disabled }));
+});
+export function ApplePayButton(props) {
+    return _jsx(ApplePay, __assign({}, props));
+}
+var tapConnectInstance = null;
+export var renderApplePayButton = function (props, elementId) {
+    if (tapConnectInstance) {
+        return tapConnectInstance;
+    }
+    var el = findOrCreateElementAndInject(elementId);
+    var root = createRoot(el);
+    root.render(_jsx(ApplePayButton, __assign({}, props)));
+    var unmount = function () {
+        root.unmount();
+        tapConnectInstance = null;
+    };
+    tapConnectInstance = { unmount: unmount };
+    return tapConnectInstance;
+};

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

@@ -1,3 +1,3 @@
-import { ApplePayButtonProps, ApplePayButton, renderApplePayButton } from './ApplePayButton';
-export { ApplePayButton, renderApplePayButton };
-export type { ApplePayButtonProps };
+import { ApplePayButtonProps, ApplePayButton, renderApplePayButton } from './ApplePayButton';
+export { ApplePayButton, renderApplePayButton };
+export type { ApplePayButtonProps };

package/build/features/ApplePayButton/index.js

@@ -1,2 +1,2 @@
-import { ApplePayButton, renderApplePayButton } from './ApplePayButton';
-export { ApplePayButton, renderApplePayButton };
+import { ApplePayButton, renderApplePayButton } from './ApplePayButton';
+export { ApplePayButton, renderApplePayButton };

package/build/hooks/index.d.ts

@@ -1 +1 @@
-export * from './useScript';
+export * from './useScript';

package/build/hooks/index.js

@@ -1 +1 @@
-export * from './useScript';
+export * from './useScript';

package/build/hooks/useApplePay.d.ts

@@ -1,9 +1,9 @@
-import { ApplePayButtonProps } from '../@types';
-declare type UseApplePayProps = Omit<ApplePayButtonProps, 'buttonStyle'>;
-interface UseApplePayReturnProps {
-    loading: boolean;
-    onApplePayButtonClicked: () => Promise<void>;
-    disabled: boolean;
-}
-export declare const useApplePay: ({ publicKey, merchant, transaction, billingContact, onCancel, onError, onSuccess, scope, supportedNetworks }: UseApplePayProps) => UseApplePayReturnProps;
-export {};
+import { ApplePayButtonProps } from '../@types';
+declare type UseApplePayProps = Omit<ApplePayButtonProps, 'buttonStyle'>;
+interface UseApplePayReturnProps {
+    loading: boolean;
+    onApplePayButtonClicked: () => Promise<void>;
+    disabled: boolean;
+}
+export declare const useApplePay: ({ publicKey, merchant, transaction, billingContact, onCancel, onError, onSuccess, scope, supportedNetworks, metaData, debug, merchantIdentifier, environment, locale, onReady }: UseApplePayProps) => UseApplePayReturnProps;
+export {};