@tap-payments/apple-pay-button 1.1.5 → 1.2.0-staging

package/build/constants/index.d.ts

@@ -57,3 +57,4 @@ export declare const RSA_SANDBOX_MW_PUBLIC_KEY = "";
 export declare const RSA_STAGING_MW_PUBLIC_KEY = "-----BEGIN PUBLIC KEY-----\nMIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCi9W5jyTvA4Iwv3V5sfNQ7VdSz\n7WqwBbnWFbIUL/GjaaE93mvDv4zbgRSznHaHQPH6pxrMhMh0tV58njkvjHvQ/tvg\npwM8SemNPKEEAPl69tnMvCrJRPh2dWL3OHY8yCW4c38Hyx4fy56Zd5cdoVWfCReu\njCsvASLGz+cfRrj2swIDAQAB\n-----END 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_PRODUCTION_MW_PUBLIC_KEY = "-----BEGIN PUBLIC KEY-----\nMIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQC9hSRms7Ir1HmzdZxGXFYgmpi3\nez7VBFje0f8wwrxYS9oVoBtN4iAt0DOs3DbeuqtueI31wtpFVUMGg8W7R0SbtkZd\nGzszQNqt/wyqxpDC9q+97XdXwkWQFA72s76ud7eMXQlsWKsvgwhY+Ywzt0KlpNC3\nHj+N6UWFOYK98Xi+sQIDAQAB\n-----END PUBLIC KEY-----";
+export declare const APPLE_PAY_SCRIPT = "https://applepay.cdn-apple.com/jsapi/1.latest/apple-pay-sdk.js";

package/build/constants/index.js

@@ -57,3 +57,4 @@ export var RSA_SANDBOX_MW_PUBLIC_KEY = "";
 export var RSA_STAGING_MW_PUBLIC_KEY = "-----BEGIN PUBLIC KEY-----\nMIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCi9W5jyTvA4Iwv3V5sfNQ7VdSz\n7WqwBbnWFbIUL/GjaaE93mvDv4zbgRSznHaHQPH6pxrMhMh0tV58njkvjHvQ/tvg\npwM8SemNPKEEAPl69tnMvCrJRPh2dWL3OHY8yCW4c38Hyx4fy56Zd5cdoVWfCReu\njCsvASLGz+cfRrj2swIDAQAB\n-----END 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_PRODUCTION_MW_PUBLIC_KEY = "-----BEGIN PUBLIC KEY-----\nMIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQC9hSRms7Ir1HmzdZxGXFYgmpi3\nez7VBFje0f8wwrxYS9oVoBtN4iAt0DOs3DbeuqtueI31wtpFVUMGg8W7R0SbtkZd\nGzszQNqt/wyqxpDC9q+97XdXwkWQFA72s76ud7eMXQlsWKsvgwhY+Ywzt0KlpNC3\nHj+N6UWFOYK98Xi+sQIDAQAB\n-----END PUBLIC KEY-----";
+export var APPLE_PAY_SCRIPT = 'https://applepay.cdn-apple.com/jsapi/1.latest/apple-pay-sdk.js';

package/build/features/ApplePayButton/ApplePayButton.js

@@ -32,15 +32,25 @@ var ApplePay = React.memo(function (props) {
             console.log('ApplePayButtonProps', props);
         }
     }, []);
-    return (_jsx("button", { 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'
-        }, onClick: function () {
+    React.useEffect(function () {
+        var lisnterCallback = function (e) {
             var _a;
+            e.preventDefault();
             onApplePayButtonClicked();
             (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props);
-        }, lang: mappedProps.interface.locale, disabled: loading || disabled }));
+        };
+        var applepayButton = document.getElementById('tap-apple-pay-button');
+        applepayButton === null || applepayButton === void 0 ? void 0 : applepayButton.addEventListener('click', lisnterCallback);
+        return function () {
+            applepayButton === null || applepayButton === void 0 ? void 0 : applepayButton.removeEventListener('click', lisnterCallback);
+        };
+    }, [onApplePayButtonClicked]);
+    return (_jsx("apple-pay-button", { id: 'tap-apple-pay-button', style: {
+            '--apple-pay-button-width': '100%',
+            '--apple-pay-button-height': '48px',
+            '--apple-pay-button-border-radius': mappedProps.interface.edges === Edges.STRAIGHT ? '0' : '10px',
+            cursor: loading || disabled ? 'default' : 'pointer'
+        }, buttonstyle: mappedProps.interface.theme === ThemeMode.DARK ? ButtonStyle.Black : ButtonStyle.White, type: mappedProps.interface.type, locale: mappedProps.interface.locale }));
 });
 export function ApplePayButton(props) {
     return _jsx(ApplePay, __assign({}, props));

package/build/hooks/useApplePay.js

@@ -62,12 +62,14 @@ import { ApplePayVersion } from '../constants';
 import { setAxiosGlobalHeaders } from '../api/httpClient';
 import { getApplePayPaymentMethod, getApplePayRequest, validateCurrency, validateSupportedNetworks } from '../utils/config';
 import { getMerchantCapaplities } from '../utils/defaultValues';
+import { useApplePayScript } from './useApplePayScript';
 export var useApplePay = function (_a) {
     var publicKey = _a.publicKey, merchant = _a.merchant, transaction = _a.transaction, interfaceObj = _a.interface, customer = _a.customer, onCancel = _a.onCancel, onError = _a.onError, onSuccess = _a.onSuccess, scope = _a.scope, acceptance = _a.acceptance, features = _a.features, metaData = _a.metaData, debug = _a.debug, environment = _a.environment, platform = _a.platform, onReady = _a.onReady, onMerchantValidation = _a.onMerchantValidation, onShippingMethodSelected = _a.onShippingMethodSelected, onShippingContactSelected = _a.onShippingContactSelected, onPaymentMethodSelected = _a.onPaymentMethodSelected, onCouponChanged = _a.onCouponChanged;
     var _b = useState(false), loading = _b[0], setLoading = _b[1];
     var _c = useState(null), profileData = _c[0], setProfile = _c[1];
     var _d = useState(false), disabled = _d[0], setDisabled = _d[1];
     var _e = useState(undefined), applePaySession = _e[0], setApplePaySession = _e[1];
+    var isScriptLoaded = useApplePayScript(onError);
     var abortApplePaySession = useCallback(function () {
         applePaySession === null || applePaySession === void 0 ? void 0 : applePaySession.abort();
     }, [applePaySession]);
@@ -143,8 +145,10 @@ export var useApplePay = function (_a) {
         });
     }); }, [environment, interfaceObj === null || interfaceObj === void 0 ? void 0 : interfaceObj.locale, merchant.domain, publicKey, debug, onError]);
     useEffect(function () {
+        if (!isScriptLoaded)
+            return;
         initialize(metaData);
-    }, [initialize, metaData]);
+    }, [isScriptLoaded, initialize, metaData]);
     var onApplePayButtonClicked = function () { return __awaiter(void 0, void 0, void 0, function () {
         var ApplePaySession, paymentMethod, currency, cardBrands, request, session_1;
         var _a;

package/build/hooks/useApplePayScript.d.ts

@@ -0,0 +1 @@
+export declare const useApplePayScript: (onError?: ((error: any) => void) | undefined) => boolean;

package/build/hooks/useApplePayScript.js

@@ -0,0 +1,11 @@
+import { APPLE_PAY_SCRIPT } from '../constants';
+import { useEffect } from 'react';
+import { useScript } from './useScript';
+export var useApplePayScript = function (onError) {
+    var bStatus = useScript(APPLE_PAY_SCRIPT);
+    useEffect(function () {
+        if (bStatus === 'error')
+            onError === null || onError === void 0 ? void 0 : onError('Apple Pay loading script error');
+    }, [bStatus]);
+    return bStatus === 'ready';
+};

package/build/hooks/useScript.d.ts

@@ -1 +1 @@
-export declare function useScript(src: string, async?: boolean): "error" | "loading" | "ready" | "idle";
+export declare function useScript(src: string, async?: boolean): "error" | "ready" | "loading" | "idle";

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@tap-payments/apple-pay-button",
-	"version": "1.1.5",
+	"version": "1.2.0-staging",
 	"description": "Apple Pay Button React Component",
 	"main": "build/index.js",
 	"module": "build/index.js",
@@ -20,7 +20,7 @@
 		"copy:files": "copyfiles -u 1 src/**/*.css build/",
 		"tsc:alias": "tsc-alias -p tsconfig.json",
 		"ts:build": "rm -rf build && tsc && yarn tsc:alias && yarn copy:files",
-		"push": "npm publish --access public"
+		"push": "npm publish --access public --tag staging"
 	},
 	"keywords": [],
 	"author": {