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

package/README.md

@@ -26,12 +26,13 @@ yarn add @tap-payments/apple-pay-button
 import React from 'react'
 import {
 	ApplePayButton,
-	ButtonStyle,
+	ThemeMode,
 	SupportedNetworks,
 	Scope,
 	Environment,
+	Locale,
 	ButtonType,
-	Locale
+	Edges
 } from '@tap-payments/apple-pay-button'
 
 const App = () => {
@@ -39,17 +40,15 @@ const App = () => {
 		<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)
+			// optional (The environment of the SDK and it can be one of these environments)
 			environment={Environment.Development}
 			// optional (to enable the debug mode)
 			debug
-			// required (The merchant identifier provided by Tap)
-			merchantIdentifier='merchant.tap.applepay.test'
 			// required
 			merchant={{
 				// required (The merchant domain name)
 				domain: 'example.com',
-				// optional (The merchant identifier provided by Tap)
+				// required (The merchant identifier provided by Tap)
 				id: '1xxxxx8'
 			}}
 			// required
@@ -62,39 +61,54 @@ const App = () => {
 			// 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
+			acceptance={{
+				// 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)
+				supportedBrands: [SupportedNetworks.Mada, SupportedNetworks.Visa, SupportedNetworks.MasterCard]
+			}}
 			// 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'
+			customer={{
+				//"OPTIONAL : Customer ID",
+				id: 'cus_xxx',
+				name: [
+					{
+						//"REQUIRED : en or ar",
+						lang: Locale.EN,
+						// "OPTIONAL : First name of the customer.",
+						first: 'test',
+						//"OPTIONAL : Last name of the customer.",
+						last: 'tester',
+						// "OPTIONAL : 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: {
+					//"OPTIONAL :  The customer's email",
+					email: 'test@gmail.com',
+					//"OPTIONAL :  The customer's phone number"
+					phone: {
+						//"OPTIONAL :  The customer's country code",
+						countryCode: '+20',
+						//"OPTIONAL :  The customer's phone number
+						number: '10XXXXXX56'
+					}
 				}
 			}}
+			//optional (for styling button)
+			interface={{
+				// optional (The locale of the Apple Pay button and it can be one of these locales:[EN,AR])
+				locale: Locale.EN,
+				// optional (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,
+				// optional (The type of the Apple Pay )
+				type: ButtonType.BUY,
+				// optional (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')}
@@ -106,6 +120,14 @@ const App = () => {
 				// 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')
+			}}
 		/>
 	)
 }
@@ -121,82 +143,66 @@ 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://apple-pay-button.b-cdn.net/build-1.0.6/main.css" />
-		<script src="https://apple-pay-button.b-cdn.net/build-1.0.6/main.js"></script>
+		<link rel="stylesheet" href="https://tap-sdks.b-cdn.net/apple-pay/build-1.0.7/main.css" />
+		<script src="https://tap-sdks.b-cdn.net/apple-pay//build-1.0.7/main.js"></script>
 	</head>
+
 	<body>
 		<div id="apple-pay-button"></div>
 		<script type="text/javascript">
 			const { renderApplePayButton, ButtonStyle, Scope, SupportedNetworks, Locale, ButtonType } = window.TapSDKs
 			renderApplePayButton(
-				{
-					// required
-					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: true,
-					// required (The merchant identifier provided by Tap)
-					merchantIdentifier: 'merchant.tap.applepay.test',
-					merchant: {
-						// required
-						domain: 'example.com'
-						// optional
-						// id: '123...'
-					},
-					// required
-					transaction: {
-						// required
-						currency: 'USD',
-						// required
-						amount: '100'
-					},
-					// optional
-					scope: Scope.TapToken,
-					// optional
-					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
-					supportedNetworks: [SupportedNetworks.Visa, SupportedNetworks.MasterCard],
-					// 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
-					onCancel: () => {
-						console.log('onCancel')
-					},
-					// optional
-					onError: (error) => {
-						console.log('onError', error)
-					},
-					// optional
-					onSuccess: async (data) => {
-						console.log('onSuccess', data)
-					}
-				},
-				'apple-pay-button'
+			    {
+			        publicKey: 'pk_test_7xxxxxxxxx',
+			        environment: Environment.Sandbox,
+			        scope: Scope.TapToken,
+			        merchant: {
+			            domain: 'tp-txxxxxxxx',
+			            id: 'merchant_xxxxxxxxxx"
+			        },
+			        transaction: {
+			            currency: 'SAR',
+			            amount: '3'
+			        },
+			        acceptance: {
+			            supportedBrands: [SupportedNetworks.Mada, SupportedNetworks.Visa, SupportedNetworks.MasterCard]
+			        },
+
+			        customer: {
+			            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>
@@ -205,22 +211,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                                                         |
-| merchantIdentifier   | `string`              | `required` | The merchant identifier provided by Tap                                          |
-| merchant.id          | `string`              | `optional` | 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` |
+| 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,31 +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];
-    merchantIdentifier: string;
     merchant: {
-        id?: string;
+        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;
@@ -50,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 {
@@ -80,3 +91,32 @@ export interface MetaData {
     payment_options: PaymentOptionsResponse;
     headers: Record<string, string>;
 }
+export interface CheckoutProfileRequest {
+    currency: string;
+    merchant_id: string;
+    total_amount: number;
+    order: {
+        amount: number;
+        currency: string;
+        customer?: {
+            id?: string;
+            email?: string;
+            first_name?: string;
+            last_name?: string;
+            phone?: {
+                country_code: string;
+                number: string;
+            };
+        };
+        items: {
+            quantity: number;
+            amount: number;
+            currency: string;
+            name: string;
+            requiresShipping: string;
+        }[];
+        merchant: {
+            id: string;
+        };
+    };
+}

package/build/api/app.service.d.ts

@@ -1,4 +1,4 @@
-import { MerchantResponse, ApplePayButtonProps } from '../@types';
+import { MerchantResponse, ApplePayButtonProps, CheckoutProfileRequest } from '../@types';
 import BaseService from './base';
 declare class APPService extends BaseService {
     private baseUrl;
@@ -12,7 +12,7 @@ declare class APPService extends BaseService {
         pk: string;
         domain: string;
     }): Promise<void>;
-    checkoutProfile(merchantId?: string): Promise<{
+    checkoutProfile(request: CheckoutProfileRequest): Promise<{
         merchant: any;
         payment_options: any;
     }>;

package/build/api/app.service.js

@@ -176,12 +176,12 @@ var APPService = (function (_super) {
         enumerable: false,
         configurable: true,
         writable: true,
-        value: function (merchantId) {
+        value: function (request) {
             return __awaiter(this, void 0, void 0, function () {
                 var data, merchant, payment_options, session;
                 return __generator(this, function (_a) {
                     switch (_a.label) {
-                        case 0: return [4, this.post(this.baseUrl + '/checkoutprofile', { merchant_id: merchantId !== null && merchantId !== void 0 ? merchantId : '' })];
+                        case 0: return [4, this.post(this.baseUrl + '/checkoutprofile', request)];
                         case 1:
                             data = (_a.sent()).data;
                             if (data.errors)

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,51 +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, merchantIdentifier = _a.merchantIdentifier, 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,
-        merchantIdentifier: merchantIdentifier,
-        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, merchantIdentifier, 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

@@ -51,39 +51,70 @@ import { ApplePayVersion } from '../constants';
 import { setAxiosGlobalHeaders } from '../api/httpClient';
 import { getApplePayPaymentMethod, getApplePayRequest, validateCurrency, validateSupportedNetworks } from '../utils/config';
 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, merchantIdentifier = _a.merchantIdentifier, 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();
-                    return [4, appService.checkoutProfile()];
+                    _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 }, (customer && {
+                                customer: {
+                                    id: '',
+                                    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: ((_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: {
+                                    id: merchant.id
+                                }, items: [
+                                    {
+                                        amount: Number(transaction.amount),
+                                        currency: transaction.currency,
+                                        name: 'apple pay sdk order item',
+                                        quantity: 1,
+                                        requiresShipping: 'no'
+                                    }
+                                ] })
+                        })];
                 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:
@@ -93,7 +124,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]);
@@ -115,11 +146,11 @@ 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,
                     name: profileData.merchant.name
                 });
@@ -143,7 +174,7 @@ export var useApplePay = function (_a) {
                                 if (debug) {
                                     console.info("creating merchant session for merchantData: ".concat(JSON.stringify(profileData.merchant), " and validationURL: ").concat(event.validationURL, " and merchant.domain: ").concat(merchant.domain));
                                 }
-                                return [4, appService.appleSession(profileData.merchant, event.validationURL, merchant.domain, merchantIdentifier)];
+                                return [4, appService.appleSession(__assign(__assign({}, profileData.merchant), { id: merchant.id }), event.validationURL, merchant.domain, merchant.id)];
                             case 2:
                                 merchantSession = _a.sent();
                                 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,9 @@
-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, countryCode, name }: Pick<ApplePayButtonProps, "transaction" | "customer"> & {
+    supportedNetworks: Acceptance['supportedBrands'];
     countryCode: string;
     name: string;
 }) => ApplePayRequestData;

package/build/utils/config.js

@@ -25,17 +25,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, countryCode = _a.countryCode, name = _a.name;
     return {
         countryCode: countryCode,
         currencyCode: transaction.currency,
         merchantCapabilities: [MerchantCapabilities.Supports3DS],
         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,29 @@
+import { ApplePayButtonProps } from '..';
+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;
+};

package/build/utils/defaultValues.js

@@ -0,0 +1,23 @@
+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);
+};
+import { ThemeMode, Locale, ButtonType, Edges } 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) });
+};

package/package.json

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