@tap-payments/apple-pay-button 1.0.7 → 1.0.9
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 +74 -52
- package/build/@types/index.d.ts +2 -30
- package/build/api/app.service.d.ts +2 -2
- package/build/api/app.service.js +2 -2
- package/build/api/httpClient.d.ts +1 -1
- package/build/api/httpClient.js +1 -1
- package/build/features/ApplePayButton/ApplePayButton.js +2 -1
- package/build/hooks/useApplePay.d.ts +1 -1
- package/build/hooks/useApplePay.js +3 -29
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -43,11 +43,13 @@ const App = () => {
|
|
|
43
43
|
environment={Environment.Development}
|
|
44
44
|
// optional (to enable the debug mode)
|
|
45
45
|
debug
|
|
46
|
+
// required (The merchant identifier provided by Tap)
|
|
47
|
+
merchantIdentifier='merchant.tap.applepay.test'
|
|
46
48
|
// required
|
|
47
49
|
merchant={{
|
|
48
50
|
// required (The merchant domain name)
|
|
49
51
|
domain: 'example.com',
|
|
50
|
-
//
|
|
52
|
+
// optional (The merchant identifier provided by Tap)
|
|
51
53
|
id: '1xxxxx8'
|
|
52
54
|
}}
|
|
53
55
|
// required
|
|
@@ -119,7 +121,7 @@ const App = () => {
|
|
|
119
121
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
120
122
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
121
123
|
<title>apple pay button</title>
|
|
122
|
-
<link rel="stylesheet" href="https://apple-pay-button.b-cdn.net/build-1.0.
|
|
124
|
+
<link rel="stylesheet" href="https://apple-pay-button.b-cdn.net/build-1.0.6/main.css" />
|
|
123
125
|
<script src="https://apple-pay-button.b-cdn.net/build-1.0.6/main.js"></script>
|
|
124
126
|
</head>
|
|
125
127
|
<body>
|
|
@@ -127,55 +129,74 @@ const App = () => {
|
|
|
127
129
|
<script type="text/javascript">
|
|
128
130
|
const { renderApplePayButton, ButtonStyle, Scope, SupportedNetworks, Locale, ButtonType } = window.TapSDKs
|
|
129
131
|
renderApplePayButton(
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
132
|
+
{
|
|
133
|
+
// required
|
|
134
|
+
publicKey: 'pk_test_xxxxxxxxxxxxxxxzh',
|
|
135
|
+
// optional (The environment of the SDK and it can be one of these Environment)
|
|
136
|
+
environment: Environment.Development,
|
|
137
|
+
// optional (to enable the debug mode)
|
|
138
|
+
debug: true,
|
|
139
|
+
// required (The merchant identifier provided by Tap)
|
|
140
|
+
merchantIdentifier: 'merchant.tap.applepay.test',
|
|
141
|
+
merchant: {
|
|
142
|
+
// required
|
|
143
|
+
domain: 'example.com'
|
|
144
|
+
// optional
|
|
145
|
+
// id: '123...'
|
|
146
|
+
},
|
|
147
|
+
// required
|
|
148
|
+
transaction: {
|
|
149
|
+
// required
|
|
150
|
+
currency: 'USD',
|
|
151
|
+
// required
|
|
152
|
+
amount: '100'
|
|
153
|
+
},
|
|
154
|
+
// optional
|
|
155
|
+
scope: Scope.TapToken,
|
|
156
|
+
// optional
|
|
157
|
+
buttonStyle: ButtonStyle.WhiteOutline,
|
|
158
|
+
// optional (The locale of the Apple Pay button and it can be one of these locales)
|
|
159
|
+
locale: Locale.EN,
|
|
160
|
+
// optional (The type of the Apple Pay button and it can be one of these types)
|
|
161
|
+
type: ButtonType.PLAIN,
|
|
162
|
+
// optional
|
|
163
|
+
supportedNetworks: [SupportedNetworks.Visa, SupportedNetworks.MasterCard],
|
|
164
|
+
// optional (The billing contact information)
|
|
165
|
+
billingContact: {
|
|
166
|
+
// required
|
|
167
|
+
email: {
|
|
168
|
+
// required
|
|
169
|
+
address: 'test@gmail.com'
|
|
170
|
+
},
|
|
171
|
+
// required
|
|
172
|
+
name: {
|
|
173
|
+
// required
|
|
174
|
+
first: 'test',
|
|
175
|
+
// required
|
|
176
|
+
last: 'tester',
|
|
177
|
+
// optional
|
|
178
|
+
middle: 'test'
|
|
179
|
+
},
|
|
180
|
+
// required
|
|
181
|
+
phone: {
|
|
182
|
+
number: '10XXXXXX56',
|
|
183
|
+
code: '+20'
|
|
184
|
+
}
|
|
185
|
+
},
|
|
186
|
+
// optional
|
|
187
|
+
onCancel: () => {
|
|
188
|
+
console.log('onCancel')
|
|
189
|
+
},
|
|
190
|
+
// optional
|
|
191
|
+
onError: (error) => {
|
|
192
|
+
console.log('onError', error)
|
|
193
|
+
},
|
|
194
|
+
// optional
|
|
195
|
+
onSuccess: async (data) => {
|
|
196
|
+
console.log('onSuccess', data)
|
|
197
|
+
}
|
|
198
|
+
},
|
|
199
|
+
'apple-pay-button'
|
|
179
200
|
)
|
|
180
201
|
</script>
|
|
181
202
|
</body>
|
|
@@ -189,7 +210,8 @@ const App = () => {
|
|
|
189
210
|
| publicKey | `string` | `required` | The public Key provided by Tap |
|
|
190
211
|
| environment | `Environment` | `optional` | The environment of the SDK and it can be one of these environments `Environment` |
|
|
191
212
|
| debug | `boolean` | `optional` | To enable the debug mode |
|
|
192
|
-
|
|
|
213
|
+
| merchantIdentifier | `string` | `required` | The merchant identifier provided by Tap |
|
|
214
|
+
| merchant.id | `string` | `optional` | The merchant identifier provided by Tap |
|
|
193
215
|
| merchant.domain | `string` | `required` | The merchant domain name |
|
|
194
216
|
| transaction.amount | `string` | `required` | The amount to be charged |
|
|
195
217
|
| transaction.currency | `string` | `required` | The currency of the amount |
|
package/build/@types/index.d.ts
CHANGED
|
@@ -18,8 +18,9 @@ export interface ApplePayRequestData {
|
|
|
18
18
|
export interface ApplePayButtonProps {
|
|
19
19
|
publicKey: string;
|
|
20
20
|
environment: typeof Environment[keyof typeof Environment];
|
|
21
|
+
merchantIdentifier: string;
|
|
21
22
|
merchant: {
|
|
22
|
-
id
|
|
23
|
+
id?: string;
|
|
23
24
|
domain: string;
|
|
24
25
|
};
|
|
25
26
|
scope?: typeof Scope[keyof typeof Scope];
|
|
@@ -79,32 +80,3 @@ export interface MetaData {
|
|
|
79
80
|
payment_options: PaymentOptionsResponse;
|
|
80
81
|
headers: Record<string, string>;
|
|
81
82
|
}
|
|
82
|
-
export interface CheckoutProfileRequest {
|
|
83
|
-
currency: string;
|
|
84
|
-
merchant_id: string;
|
|
85
|
-
total_amount: number;
|
|
86
|
-
order: {
|
|
87
|
-
amount: number;
|
|
88
|
-
currency: string;
|
|
89
|
-
customer?: {
|
|
90
|
-
id: string;
|
|
91
|
-
email: string;
|
|
92
|
-
first_name: string;
|
|
93
|
-
last_name: string;
|
|
94
|
-
phone: {
|
|
95
|
-
country_code: string;
|
|
96
|
-
number: string;
|
|
97
|
-
};
|
|
98
|
-
};
|
|
99
|
-
items: {
|
|
100
|
-
quantity: number;
|
|
101
|
-
amount: number;
|
|
102
|
-
currency: string;
|
|
103
|
-
name: string;
|
|
104
|
-
requiresShipping: string;
|
|
105
|
-
}[];
|
|
106
|
-
merchant: {
|
|
107
|
-
id: string;
|
|
108
|
-
};
|
|
109
|
-
};
|
|
110
|
-
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { MerchantResponse, ApplePayButtonProps
|
|
1
|
+
import { MerchantResponse, ApplePayButtonProps } from '../@types';
|
|
2
2
|
import BaseService from './base';
|
|
3
3
|
declare class APPService extends BaseService {
|
|
4
4
|
private baseUrl;
|
|
@@ -12,7 +12,7 @@ declare class APPService extends BaseService {
|
|
|
12
12
|
pk: string;
|
|
13
13
|
domain: string;
|
|
14
14
|
}): Promise<void>;
|
|
15
|
-
checkoutProfile(
|
|
15
|
+
checkoutProfile(merchantId?: string): Promise<{
|
|
16
16
|
merchant: any;
|
|
17
17
|
payment_options: any;
|
|
18
18
|
}>;
|
package/build/api/app.service.js
CHANGED
|
@@ -176,12 +176,12 @@ var APPService = (function (_super) {
|
|
|
176
176
|
enumerable: false,
|
|
177
177
|
configurable: true,
|
|
178
178
|
writable: true,
|
|
179
|
-
value: function (
|
|
179
|
+
value: function (merchantId) {
|
|
180
180
|
return __awaiter(this, void 0, void 0, function () {
|
|
181
181
|
var data, merchant, payment_options, session;
|
|
182
182
|
return __generator(this, function (_a) {
|
|
183
183
|
switch (_a.label) {
|
|
184
|
-
case 0: return [4, this.post(this.baseUrl + '/checkoutprofile',
|
|
184
|
+
case 0: return [4, this.post(this.baseUrl + '/checkoutprofile', { merchant_id: merchantId !== null && merchantId !== void 0 ? merchantId : '' })];
|
|
185
185
|
case 1:
|
|
186
186
|
data = (_a.sent()).data;
|
|
187
187
|
if (data.errors)
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export declare const MW_BASE_LIVE_URL = "https://mw-sdk.tap.company/v2/checkout";
|
|
2
|
-
export declare const MW_BASE_STAGING_URL = "https://mw-sdk.
|
|
2
|
+
export declare const MW_BASE_STAGING_URL = "https://mw-sdk.staging.tap.company/v2/checkout";
|
|
3
3
|
export declare const MW_BASE_DEV_URL = "https://mw-sdk.dev.tap.company/v2/checkout";
|
|
4
4
|
export declare const MW_BASE_BETA_URL = "https://mw-sdk.beta.tap.company/v2/checkout";
|
|
5
5
|
export declare const MW_BASE_SANDBOX_URL = "https://mw-sdk.sandbox.tap.company/v2/checkout";
|
package/build/api/httpClient.js
CHANGED
|
@@ -11,7 +11,7 @@ var __assign = (this && this.__assign) || function () {
|
|
|
11
11
|
};
|
|
12
12
|
import axios from 'axios';
|
|
13
13
|
export var MW_BASE_LIVE_URL = 'https://mw-sdk.tap.company/v2/checkout';
|
|
14
|
-
export var MW_BASE_STAGING_URL = 'https://mw-sdk.
|
|
14
|
+
export var MW_BASE_STAGING_URL = 'https://mw-sdk.staging.tap.company/v2/checkout';
|
|
15
15
|
export var MW_BASE_DEV_URL = 'https://mw-sdk.dev.tap.company/v2/checkout';
|
|
16
16
|
export var MW_BASE_BETA_URL = 'https://mw-sdk.beta.tap.company/v2/checkout';
|
|
17
17
|
export var MW_BASE_SANDBOX_URL = 'https://mw-sdk.sandbox.tap.company/v2/checkout';
|
|
@@ -17,7 +17,7 @@ import { useApplePay } from '../../hooks/useApplePay';
|
|
|
17
17
|
import { ButtonStyle, ButtonType, Locale, Scope } from '../../constants';
|
|
18
18
|
import './ApplePayButton.css';
|
|
19
19
|
var ApplePay = React.memo(function (_a) {
|
|
20
|
-
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, environment = _a.environment, onReady = _a.onReady;
|
|
20
|
+
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;
|
|
21
21
|
var _f = useApplePay({
|
|
22
22
|
publicKey: publicKey,
|
|
23
23
|
merchant: merchant,
|
|
@@ -30,6 +30,7 @@ var ApplePay = React.memo(function (_a) {
|
|
|
30
30
|
scope: scope,
|
|
31
31
|
metaData: metaData,
|
|
32
32
|
debug: debug,
|
|
33
|
+
merchantIdentifier: merchantIdentifier,
|
|
33
34
|
environment: environment,
|
|
34
35
|
locale: locale,
|
|
35
36
|
onReady: onReady
|
|
@@ -5,5 +5,5 @@ interface UseApplePayReturnProps {
|
|
|
5
5
|
onApplePayButtonClicked: () => Promise<void>;
|
|
6
6
|
disabled: boolean;
|
|
7
7
|
}
|
|
8
|
-
export declare const useApplePay: ({ publicKey, merchant, transaction, billingContact, onCancel, onError, onSuccess, scope, supportedNetworks, metaData, debug, environment, locale, onReady }: UseApplePayProps) => UseApplePayReturnProps;
|
|
8
|
+
export declare const useApplePay: ({ publicKey, merchant, transaction, billingContact, onCancel, onError, onSuccess, scope, supportedNetworks, metaData, debug, merchantIdentifier, environment, locale, onReady }: UseApplePayProps) => UseApplePayReturnProps;
|
|
9
9
|
export {};
|
|
@@ -51,7 +51,7 @@ import { ApplePayVersion } from '../constants';
|
|
|
51
51
|
import { setAxiosGlobalHeaders } from '../api/httpClient';
|
|
52
52
|
import { getApplePayPaymentMethod, getApplePayRequest, validateCurrency, validateSupportedNetworks } from '../utils/config';
|
|
53
53
|
export var useApplePay = function (_a) {
|
|
54
|
-
var publicKey = _a.publicKey, merchant = _a.merchant, transaction = _a.transaction, billingContact = _a.billingContact, onCancel = _a.onCancel, onError = _a.onError, onSuccess = _a.onSuccess, scope = _a.scope, supportedNetworks = _a.supportedNetworks, metaData = _a.metaData, debug = _a.debug, environment = _a.environment, locale = _a.locale, onReady = _a.onReady;
|
|
54
|
+
var publicKey = _a.publicKey, merchant = _a.merchant, transaction = _a.transaction, billingContact = _a.billingContact, onCancel = _a.onCancel, onError = _a.onError, onSuccess = _a.onSuccess, scope = _a.scope, supportedNetworks = _a.supportedNetworks, metaData = _a.metaData, debug = _a.debug, merchantIdentifier = _a.merchantIdentifier, environment = _a.environment, locale = _a.locale, onReady = _a.onReady;
|
|
55
55
|
var _b = useState(false), loading = _b[0], setLoading = _b[1];
|
|
56
56
|
var _c = useState(null), profileData = _c[0], setProfile = _c[1];
|
|
57
57
|
var _d = useState(false), disabled = _d[0], setDisabled = _d[1];
|
|
@@ -75,33 +75,7 @@ export var useApplePay = function (_a) {
|
|
|
75
75
|
return [4, appService.setBrowserHeaders({ locale: locale, domain: merchant.domain, pk: publicKey })];
|
|
76
76
|
case 2:
|
|
77
77
|
_a.sent();
|
|
78
|
-
return [4, appService.checkoutProfile(
|
|
79
|
-
currency: transaction.currency,
|
|
80
|
-
merchant_id: merchant.id,
|
|
81
|
-
total_amount: Number(transaction.amount),
|
|
82
|
-
order: __assign(__assign({ amount: Number(transaction.amount), currency: transaction.currency }, (billingContact && {
|
|
83
|
-
customer: {
|
|
84
|
-
id: '',
|
|
85
|
-
email: billingContact.email.address,
|
|
86
|
-
first_name: billingContact.name.first,
|
|
87
|
-
last_name: billingContact.name.last,
|
|
88
|
-
phone: {
|
|
89
|
-
country_code: billingContact.phone.code,
|
|
90
|
-
number: billingContact.phone.number
|
|
91
|
-
}
|
|
92
|
-
}
|
|
93
|
-
})), { merchant: {
|
|
94
|
-
id: merchant.id
|
|
95
|
-
}, items: [
|
|
96
|
-
{
|
|
97
|
-
amount: Number(transaction.amount),
|
|
98
|
-
currency: transaction.currency,
|
|
99
|
-
name: 'apple pay sdk order item',
|
|
100
|
-
quantity: 1,
|
|
101
|
-
requiresShipping: 'no'
|
|
102
|
-
}
|
|
103
|
-
] })
|
|
104
|
-
})];
|
|
78
|
+
return [4, appService.checkoutProfile()];
|
|
105
79
|
case 3:
|
|
106
80
|
data = _a.sent();
|
|
107
81
|
if (debug)
|
|
@@ -169,7 +143,7 @@ export var useApplePay = function (_a) {
|
|
|
169
143
|
if (debug) {
|
|
170
144
|
console.info("creating merchant session for merchantData: ".concat(JSON.stringify(profileData.merchant), " and validationURL: ").concat(event.validationURL, " and merchant.domain: ").concat(merchant.domain));
|
|
171
145
|
}
|
|
172
|
-
return [4, appService.appleSession(
|
|
146
|
+
return [4, appService.appleSession(profileData.merchant, event.validationURL, merchant.domain, merchantIdentifier)];
|
|
173
147
|
case 2:
|
|
174
148
|
merchantSession = _a.sent();
|
|
175
149
|
if (debug)
|