@tap-payments/apple-pay-button 1.0.2 → 1.0.4-test
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +171 -125
- package/build/@types/ApplePaySession.d.ts +68 -0
- package/build/@types/ApplePaySession.js +1 -0
- package/build/@types/index.d.ts +77 -40
- package/build/@types/index.js +1 -1
- package/build/api/app.service.d.ts +3 -3
- package/build/api/app.service.js +3 -3
- package/build/api/httpClient.d.ts +2 -2
- package/build/api/httpClient.js +2 -2
- package/build/constants/index.d.ts +10 -2
- package/build/constants/index.js +10 -2
- package/build/features/ApplePayButton/ApplePayButton.d.ts +2 -1
- package/build/features/ApplePayButton/ApplePayButton.js +24 -39
- package/build/features/ApplePayButton/index.d.ts +2 -2
- package/build/features/ApplePayButton/index.js +2 -2
- package/build/hooks/useApplePay.d.ts +3 -2
- package/build/hooks/useApplePay.js +121 -16
- package/build/hooks/useGetEvents.d.ts +4 -0
- package/build/hooks/useGetEvents.js +15 -0
- package/build/hooks/useScript.d.ts +1 -1
- package/build/index.d.ts +3 -3
- package/build/index.js +12 -7
- package/build/utils/config.d.ts +5 -3
- package/build/utils/config.js +14 -9
- package/build/utils/defaultValues.d.ts +32 -0
- package/build/utils/defaultValues.js +48 -0
- package/package.json +2 -2
|
@@ -20,6 +20,14 @@ export declare const ButtonType: {
|
|
|
20
20
|
readonly PLAIN: "plain";
|
|
21
21
|
readonly SUBSCRIBE: "subscribe";
|
|
22
22
|
};
|
|
23
|
+
export declare const ThemeMode: {
|
|
24
|
+
readonly DARK: "dark";
|
|
25
|
+
readonly LIGHT: "light";
|
|
26
|
+
};
|
|
27
|
+
export declare const Edges: {
|
|
28
|
+
readonly STRAIGHT: "straight";
|
|
29
|
+
readonly CURVED: "curved";
|
|
30
|
+
};
|
|
23
31
|
export declare const MerchantCapabilities: {
|
|
24
32
|
readonly Supports3DS: "supports3DS";
|
|
25
33
|
readonly SupportsCredit: "supportsCredit";
|
|
@@ -46,6 +54,6 @@ export declare const Environment: {
|
|
|
46
54
|
};
|
|
47
55
|
export declare const RSA_DEV_MW_PUBLIC_KEY = "-----BEGIN PUBLIC KEY-----\nMIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQC8AX++RtxPZFtns4XzXFlDIxPBh0umN4qRXZaKDIlb6a3MknaB7psJWmf2l+e4Cfh9b5tey/+rZqpQ065eXTZfGCAuBLt+fYLQBhLfjRpk8S6hlIzc1Kdjg65uqzMwcTd0p7I4KLwHk1I0oXzuEu53fU1LSZhWp4Mnd6wjVgXAsQIDAQAB\n-----END PUBLIC KEY-----";
|
|
48
56
|
export declare const RSA_SANDBOX_MW_PUBLIC_KEY = "";
|
|
49
|
-
export declare const RSA_PRODUCTION_MW_PUBLIC_KEY = "";
|
|
50
|
-
export declare const RSA_BETA_MW_PUBLIC_KEY = "-----BEGIN PUBLIC KEY-----\nMIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQC9hSRms7Ir1HmzdZxGXFYgmpi3\nez7VBFje0f8wwrxYS9oVoBtN4iAt0DOs3DbeuqtueI31wtpFVUMGg8W7R0SbtkZd\nGzszQNqt/wyqxpDC9q+97XdXwkWQFA72s76ud7eMXQlsWKsvgwhY+Ywzt0KlpNC3\nHj+N6UWFOYK98Xi+sQIDAQAB\n-----END PUBLIC KEY-----";
|
|
51
57
|
export declare const RSA_STAGING_MW_PUBLIC_KEY = "-----BEGIN PUBLIC KEY-----\nMIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCi9W5jyTvA4Iwv3V5sfNQ7VdSz\n7WqwBbnWFbIUL/GjaaE93mvDv4zbgRSznHaHQPH6pxrMhMh0tV58njkvjHvQ/tvg\npwM8SemNPKEEAPl69tnMvCrJRPh2dWL3OHY8yCW4c38Hyx4fy56Zd5cdoVWfCReu\njCsvASLGz+cfRrj2swIDAQAB\n-----END PUBLIC KEY-----";
|
|
58
|
+
export declare const RSA_BETA_MW_PUBLIC_KEY = "-----BEGIN PUBLIC KEY-----\nMIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQC9hSRms7Ir1HmzdZxGXFYgmpi3\nez7VBFje0f8wwrxYS9oVoBtN4iAt0DOs3DbeuqtueI31wtpFVUMGg8W7R0SbtkZd\nGzszQNqt/wyqxpDC9q+97XdXwkWQFA72s76ud7eMXQlsWKsvgwhY+Ywzt0KlpNC3\nHj+N6UWFOYK98Xi+sQIDAQAB\n-----END PUBLIC KEY-----";
|
|
59
|
+
export declare const RSA_PRODUCTION_MW_PUBLIC_KEY = "-----BEGIN PUBLIC KEY-----\nMIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQC9hSRms7Ir1HmzdZxGXFYgmpi3\nez7VBFje0f8wwrxYS9oVoBtN4iAt0DOs3DbeuqtueI31wtpFVUMGg8W7R0SbtkZd\nGzszQNqt/wyqxpDC9q+97XdXwkWQFA72s76ud7eMXQlsWKsvgwhY+Ywzt0KlpNC3\nHj+N6UWFOYK98Xi+sQIDAQAB\n-----END PUBLIC KEY-----";
|
package/build/constants/index.js
CHANGED
|
@@ -20,6 +20,14 @@ export var ButtonType = {
|
|
|
20
20
|
PLAIN: 'plain',
|
|
21
21
|
SUBSCRIBE: 'subscribe'
|
|
22
22
|
};
|
|
23
|
+
export var ThemeMode = {
|
|
24
|
+
DARK: 'dark',
|
|
25
|
+
LIGHT: 'light'
|
|
26
|
+
};
|
|
27
|
+
export var Edges = {
|
|
28
|
+
STRAIGHT: 'straight',
|
|
29
|
+
CURVED: 'curved'
|
|
30
|
+
};
|
|
23
31
|
export var MerchantCapabilities = {
|
|
24
32
|
Supports3DS: 'supports3DS',
|
|
25
33
|
SupportsCredit: 'supportsCredit',
|
|
@@ -46,6 +54,6 @@ export var Environment = {
|
|
|
46
54
|
};
|
|
47
55
|
export var RSA_DEV_MW_PUBLIC_KEY = "-----BEGIN PUBLIC KEY-----\nMIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQC8AX++RtxPZFtns4XzXFlDIxPBh0umN4qRXZaKDIlb6a3MknaB7psJWmf2l+e4Cfh9b5tey/+rZqpQ065eXTZfGCAuBLt+fYLQBhLfjRpk8S6hlIzc1Kdjg65uqzMwcTd0p7I4KLwHk1I0oXzuEu53fU1LSZhWp4Mnd6wjVgXAsQIDAQAB\n-----END PUBLIC KEY-----";
|
|
48
56
|
export var RSA_SANDBOX_MW_PUBLIC_KEY = "";
|
|
49
|
-
export var RSA_PRODUCTION_MW_PUBLIC_KEY = "";
|
|
50
|
-
export var RSA_BETA_MW_PUBLIC_KEY = "-----BEGIN PUBLIC KEY-----\nMIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQC9hSRms7Ir1HmzdZxGXFYgmpi3\nez7VBFje0f8wwrxYS9oVoBtN4iAt0DOs3DbeuqtueI31wtpFVUMGg8W7R0SbtkZd\nGzszQNqt/wyqxpDC9q+97XdXwkWQFA72s76ud7eMXQlsWKsvgwhY+Ywzt0KlpNC3\nHj+N6UWFOYK98Xi+sQIDAQAB\n-----END PUBLIC KEY-----";
|
|
51
57
|
export var RSA_STAGING_MW_PUBLIC_KEY = "-----BEGIN PUBLIC KEY-----\nMIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCi9W5jyTvA4Iwv3V5sfNQ7VdSz\n7WqwBbnWFbIUL/GjaaE93mvDv4zbgRSznHaHQPH6pxrMhMh0tV58njkvjHvQ/tvg\npwM8SemNPKEEAPl69tnMvCrJRPh2dWL3OHY8yCW4c38Hyx4fy56Zd5cdoVWfCReu\njCsvASLGz+cfRrj2swIDAQAB\n-----END PUBLIC KEY-----";
|
|
58
|
+
export var RSA_BETA_MW_PUBLIC_KEY = "-----BEGIN PUBLIC KEY-----\nMIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQC9hSRms7Ir1HmzdZxGXFYgmpi3\nez7VBFje0f8wwrxYS9oVoBtN4iAt0DOs3DbeuqtueI31wtpFVUMGg8W7R0SbtkZd\nGzszQNqt/wyqxpDC9q+97XdXwkWQFA72s76ud7eMXQlsWKsvgwhY+Ywzt0KlpNC3\nHj+N6UWFOYK98Xi+sQIDAQAB\n-----END PUBLIC KEY-----";
|
|
59
|
+
export var RSA_PRODUCTION_MW_PUBLIC_KEY = "-----BEGIN PUBLIC KEY-----\nMIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQC9hSRms7Ir1HmzdZxGXFYgmpi3\nez7VBFje0f8wwrxYS9oVoBtN4iAt0DOs3DbeuqtueI31wtpFVUMGg8W7R0SbtkZd\nGzszQNqt/wyqxpDC9q+97XdXwkWQFA72s76ud7eMXQlsWKsvgwhY+Ywzt0KlpNC3\nHj+N6UWFOYK98Xi+sQIDAQAB\n-----END PUBLIC KEY-----";
|
|
@@ -3,4 +3,5 @@ import { ApplePayButtonProps } from '../../@types';
|
|
|
3
3
|
import './ApplePayButton.css';
|
|
4
4
|
export type { ApplePayButtonProps };
|
|
5
5
|
export declare function ApplePayButton(props: ApplePayButtonProps): JSX.Element;
|
|
6
|
-
export declare
|
|
6
|
+
export declare function abortApplePaySession(): void;
|
|
7
|
+
export declare const render: (props: ApplePayButtonProps, elementId: string) => any;
|
|
@@ -14,57 +14,42 @@ import * as React from 'react';
|
|
|
14
14
|
import { createRoot } from 'react-dom/client';
|
|
15
15
|
import { findOrCreateElementAndInject } from '../../utils';
|
|
16
16
|
import { useApplePay } from '../../hooks/useApplePay';
|
|
17
|
-
import { ButtonStyle, ButtonType, Locale, Scope } from '../../constants';
|
|
18
17
|
import './ApplePayButton.css';
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
metaData: metaData,
|
|
32
|
-
debug: debug,
|
|
33
|
-
merchantIdentifier: merchantIdentifier,
|
|
34
|
-
environment: environment,
|
|
35
|
-
locale: locale,
|
|
36
|
-
onReady: onReady
|
|
37
|
-
}), loading = _f.loading, onApplePayButtonClicked = _f.onApplePayButtonClicked, disabled = _f.disabled;
|
|
18
|
+
import { getDefaultValues } from '../../utils/defaultValues';
|
|
19
|
+
import { ButtonStyle, Edges, ThemeMode } from '../../constants';
|
|
20
|
+
import { GetEvents, useGetEvents } from '../../hooks/useGetEvents';
|
|
21
|
+
var ApplePay = React.memo(function (props) {
|
|
22
|
+
var mappedProps = getDefaultValues(props);
|
|
23
|
+
var _a = useApplePay(mappedProps), loading = _a.loading, onApplePayButtonClicked = _a.onApplePayButtonClicked, disabled = _a.disabled, abortApplePaySession = _a.abortApplePaySession;
|
|
24
|
+
var onEventReceieved = React.useCallback(function (event) {
|
|
25
|
+
if (event === GetEvents.ABORT) {
|
|
26
|
+
abortApplePaySession();
|
|
27
|
+
}
|
|
28
|
+
}, [abortApplePaySession]);
|
|
29
|
+
useGetEvents(onEventReceieved);
|
|
38
30
|
React.useEffect(function () {
|
|
39
|
-
if (debug) {
|
|
40
|
-
console.log('ApplePayButtonProps',
|
|
41
|
-
publicKey: publicKey,
|
|
42
|
-
merchant: merchant,
|
|
43
|
-
transaction: transaction,
|
|
44
|
-
billingContact: billingContact,
|
|
45
|
-
supportedNetworks: supportedNetworks,
|
|
46
|
-
metaData: metaData,
|
|
47
|
-
scope: scope,
|
|
48
|
-
buttonStyle: buttonStyle,
|
|
49
|
-
type: type,
|
|
50
|
-
locale: locale,
|
|
51
|
-
debug: debug
|
|
52
|
-
});
|
|
31
|
+
if (props.debug) {
|
|
32
|
+
console.log('ApplePayButtonProps', props);
|
|
53
33
|
}
|
|
54
34
|
}, []);
|
|
55
35
|
return (_jsx("button", { className: 'button-applepay-tap', style: {
|
|
56
|
-
|
|
57
|
-
|
|
36
|
+
ApplePayButtonType: mappedProps.interface.type,
|
|
37
|
+
ApplePayButtonStyle: mappedProps.interface.theme === ThemeMode.DARK ? ButtonStyle.Black : ButtonStyle.White,
|
|
38
|
+
borderRadius: mappedProps.interface.edges === Edges.STRAIGHT ? '0' : '10px'
|
|
58
39
|
}, onClick: function () {
|
|
40
|
+
var _a;
|
|
59
41
|
onApplePayButtonClicked();
|
|
60
|
-
onClick === null ||
|
|
61
|
-
}, lang: locale, disabled: loading || disabled }));
|
|
42
|
+
(_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props);
|
|
43
|
+
}, lang: mappedProps.interface.locale, disabled: loading || disabled }));
|
|
62
44
|
});
|
|
63
45
|
export function ApplePayButton(props) {
|
|
64
46
|
return _jsx(ApplePay, __assign({}, props));
|
|
65
47
|
}
|
|
48
|
+
export function abortApplePaySession() {
|
|
49
|
+
window.postMessage({ event: GetEvents.ABORT }, '*');
|
|
50
|
+
}
|
|
66
51
|
var tapConnectInstance = null;
|
|
67
|
-
export var
|
|
52
|
+
export var render = function (props, elementId) {
|
|
68
53
|
if (tapConnectInstance) {
|
|
69
54
|
return tapConnectInstance;
|
|
70
55
|
}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import { ApplePayButtonProps, ApplePayButton,
|
|
2
|
-
export { ApplePayButton,
|
|
1
|
+
import { ApplePayButtonProps, ApplePayButton, render, abortApplePaySession } from './ApplePayButton';
|
|
2
|
+
export { ApplePayButton, render, abortApplePaySession };
|
|
3
3
|
export type { ApplePayButtonProps };
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import { ApplePayButton,
|
|
2
|
-
export { ApplePayButton,
|
|
1
|
+
import { ApplePayButton, render, abortApplePaySession } from './ApplePayButton';
|
|
2
|
+
export { ApplePayButton, render, abortApplePaySession };
|
|
@@ -2,8 +2,9 @@ import { ApplePayButtonProps } from '../@types';
|
|
|
2
2
|
declare type UseApplePayProps = Omit<ApplePayButtonProps, 'buttonStyle'>;
|
|
3
3
|
interface UseApplePayReturnProps {
|
|
4
4
|
loading: boolean;
|
|
5
|
-
onApplePayButtonClicked: () => Promise<void>;
|
|
6
5
|
disabled: boolean;
|
|
6
|
+
onApplePayButtonClicked: () => Promise<void>;
|
|
7
|
+
abortApplePaySession: () => void;
|
|
7
8
|
}
|
|
8
|
-
export declare const useApplePay: ({ publicKey, merchant, transaction,
|
|
9
|
+
export declare const useApplePay: ({ publicKey, merchant, transaction, interface: interfaceObj, customer, onCancel, onError, onSuccess, scope, acceptance, metaData, debug, environment, onReady, onMerchantValidation, onShippingContactSelected, onPaymentMethodSelected, onCouponChanged }: UseApplePayProps) => UseApplePayReturnProps;
|
|
9
10
|
export {};
|
|
@@ -50,40 +50,76 @@ import appService from '../api/app.service';
|
|
|
50
50
|
import { ApplePayVersion } from '../constants';
|
|
51
51
|
import { setAxiosGlobalHeaders } from '../api/httpClient';
|
|
52
52
|
import { getApplePayPaymentMethod, getApplePayRequest, validateCurrency, validateSupportedNetworks } from '../utils/config';
|
|
53
|
+
import { getMerchantCapaplities } from '../utils/defaultValues';
|
|
53
54
|
export var useApplePay = function (_a) {
|
|
54
|
-
var publicKey = _a.publicKey, merchant = _a.merchant, transaction = _a.transaction,
|
|
55
|
+
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, metaData = _a.metaData, debug = _a.debug, environment = _a.environment, onReady = _a.onReady, onMerchantValidation = _a.onMerchantValidation, onShippingContactSelected = _a.onShippingContactSelected, onPaymentMethodSelected = _a.onPaymentMethodSelected, onCouponChanged = _a.onCouponChanged;
|
|
55
56
|
var _b = useState(false), loading = _b[0], setLoading = _b[1];
|
|
56
57
|
var _c = useState(null), profileData = _c[0], setProfile = _c[1];
|
|
57
58
|
var _d = useState(false), disabled = _d[0], setDisabled = _d[1];
|
|
59
|
+
var _e = useState(undefined), applePaySession = _e[0], setApplePaySession = _e[1];
|
|
60
|
+
var abortApplePaySession = useCallback(function () {
|
|
61
|
+
applePaySession === null || applePaySession === void 0 ? void 0 : applePaySession.abort();
|
|
62
|
+
}, [applePaySession]);
|
|
58
63
|
var initialize = useCallback(function (metaData) { return __awaiter(void 0, void 0, void 0, function () {
|
|
59
64
|
var merchantProfile, payment_options, headers, data, err_1;
|
|
60
|
-
|
|
61
|
-
|
|
65
|
+
var _a, _b, _c, _d, _e, _f, _g;
|
|
66
|
+
return __generator(this, function (_h) {
|
|
67
|
+
switch (_h.label) {
|
|
62
68
|
case 0:
|
|
63
69
|
setLoading(true);
|
|
64
70
|
appService.setEnv(environment);
|
|
65
71
|
appService.setBaseUrl();
|
|
66
|
-
|
|
72
|
+
_h.label = 1;
|
|
67
73
|
case 1:
|
|
68
|
-
|
|
74
|
+
_h.trys.push([1, 4, 5, 6]);
|
|
69
75
|
if (metaData) {
|
|
70
76
|
merchantProfile = metaData.merchant, payment_options = metaData.payment_options, headers = metaData.headers;
|
|
71
77
|
setAxiosGlobalHeaders(__assign({}, headers));
|
|
72
78
|
setProfile({ merchant: merchantProfile, payment_options: payment_options });
|
|
73
79
|
return [2];
|
|
74
80
|
}
|
|
75
|
-
return [4, appService.setBrowserHeaders({
|
|
81
|
+
return [4, appService.setBrowserHeaders({
|
|
82
|
+
locale: interfaceObj === null || interfaceObj === void 0 ? void 0 : interfaceObj.locale,
|
|
83
|
+
domain: merchant.domain,
|
|
84
|
+
pk: publicKey
|
|
85
|
+
})];
|
|
76
86
|
case 2:
|
|
77
|
-
|
|
78
|
-
return [4, appService.checkoutProfile(
|
|
87
|
+
_h.sent();
|
|
88
|
+
return [4, appService.checkoutProfile({
|
|
89
|
+
currency: transaction.currency,
|
|
90
|
+
merchant_id: merchant.id,
|
|
91
|
+
total_amount: Number(transaction.amount),
|
|
92
|
+
order: __assign(__assign({ amount: Number(transaction.amount), currency: transaction.currency }, (customer && {
|
|
93
|
+
customer: {
|
|
94
|
+
id: customer.id,
|
|
95
|
+
email: (_a = customer.contact) === null || _a === void 0 ? void 0 : _a.email,
|
|
96
|
+
first_name: ((_b = customer.name) === null || _b === void 0 ? void 0 : _b.length) ? customer.name[0].first : '',
|
|
97
|
+
last_name: ((_c = customer.name) === null || _c === void 0 ? void 0 : _c.length) ? customer.name[0].last : '',
|
|
98
|
+
phone: {
|
|
99
|
+
country_code: ((_e = (_d = customer.contact) === null || _d === void 0 ? void 0 : _d.phone) === null || _e === void 0 ? void 0 : _e.countryCode) || '',
|
|
100
|
+
number: ((_g = (_f = customer.contact) === null || _f === void 0 ? void 0 : _f.phone) === null || _g === void 0 ? void 0 : _g.number) || ''
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
})), { merchant: {
|
|
104
|
+
id: merchant.id
|
|
105
|
+
}, items: [
|
|
106
|
+
{
|
|
107
|
+
amount: Number(transaction.amount),
|
|
108
|
+
currency: transaction.currency,
|
|
109
|
+
name: 'apple pay sdk order item',
|
|
110
|
+
quantity: 1,
|
|
111
|
+
requiresShipping: 'no'
|
|
112
|
+
}
|
|
113
|
+
] })
|
|
114
|
+
})];
|
|
79
115
|
case 3:
|
|
80
|
-
data =
|
|
116
|
+
data = _h.sent();
|
|
81
117
|
if (debug)
|
|
82
118
|
console.log('merchant configuration: ', data);
|
|
83
119
|
setProfile(data);
|
|
84
120
|
return [3, 6];
|
|
85
121
|
case 4:
|
|
86
|
-
err_1 =
|
|
122
|
+
err_1 = _h.sent();
|
|
87
123
|
onError && onError(err_1.errors || err_1);
|
|
88
124
|
return [3, 6];
|
|
89
125
|
case 5:
|
|
@@ -93,7 +129,7 @@ export var useApplePay = function (_a) {
|
|
|
93
129
|
case 6: return [2];
|
|
94
130
|
}
|
|
95
131
|
});
|
|
96
|
-
}); }, [environment, locale, merchant.domain, publicKey, debug, onError]);
|
|
132
|
+
}); }, [environment, interfaceObj === null || interfaceObj === void 0 ? void 0 : interfaceObj.locale, merchant.domain, publicKey, debug, onError]);
|
|
97
133
|
useEffect(function () {
|
|
98
134
|
initialize(metaData);
|
|
99
135
|
}, [initialize, metaData]);
|
|
@@ -115,23 +151,27 @@ export var useApplePay = function (_a) {
|
|
|
115
151
|
try {
|
|
116
152
|
paymentMethod = getApplePayPaymentMethod(profileData.payment_options.payment_methods || []);
|
|
117
153
|
currency = validateCurrency(transaction.currency, paymentMethod.supported_currencies);
|
|
118
|
-
cardBrands = validateSupportedNetworks(paymentMethod.supported_card_brands,
|
|
154
|
+
cardBrands = validateSupportedNetworks(paymentMethod.supported_card_brands, acceptance.supportedBrands);
|
|
119
155
|
request = getApplePayRequest({
|
|
156
|
+
acceptance: acceptance,
|
|
120
157
|
countryCode: profileData.merchant.country_code,
|
|
121
158
|
transaction: __assign(__assign({}, transaction), { currency: currency }),
|
|
122
|
-
|
|
159
|
+
customer: customer,
|
|
123
160
|
supportedNetworks: cardBrands,
|
|
161
|
+
merchantCapabilities: getMerchantCapaplities(acceptance === null || acceptance === void 0 ? void 0 : acceptance.supportedCards),
|
|
124
162
|
name: profileData.merchant.name
|
|
125
163
|
});
|
|
126
164
|
if (debug) {
|
|
127
165
|
console.info("Creating ApplePaySession with version: ".concat(ApplePayVersion, " and request: ").concat(JSON.stringify(request)));
|
|
128
166
|
}
|
|
129
167
|
session_1 = new ApplePaySession(ApplePayVersion, request);
|
|
168
|
+
setApplePaySession(session_1);
|
|
130
169
|
session_1.onvalidatemerchant = function (event) { return __awaiter(void 0, void 0, void 0, function () {
|
|
131
170
|
var merchantSession, error_1;
|
|
132
171
|
return __generator(this, function (_a) {
|
|
133
172
|
switch (_a.label) {
|
|
134
173
|
case 0:
|
|
174
|
+
onMerchantValidation === null || onMerchantValidation === void 0 ? void 0 : onMerchantValidation('initiated');
|
|
135
175
|
if (debug) {
|
|
136
176
|
console.info('Creating merchant session and validating merchant session');
|
|
137
177
|
console.info('onvalidatemerchant event', event);
|
|
@@ -143,16 +183,19 @@ export var useApplePay = function (_a) {
|
|
|
143
183
|
if (debug) {
|
|
144
184
|
console.info("creating merchant session for merchantData: ".concat(JSON.stringify(profileData.merchant), " and validationURL: ").concat(event.validationURL, " and merchant.domain: ").concat(merchant.domain));
|
|
145
185
|
}
|
|
146
|
-
return [4, appService.appleSession(profileData.merchant, event.validationURL, merchant.domain,
|
|
186
|
+
return [4, appService.appleSession(__assign(__assign({}, profileData.merchant), { id: merchant.id }), event.validationURL, merchant.domain, merchant.identifier || merchant.id)];
|
|
147
187
|
case 2:
|
|
148
188
|
merchantSession = _a.sent();
|
|
149
189
|
if (debug)
|
|
150
190
|
console.info('merchantSession', merchantSession);
|
|
151
191
|
session_1.completeMerchantValidation(merchantSession);
|
|
152
|
-
|
|
192
|
+
onMerchantValidation === null || onMerchantValidation === void 0 ? void 0 : onMerchantValidation('completed');
|
|
193
|
+
if (debug)
|
|
194
|
+
console.info('merchantSession completed successfully!');
|
|
153
195
|
return [3, 4];
|
|
154
196
|
case 3:
|
|
155
197
|
error_1 = _a.sent();
|
|
198
|
+
onMerchantValidation === null || onMerchantValidation === void 0 ? void 0 : onMerchantValidation('error');
|
|
156
199
|
if (debug)
|
|
157
200
|
console.error('error in onvalidatemerchant', error_1);
|
|
158
201
|
session_1.completePayment({ status: ApplePaySession.STATUS_FAILURE });
|
|
@@ -212,6 +255,63 @@ export var useApplePay = function (_a) {
|
|
|
212
255
|
}
|
|
213
256
|
});
|
|
214
257
|
}); };
|
|
258
|
+
if (onShippingContactSelected) {
|
|
259
|
+
session_1.onshippingcontactselected = function (_a) {
|
|
260
|
+
var shippingContact = _a.shippingContact;
|
|
261
|
+
return __awaiter(void 0, void 0, void 0, function () {
|
|
262
|
+
var response;
|
|
263
|
+
return __generator(this, function (_b) {
|
|
264
|
+
switch (_b.label) {
|
|
265
|
+
case 0: return [4, onShippingContactSelected(shippingContact)];
|
|
266
|
+
case 1:
|
|
267
|
+
response = _b.sent();
|
|
268
|
+
if (response) {
|
|
269
|
+
session_1.completeShippingContactSelection(response);
|
|
270
|
+
}
|
|
271
|
+
return [2];
|
|
272
|
+
}
|
|
273
|
+
});
|
|
274
|
+
});
|
|
275
|
+
};
|
|
276
|
+
}
|
|
277
|
+
if (onPaymentMethodSelected) {
|
|
278
|
+
session_1.onpaymentmethodselected = function (_a) {
|
|
279
|
+
var paymentMethod = _a.paymentMethod;
|
|
280
|
+
return __awaiter(void 0, void 0, void 0, function () {
|
|
281
|
+
var response;
|
|
282
|
+
return __generator(this, function (_b) {
|
|
283
|
+
switch (_b.label) {
|
|
284
|
+
case 0: return [4, onPaymentMethodSelected(paymentMethod)];
|
|
285
|
+
case 1:
|
|
286
|
+
response = _b.sent();
|
|
287
|
+
if (response) {
|
|
288
|
+
session_1.completePaymentMethodSelection(response);
|
|
289
|
+
}
|
|
290
|
+
return [2];
|
|
291
|
+
}
|
|
292
|
+
});
|
|
293
|
+
});
|
|
294
|
+
};
|
|
295
|
+
}
|
|
296
|
+
if (onCouponChanged) {
|
|
297
|
+
session_1.oncouponcodechanged = function (_a) {
|
|
298
|
+
var couponCode = _a.couponCode;
|
|
299
|
+
return __awaiter(void 0, void 0, void 0, function () {
|
|
300
|
+
var response;
|
|
301
|
+
return __generator(this, function (_b) {
|
|
302
|
+
switch (_b.label) {
|
|
303
|
+
case 0: return [4, onCouponChanged(couponCode)];
|
|
304
|
+
case 1:
|
|
305
|
+
response = _b.sent();
|
|
306
|
+
if (response) {
|
|
307
|
+
session_1.completeCouponCodeChange(response);
|
|
308
|
+
}
|
|
309
|
+
return [2];
|
|
310
|
+
}
|
|
311
|
+
});
|
|
312
|
+
});
|
|
313
|
+
};
|
|
314
|
+
}
|
|
215
315
|
session_1.oncancel = function (event) {
|
|
216
316
|
console.info('oncancel event', event);
|
|
217
317
|
if (onCancel)
|
|
@@ -239,5 +339,10 @@ export var useApplePay = function (_a) {
|
|
|
239
339
|
return [2];
|
|
240
340
|
});
|
|
241
341
|
}); };
|
|
242
|
-
return {
|
|
342
|
+
return {
|
|
343
|
+
loading: loading,
|
|
344
|
+
disabled: !profileData || disabled,
|
|
345
|
+
onApplePayButtonClicked: onApplePayButtonClicked,
|
|
346
|
+
abortApplePaySession: abortApplePaySession
|
|
347
|
+
};
|
|
243
348
|
};
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { useCallback, useEffect } from 'react';
|
|
2
|
+
export var GetEvents;
|
|
3
|
+
(function (GetEvents) {
|
|
4
|
+
GetEvents["ABORT"] = "applepaySDK:abort";
|
|
5
|
+
})(GetEvents || (GetEvents = {}));
|
|
6
|
+
export var useGetEvents = function (onEventReceieved) {
|
|
7
|
+
var onEventReceievedFun = useCallback(function (msg) {
|
|
8
|
+
var event = msg.data.event;
|
|
9
|
+
onEventReceieved(event);
|
|
10
|
+
}, [onEventReceieved]);
|
|
11
|
+
useEffect(function () {
|
|
12
|
+
window.addEventListener('message', onEventReceievedFun);
|
|
13
|
+
return function () { return window.removeEventListener('message', onEventReceievedFun); };
|
|
14
|
+
}, [onEventReceievedFun]);
|
|
15
|
+
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare function useScript(src: string, async?: boolean): "
|
|
1
|
+
export declare function useScript(src: string, async?: boolean): "error" | "loading" | "ready" | "idle";
|
package/build/index.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { ApplePayButtonProps, ApplePayButton } from './features/ApplePayButton';
|
|
2
|
-
import {
|
|
1
|
+
import { ApplePayButtonProps, ApplePayButton, abortApplePaySession } from './features/ApplePayButton';
|
|
2
|
+
import { ThemeMode, Scope, SupportedNetworks, Environment, Locale, ButtonType, Edges, MerchantCapabilities } from './constants';
|
|
3
3
|
export type { ApplePayButtonProps };
|
|
4
|
-
export { ApplePayButton,
|
|
4
|
+
export { ApplePayButton, abortApplePaySession, ThemeMode, Scope, SupportedNetworks, Environment, Locale, ButtonType, Edges, MerchantCapabilities };
|
package/build/index.js
CHANGED
|
@@ -1,10 +1,15 @@
|
|
|
1
|
-
import { ApplePayButton,
|
|
2
|
-
import {
|
|
3
|
-
export { ApplePayButton,
|
|
4
|
-
window['
|
|
5
|
-
|
|
6
|
-
|
|
1
|
+
import { ApplePayButton, render, abortApplePaySession } from './features/ApplePayButton';
|
|
2
|
+
import { ThemeMode, Scope, SupportedNetworks, Environment, Locale, ButtonType, Edges, MerchantCapabilities } from './constants';
|
|
3
|
+
export { ApplePayButton, abortApplePaySession, ThemeMode, Scope, SupportedNetworks, Environment, Locale, ButtonType, Edges, MerchantCapabilities };
|
|
4
|
+
window['TapApplepaySDK'] = {
|
|
5
|
+
render: render,
|
|
6
|
+
abortApplePaySession: abortApplePaySession,
|
|
7
7
|
Scope: Scope,
|
|
8
8
|
SupportedNetworks: SupportedNetworks,
|
|
9
|
-
Environment: Environment
|
|
9
|
+
Environment: Environment,
|
|
10
|
+
Locale: Locale,
|
|
11
|
+
ButtonType: ButtonType,
|
|
12
|
+
ThemeMode: ThemeMode,
|
|
13
|
+
Edges: Edges,
|
|
14
|
+
MerchantCapabilities: MerchantCapabilities
|
|
10
15
|
};
|
package/build/utils/config.d.ts
CHANGED
|
@@ -1,8 +1,10 @@
|
|
|
1
|
-
import { ApplePayButtonProps, ApplePayRequestData, PaymentMethod } from '../@types';
|
|
1
|
+
import { Acceptance, ApplePayButtonProps, ApplePayRequestData, PaymentMethod } from '../@types';
|
|
2
2
|
import { SupportedNetworks } from '../constants';
|
|
3
|
-
export declare const validateSupportedNetworks: (supportedNetworksConfig: Array<(typeof SupportedNetworks)[keyof typeof SupportedNetworks]>, supportedNetworks:
|
|
3
|
+
export declare const validateSupportedNetworks: (supportedNetworksConfig: Array<(typeof SupportedNetworks)[keyof typeof SupportedNetworks]>, supportedNetworks: Acceptance['supportedBrands']) => ("amex" | "mada" | "masterCard" | "visa" | "chinaUnionPay" | "discover" | "electron" | "jcb" | "maestro")[];
|
|
4
4
|
export declare const validateCurrency: (currency: string, currencies: string[]) => string;
|
|
5
|
-
export declare const getApplePayRequest: ({ transaction,
|
|
5
|
+
export declare const getApplePayRequest: ({ transaction, customer, supportedNetworks, merchantCapabilities, countryCode, name, acceptance }: Pick<ApplePayButtonProps, "transaction" | "customer" | "acceptance"> & {
|
|
6
|
+
supportedNetworks: Acceptance['supportedBrands'];
|
|
7
|
+
merchantCapabilities: ApplePayRequestData['merchantCapabilities'];
|
|
6
8
|
countryCode: string;
|
|
7
9
|
name: string;
|
|
8
10
|
}) => ApplePayRequestData;
|
package/build/utils/config.js
CHANGED
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import { MerchantCapabilities } from '../constants';
|
|
2
1
|
import { JSEncrypt } from 'jsencrypt';
|
|
3
2
|
export var validateSupportedNetworks = function (supportedNetworksConfig, supportedNetworks) {
|
|
4
3
|
var toLowerCase = function (item) { return item.toLowerCase(); };
|
|
@@ -25,22 +24,28 @@ export var validateCurrency = function (currency, currencies) {
|
|
|
25
24
|
return currency;
|
|
26
25
|
};
|
|
27
26
|
export var getApplePayRequest = function (_a) {
|
|
28
|
-
var
|
|
27
|
+
var _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
28
|
+
var transaction = _a.transaction, customer = _a.customer, supportedNetworks = _a.supportedNetworks, merchantCapabilities = _a.merchantCapabilities, countryCode = _a.countryCode, name = _a.name, acceptance = _a.acceptance;
|
|
29
29
|
return {
|
|
30
30
|
countryCode: countryCode,
|
|
31
31
|
currencyCode: transaction.currency,
|
|
32
|
-
merchantCapabilities:
|
|
32
|
+
merchantCapabilities: merchantCapabilities,
|
|
33
33
|
supportedNetworks: supportedNetworks,
|
|
34
|
-
billingContact:
|
|
35
|
-
phoneNumber:
|
|
36
|
-
emailAddress:
|
|
37
|
-
givenName:
|
|
38
|
-
familyName:
|
|
34
|
+
billingContact: customer && {
|
|
35
|
+
phoneNumber: ((_c = (_b = customer.contact) === null || _b === void 0 ? void 0 : _b.phone) === null || _c === void 0 ? void 0 : _c.countryCode) || '' + ((_e = (_d = customer.contact) === null || _d === void 0 ? void 0 : _d.phone) === null || _e === void 0 ? void 0 : _e.number),
|
|
36
|
+
emailAddress: (_f = customer.contact) === null || _f === void 0 ? void 0 : _f.email,
|
|
37
|
+
givenName: ((_g = customer.name) === null || _g === void 0 ? void 0 : _g.length) ? (_h = customer.name[0]) === null || _h === void 0 ? void 0 : _h.first : '',
|
|
38
|
+
familyName: ((_j = customer.name) === null || _j === void 0 ? void 0 : _j.length) ? (_k = customer.name[0]) === null || _k === void 0 ? void 0 : _k.last : ''
|
|
39
39
|
},
|
|
40
40
|
total: {
|
|
41
41
|
amount: Number(transaction.amount),
|
|
42
42
|
label: name
|
|
43
|
-
}
|
|
43
|
+
},
|
|
44
|
+
supportsCouponCode: acceptance.supportsCouponCode,
|
|
45
|
+
couponCode: transaction.couponCode,
|
|
46
|
+
requiredShippingContactFields: customer === null || customer === void 0 ? void 0 : customer.shippingContactFields,
|
|
47
|
+
shippingMethods: transaction.shipping,
|
|
48
|
+
lineItems: transaction.lineItems
|
|
44
49
|
};
|
|
45
50
|
};
|
|
46
51
|
export var getApplePayPaymentMethod = function (paymentMethods) {
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import { ApplePayButtonProps } from '../@types';
|
|
2
|
+
export declare const getDefaultValues: (mainObject: ApplePayButtonProps) => {
|
|
3
|
+
interface: {
|
|
4
|
+
locale?: "en" | "ar" | "fr" | undefined;
|
|
5
|
+
theme?: "dark" | "light" | undefined;
|
|
6
|
+
edges?: "straight" | "curved" | undefined;
|
|
7
|
+
type?: "book" | "buy" | "check-out" | "pay" | "plain" | "subscribe" | undefined;
|
|
8
|
+
};
|
|
9
|
+
scope?: "AppleToken" | "TapToken" | undefined;
|
|
10
|
+
publicKey: string;
|
|
11
|
+
environment: "production" | "sandbox" | "beta" | "development" | "staging";
|
|
12
|
+
merchant: {
|
|
13
|
+
id: string;
|
|
14
|
+
domain: string;
|
|
15
|
+
identifier?: string | undefined;
|
|
16
|
+
};
|
|
17
|
+
customer?: import("../@types").Customer | undefined;
|
|
18
|
+
acceptance: import("../@types").Acceptance;
|
|
19
|
+
transaction: import("../@types").Transaction;
|
|
20
|
+
onCancel?: (() => void) | undefined;
|
|
21
|
+
onError?: ((error: any) => void) | undefined;
|
|
22
|
+
onSuccess?: ((data: Record<string, any>) => Promise<void>) | undefined;
|
|
23
|
+
onClick?: (() => void) | undefined;
|
|
24
|
+
onReady?: (() => void) | undefined;
|
|
25
|
+
onMerchantValidation?: ((status: "initiated" | "completed" | "error") => void) | undefined;
|
|
26
|
+
onShippingContactSelected?: ((shippingContact: import("../@types").ApplePayPaymentContact) => Promise<void | import("../@types").ApplePayUpdateData>) | undefined;
|
|
27
|
+
onPaymentMethodSelected?: ((paymentMethod: import("../@types").ApplePayPaymentMethod) => Promise<void | import("../@types").ApplePayUpdateData>) | undefined;
|
|
28
|
+
onCouponChanged?: ((couponCode: string) => Promise<void | import("../@types").ApplePayUpdateData>) | undefined;
|
|
29
|
+
metaData?: import("../@types").MetaData | undefined;
|
|
30
|
+
debug?: boolean | undefined;
|
|
31
|
+
};
|
|
32
|
+
export declare const getMerchantCapaplities: (supportedCards?: Array<string>) => ("supports3DS" | "supportsCredit" | "supportsDebit")[];
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
var __assign = (this && this.__assign) || function () {
|
|
2
|
+
__assign = Object.assign || function(t) {
|
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
+
s = arguments[i];
|
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
+
t[p] = s[p];
|
|
7
|
+
}
|
|
8
|
+
return t;
|
|
9
|
+
};
|
|
10
|
+
return __assign.apply(this, arguments);
|
|
11
|
+
};
|
|
12
|
+
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
|
13
|
+
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
|
|
14
|
+
if (ar || !(i in from)) {
|
|
15
|
+
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
|
|
16
|
+
ar[i] = from[i];
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
return to.concat(ar || Array.prototype.slice.call(from));
|
|
20
|
+
};
|
|
21
|
+
import { ThemeMode, Locale, ButtonType, Edges, MerchantCapabilities } from '../constants';
|
|
22
|
+
export var getDefaultValues = function (mainObject) {
|
|
23
|
+
var userThemeMode = window.matchMedia('(prefers-color-scheme: light)').matches ? ThemeMode.LIGHT : ThemeMode.DARK;
|
|
24
|
+
var userLang = navigator.language.toLowerCase().includes(Locale.AR) ? Locale.AR : Locale.EN;
|
|
25
|
+
var defaultInterface = {
|
|
26
|
+
locale: userLang,
|
|
27
|
+
theme: userThemeMode,
|
|
28
|
+
type: ButtonType.PLAIN,
|
|
29
|
+
edges: Edges.CURVED
|
|
30
|
+
};
|
|
31
|
+
return __assign(__assign({}, mainObject), { interface: __assign(__assign({}, defaultInterface), mainObject.interface) });
|
|
32
|
+
};
|
|
33
|
+
export var getMerchantCapaplities = function (supportedCards) {
|
|
34
|
+
var merchantCapaplities = [MerchantCapabilities.Supports3DS];
|
|
35
|
+
if (!supportedCards) {
|
|
36
|
+
merchantCapaplities = __spreadArray(__spreadArray([], merchantCapaplities, true), [
|
|
37
|
+
MerchantCapabilities.SupportsCredit,
|
|
38
|
+
MerchantCapabilities.SupportsDebit
|
|
39
|
+
], false);
|
|
40
|
+
}
|
|
41
|
+
else if (supportedCards.includes('CREDIT')) {
|
|
42
|
+
merchantCapaplities.push(MerchantCapabilities.SupportsCredit);
|
|
43
|
+
}
|
|
44
|
+
else if (supportedCards.includes('DEBIT')) {
|
|
45
|
+
merchantCapaplities.push(MerchantCapabilities.SupportsDebit);
|
|
46
|
+
}
|
|
47
|
+
return merchantCapaplities;
|
|
48
|
+
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tap-payments/apple-pay-button",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.4-test",
|
|
4
4
|
"description": "Apple Pay Button React Component",
|
|
5
5
|
"main": "build/index.js",
|
|
6
6
|
"module": "build/index.js",
|
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
"copy:files": "copyfiles -u 1 src/**/*.css build/",
|
|
21
21
|
"tsc:alias": "tsc-alias -p tsconfig.json",
|
|
22
22
|
"ts:build": "rm -rf build && tsc && yarn tsc:alias && yarn copy:files",
|
|
23
|
-
"push": "npm publish --access public"
|
|
23
|
+
"push": "npm publish --access public --tag test"
|
|
24
24
|
},
|
|
25
25
|
"keywords": [],
|
|
26
26
|
"author": {
|