@tap-payments/apple-pay-button 1.0.6 → 1.0.7

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.
Files changed (8) hide show
  1. package/README.md +52 -74
  2. package/build/@types/index.d.ts +30 -2
  3. package/build/api/app.service.d.ts +2 -2
  4. package/build/api/app.service.js +2 -2
  5. package/build/features/ApplePayButton/ApplePayButton.js +1 -2
  6. package/build/hooks/useApplePay.d.ts +1 -1
  7. package/build/hooks/useApplePay.js +29 -3
  8. 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
- // optional (The merchant identifier provided by Tap)
50
+ // required (The merchant identifier provided by Tap)
53
51
  id: '1xxxxx8'
54
52
  }}
55
53
  // required
@@ -121,7 +119,7 @@ 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://apple-pay-button.b-cdn.net/build-1.0.6/main.css" />
122
+ <link rel="stylesheet" href="https://apple-pay-button.b-cdn.net/build-1.0.7/main.css" />
125
123
  <script src="https://apple-pay-button.b-cdn.net/build-1.0.6/main.js"></script>
126
124
  </head>
127
125
  <body>
@@ -129,74 +127,55 @@ const App = () => {
129
127
  <script type="text/javascript">
130
128
  const { renderApplePayButton, ButtonStyle, Scope, SupportedNetworks, Locale, ButtonType } = window.TapSDKs
131
129
  renderApplePayButton(
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'
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
- | merchantIdentifier | `string` | `required` | The merchant identifier provided by Tap |
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?: string;
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
+ }
package/build/api/app.service.d.ts CHANGED
@@ -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(merchantId?: string): Promise<{
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 (merchantId) {
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', { merchant_id: merchantId !== null && merchantId !== void 0 ? merchantId : '' })];
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)
package/build/features/ApplePayButton/ApplePayButton.js CHANGED
@@ -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, merchantIdentifier = _a.merchantIdentifier, 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, 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
package/build/hooks/useApplePay.d.ts CHANGED
@@ -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, merchantIdentifier, environment, locale, onReady }: UseApplePayProps) => UseApplePayReturnProps;
8
+ export declare const useApplePay: ({ publicKey, merchant, transaction, billingContact, onCancel, onError, onSuccess, scope, supportedNetworks, metaData, debug, environment, locale, onReady }: UseApplePayProps) => UseApplePayReturnProps;
9
9
  export {};
package/build/hooks/useApplePay.js CHANGED
@@ -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, merchantIdentifier = _a.merchantIdentifier, 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, 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, merchantIdentifier)];
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)
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tap-payments/apple-pay-button",
3
- "version": "1.0.6",
3
+ "version": "1.0.7",
4
4
  "description": "Apple Pay Button React Component",
5
5
  "main": "build/index.js",
6
6
  "module": "build/index.js",