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

package/README.md

@@ -25,87 +25,109 @@ yarn add @tap-payments/apple-pay-button
 ```javascript
 import React from 'react'
 import {
-	ApplePayButton,
-	ButtonStyle,
-	SupportedNetworks,
-	Scope,
-	Environment,
-	ButtonType,
-	Locale
+ ApplePayButton,
+ ThemeMode,
+ SupportedNetworks,
+ Scope,
+ Environment,
+ Locale,
+ ButtonType,
+ Edges
 } from '@tap-payments/apple-pay-button'
 
 const App = () => {
-	return (
-		<ApplePayButton
-			// required (The public Key provided by Tap)
-			publicKey={'pk_test_xxxxxxxxxxxxxxxzh'}
-			// optional (The environment of the SDK and it can be one of these Environment)
-			environment={Environment.Development}
-			// optional (to enable the debug mode)
-			debug
-			// required
-			merchant={{
-				// required (The merchant domain name)
-				domain: 'example.com',
-				// required (The merchant identifier provided by Tap)
-				id: '1xxxxx8'
-			}}
-			// required
-			transaction={{
-				// required (The amount to be charged)
-				amount: '12',
-				// required (The currency of the amount)
-				currency: 'KWD'
-			}}
-			// optional (The scope of the SDK and it can be one of these scopes:
-			// [TapToken,AppleToken], by default it is TapToken)
-			scope={Scope.TapToken}
-			// optional (The supported networks for the Apple Pay button and it
-			// can be one of these networks: [Mada,Visa,MasterCard], by default
-			// we bring all the supported networks from tap merchant configuration)
-			supportedNetworks={[SupportedNetworks.Mada, SupportedNetworks.Visa, SupportedNetworks.MasterCard]}
-			// optional (The style of the Apple Pay button and it can be one of
-			// these styles: [White,WhiteOutline,Black], by default it is WhiteOutline)
-			buttonStyle={ButtonStyle.WhiteOutline}
-			// optional (The locale of the Apple Pay button and it can be one of these locales)
-			locale={Locale.EN}
-			// optional (The type of the Apple Pay button and it can be one of these types)
-			type={ButtonType.PLAIN}
-			// optional (The billing contact information)
-			billingContact={{
-				// required
-				email: {
-					// required
-					address: 'test@gmail.com'
-				},
-				// required
-				name: {
-					// required
-					first: 'test',
-					// required
-					last: 'tester',
-					// optional
-					middle: 'test'
-				},
-				// required
-				phone: {
-					number: '10XXXXXX56',
-					code: '+20'
-				}
-			}}
-			// optional (A callback function that will be called when you cancel
-			// the payment process)
-			onCancel={() => console.log('cancelled')}
-			// optional (A callback function that will be called when you have an error)
-			onError={(err) => console.error(err)}
-			// optional (A async function that will be called after creating the token
-			// successfully)
-			onSuccess={async (token) => {
-				// do your stuff here...
-				console.log(token)
-			}}
-		/>
-	)
+ return (
+  <ApplePayButton
+   // The public Key provided by Tap
+   publicKey={'pk_test_xxxxxxxxxxxxxxxzh'}
+   //The environment of the SDK and it can be one of these environments
+   environment={Environment.Development}
+   //to enable the debug mode
+   debug
+   merchant={{
+    //  The merchant domain name
+    domain: 'example.com',
+    //  The merchant identifier provided by Tap
+    id: '1xxxxx8'
+   }}
+   transaction={{
+    // The amount to be charged
+    amount: '12',
+    // The currency of the amount
+    currency: 'KWD'
+   }}
+   // The scope of the SDK and it can be one of these scopes:
+   // [TapToken,AppleToken], by default it is TapToken)
+   scope={Scope.TapToken}
+   acceptance={{
+    // The supported networks for the Apple Pay button and it
+    // can be one of these networks: [Mada,Visa,MasterCard], by default
+    // we bring all the supported networks from tap merchant configuration
+    supportedBrands: [SupportedNetworks.Mada, SupportedNetworks.Visa, SupportedNetworks.MasterCard]
+    supportedCards : ["DEBIT","CREDIT"],
+         supportedCardsWithAuthentications : ["3DS","EMV"]
+   }}
+   // The billing contact information
+   customer={{
+    id: 'cus_xxx',
+    name: [
+     {
+      //"en or ar",
+      lang: Locale.EN,
+      // "First name of the customer.",
+      first: 'test',
+      //"Last name of the customer.",
+      last: 'tester',
+      // "Middle name of the customer.",
+      middle: 'test'
+     }
+    ],
+    // Defines the contact details for the customer & to be used in creating the billing contact info in Apple pay request
+    contact: {
+     //"The customer's email",
+     email: 'test@gmail.com',
+     //"The customer's phone number"
+     phone: {
+      //"The customer's country code",
+      countryCode: '+20',
+      //"The customer's phone number
+      number: '10XXXXXX56'
+     }
+    }
+   }}
+   //for styling button
+   interface={{
+    //The locale of the Apple Pay button and it can be one of these locales:[EN,AR]
+    locale: Locale.EN,
+    // The theme of the Apple Pay button and it can be one of
+    // these values : [light,Dark], by default it is detected from user device
+    theme: ThemeMode.DARK,
+    // The type of the Apple Pay
+    type: ButtonType.BUY,
+    // The border of the Apple Pay button and it can be one of these values:[curved,straight]
+    edges: Edges.CURVED
+   }}
+   // optional (A callback function that will be called when you cancel
+   // the payment process)
+   onCancel={() => console.log('cancelled')}
+   // optional (A callback function that will be called when you have an error)
+   onError={(err) => console.error(err)}
+   // optional (A async function that will be called after creating the token
+   // successfully)
+   onSuccess={async (token) => {
+    // do your stuff here...
+    console.log(token)
+   }}
+   // optional (A callback function that will be called when you button is clickable)
+   onReady={() => {
+    console.log('Ready')
+   }}
+   // optional (A callback function that will be called when the button clicked)
+   onClick={() => {
+    console.log('Clicked')
+   }}
+  />
+ )
 }
 ```
 
@@ -119,63 +141,72 @@ const App = () => {
 		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 		<title>apple pay button</title>
-		<link rel="stylesheet" href="https://tap-sdks.b-cdn.net/apple-pay/build-1.0.8/main.css" />
-		<script src="https://tap-sdks.b-cdn.net/apple-pay//build-1.0.8/main.js"></script>
+		<link rel="stylesheet" href="https://tap-sdks.b-cdn.net/apple-pay/build-1.0.12/main.css" />
+		<script src="https://tap-sdks.b-cdn.net/apple-pay/build-1.0.12/main.js"></script>
 	</head>
+
 	<body>
 		<div id="apple-pay-button"></div>
 		<script type="text/javascript">
-			const { renderApplePayButton, ButtonStyle, Scope, SupportedNetworks, Locale, ButtonType } = window.TapSDKs
+			const { renderApplePayButton, ThemeMode, SupportedNetworks, Scope, Environment, Locale, ButtonType, Edges } =
+				window.TapSDKs
 			renderApplePayButton(
-			 {
-			  publicKey: 'pk_test_7xxxxxxxxx',
-			  environment: Environment.Sandbox,
-			  merchant: {
-			   domain: 'tp-txxxxxxxx',
-			   id: 'merchant_xxxxxxxxxx"
-			  },
-
-			  transaction: {
-
-			   currency: 'SAR',
-
-			   amount: '3'
-			  },
-
-			  scope: Scope.TapToken,
-			  buttonStyle: ButtonStyle.Black,
-			  type: ButtonType.PLAIN,
-			  locale: Locale.EN,
-			  supportedNetworks: [SupportedNetworks.Visa, SupportedNetworks.MasterCard, SupportedNetworks.Mada],
-			  billingContact: {
-			   email: {
-
-			    address: 'test`@gmail.com'
-			   },
-			   name: {
-			    first: 'test',
-			    last: 'test',
-			    middle: '123'
-			   },
-			   phone: {
-			    number: '555555555',
-			    code: '966'
-			   }
-			  },
-			  onCancel: async () => {
-			   console.log('onCancel')
-			  },
-			  onError: async (error) => {
-			   console.log('onError', error)
-			  },
-			  onSuccess: async (data) => {
-			   console.log('onSuccess', data)
-			  },
-			  onReady: async () => {
-			   console.log('onReady')
-			  }
-			 },
-			 'apple-pay-button'
+				{
+					publicKey: 'pk_test_7xxxxxxxxx',
+					environment: Environment.Development,
+					scope: Scope.TapToken,
+					merchant: {
+						domain: 'tp-txxxxxxxx',
+						id: 'merchant_xxxxxxxxxx'
+					},
+					transaction: {
+						currency: 'SAR',
+						amount: '3'
+					},
+					acceptance: {
+						supportedBrands: [SupportedNetworks.Mada, SupportedNetworks.Visa, SupportedNetworks.MasterCard],
+						supportedCards: ['DEBIT', 'CREDIT'],
+						supportedCardsWithAuthentications: ['3DS', 'EMV']
+					},
+
+					customer: {
+						id: 'cus_xxx',
+						name: [
+							{
+								locale: 'en',
+								first: 'test',
+								last: 'tester',
+								middle: 'test'
+							}
+						],
+						contact: {
+							email: 'test@gmail.com',
+							phone: {
+								number: '10XXXXXX56',
+								countryCode: '+20'
+							}
+						}
+					},
+					interface: {
+						locale: Locale.EN,
+						theme: ThemeMode.DARK,
+						type: ButtonType.BUY,
+						edges: Edges.CURVED
+					},
+					onCancel: async () => {
+						console.log('onCancel')
+					},
+					onError: async (error) => {
+						console.log('onError', error)
+					},
+					onSuccess: async (data) => {
+						console.log('onSuccess', data)
+					},
+					onReady: async () => {
+						console.log('onReady')
+					}
+				},
+				'apple-pay-button'
 			)
 		</script>
 	</body>
@@ -184,21 +215,26 @@ const App = () => {
 
 ## Configurations
 
-| Name                 | Type                  | R/O        | Description                                                                      |
-| -------------------- | --------------------- | ---------- | -------------------------------------------------------------------------------- |
-| publicKey            | `string`              | `required` | The public Key provided by Tap                                                   |
-| environment          | `Environment`         | `optional` | The environment of the SDK and it can be one of these environments `Environment` |
-| debug                | `boolean`             | `optional` | To enable the debug mode                                                         |
-| merchant.id          | `string`              | `required` | The merchant identifier provided by Tap                                          |
-| merchant.domain      | `string`              | `required` | The merchant domain name                                                         |
-| transaction.amount   | `string`              | `required` | The amount to be charged                                                         |
-| transaction.currency | `string`              | `required` | The currency of the amount                                                       |
-| scope                | `Scope`               | `optional` | The scope of the SDK                                                             |
-| supportedNetworks    | `SupportedNetworks[]` | `optional` | The supported networks for the Apple Pay button                                  |
-| buttonStyle          | `ButtonStyle`         | `optional` | The style of the Apple Pay button                                                |
-| locale               | `Locale`              | `optional` | The locale of the Apple Pay button                                               |
-| type                 | `ButtonType`          | `optional` | The type of the Apple Pay button                                                 |
-| billingContact       | `BillingContact`      | `optional` | The billing contact information                                                  |
-| onCancel             | `function`            | `optional` | A callback function that will be called when you cancel the process              |
-| onError              | `function`            | `optional` | A callback function that will be called when you have an error                   |
-| onSuccess            | `function`            | `optional` | A async function that will be called after creating the token successfully       |
+| Name                                         | Type         | R/O        | Description                                                                                                |
+| -------------------------------------------- | ------------ | ---------- | ---------------------------------------------------------------------------------------------------------- |
+| publicKey                                    | `string`     | `required` | The public Key provided by Tap                                                                             |
+| environment                                  | `enum`       | `optional` | The environment of the SDK and it can be one of these environments `Environment`: [Development,Production] |
+| debug                                        | `boolean`    | `optional` | To enable the debug mode                                                                                   |
+| merchant.id                                  | `string`     | `required` | The merchant identifier provided by Tap                                                                    |
+| merchant.domain                              | `string`     | `required` | The merchant domain name                                                                                   |
+| transaction.amount                           | `string`     | `required` | The amount to be charged                                                                                   |
+| transaction.currency                         | `string`     | `required` | The currency of the amount                                                                                 |
+| scope                                        | `enum`       | `optional` | The scope of the SDK                                                                                       |
+| acceptance.supportedBrands                   | `array`      | `optional` | The supported networks for the Apple Pay button                                                            |
+| acceptance.supportedCards                    | `array`      | `optional` | The supported cards for the Apple Pay button                                                               |
+| acceptance.supportedCardsWithAuthentications | `array`      | `optional` | The supported cards with authentications for the Apple Pay button                                          |
+| interface.theme                              | `enum`       | `optional` | The theme of the Apple Pay button                                                                          |
+| interface.locale                             | `Locale`     | `optional` | The locale of the Apple Pay button                                                                         |
+| interface.type                               | `ButtonType` | `optional` | The type of the Apple Pay button                                                                           |
+| interface.edges                              | `ButtonType` | `optional` | The border of the Apple Pay button                                                                         |
+| customer                                     | `object`     | `optional` | The Customer details information                                                                           |
+| onCancel                                     | `function`   | `optional` | A callback function that will be called when you cancel the process                                        |
+| onError                                      | `function`   | `optional` | A callback function that will be called when you have an error                                             |
+| onSuccess                                    | `function`   | `optional` | A async function that will be called after creating the token successfully                                 |
+| onClick                                      | `function`   | `optional` | A callback function that will be called when the button clicked                                            |
+| onReady                                      | `function`   | `optional` | A callback function that will be called when you button is clickable                                       |

package/build/@types/index.d.ts

@@ -1,12 +1,12 @@
-import { Scope, ButtonStyle, MerchantCapabilities, SupportedNetworks, ButtonType, Locale, Environment } from '../constants';
+import { Scope, MerchantCapabilities, SupportedNetworks, ButtonType, Locale, Environment, ThemeMode, Edges } from '../constants';
 export interface ApplePayRequestData {
     countryCode: string;
     currencyCode: string;
     merchantCapabilities: Array<typeof MerchantCapabilities[keyof typeof MerchantCapabilities]>;
     supportedNetworks: Array<typeof SupportedNetworks[keyof typeof SupportedNetworks]>;
     billingContact?: {
-        phoneNumber: string;
-        emailAddress: string;
+        phoneNumber?: string;
+        emailAddress?: string;
         givenName: string;
         familyName: string;
     };
@@ -15,30 +15,44 @@ export interface ApplePayRequestData {
         amount: number;
     };
 }
+export interface Interface {
+    locale?: typeof Locale[keyof typeof Locale];
+    theme?: typeof ThemeMode[keyof typeof ThemeMode];
+    edges?: typeof Edges[keyof typeof Edges];
+    type?: typeof ButtonType[keyof typeof ButtonType];
+}
+export interface Customer {
+    id?: string;
+    name?: {
+        lang: typeof Locale[keyof typeof Locale];
+        first: string;
+        last: string;
+        middle?: string;
+    }[];
+    contact?: {
+        email?: string;
+        phone?: {
+            countryCode: string;
+            number: string;
+        };
+    };
+}
+export interface Acceptance {
+    supportedBrands?: Array<typeof SupportedNetworks[keyof typeof SupportedNetworks]>;
+    supportedCards?: Array<string>;
+    supportedCardsWithAuthentications?: Array<string>;
+}
 export interface ApplePayButtonProps {
+    scope?: typeof Scope[keyof typeof Scope];
     publicKey: string;
     environment: typeof Environment[keyof typeof Environment];
     merchant: {
         id: string;
         domain: string;
     };
-    scope?: typeof Scope[keyof typeof Scope];
-    supportedNetworks?: Array<typeof SupportedNetworks[keyof typeof SupportedNetworks]>;
-    buttonStyle?: typeof ButtonStyle[keyof typeof ButtonStyle];
-    billingContact?: {
-        name: {
-            first: string;
-            middle?: string;
-            last: string;
-        };
-        email: {
-            address: string;
-        };
-        phone: {
-            code: string;
-            number: string;
-        };
-    };
+    interface?: Interface;
+    customer?: Customer;
+    acceptance: Acceptance;
     transaction: {
         amount: string;
         currency: string;
@@ -49,8 +63,6 @@ export interface ApplePayButtonProps {
     onClick?: () => void;
     onReady?: () => void;
     metaData?: MetaData;
-    type?: typeof ButtonType[keyof typeof ButtonType];
-    locale?: typeof Locale[keyof typeof Locale];
     debug?: boolean;
 }
 export interface MerchantResponse {
@@ -87,11 +99,11 @@ export interface CheckoutProfileRequest {
         amount: number;
         currency: string;
         customer?: {
-            id: string;
-            email: string;
-            first_name: string;
-            last_name: string;
-            phone: {
+            id?: string;
+            email?: string;
+            first_name?: string;
+            last_name?: string;
+            phone?: {
                 country_code: string;
                 number: string;
             };

package/build/api/app.service.js

@@ -155,7 +155,7 @@ var APPService = (function (_super) {
                             return [4, new BrowserInfo.BrowserInfo({
                                     app: { name: '@tap-payments/apple-pay-button', language: locale },
                                     credentials: { mdn: domain, pk: pk },
-                                    encrypt: function (_key, value) { return encryptString(value); }
+                                    encrypt: function (_key, value) { return encryptString(value.substring(0, 115)); }
                                 }).get()];
                         case 1:
                             encryptedHeaders = _b.sent();

package/build/constants/index.d.ts

@@ -20,6 +20,14 @@ export declare const ButtonType: {
     readonly PLAIN: "plain";
     readonly SUBSCRIBE: "subscribe";
 };
+export declare const ThemeMode: {
+    readonly DARK: "dark";
+    readonly LIGHT: "light";
+};
+export declare const Edges: {
+    readonly STRAIGHT: "straight";
+    readonly CURVED: "curved";
+};
 export declare const MerchantCapabilities: {
     readonly Supports3DS: "supports3DS";
     readonly SupportsCredit: "supportsCredit";

package/build/constants/index.js

@@ -20,6 +20,14 @@ export var ButtonType = {
     PLAIN: 'plain',
     SUBSCRIBE: 'subscribe'
 };
+export var ThemeMode = {
+    DARK: 'dark',
+    LIGHT: 'light'
+};
+export var Edges = {
+    STRAIGHT: 'straight',
+    CURVED: 'curved'
+};
 export var MerchantCapabilities = {
     Supports3DS: 'supports3DS',
     SupportsCredit: 'supportsCredit',

package/build/features/ApplePayButton/ApplePayButton.js

@@ -14,50 +14,26 @@ import * as React from 'react';
 import { createRoot } from 'react-dom/client';
 import { findOrCreateElementAndInject } from '../../utils';
 import { useApplePay } from '../../hooks/useApplePay';
-import { ButtonStyle, ButtonType, Locale, Scope } from '../../constants';
 import './ApplePayButton.css';
-var ApplePay = React.memo(function (_a) {
-    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;
-    var _f = useApplePay({
-        publicKey: publicKey,
-        merchant: merchant,
-        transaction: transaction,
-        billingContact: billingContact,
-        supportedNetworks: supportedNetworks,
-        onError: onError,
-        onSuccess: onSuccess,
-        onCancel: onCancel,
-        scope: scope,
-        metaData: metaData,
-        debug: debug,
-        environment: environment,
-        locale: locale,
-        onReady: onReady
-    }), loading = _f.loading, onApplePayButtonClicked = _f.onApplePayButtonClicked, disabled = _f.disabled;
+import { getDefaultValues } from '../../utils/defaultValues';
+import { ButtonStyle, Edges, ThemeMode } from '../../constants';
+var ApplePay = React.memo(function (props) {
+    var mappedProps = getDefaultValues(props);
+    var _a = useApplePay(mappedProps), loading = _a.loading, onApplePayButtonClicked = _a.onApplePayButtonClicked, disabled = _a.disabled;
     React.useEffect(function () {
-        if (debug) {
-            console.log('ApplePayButtonProps', {
-                publicKey: publicKey,
-                merchant: merchant,
-                transaction: transaction,
-                billingContact: billingContact,
-                supportedNetworks: supportedNetworks,
-                metaData: metaData,
-                scope: scope,
-                buttonStyle: buttonStyle,
-                type: type,
-                locale: locale,
-                debug: debug
-            });
+        if (props.debug) {
+            console.log('ApplePayButtonProps', props);
         }
     }, []);
     return (_jsx("button", { className: 'button-applepay-tap', style: {
-            ApplePayButtonType: type,
-            ApplePayButtonStyle: buttonStyle
+            ApplePayButtonType: mappedProps.interface.type,
+            ApplePayButtonStyle: mappedProps.interface.theme === ThemeMode.DARK ? ButtonStyle.Black : ButtonStyle.White,
+            borderRadius: mappedProps.interface.edges === Edges.STRAIGHT ? '0' : '10px'
         }, onClick: function () {
+            var _a;
             onApplePayButtonClicked();
-            onClick === null || onClick === void 0 ? void 0 : onClick();
-        }, lang: locale, disabled: loading || disabled }));
+            (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props);
+        }, lang: mappedProps.interface.locale, disabled: loading || disabled }));
 });
 export function ApplePayButton(props) {
     return _jsx(ApplePay, __assign({}, props));

package/build/hooks/useApplePay.d.ts

@@ -5,5 +5,5 @@ interface UseApplePayReturnProps {
     onApplePayButtonClicked: () => Promise<void>;
     disabled: boolean;
 }
-export declare const useApplePay: ({ publicKey, merchant, transaction, billingContact, onCancel, onError, onSuccess, scope, supportedNetworks, metaData, debug, environment, locale, onReady }: UseApplePayProps) => UseApplePayReturnProps;
+export declare const useApplePay: ({ publicKey, merchant, transaction, interface: interfaceObj, customer, onCancel, onError, onSuccess, scope, acceptance, metaData, debug, environment, onReady }: UseApplePayProps) => UseApplePayReturnProps;
 export {};

package/build/hooks/useApplePay.js

@@ -50,44 +50,50 @@ import appService from '../api/app.service';
 import { ApplePayVersion } from '../constants';
 import { setAxiosGlobalHeaders } from '../api/httpClient';
 import { getApplePayPaymentMethod, getApplePayRequest, validateCurrency, validateSupportedNetworks } from '../utils/config';
+import { getMerchantCapaplities } from '../utils/defaultValues';
 export var useApplePay = function (_a) {
-    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;
+    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;
     var _b = useState(false), loading = _b[0], setLoading = _b[1];
     var _c = useState(null), profileData = _c[0], setProfile = _c[1];
     var _d = useState(false), disabled = _d[0], setDisabled = _d[1];
     var initialize = useCallback(function (metaData) { return __awaiter(void 0, void 0, void 0, function () {
         var merchantProfile, payment_options, headers, data, err_1;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
+        var _a, _b, _c, _d, _e, _f, _g;
+        return __generator(this, function (_h) {
+            switch (_h.label) {
                 case 0:
                     setLoading(true);
                     appService.setEnv(environment);
                     appService.setBaseUrl();
-                    _a.label = 1;
+                    _h.label = 1;
                 case 1:
-                    _a.trys.push([1, 4, 5, 6]);
+                    _h.trys.push([1, 4, 5, 6]);
                     if (metaData) {
                         merchantProfile = metaData.merchant, payment_options = metaData.payment_options, headers = metaData.headers;
                         setAxiosGlobalHeaders(__assign({}, headers));
                         setProfile({ merchant: merchantProfile, payment_options: payment_options });
                         return [2];
                     }
-                    return [4, appService.setBrowserHeaders({ locale: locale, domain: merchant.domain, pk: publicKey })];
+                    return [4, appService.setBrowserHeaders({
+                            locale: interfaceObj === null || interfaceObj === void 0 ? void 0 : interfaceObj.locale,
+                            domain: merchant.domain,
+                            pk: publicKey
+                        })];
                 case 2:
-                    _a.sent();
+                    _h.sent();
                     return [4, appService.checkoutProfile({
                             currency: transaction.currency,
                             merchant_id: merchant.id,
                             total_amount: Number(transaction.amount),
-                            order: __assign(__assign({ amount: Number(transaction.amount), currency: transaction.currency }, (billingContact && {
+                            order: __assign(__assign({ amount: Number(transaction.amount), currency: transaction.currency }, (customer && {
                                 customer: {
                                     id: '',
-                                    email: billingContact.email.address,
-                                    first_name: billingContact.name.first,
-                                    last_name: billingContact.name.last,
+                                    email: (_a = customer.contact) === null || _a === void 0 ? void 0 : _a.email,
+                                    first_name: ((_b = customer.name) === null || _b === void 0 ? void 0 : _b.length) ? customer.name[0].first : '',
+                                    last_name: ((_c = customer.name) === null || _c === void 0 ? void 0 : _c.length) ? customer.name[0].last : '',
                                     phone: {
-                                        country_code: billingContact.phone.code,
-                                        number: billingContact.phone.number
+                                        country_code: ((_e = (_d = customer.contact) === null || _d === void 0 ? void 0 : _d.phone) === null || _e === void 0 ? void 0 : _e.countryCode) || '',
+                                        number: ((_g = (_f = customer.contact) === null || _f === void 0 ? void 0 : _f.phone) === null || _g === void 0 ? void 0 : _g.number) || ''
                                     }
                                 }
                             })), { merchant: {
@@ -103,13 +109,13 @@ export var useApplePay = function (_a) {
                                 ] })
                         })];
                 case 3:
-                    data = _a.sent();
+                    data = _h.sent();
                     if (debug)
                         console.log('merchant configuration: ', data);
                     setProfile(data);
                     return [3, 6];
                 case 4:
-                    err_1 = _a.sent();
+                    err_1 = _h.sent();
                     onError && onError(err_1.errors || err_1);
                     return [3, 6];
                 case 5:
@@ -119,7 +125,7 @@ export var useApplePay = function (_a) {
                 case 6: return [2];
             }
         });
-    }); }, [environment, locale, merchant.domain, publicKey, debug, onError]);
+    }); }, [environment, interfaceObj === null || interfaceObj === void 0 ? void 0 : interfaceObj.locale, merchant.domain, publicKey, debug, onError]);
     useEffect(function () {
         initialize(metaData);
     }, [initialize, metaData]);
@@ -141,12 +147,13 @@ export var useApplePay = function (_a) {
             try {
                 paymentMethod = getApplePayPaymentMethod(profileData.payment_options.payment_methods || []);
                 currency = validateCurrency(transaction.currency, paymentMethod.supported_currencies);
-                cardBrands = validateSupportedNetworks(paymentMethod.supported_card_brands, supportedNetworks);
+                cardBrands = validateSupportedNetworks(paymentMethod.supported_card_brands, acceptance.supportedBrands);
                 request = getApplePayRequest({
                     countryCode: profileData.merchant.country_code,
                     transaction: __assign(__assign({}, transaction), { currency: currency }),
-                    billingContact: billingContact,
+                    customer: customer,
                     supportedNetworks: cardBrands,
+                    merchantCapabilities: getMerchantCapaplities(acceptance === null || acceptance === void 0 ? void 0 : acceptance.supportedCards),
                     name: profileData.merchant.name
                 });
                 if (debug) {

package/build/index.d.ts

@@ -1,4 +1,4 @@
 import { ApplePayButtonProps, ApplePayButton } from './features/ApplePayButton';
-import { ButtonStyle, Scope, SupportedNetworks, Environment, Locale, ButtonType } from './constants';
+import { ThemeMode, Scope, SupportedNetworks, Environment, Locale, ButtonType, Edges, MerchantCapabilities } from './constants';
 export type { ApplePayButtonProps };
-export { ApplePayButton, ButtonStyle, Scope, SupportedNetworks, Environment, Locale, ButtonType };
+export { ApplePayButton, ThemeMode, Scope, SupportedNetworks, Environment, Locale, ButtonType, Edges, MerchantCapabilities };

package/build/index.js

@@ -1,12 +1,14 @@
 import { ApplePayButton, renderApplePayButton } from './features/ApplePayButton';
-import { ButtonStyle, Scope, SupportedNetworks, Environment, Locale, ButtonType } from './constants';
-export { ApplePayButton, ButtonStyle, Scope, SupportedNetworks, Environment, Locale, ButtonType };
+import { ThemeMode, Scope, SupportedNetworks, Environment, Locale, ButtonType, Edges, MerchantCapabilities } from './constants';
+export { ApplePayButton, ThemeMode, Scope, SupportedNetworks, Environment, Locale, ButtonType, Edges, MerchantCapabilities };
 window['TapSDKs'] = {
     renderApplePayButton: renderApplePayButton,
-    ButtonStyle: ButtonStyle,
     Scope: Scope,
     SupportedNetworks: SupportedNetworks,
     Environment: Environment,
     Locale: Locale,
-    ButtonType: ButtonType
+    ButtonType: ButtonType,
+    ThemeMode: ThemeMode,
+    Edges: Edges,
+    MerchantCapabilities: MerchantCapabilities
 };

package/build/utils/config.d.ts

@@ -1,8 +1,10 @@
-import { ApplePayButtonProps, ApplePayRequestData, PaymentMethod } from '../@types';
+import { Acceptance, ApplePayButtonProps, ApplePayRequestData, PaymentMethod } from '../@types';
 import { SupportedNetworks } from '../constants';
-export declare const validateSupportedNetworks: (supportedNetworksConfig: Array<(typeof SupportedNetworks)[keyof typeof SupportedNetworks]>, supportedNetworks: ApplePayButtonProps['supportedNetworks']) => ("amex" | "mada" | "masterCard" | "visa" | "chinaUnionPay" | "discover" | "electron" | "jcb" | "maestro")[];
+export declare const validateSupportedNetworks: (supportedNetworksConfig: Array<(typeof SupportedNetworks)[keyof typeof SupportedNetworks]>, supportedNetworks: Acceptance['supportedBrands']) => ("amex" | "mada" | "masterCard" | "visa" | "chinaUnionPay" | "discover" | "electron" | "jcb" | "maestro")[];
 export declare const validateCurrency: (currency: string, currencies: string[]) => string;
-export declare const getApplePayRequest: ({ transaction, billingContact, supportedNetworks, countryCode, name }: Pick<ApplePayButtonProps, "supportedNetworks" | "transaction" | "billingContact"> & {
+export declare const getApplePayRequest: ({ transaction, customer, supportedNetworks, merchantCapabilities, countryCode, name }: Pick<ApplePayButtonProps, "transaction" | "customer"> & {
+    supportedNetworks: Acceptance['supportedBrands'];
+    merchantCapabilities: ApplePayRequestData['merchantCapabilities'];
     countryCode: string;
     name: string;
 }) => ApplePayRequestData;

package/build/utils/config.js

@@ -1,4 +1,3 @@
-import { MerchantCapabilities } from '../constants';
 import { JSEncrypt } from 'jsencrypt';
 export var validateSupportedNetworks = function (supportedNetworksConfig, supportedNetworks) {
     var toLowerCase = function (item) { return item.toLowerCase(); };
@@ -25,17 +24,18 @@ export var validateCurrency = function (currency, currencies) {
     return currency;
 };
 export var getApplePayRequest = function (_a) {
-    var transaction = _a.transaction, billingContact = _a.billingContact, supportedNetworks = _a.supportedNetworks, countryCode = _a.countryCode, name = _a.name;
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    var transaction = _a.transaction, customer = _a.customer, supportedNetworks = _a.supportedNetworks, merchantCapabilities = _a.merchantCapabilities, countryCode = _a.countryCode, name = _a.name;
     return {
         countryCode: countryCode,
         currencyCode: transaction.currency,
-        merchantCapabilities: [MerchantCapabilities.Supports3DS],
+        merchantCapabilities: merchantCapabilities,
         supportedNetworks: supportedNetworks,
-        billingContact: billingContact && {
-            phoneNumber: billingContact.phone.code + billingContact.phone.number,
-            emailAddress: billingContact.email.address,
-            givenName: billingContact.name.first,
-            familyName: billingContact.name.last
+        billingContact: customer && {
+            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),
+            emailAddress: (_f = customer.contact) === null || _f === void 0 ? void 0 : _f.email,
+            givenName: ((_g = customer.name) === null || _g === void 0 ? void 0 : _g.length) ? (_h = customer.name[0]) === null || _h === void 0 ? void 0 : _h.first : '',
+            familyName: ((_j = customer.name) === null || _j === void 0 ? void 0 : _j.length) ? (_k = customer.name[0]) === null || _k === void 0 ? void 0 : _k.last : ''
         },
         total: {
             amount: Number(transaction.amount),

package/build/utils/defaultValues.d.ts

@@ -0,0 +1,30 @@
+import { ApplePayButtonProps } from '../@types';
+export declare const getDefaultValues: (mainObject: ApplePayButtonProps) => {
+    interface: {
+        locale?: "en" | "ar" | "fr" | undefined;
+        theme?: "dark" | "light" | undefined;
+        edges?: "straight" | "curved" | undefined;
+        type?: "book" | "buy" | "check-out" | "pay" | "plain" | "subscribe" | undefined;
+    };
+    scope?: "AppleToken" | "TapToken" | undefined;
+    publicKey: string;
+    environment: "production" | "sandbox" | "beta" | "development" | "staging";
+    merchant: {
+        id: string;
+        domain: string;
+    };
+    customer?: import("../@types").Customer | undefined;
+    acceptance: import("../@types").Acceptance;
+    transaction: {
+        amount: string;
+        currency: string;
+    };
+    onCancel?: (() => void) | undefined;
+    onError?: ((error: any) => void) | undefined;
+    onSuccess?: ((data: Record<string, any>) => Promise<void>) | undefined;
+    onClick?: (() => void) | undefined;
+    onReady?: (() => void) | undefined;
+    metaData?: import("../@types").MetaData | undefined;
+    debug?: boolean | undefined;
+};
+export declare const getMerchantCapaplities: (supportedCards?: Array<string>) => ("supports3DS" | "supportsCredit" | "supportsDebit")[];

package/build/utils/defaultValues.js

@@ -0,0 +1,48 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import { ThemeMode, Locale, ButtonType, Edges, MerchantCapabilities } from '../constants';
+export var getDefaultValues = function (mainObject) {
+    var userThemeMode = window.matchMedia('(prefers-color-scheme: light)').matches ? ThemeMode.LIGHT : ThemeMode.DARK;
+    var userLang = navigator.language.toLowerCase().includes(Locale.AR) ? Locale.AR : Locale.EN;
+    var defaultInterface = {
+        locale: userLang,
+        theme: userThemeMode,
+        type: ButtonType.PLAIN,
+        edges: Edges.CURVED
+    };
+    return __assign(__assign({}, mainObject), { interface: __assign(__assign({}, defaultInterface), mainObject.interface) });
+};
+export var getMerchantCapaplities = function (supportedCards) {
+    var merchantCapaplities = [MerchantCapabilities.Supports3DS];
+    if (!supportedCards) {
+        merchantCapaplities = __spreadArray(__spreadArray([], merchantCapaplities, true), [
+            MerchantCapabilities.SupportsCredit,
+            MerchantCapabilities.SupportsDebit
+        ], false);
+    }
+    else if (supportedCards.includes('CREDIT')) {
+        merchantCapaplities.push(MerchantCapabilities.SupportsCredit);
+    }
+    else if (supportedCards.includes('DEBIT')) {
+        merchantCapaplities.push(MerchantCapabilities.SupportsDebit);
+    }
+    return merchantCapaplities;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@tap-payments/apple-pay-button",
-	"version": "1.0.10",
+	"version": "1.0.12",
 	"description": "Apple Pay Button React Component",
 	"main": "build/index.js",
 	"module": "build/index.js",