@tap-payments/apple-pay-button 1.0.6 → 1.0.8
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 +53 -75
- package/build/@types/index.d.ts +30 -2
- 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 +1 -2
- package/build/hooks/useApplePay.d.ts +1 -1
- package/build/hooks/useApplePay.js +29 -3
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -43,13 +43,11 @@ 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'
|
|
48
46
|
// required
|
|
49
47
|
merchant={{
|
|
50
48
|
// required (The merchant domain name)
|
|
51
49
|
domain: 'example.com',
|
|
52
|
-
//
|
|
50
|
+
// required (The merchant identifier provided by Tap)
|
|
53
51
|
id: '1xxxxx8'
|
|
54
52
|
}}
|
|
55
53
|
// required
|
|
@@ -121,82 +119,63 @@ const App = () => {
|
|
|
121
119
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
|
122
120
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
123
121
|
<title>apple pay button</title>
|
|
124
|
-
<link rel="stylesheet" href="https://
|
|
125
|
-
<script src="https://
|
|
122
|
+
<link rel="stylesheet" href="https://tap-sdks.b-cdn.net/apple-pay/build-1.0.7/main.css" />
|
|
123
|
+
<script src="https://tap-sdks.b-cdn.net/apple-pay//build-1.0.7/main.js"></script>
|
|
126
124
|
</head>
|
|
127
125
|
<body>
|
|
128
126
|
<div id="apple-pay-button"></div>
|
|
129
127
|
<script type="text/javascript">
|
|
130
128
|
const { renderApplePayButton, ButtonStyle, Scope, SupportedNetworks, Locale, ButtonType } = window.TapSDKs
|
|
131
129
|
renderApplePayButton(
|
|
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
|
-
|
|
179
|
-
|
|
180
|
-
|
|
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'
|
|
130
|
+
{
|
|
131
|
+
publicKey: 'pk_test_7xxxxxxxxx',
|
|
132
|
+
environment: Environment.Sandbox,
|
|
133
|
+
merchant: {
|
|
134
|
+
domain: 'tp-txxxxxxxx',
|
|
135
|
+
id: 'merchant_xxxxxxxxxx"
|
|
136
|
+
},
|
|
137
|
+
|
|
138
|
+
transaction: {
|
|
139
|
+
|
|
140
|
+
currency: 'SAR',
|
|
141
|
+
|
|
142
|
+
amount: '3'
|
|
143
|
+
},
|
|
144
|
+
|
|
145
|
+
scope: Scope.TapToken,
|
|
146
|
+
buttonStyle: ButtonStyle.Black,
|
|
147
|
+
type: ButtonType.PLAIN,
|
|
148
|
+
locale: Locale.EN,
|
|
149
|
+
supportedNetworks: [SupportedNetworks.Visa, SupportedNetworks.MasterCard, SupportedNetworks.Mada],
|
|
150
|
+
billingContact: {
|
|
151
|
+
email: {
|
|
152
|
+
|
|
153
|
+
address: 'test`@gmail.com'
|
|
154
|
+
},
|
|
155
|
+
name: {
|
|
156
|
+
first: 'test',
|
|
157
|
+
last: 'test',
|
|
158
|
+
middle: '123'
|
|
159
|
+
},
|
|
160
|
+
phone: {
|
|
161
|
+
number: '555555555',
|
|
162
|
+
code: '966'
|
|
163
|
+
}
|
|
164
|
+
},
|
|
165
|
+
onCancel: async () => {
|
|
166
|
+
console.log('onCancel')
|
|
167
|
+
},
|
|
168
|
+
onError: async (error) => {
|
|
169
|
+
console.log('onError', error)
|
|
170
|
+
},
|
|
171
|
+
onSuccess: async (data) => {
|
|
172
|
+
console.log('onSuccess', data)
|
|
173
|
+
},
|
|
174
|
+
onReady: async () => {
|
|
175
|
+
console.log('onReady')
|
|
176
|
+
}
|
|
177
|
+
},
|
|
178
|
+
'apple-pay-button'
|
|
200
179
|
)
|
|
201
180
|
</script>
|
|
202
181
|
</body>
|
|
@@ -210,8 +189,7 @@ const App = () => {
|
|
|
210
189
|
| publicKey | `string` | `required` | The public Key provided by Tap |
|
|
211
190
|
| environment | `Environment` | `optional` | The environment of the SDK and it can be one of these environments `Environment` |
|
|
212
191
|
| debug | `boolean` | `optional` | To enable the debug mode |
|
|
213
|
-
|
|
|
214
|
-
| merchant.id | `string` | `optional` | The merchant identifier provided by Tap |
|
|
192
|
+
| merchant.id | `string` | `required` | The merchant identifier provided by Tap |
|
|
215
193
|
| merchant.domain | `string` | `required` | The merchant domain name |
|
|
216
194
|
| transaction.amount | `string` | `required` | The amount to be charged |
|
|
217
195
|
| transaction.currency | `string` | `required` | The currency of the amount |
|
package/build/@types/index.d.ts
CHANGED
|
@@ -18,9 +18,8 @@ export interface ApplePayRequestData {
|
|
|
18
18
|
export interface ApplePayButtonProps {
|
|
19
19
|
publicKey: string;
|
|
20
20
|
environment: typeof Environment[keyof typeof Environment];
|
|
21
|
-
merchantIdentifier: string;
|
|
22
21
|
merchant: {
|
|
23
|
-
id
|
|
22
|
+
id: string;
|
|
24
23
|
domain: string;
|
|
25
24
|
};
|
|
26
25
|
scope?: typeof Scope[keyof typeof Scope];
|
|
@@ -80,3 +79,32 @@ export interface MetaData {
|
|
|
80
79
|
payment_options: PaymentOptionsResponse;
|
|
81
80
|
headers: Record<string, string>;
|
|
82
81
|
}
|
|
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 } from '../@types';
|
|
1
|
+
import { MerchantResponse, ApplePayButtonProps, CheckoutProfileRequest } 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(request: CheckoutProfileRequest): 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 (request) {
|
|
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', request)];
|
|
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,
|
|
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;
|
|
21
21
|
var _f = useApplePay({
|
|
22
22
|
publicKey: publicKey,
|
|
23
23
|
merchant: merchant,
|
|
@@ -30,7 +30,6 @@ var ApplePay = React.memo(function (_a) {
|
|
|
30
30
|
scope: scope,
|
|
31
31
|
metaData: metaData,
|
|
32
32
|
debug: debug,
|
|
33
|
-
merchantIdentifier: merchantIdentifier,
|
|
34
33
|
environment: environment,
|
|
35
34
|
locale: locale,
|
|
36
35
|
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,
|
|
8
|
+
export declare const useApplePay: ({ publicKey, merchant, transaction, billingContact, onCancel, onError, onSuccess, scope, supportedNetworks, metaData, debug, 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,
|
|
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;
|
|
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,7 +75,33 @@ 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(
|
|
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
|
+
})];
|
|
79
105
|
case 3:
|
|
80
106
|
data = _a.sent();
|
|
81
107
|
if (debug)
|
|
@@ -143,7 +169,7 @@ export var useApplePay = function (_a) {
|
|
|
143
169
|
if (debug) {
|
|
144
170
|
console.info("creating merchant session for merchantData: ".concat(JSON.stringify(profileData.merchant), " and validationURL: ").concat(event.validationURL, " and merchant.domain: ").concat(merchant.domain));
|
|
145
171
|
}
|
|
146
|
-
return [4, appService.appleSession(profileData.merchant, event.validationURL, merchant.domain,
|
|
172
|
+
return [4, appService.appleSession(__assign(__assign({}, profileData.merchant), { id: merchant.id }), event.validationURL, merchant.domain, merchant.id)];
|
|
147
173
|
case 2:
|
|
148
174
|
merchantSession = _a.sent();
|
|
149
175
|
if (debug)
|