@tap-payments/apple-pay-button 0.0.28-test → 0.0.30-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.
Files changed (7) hide show
  1. package/README.md +158 -155
  2. package/build/hooks/useApplePay.js +2 -0
  3. package/build/utils/config.d.ts +2 -1
  4. package/build/utils/config.js +2 -3
  5. package/build/utils/defaultValues.d.ts +2 -1
  6. package/build/utils/defaultValues.js +26 -1
  7. package/package.json +1 -1
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,8 +141,8 @@ 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://apple-pay-button.b-cdn.net/build-0.0.21-test/main.css" />
147
- <script src="https://apple-pay-button.b-cdn.net/build-0.0.21-test/main.js"></script>
144
+ <link rel="stylesheet" href="https://tap-sdks.b-cdn.net/apple-pay/build-0.0.30-test/main.css" />
145
+ <script src="https://tap-sdks.b-cdn.net/apple-pay/build-0.0.30.-test/main.js"></script>
148
146
  </head>
149
147
 
150
148
  <body>
@@ -152,57 +150,62 @@ const App = () => {
152
150
  <script type="text/javascript">
153
151
  const { renderApplePayButton, ButtonStyle, Scope, SupportedNetworks, Locale, ButtonType } = window.TapSDKs
154
152
  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:{
153
+ {
154
+ publicKey: 'pk_test_7xxxxxxxxx',
155
+ environment: Environment.Sandbox,
156
+ scope: Scope.TapToken,
157
+ merchant: {
158
+ domain: 'tp-txxxxxxxx',
159
+ id: 'merchant_xxxxxxxxxx'
160
+ },
161
+ transaction: {
162
+ currency: 'SAR',
163
+ amount: '3'
164
+ },
165
+ acceptance: {
166
+ supportedBrands: [SupportedNetworks.Mada, SupportedNetworks.Visa, SupportedNetworks.MasterCard],
167
+ supportedCards: ['DEBIT', 'CREDIT'],
168
+ supportedCardsWithAuthentications: ['3DS', 'EMV']
169
+ },
170
+
171
+ customer: {
172
+ id: 'cus_xxx',
173
+ name: [
174
+ {
175
+ locale: 'en',
176
+ first: 'test',
177
+ last: 'tester',
178
+ middle: 'test'
179
+ }
180
+ ],
181
+ contact: {
182
+ email: 'test@gmail.com',
183
+ phone: {
181
184
  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'
185
+ countryCode: '+20'
186
+ }
187
+ }
188
+ },
189
+ interface: {
190
+ locale: Locale.EN,
191
+ theme: ThemeMode.DARK,
192
+ type: ButtonType.BUY,
193
+ edges: Edges.CURVED
194
+ },
195
+ onCancel: async () => {
196
+ console.log('onCancel')
197
+ },
198
+ onError: async (error) => {
199
+ console.log('onError', error)
200
+ },
201
+ onSuccess: async (data) => {
202
+ console.log('onSuccess', data)
203
+ },
204
+ onReady: async () => {
205
+ console.log('onReady')
206
+ }
207
+ },
208
+ 'apple-pay-button'
206
209
  )
207
210
  </script>
208
211
  </body>
@@ -228,7 +231,7 @@ const App = () => {
228
231
  | interface.locale | `Locale` | `optional` | The locale of the Apple Pay button |
229
232
  | interface.type | `ButtonType` | `optional` | The type of the Apple Pay button |
230
233
  | interface.edges | `ButtonType` | `optional` | The border of the Apple Pay button |
231
- | customer | `object` | `optional` | The Customer details information |
234
+ | customer | `object` | `optional` | The Customer details information |
232
235
  | onCancel | `function` | `optional` | A callback function that will be called when you cancel the process |
233
236
  | onError | `function` | `optional` | A callback function that will be called when you have an error |
234
237
  | onSuccess | `function` | `optional` | A async function that will be called after creating the token successfully |
package/build/hooks/useApplePay.js CHANGED
@@ -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) {
package/build/utils/config.d.ts CHANGED
@@ -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;
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(); };
@@ -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),
package/build/utils/defaultValues.d.ts CHANGED
@@ -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")[];
package/build/utils/defaultValues.js CHANGED
@@ -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": "0.0.28-test",
3
+ "version": "0.0.30-test",
4
4
  "description": "Apple Pay Button React Component",
5
5
  "main": "build/index.js",
6
6
  "module": "build/index.js",