@tap-payments/apple-pay-button 1.0.11 → 1.0.12

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 CHANGED
@@ -25,111 +25,109 @@ yarn add @tap-payments/apple-pay-button
25
25
  ```javascript
26
26
  import React from 'react'
27
27
  import {
28
- ApplePayButton,
29
- ThemeMode,
30
- SupportedNetworks,
31
- Scope,
32
- Environment,
33
- Locale,
34
- ButtonType,
35
- Edges
28
+ ApplePayButton,
29
+ ThemeMode,
30
+ SupportedNetworks,
31
+ Scope,
32
+ Environment,
33
+ Locale,
34
+ ButtonType,
35
+ Edges
36
36
  } from '@tap-payments/apple-pay-button'
37
37
 
38
38
  const App = () => {
39
- return (
40
- <ApplePayButton
41
- // required (The public Key provided by Tap)
42
- publicKey={'pk_test_xxxxxxxxxxxxxxxzh'}
43
- // optional (The environment of the SDK and it can be one of these environments)
44
- environment={Environment.Development}
45
- // optional (to enable the debug mode)
46
- debug
47
- // required
48
- merchant={{
49
- // required (The merchant domain name)
50
- domain: 'example.com',
51
- // required (The merchant identifier provided by Tap)
52
- id: '1xxxxx8'
53
- }}
54
- // required
55
- transaction={{
56
- // required (The amount to be charged)
57
- amount: '12',
58
- // required (The currency of the amount)
59
- currency: 'KWD'
60
- }}
61
- // optional (The scope of the SDK and it can be one of these scopes:
62
- // [TapToken,AppleToken], by default it is TapToken)
63
- scope={Scope.TapToken}
64
- // optional
65
- acceptance={{
66
- // optional (The supported networks for the Apple Pay button and it
67
- // can be one of these networks: [Mada,Visa,MasterCard], by default
68
- // we bring all the supported networks from tap merchant configuration)
69
- supportedBrands: [SupportedNetworks.Mada, SupportedNetworks.Visa, SupportedNetworks.MasterCard]
70
- }}
71
- // optional (The billing contact information)
72
- customer={{
73
- //"OPTIONAL : Customer ID",
74
- id: 'cus_xxx',
75
- name: [
76
- {
77
- //"REQUIRED : en or ar",
78
- lang: Locale.EN,
79
- // "OPTIONAL : First name of the customer.",
80
- first: 'test',
81
- //"OPTIONAL : Last name of the customer.",
82
- last: 'tester',
83
- // "OPTIONAL : Middle name of the customer.",
84
- middle: 'test'
85
- }
86
- ],
87
- // Defines the contact details for the customer & to be used in creating the billing contact info in Apple pay request
88
- contact: {
89
- //"OPTIONAL : The customer's email",
90
- email: 'test@gmail.com',
91
- //"OPTIONAL : The customer's phone number"
92
- phone: {
93
- //"OPTIONAL : The customer's country code",
94
- countryCode: '+20',
95
- //"OPTIONAL : The customer's phone number
96
- number: '10XXXXXX56'
97
- }
98
- }
99
- }}
100
- //optional (for styling button)
101
- interface={{
102
- // optional (The locale of the Apple Pay button and it can be one of these locales:[EN,AR])
103
- locale: Locale.EN,
104
- // optional (The theme of the Apple Pay button and it can be one of
105
- // these values : [light,Dark], by default it is detected from user device )
106
- theme: ThemeMode.DARK,
107
- // optional (The type of the Apple Pay )
108
- type: ButtonType.BUY,
109
- // optional (The border of the Apple Pay button and it can be one of these values:[curved,straight])
110
- edges: Edges.CURVED
111
- }}
112
- // optional (A callback function that will be called when you cancel
113
- // the payment process)
114
- onCancel={() => console.log('cancelled')}
115
- // optional (A callback function that will be called when you have an error)
116
- onError={(err) => console.error(err)}
117
- // optional (A async function that will be called after creating the token
118
- // successfully)
119
- onSuccess={async (token) => {
120
- // do your stuff here...
121
- console.log(token)
122
- }}
123
- // optional (A callback function that will be called when you button is clickable)
124
- onReady={() => {
125
- console.log('Ready')
126
- }}
127
- // optional (A callback function that will be called when the button clicked)
128
- onClick={() => {
129
- console.log('Clicked')
130
- }}
131
- />
132
- )
39
+ return (
40
+ <ApplePayButton
41
+ // The public Key provided by Tap
42
+ publicKey={'pk_test_xxxxxxxxxxxxxxxzh'}
43
+ //The environment of the SDK and it can be one of these environments
44
+ environment={Environment.Development}
45
+ //to enable the debug mode
46
+ debug
47
+ merchant={{
48
+ // The merchant domain name
49
+ domain: 'example.com',
50
+ // The merchant identifier provided by Tap
51
+ id: '1xxxxx8'
52
+ }}
53
+ transaction={{
54
+ // The amount to be charged
55
+ amount: '12',
56
+ // The currency of the amount
57
+ currency: 'KWD'
58
+ }}
59
+ // The scope of the SDK and it can be one of these scopes:
60
+ // [TapToken,AppleToken], by default it is TapToken)
61
+ scope={Scope.TapToken}
62
+ acceptance={{
63
+ // The supported networks for the Apple Pay button and it
64
+ // can be one of these networks: [Mada,Visa,MasterCard], by default
65
+ // we bring all the supported networks from tap merchant configuration
66
+ supportedBrands: [SupportedNetworks.Mada, SupportedNetworks.Visa, SupportedNetworks.MasterCard]
67
+ supportedCards : ["DEBIT","CREDIT"],
68
+ supportedCardsWithAuthentications : ["3DS","EMV"]
69
+ }}
70
+ // The billing contact information
71
+ customer={{
72
+ id: 'cus_xxx',
73
+ name: [
74
+ {
75
+ //"en or ar",
76
+ lang: Locale.EN,
77
+ // "First name of the customer.",
78
+ first: 'test',
79
+ //"Last name of the customer.",
80
+ last: 'tester',
81
+ // "Middle name of the customer.",
82
+ middle: 'test'
83
+ }
84
+ ],
85
+ // Defines the contact details for the customer & to be used in creating the billing contact info in Apple pay request
86
+ contact: {
87
+ //"The customer's email",
88
+ email: 'test@gmail.com',
89
+ //"The customer's phone number"
90
+ phone: {
91
+ //"The customer's country code",
92
+ countryCode: '+20',
93
+ //"The customer's phone number
94
+ number: '10XXXXXX56'
95
+ }
96
+ }
97
+ }}
98
+ //for styling button
99
+ interface={{
100
+ //The locale of the Apple Pay button and it can be one of these locales:[EN,AR]
101
+ locale: Locale.EN,
102
+ // The theme of the Apple Pay button and it can be one of
103
+ // these values : [light,Dark], by default it is detected from user device
104
+ theme: ThemeMode.DARK,
105
+ // The type of the Apple Pay
106
+ type: ButtonType.BUY,
107
+ // The border of the Apple Pay button and it can be one of these values:[curved,straight]
108
+ edges: Edges.CURVED
109
+ }}
110
+ // optional (A callback function that will be called when you cancel
111
+ // the payment process)
112
+ onCancel={() => console.log('cancelled')}
113
+ // optional (A callback function that will be called when you have an error)
114
+ onError={(err) => console.error(err)}
115
+ // optional (A async function that will be called after creating the token
116
+ // successfully)
117
+ onSuccess={async (token) => {
118
+ // do your stuff here...
119
+ console.log(token)
120
+ }}
121
+ // optional (A callback function that will be called when you button is clickable)
122
+ onReady={() => {
123
+ console.log('Ready')
124
+ }}
125
+ // optional (A callback function that will be called when the button clicked)
126
+ onClick={() => {
127
+ console.log('Clicked')
128
+ }}
129
+ />
130
+ )
133
131
  }
134
132
  ```
135
133
 
@@ -143,66 +141,72 @@ const App = () => {
143
141
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
144
142
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
145
143
  <title>apple pay button</title>
146
- <link rel="stylesheet" href="https://tap-sdks.b-cdn.net/apple-pay/build-1.0.7/main.css" />
147
- <script src="https://tap-sdks.b-cdn.net/apple-pay//build-1.0.7/main.js"></script>
144
+ <link rel="stylesheet" href="https://tap-sdks.b-cdn.net/apple-pay/build-1.0.12/main.css" />
145
+ <script src="https://tap-sdks.b-cdn.net/apple-pay/build-1.0.12/main.js"></script>
148
146
  </head>
149
147
 
150
148
  <body>
151
149
  <div id="apple-pay-button"></div>
152
150
  <script type="text/javascript">
153
- const { renderApplePayButton, ButtonStyle, Scope, SupportedNetworks, Locale, ButtonType } = window.TapSDKs
151
+ const { renderApplePayButton, ThemeMode, SupportedNetworks, Scope, Environment, Locale, ButtonType, Edges } =
152
+ window.TapSDKs
154
153
  renderApplePayButton(
155
- {
156
- publicKey: 'pk_test_7xxxxxxxxx',
157
- environment: Environment.Sandbox,
158
- scope: Scope.TapToken,
159
- merchant: {
160
- domain: 'tp-txxxxxxxx',
161
- id: 'merchant_xxxxxxxxxx"
162
- },
163
- transaction: {
164
- currency: 'SAR',
165
- amount: '3'
166
- },
167
- acceptance: {
168
- supportedBrands: [SupportedNetworks.Mada, SupportedNetworks.Visa, SupportedNetworks.MasterCard]
169
- },
170
-
171
- customer: {
172
- name: [{
173
- locale: 'en'
174
- first: 'test',
175
- last: 'tester',
176
- middle: 'test'
177
- }],
178
- contact: {
179
- email: 'test@gmail.com',
180
- phone:{
154
+ {
155
+ publicKey: 'pk_test_7xxxxxxxxx',
156
+ environment: Environment.Development,
157
+ scope: Scope.TapToken,
158
+ merchant: {
159
+ domain: 'tp-txxxxxxxx',
160
+ id: 'merchant_xxxxxxxxxx'
161
+ },
162
+ transaction: {
163
+ currency: 'SAR',
164
+ amount: '3'
165
+ },
166
+ acceptance: {
167
+ supportedBrands: [SupportedNetworks.Mada, SupportedNetworks.Visa, SupportedNetworks.MasterCard],
168
+ supportedCards: ['DEBIT', 'CREDIT'],
169
+ supportedCardsWithAuthentications: ['3DS', 'EMV']
170
+ },
171
+
172
+ customer: {
173
+ id: 'cus_xxx',
174
+ name: [
175
+ {
176
+ locale: 'en',
177
+ first: 'test',
178
+ last: 'tester',
179
+ middle: 'test'
180
+ }
181
+ ],
182
+ contact: {
183
+ email: 'test@gmail.com',
184
+ phone: {
181
185
  number: '10XXXXXX56',
182
- countryCode: '+20',
183
- }
184
- }
185
- },
186
- interface: {
187
- locale: Locale.EN,
188
- theme: ThemeMode.DARK,
189
- type: ButtonType.BUY,
190
- edges: Edges.CURVED
191
- },
192
- onCancel: async () => {
193
- console.log('onCancel')
194
- },
195
- onError: async (error) => {
196
- console.log('onError', error)
197
- },
198
- onSuccess: async (data) => {
199
- console.log('onSuccess', data)
200
- },
201
- onReady: async () => {
202
- console.log('onReady')
203
- }
204
- },
205
- 'apple-pay-button'
186
+ countryCode: '+20'
187
+ }
188
+ }
189
+ },
190
+ interface: {
191
+ locale: Locale.EN,
192
+ theme: ThemeMode.DARK,
193
+ type: ButtonType.BUY,
194
+ edges: Edges.CURVED
195
+ },
196
+ onCancel: async () => {
197
+ console.log('onCancel')
198
+ },
199
+ onError: async (error) => {
200
+ console.log('onError', error)
201
+ },
202
+ onSuccess: async (data) => {
203
+ console.log('onSuccess', data)
204
+ },
205
+ onReady: async () => {
206
+ console.log('onReady')
207
+ }
208
+ },
209
+ 'apple-pay-button'
206
210
  )
207
211
  </script>
208
212
  </body>
@@ -211,26 +215,26 @@ const App = () => {
211
215
 
212
216
  ## Configurations
213
217
 
214
- | Name | Type | R/O | Description |
215
- | -------------------------------------------- | ------------ | ---------- | -------------------------------------------------------------------------------- |
216
- | publicKey | `string` | `required` | The public Key provided by Tap |
217
- | environment | `enum` | `optional` | The environment of the SDK and it can be one of these environments `Environment` |
218
- | debug | `boolean` | `optional` | To enable the debug mode |
219
- | merchant.id | `string` | `required` | The merchant identifier provided by Tap |
220
- | merchant.domain | `string` | `required` | The merchant domain name |
221
- | transaction.amount | `string` | `required` | The amount to be charged |
222
- | transaction.currency | `string` | `required` | The currency of the amount |
223
- | scope | `enum` | `optional` | The scope of the SDK |
224
- | acceptance.supportedBrands | `array` | `optional` | The supported networks for the Apple Pay button |
225
- | acceptance.supportedCards | `array` | `optional` | The supported cards for the Apple Pay button |
226
- | acceptance.supportedCardsWithAuthentications | `array` | `optional` | The supported cards with authentications for the Apple Pay button |
227
- | interface.theme | `enum` | `optional` | The theme of the Apple Pay button |
228
- | interface.locale | `Locale` | `optional` | The locale of the Apple Pay button |
229
- | interface.type | `ButtonType` | `optional` | The type of the Apple Pay button |
230
- | interface.edges | `ButtonType` | `optional` | The border of the Apple Pay button |
231
- | customer | `object` | `optional` | The Customer details information |
232
- | onCancel | `function` | `optional` | A callback function that will be called when you cancel the process |
233
- | onError | `function` | `optional` | A callback function that will be called when you have an error |
234
- | onSuccess | `function` | `optional` | A async function that will be called after creating the token successfully |
235
- | onClick | `function` | `optional` | A callback function that will be called when the button clicked |
236
- | onReady | `function` | `optional` | A callback function that will be called when you button is clickable |
218
+ | Name | Type | R/O | Description |
219
+ | -------------------------------------------- | ------------ | ---------- | ---------------------------------------------------------------------------------------------------------- |
220
+ | publicKey | `string` | `required` | The public Key provided by Tap |
221
+ | environment | `enum` | `optional` | The environment of the SDK and it can be one of these environments `Environment`: [Development,Production] |
222
+ | debug | `boolean` | `optional` | To enable the debug mode |
223
+ | merchant.id | `string` | `required` | The merchant identifier provided by Tap |
224
+ | merchant.domain | `string` | `required` | The merchant domain name |
225
+ | transaction.amount | `string` | `required` | The amount to be charged |
226
+ | transaction.currency | `string` | `required` | The currency of the amount |
227
+ | scope | `enum` | `optional` | The scope of the SDK |
228
+ | acceptance.supportedBrands | `array` | `optional` | The supported networks for the Apple Pay button |
229
+ | acceptance.supportedCards | `array` | `optional` | The supported cards for the Apple Pay button |
230
+ | acceptance.supportedCardsWithAuthentications | `array` | `optional` | The supported cards with authentications for the Apple Pay button |
231
+ | interface.theme | `enum` | `optional` | The theme of the Apple Pay button |
232
+ | interface.locale | `Locale` | `optional` | The locale of the Apple Pay button |
233
+ | interface.type | `ButtonType` | `optional` | The type of the Apple Pay button |
234
+ | interface.edges | `ButtonType` | `optional` | The border of the Apple Pay button |
235
+ | customer | `object` | `optional` | The Customer details information |
236
+ | onCancel | `function` | `optional` | A callback function that will be called when you cancel the process |
237
+ | onError | `function` | `optional` | A callback function that will be called when you have an error |
238
+ | onSuccess | `function` | `optional` | A async function that will be called after creating the token successfully |
239
+ | onClick | `function` | `optional` | A callback function that will be called when the button clicked |
240
+ | onReady | `function` | `optional` | A callback function that will be called when you button is clickable |
@@ -155,7 +155,7 @@ var APPService = (function (_super) {
155
155
  return [4, new BrowserInfo.BrowserInfo({
156
156
  app: { name: '@tap-payments/apple-pay-button', language: locale },
157
157
  credentials: { mdn: domain, pk: pk },
158
- encrypt: function (_key, value) { return encryptString(value); }
158
+ encrypt: function (_key, value) { return encryptString(value.substring(0, 115)); }
159
159
  }).get()];
160
160
  case 1:
161
161
  encryptedHeaders = _b.sent();
@@ -50,6 +50,7 @@ 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
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;
55
56
  var _b = useState(false), loading = _b[0], setLoading = _b[1];
@@ -152,6 +153,7 @@ export var useApplePay = function (_a) {
152
153
  transaction: __assign(__assign({}, transaction), { currency: currency }),
153
154
  customer: customer,
154
155
  supportedNetworks: cardBrands,
156
+ merchantCapabilities: getMerchantCapaplities(acceptance === null || acceptance === void 0 ? void 0 : acceptance.supportedCards),
155
157
  name: profileData.merchant.name
156
158
  });
157
159
  if (debug) {
@@ -2,8 +2,9 @@ import { Acceptance, ApplePayButtonProps, ApplePayRequestData, PaymentMethod } f
2
2
  import { SupportedNetworks } from '../constants';
3
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, customer, supportedNetworks, countryCode, name }: Pick<ApplePayButtonProps, "transaction" | "customer"> & {
5
+ export declare const getApplePayRequest: ({ transaction, customer, supportedNetworks, merchantCapabilities, countryCode, name }: Pick<ApplePayButtonProps, "transaction" | "customer"> & {
6
6
  supportedNetworks: Acceptance['supportedBrands'];
7
+ merchantCapabilities: ApplePayRequestData['merchantCapabilities'];
7
8
  countryCode: string;
8
9
  name: string;
9
10
  }) => ApplePayRequestData;
@@ -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(); };
@@ -26,11 +25,11 @@ export var validateCurrency = function (currency, currencies) {
26
25
  };
27
26
  export var getApplePayRequest = function (_a) {
28
27
  var _b, _c, _d, _e, _f, _g, _h, _j, _k;
29
- var transaction = _a.transaction, customer = _a.customer, supportedNetworks = _a.supportedNetworks, countryCode = _a.countryCode, name = _a.name;
28
+ var transaction = _a.transaction, customer = _a.customer, supportedNetworks = _a.supportedNetworks, merchantCapabilities = _a.merchantCapabilities, countryCode = _a.countryCode, name = _a.name;
30
29
  return {
31
30
  countryCode: countryCode,
32
31
  currencyCode: transaction.currency,
33
- merchantCapabilities: [MerchantCapabilities.Supports3DS],
32
+ merchantCapabilities: merchantCapabilities,
34
33
  supportedNetworks: supportedNetworks,
35
34
  billingContact: customer && {
36
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),
@@ -1,4 +1,4 @@
1
- import { ApplePayButtonProps } from '..';
1
+ import { ApplePayButtonProps } from '../@types';
2
2
  export declare const getDefaultValues: (mainObject: ApplePayButtonProps) => {
3
3
  interface: {
4
4
  locale?: "en" | "ar" | "fr" | undefined;
@@ -27,3 +27,4 @@ export declare const getDefaultValues: (mainObject: ApplePayButtonProps) => {
27
27
  metaData?: import("../@types").MetaData | undefined;
28
28
  debug?: boolean | undefined;
29
29
  };
30
+ export declare const getMerchantCapaplities: (supportedCards?: Array<string>) => ("supports3DS" | "supportsCredit" | "supportsDebit")[];
@@ -9,7 +9,16 @@ var __assign = (this && this.__assign) || function () {
9
9
  };
10
10
  return __assign.apply(this, arguments);
11
11
  };
12
- import { ThemeMode, Locale, ButtonType, Edges } from '../constants';
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';
13
22
  export var getDefaultValues = function (mainObject) {
14
23
  var userThemeMode = window.matchMedia('(prefers-color-scheme: light)').matches ? ThemeMode.LIGHT : ThemeMode.DARK;
15
24
  var userLang = navigator.language.toLowerCase().includes(Locale.AR) ? Locale.AR : Locale.EN;
@@ -21,3 +30,19 @@ export var getDefaultValues = function (mainObject) {
21
30
  };
22
31
  return __assign(__assign({}, mainObject), { interface: __assign(__assign({}, defaultInterface), mainObject.interface) });
23
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.11",
3
+ "version": "1.0.12",
4
4
  "description": "Apple Pay Button React Component",
5
5
  "main": "build/index.js",
6
6
  "module": "build/index.js",