@tap-payments/apple-pay-button 1.0.2 → 1.0.3-test

package/README.md

@@ -24,72 +24,110 @@ yarn add @tap-payments/apple-pay-button
 
 ```javascript
 import React from 'react'
-import { ApplePayButton, ButtonStyle, SupportedNetworks, Scope } from '@tap-payments/apple-pay-button'
+import {
+ 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'}
-			// required
-			merchant={{
-				// required (The merchant domain name)
-				domain: 'example.com',
-				// optional (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 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')
+   }}
+  />
+ )
 }
 ```
 
@@ -103,70 +141,69 @@ 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-0.0.8-test/main.css" />
-		<script src="https://apple-pay-button.b-cdn.net/build-0.0.8-test/main.js"></script>
+		<link rel="stylesheet" href="https://tap-sdks.b-cdn.net/apple-pay/build-1.0.19/main.css" />
+		<script src="https://tap-sdks.b-cdn.net/apple-pay/build-1.0.19/main.js"></script>
 	</head>
+
 	<body>
 		<div id="apple-pay-button"></div>
 		<script type="text/javascript">
-			const { renderApplePayButton, ButtonStyle, Scope, SupportedNetworks } = window.TapSDKs
-			renderApplePayButton(
+			const { render, ThemeMode, SupportedNetworks, Scope, Environment, Locale, ButtonType, Edges } =
+				window.TapApplepaySDK
+			render(
 				{
-					// required
-					publicKey: 'pk_test_xxxxxxxxxxxxxxxzh',
-					// required
+					publicKey: 'pk_test_7xxxxxxxxx',
+					environment: Environment.Development,
+					scope: Scope.TapToken,
 					merchant: {
-						// required
-						domain: 'example.com'
-						// optional
-						// id: '123...'
+						domain: window.location.hostname,
+						id: 'merchant_xxxxxxxxxx'
 					},
-					// required
 					transaction: {
-						// required
-						currency: 'USD',
-						// required
-						amount: '100'
+						currency: 'SAR',
+						amount: '3'
 					},
-					// optional
-					scope: Scope.TapToken,
-					// optional
-					buttonStyle: ButtonStyle.WhiteOutline,
-					// 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'
+					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'
+							}
 						}
 					},
-					// optional
-					onCancel: () => {
+					interface: {
+						locale: Locale.EN,
+						theme: ThemeMode.DARK,
+						type: ButtonType.BUY,
+						edges: Edges.CURVED
+					},
+					onCancel: async () => {
 						console.log('onCancel')
 					},
-					// optional
-					onError: (error) => {
+					onError: async (error) => {
 						console.log('onError', error)
 					},
-					// optional
 					onSuccess: async (data) => {
 						console.log('onSuccess', data)
+					},
+					onReady: async () => {
+						console.log('onReady')
 					}
 				},
 				'apple-pay-button'
@@ -178,17 +215,26 @@ const App = () => {
 
 ## Configurations
 
-| Name                 | Type                  | R/O        | Description                                                                |
-| -------------------- | --------------------- | ---------- | -------------------------------------------------------------------------- |
-| publicKey            | `string`              | `required` | The public Key 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                                          |
-| 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/ApplePaySession.d.ts

@@ -0,0 +1,68 @@
+import { MerchantCapabilities, SupportedNetworks } from '../constants';
+export declare type RequiredShippingContactField = 'postalAddress' | 'name' | 'phoneticName' | 'phone' | 'email';
+export declare type ApplePayPaymentMethodType = 'debit' | 'credit' | 'prepaid' | 'store';
+export interface ApplePayShippingMethod {
+    label: string;
+    detail: string;
+    amount: string;
+    identifier: string;
+}
+export interface ApplePayPaymentContact {
+    phoneNumber?: string;
+    emailAddress?: string;
+    givenName?: string;
+    familyName?: string;
+    phoneticGivenName?: string;
+    phoneticFamilyName?: string;
+    addressLines?: string[];
+    subLocality?: string;
+    locality?: string;
+    postalCode?: string;
+    subAdministrativeArea?: string;
+    administrativeArea?: string;
+    country?: string;
+    countryCode?: string;
+}
+export interface ApplePayPaymentMethod {
+    displayName?: string;
+    network?: string;
+    type?: ApplePayPaymentMethodType;
+    billingContact?: ApplePayPaymentContact;
+}
+export interface ApplePayLineItem {
+    type?: 'final' | 'pending';
+    label?: string;
+    amount?: string;
+    paymentTiming?: 'immediate' | 'recurring' | 'deferred' | 'automaticReload';
+    recurringPaymentStartDate?: Date;
+    recurringPaymentIntervalUnit?: 'year' | 'month' | 'day' | 'hour' | 'minute';
+    recurringPaymentIntervalCount?: number;
+    recurringPaymentEndDate?: Date;
+    deferredPaymentDate?: Date;
+    automaticReloadPaymentThresholdAmount?: string;
+}
+export interface ApplePayUpdateData {
+    newTotal: ApplePayLineItem;
+    newLineItems?: ApplePayLineItem[];
+}
+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;
+        givenName: string;
+        familyName: string;
+    };
+    total: {
+        label: string;
+        amount: number;
+    };
+    requiredShippingContactFields?: Array<RequiredShippingContactField>;
+    supportsCouponCode?: boolean;
+    couponCode?: string;
+    shippingMethods?: ApplePayShippingMethod[];
+    lineItems?: ApplePayLineItem[];
+}

package/build/@types/ApplePaySession.js

@@ -0,0 +1 @@
+export {};

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

@@ -1,57 +1,65 @@
-import { Scope, ButtonStyle, MerchantCapabilities, SupportedNetworks, ButtonType, Locale, Environment } 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;
-        givenName: string;
-        familyName: string;
-    };
-    total: {
-        label: string;
-        amount: number;
+import { Scope, SupportedNetworks, ButtonType, Locale, Environment, ThemeMode, Edges } from '../constants';
+import { ApplePayLineItem, ApplePayPaymentContact, ApplePayPaymentMethod, ApplePayShippingMethod, ApplePayUpdateData, RequiredShippingContactField } from './ApplePaySession';
+export * from './ApplePaySession';
+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;
+        };
     };
+    shippingContactFields?: Array<RequiredShippingContactField>;
+}
+export interface Acceptance {
+    supportedBrands?: Array<typeof SupportedNetworks[keyof typeof SupportedNetworks]>;
+    supportedCards?: Array<string>;
+    supportedCardsWithAuthentications?: Array<string>;
+    supportsCouponCode?: boolean;
+}
+export interface Transaction {
+    amount: string;
+    currency: string;
+    couponCode?: string;
+    shipping?: ApplePayShippingMethod[];
+    lineItems?: ApplePayLineItem[];
 }
 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;
+        identifier?: 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;
-        };
-    };
-    transaction: {
-        amount: string;
-        currency: string;
-    };
+    interface?: Interface;
+    customer?: Customer;
+    acceptance: Acceptance;
+    transaction: Transaction;
     onCancel?: () => void;
     onError?: (error: any) => void;
     onSuccess?: (data: Record<string, any>) => Promise<void>;
     onClick?: () => void;
     onReady?: () => void;
+    onMerchantValidation?: (status: 'initiated' | 'completed' | 'error') => void;
+    onShippingContactSelected?: (shippingContact: ApplePayPaymentContact) => Promise<ApplePayUpdateData | void>;
+    onPaymentMethodSelected?: (paymentMethod: ApplePayPaymentMethod) => Promise<ApplePayUpdateData | void>;
+    onCouponChanged?: (couponCode: string) => Promise<ApplePayUpdateData | void>;
     metaData?: MetaData;
-    type?: typeof ButtonType[keyof typeof ButtonType];
-    locale?: typeof Locale[keyof typeof Locale];
     debug?: boolean;
 }
 export interface MerchantResponse {
@@ -80,3 +88,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/@types/index.js

@@ -1 +1 @@
-export {};
+export * from './ApplePaySession';

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;
@@ -6,13 +6,13 @@ declare class APPService extends BaseService {
     constructor();
     setEnv(env: ApplePayButtonProps['environment']): void;
     setBaseUrl(): void;
-    getHeaderPublicKey(): "-----BEGIN PUBLIC KEY-----\nMIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQC8AX++RtxPZFtns4XzXFlDIxPBh0umN4qRXZaKDIlb6a3MknaB7psJWmf2l+e4Cfh9b5tey/+rZqpQ065eXTZfGCAuBLt+fYLQBhLfjRpk8S6hlIzc1Kdjg65uqzMwcTd0p7I4KLwHk1I0oXzuEu53fU1LSZhWp4Mnd6wjVgXAsQIDAQAB\n-----END PUBLIC KEY-----" | "" | "-----BEGIN PUBLIC KEY-----\nMIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQC9hSRms7Ir1HmzdZxGXFYgmpi3\nez7VBFje0f8wwrxYS9oVoBtN4iAt0DOs3DbeuqtueI31wtpFVUMGg8W7R0SbtkZd\nGzszQNqt/wyqxpDC9q+97XdXwkWQFA72s76ud7eMXQlsWKsvgwhY+Ywzt0KlpNC3\nHj+N6UWFOYK98Xi+sQIDAQAB\n-----END PUBLIC KEY-----" | "-----BEGIN PUBLIC KEY-----\nMIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCi9W5jyTvA4Iwv3V5sfNQ7VdSz\n7WqwBbnWFbIUL/GjaaE93mvDv4zbgRSznHaHQPH6pxrMhMh0tV58njkvjHvQ/tvg\npwM8SemNPKEEAPl69tnMvCrJRPh2dWL3OHY8yCW4c38Hyx4fy56Zd5cdoVWfCReu\njCsvASLGz+cfRrj2swIDAQAB\n-----END PUBLIC KEY-----";
+    getHeaderPublicKey(): "-----BEGIN PUBLIC KEY-----\nMIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQC8AX++RtxPZFtns4XzXFlDIxPBh0umN4qRXZaKDIlb6a3MknaB7psJWmf2l+e4Cfh9b5tey/+rZqpQ065eXTZfGCAuBLt+fYLQBhLfjRpk8S6hlIzc1Kdjg65uqzMwcTd0p7I4KLwHk1I0oXzuEu53fU1LSZhWp4Mnd6wjVgXAsQIDAQAB\n-----END PUBLIC KEY-----" | "" | "-----BEGIN PUBLIC KEY-----\nMIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCi9W5jyTvA4Iwv3V5sfNQ7VdSz\n7WqwBbnWFbIUL/GjaaE93mvDv4zbgRSznHaHQPH6pxrMhMh0tV58njkvjHvQ/tvg\npwM8SemNPKEEAPl69tnMvCrJRPh2dWL3OHY8yCW4c38Hyx4fy56Zd5cdoVWfCReu\njCsvASLGz+cfRrj2swIDAQAB\n-----END PUBLIC KEY-----" | "-----BEGIN PUBLIC KEY-----\nMIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQC9hSRms7Ir1HmzdZxGXFYgmpi3\nez7VBFje0f8wwrxYS9oVoBtN4iAt0DOs3DbeuqtueI31wtpFVUMGg8W7R0SbtkZd\nGzszQNqt/wyqxpDC9q+97XdXwkWQFA72s76ud7eMXQlsWKsvgwhY+Ywzt0KlpNC3\nHj+N6UWFOYK98Xi+sQIDAQAB\n-----END PUBLIC KEY-----";
     setBrowserHeaders({ locale, pk, domain }: {
         locale: string;
         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

@@ -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();
@@ -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/api/httpClient.d.ts

@@ -1,7 +1,7 @@
 export declare const MW_BASE_LIVE_URL = "https://mw-sdk.tap.company/v2/checkout";
-export declare const MW_BASE_STAGING_URL = "https://mw-sdk.staing.tap.company/v2/checkout";
+export declare const MW_BASE_STAGING_URL = "https://mw-sdk.staging.tap.company/v2/checkout";
 export declare const MW_BASE_DEV_URL = "https://mw-sdk.dev.tap.company/v2/checkout";
-export declare const MW_BASE_BETA_URL = "https://mw-sdk.dev.tap.company/v2/checkout";
+export declare const MW_BASE_BETA_URL = "https://mw-sdk.beta.tap.company/v2/checkout";
 export declare const MW_BASE_SANDBOX_URL = "https://mw-sdk.sandbox.tap.company/v2/checkout";
 declare const httpClient: import("axios").AxiosInstance;
 export declare const setAxiosGlobalHeaders: (headers: Record<string, string>) => void;

package/build/api/httpClient.js

@@ -11,9 +11,9 @@ var __assign = (this && this.__assign) || function () {
 };
 import axios from 'axios';
 export var MW_BASE_LIVE_URL = 'https://mw-sdk.tap.company/v2/checkout';
-export var MW_BASE_STAGING_URL = 'https://mw-sdk.staing.tap.company/v2/checkout';
+export var MW_BASE_STAGING_URL = 'https://mw-sdk.staging.tap.company/v2/checkout';
 export var MW_BASE_DEV_URL = 'https://mw-sdk.dev.tap.company/v2/checkout';
-export var MW_BASE_BETA_URL = 'https://mw-sdk.dev.tap.company/v2/checkout';
+export var MW_BASE_BETA_URL = 'https://mw-sdk.beta.tap.company/v2/checkout';
 export var MW_BASE_SANDBOX_URL = 'https://mw-sdk.sandbox.tap.company/v2/checkout';
 var httpClient = axios.create({
     headers: {

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";
@@ -46,6 +54,6 @@ export declare const Environment: {
 };
 export declare const RSA_DEV_MW_PUBLIC_KEY = "-----BEGIN PUBLIC KEY-----\nMIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQC8AX++RtxPZFtns4XzXFlDIxPBh0umN4qRXZaKDIlb6a3MknaB7psJWmf2l+e4Cfh9b5tey/+rZqpQ065eXTZfGCAuBLt+fYLQBhLfjRpk8S6hlIzc1Kdjg65uqzMwcTd0p7I4KLwHk1I0oXzuEu53fU1LSZhWp4Mnd6wjVgXAsQIDAQAB\n-----END PUBLIC KEY-----";
 export declare const RSA_SANDBOX_MW_PUBLIC_KEY = "";
-export declare const RSA_PRODUCTION_MW_PUBLIC_KEY = "";
-export declare const RSA_BETA_MW_PUBLIC_KEY = "-----BEGIN PUBLIC KEY-----\nMIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQC9hSRms7Ir1HmzdZxGXFYgmpi3\nez7VBFje0f8wwrxYS9oVoBtN4iAt0DOs3DbeuqtueI31wtpFVUMGg8W7R0SbtkZd\nGzszQNqt/wyqxpDC9q+97XdXwkWQFA72s76ud7eMXQlsWKsvgwhY+Ywzt0KlpNC3\nHj+N6UWFOYK98Xi+sQIDAQAB\n-----END PUBLIC KEY-----";
 export declare const RSA_STAGING_MW_PUBLIC_KEY = "-----BEGIN PUBLIC KEY-----\nMIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCi9W5jyTvA4Iwv3V5sfNQ7VdSz\n7WqwBbnWFbIUL/GjaaE93mvDv4zbgRSznHaHQPH6pxrMhMh0tV58njkvjHvQ/tvg\npwM8SemNPKEEAPl69tnMvCrJRPh2dWL3OHY8yCW4c38Hyx4fy56Zd5cdoVWfCReu\njCsvASLGz+cfRrj2swIDAQAB\n-----END PUBLIC KEY-----";
+export declare const RSA_BETA_MW_PUBLIC_KEY = "-----BEGIN PUBLIC KEY-----\nMIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQC9hSRms7Ir1HmzdZxGXFYgmpi3\nez7VBFje0f8wwrxYS9oVoBtN4iAt0DOs3DbeuqtueI31wtpFVUMGg8W7R0SbtkZd\nGzszQNqt/wyqxpDC9q+97XdXwkWQFA72s76ud7eMXQlsWKsvgwhY+Ywzt0KlpNC3\nHj+N6UWFOYK98Xi+sQIDAQAB\n-----END PUBLIC KEY-----";
+export declare const RSA_PRODUCTION_MW_PUBLIC_KEY = "-----BEGIN PUBLIC KEY-----\nMIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQC9hSRms7Ir1HmzdZxGXFYgmpi3\nez7VBFje0f8wwrxYS9oVoBtN4iAt0DOs3DbeuqtueI31wtpFVUMGg8W7R0SbtkZd\nGzszQNqt/wyqxpDC9q+97XdXwkWQFA72s76ud7eMXQlsWKsvgwhY+Ywzt0KlpNC3\nHj+N6UWFOYK98Xi+sQIDAQAB\n-----END PUBLIC KEY-----";

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',
@@ -46,6 +54,6 @@ export var Environment = {
 };
 export var RSA_DEV_MW_PUBLIC_KEY = "-----BEGIN PUBLIC KEY-----\nMIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQC8AX++RtxPZFtns4XzXFlDIxPBh0umN4qRXZaKDIlb6a3MknaB7psJWmf2l+e4Cfh9b5tey/+rZqpQ065eXTZfGCAuBLt+fYLQBhLfjRpk8S6hlIzc1Kdjg65uqzMwcTd0p7I4KLwHk1I0oXzuEu53fU1LSZhWp4Mnd6wjVgXAsQIDAQAB\n-----END PUBLIC KEY-----";
 export var RSA_SANDBOX_MW_PUBLIC_KEY = "";
-export var RSA_PRODUCTION_MW_PUBLIC_KEY = "";
-export var RSA_BETA_MW_PUBLIC_KEY = "-----BEGIN PUBLIC KEY-----\nMIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQC9hSRms7Ir1HmzdZxGXFYgmpi3\nez7VBFje0f8wwrxYS9oVoBtN4iAt0DOs3DbeuqtueI31wtpFVUMGg8W7R0SbtkZd\nGzszQNqt/wyqxpDC9q+97XdXwkWQFA72s76ud7eMXQlsWKsvgwhY+Ywzt0KlpNC3\nHj+N6UWFOYK98Xi+sQIDAQAB\n-----END PUBLIC KEY-----";
 export var RSA_STAGING_MW_PUBLIC_KEY = "-----BEGIN PUBLIC KEY-----\nMIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCi9W5jyTvA4Iwv3V5sfNQ7VdSz\n7WqwBbnWFbIUL/GjaaE93mvDv4zbgRSznHaHQPH6pxrMhMh0tV58njkvjHvQ/tvg\npwM8SemNPKEEAPl69tnMvCrJRPh2dWL3OHY8yCW4c38Hyx4fy56Zd5cdoVWfCReu\njCsvASLGz+cfRrj2swIDAQAB\n-----END PUBLIC KEY-----";
+export var RSA_BETA_MW_PUBLIC_KEY = "-----BEGIN PUBLIC KEY-----\nMIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQC9hSRms7Ir1HmzdZxGXFYgmpi3\nez7VBFje0f8wwrxYS9oVoBtN4iAt0DOs3DbeuqtueI31wtpFVUMGg8W7R0SbtkZd\nGzszQNqt/wyqxpDC9q+97XdXwkWQFA72s76ud7eMXQlsWKsvgwhY+Ywzt0KlpNC3\nHj+N6UWFOYK98Xi+sQIDAQAB\n-----END PUBLIC KEY-----";
+export var RSA_PRODUCTION_MW_PUBLIC_KEY = "-----BEGIN PUBLIC KEY-----\nMIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQC9hSRms7Ir1HmzdZxGXFYgmpi3\nez7VBFje0f8wwrxYS9oVoBtN4iAt0DOs3DbeuqtueI31wtpFVUMGg8W7R0SbtkZd\nGzszQNqt/wyqxpDC9q+97XdXwkWQFA72s76ud7eMXQlsWKsvgwhY+Ywzt0KlpNC3\nHj+N6UWFOYK98Xi+sQIDAQAB\n-----END PUBLIC KEY-----";

package/build/features/ApplePayButton/ApplePayButton.d.ts

@@ -3,4 +3,5 @@ import { ApplePayButtonProps } from '../../@types';
 import './ApplePayButton.css';
 export type { ApplePayButtonProps };
 export declare function ApplePayButton(props: ApplePayButtonProps): JSX.Element;
-export declare const renderApplePayButton: (props: ApplePayButtonProps, elementId: string) => any;
+export declare function abortApplePaySession(): void;
+export declare const render: (props: ApplePayButtonProps, elementId: string) => any;

package/build/features/ApplePayButton/ApplePayButton.js

@@ -14,57 +14,42 @@ 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';
+import { GetEvents, useGetEvents } from '../../hooks/useGetEvents';
+var ApplePay = React.memo(function (props) {
+    var mappedProps = getDefaultValues(props);
+    var _a = useApplePay(mappedProps), loading = _a.loading, onApplePayButtonClicked = _a.onApplePayButtonClicked, disabled = _a.disabled, abortApplePaySession = _a.abortApplePaySession;
+    var onEventReceieved = React.useCallback(function (event) {
+        if (event === GetEvents.ABORT) {
+            abortApplePaySession();
+        }
+    }, [abortApplePaySession]);
+    useGetEvents(onEventReceieved);
     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: {
-            '-apple-pay-button-type': type,
-            '-apple-pay-button-style': 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));
 }
+export function abortApplePaySession() {
+    window.postMessage({ event: GetEvents.ABORT }, '*');
+}
 var tapConnectInstance = null;
-export var renderApplePayButton = function (props, elementId) {
+export var render = function (props, elementId) {
     if (tapConnectInstance) {
         return tapConnectInstance;
     }

package/build/features/ApplePayButton/index.d.ts

@@ -1,3 +1,3 @@
-import { ApplePayButtonProps, ApplePayButton, renderApplePayButton } from './ApplePayButton';
-export { ApplePayButton, renderApplePayButton };
+import { ApplePayButtonProps, ApplePayButton, render, abortApplePaySession } from './ApplePayButton';
+export { ApplePayButton, render, abortApplePaySession };
 export type { ApplePayButtonProps };

package/build/features/ApplePayButton/index.js

@@ -1,2 +1,2 @@
-import { ApplePayButton, renderApplePayButton } from './ApplePayButton';
-export { ApplePayButton, renderApplePayButton };
+import { ApplePayButton, render, abortApplePaySession } from './ApplePayButton';
+export { ApplePayButton, render, abortApplePaySession };

package/build/hooks/useApplePay.d.ts

@@ -2,8 +2,9 @@ import { ApplePayButtonProps } from '../@types';
 declare type UseApplePayProps = Omit<ApplePayButtonProps, 'buttonStyle'>;
 interface UseApplePayReturnProps {
     loading: boolean;
-    onApplePayButtonClicked: () => Promise<void>;
     disabled: boolean;
+    onApplePayButtonClicked: () => Promise<void>;
+    abortApplePaySession: () => void;
 }
-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, onMerchantValidation, onShippingContactSelected, onPaymentMethodSelected, onCouponChanged }: UseApplePayProps) => UseApplePayReturnProps;
 export {};

package/build/hooks/useApplePay.js

@@ -50,40 +50,76 @@ 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, 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, onMerchantValidation = _a.onMerchantValidation, onShippingContactSelected = _a.onShippingContactSelected, onPaymentMethodSelected = _a.onPaymentMethodSelected, onCouponChanged = _a.onCouponChanged;
     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 _e = useState(undefined), applePaySession = _e[0], setApplePaySession = _e[1];
+    var abortApplePaySession = useCallback(function () {
+        applePaySession === null || applePaySession === void 0 ? void 0 : applePaySession.abort();
+    }, [applePaySession]);
     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: 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 +129,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,23 +151,27 @@ 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({
+                    acceptance: acceptance,
                     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) {
                     console.info("Creating ApplePaySession with version: ".concat(ApplePayVersion, " and request: ").concat(JSON.stringify(request)));
                 }
                 session_1 = new ApplePaySession(ApplePayVersion, request);
+                setApplePaySession(session_1);
                 session_1.onvalidatemerchant = function (event) { return __awaiter(void 0, void 0, void 0, function () {
                     var merchantSession, error_1;
                     return __generator(this, function (_a) {
                         switch (_a.label) {
                             case 0:
+                                onMerchantValidation === null || onMerchantValidation === void 0 ? void 0 : onMerchantValidation('initiated');
                                 if (debug) {
                                     console.info('Creating merchant session and validating merchant session');
                                     console.info('onvalidatemerchant event', event);
@@ -143,16 +183,19 @@ 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.identifier || merchant.id)];
                             case 2:
                                 merchantSession = _a.sent();
                                 if (debug)
                                     console.info('merchantSession', merchantSession);
                                 session_1.completeMerchantValidation(merchantSession);
-                                console.info('merchantSession completed successfully!');
+                                onMerchantValidation === null || onMerchantValidation === void 0 ? void 0 : onMerchantValidation('completed');
+                                if (debug)
+                                    console.info('merchantSession completed successfully!');
                                 return [3, 4];
                             case 3:
                                 error_1 = _a.sent();
+                                onMerchantValidation === null || onMerchantValidation === void 0 ? void 0 : onMerchantValidation('error');
                                 if (debug)
                                     console.error('error in onvalidatemerchant', error_1);
                                 session_1.completePayment({ status: ApplePaySession.STATUS_FAILURE });
@@ -212,6 +255,57 @@ export var useApplePay = function (_a) {
                         }
                     });
                 }); };
+                session_1.onshippingcontactselected = function (_a) {
+                    var shippingContact = _a.shippingContact;
+                    return __awaiter(void 0, void 0, void 0, function () {
+                        var response;
+                        return __generator(this, function (_b) {
+                            switch (_b.label) {
+                                case 0: return [4, (onShippingContactSelected === null || onShippingContactSelected === void 0 ? void 0 : onShippingContactSelected(shippingContact))];
+                                case 1:
+                                    response = _b.sent();
+                                    if (response) {
+                                        session_1.completeShippingContactSelection(response);
+                                    }
+                                    return [2];
+                            }
+                        });
+                    });
+                };
+                session_1.onpaymentmethodselected = function (_a) {
+                    var paymentMethod = _a.paymentMethod;
+                    return __awaiter(void 0, void 0, void 0, function () {
+                        var response;
+                        return __generator(this, function (_b) {
+                            switch (_b.label) {
+                                case 0: return [4, (onPaymentMethodSelected === null || onPaymentMethodSelected === void 0 ? void 0 : onPaymentMethodSelected(paymentMethod))];
+                                case 1:
+                                    response = _b.sent();
+                                    if (response) {
+                                        session_1.completePaymentMethodSelection(response);
+                                    }
+                                    return [2];
+                            }
+                        });
+                    });
+                };
+                session_1.oncouponcodechanged = function (_a) {
+                    var couponCode = _a.couponCode;
+                    return __awaiter(void 0, void 0, void 0, function () {
+                        var response;
+                        return __generator(this, function (_b) {
+                            switch (_b.label) {
+                                case 0: return [4, (onCouponChanged === null || onCouponChanged === void 0 ? void 0 : onCouponChanged(couponCode))];
+                                case 1:
+                                    response = _b.sent();
+                                    if (response) {
+                                        session_1.completeCouponCodeChange(response);
+                                    }
+                                    return [2];
+                            }
+                        });
+                    });
+                };
                 session_1.oncancel = function (event) {
                     console.info('oncancel event', event);
                     if (onCancel)
@@ -239,5 +333,10 @@ export var useApplePay = function (_a) {
             return [2];
         });
     }); };
-    return { loading: loading, onApplePayButtonClicked: onApplePayButtonClicked, disabled: !profileData || disabled };
+    return {
+        loading: loading,
+        disabled: !profileData || disabled,
+        onApplePayButtonClicked: onApplePayButtonClicked,
+        abortApplePaySession: abortApplePaySession
+    };
 };

package/build/hooks/useGetEvents.d.ts

@@ -0,0 +1,4 @@
+export declare enum GetEvents {
+    ABORT = "applepaySDK:abort"
+}
+export declare const useGetEvents: (onEventReceieved: (event: GetEvents) => void) => void;

package/build/hooks/useGetEvents.js

@@ -0,0 +1,15 @@
+import { useCallback, useEffect } from 'react';
+export var GetEvents;
+(function (GetEvents) {
+    GetEvents["ABORT"] = "applepaySDK:abort";
+})(GetEvents || (GetEvents = {}));
+export var useGetEvents = function (onEventReceieved) {
+    var onEventReceievedFun = useCallback(function (msg) {
+        var event = msg.data.event;
+        onEventReceieved(event);
+    }, [onEventReceieved]);
+    useEffect(function () {
+        window.addEventListener('message', onEventReceievedFun);
+        return function () { return window.removeEventListener('message', onEventReceievedFun); };
+    }, [onEventReceievedFun]);
+};

package/build/hooks/useScript.d.ts

@@ -1 +1 @@
-export declare function useScript(src: string, async?: boolean): "loading" | "ready" | "idle" | "error";
+export declare function useScript(src: string, async?: boolean): "error" | "loading" | "ready" | "idle";

package/build/index.d.ts

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

package/build/index.js

@@ -1,10 +1,15 @@
-import { ApplePayButton, renderApplePayButton } from './features/ApplePayButton';
-import { ButtonStyle, Scope, SupportedNetworks, Environment } from './constants';
-export { ApplePayButton, ButtonStyle, Scope, SupportedNetworks, Environment };
-window['TapSDKs'] = {
-    renderApplePayButton: renderApplePayButton,
-    ButtonStyle: ButtonStyle,
+import { ApplePayButton, render, abortApplePaySession } from './features/ApplePayButton';
+import { ThemeMode, Scope, SupportedNetworks, Environment, Locale, ButtonType, Edges, MerchantCapabilities } from './constants';
+export { ApplePayButton, abortApplePaySession, ThemeMode, Scope, SupportedNetworks, Environment, Locale, ButtonType, Edges, MerchantCapabilities };
+window['TapApplepaySDK'] = {
+    render: render,
+    abortApplePaySession: abortApplePaySession,
     Scope: Scope,
     SupportedNetworks: SupportedNetworks,
-    Environment: Environment
+    Environment: Environment,
+    Locale: Locale,
+    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, acceptance }: Pick<ApplePayButtonProps, "transaction" | "customer" | "acceptance"> & {
+    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,22 +24,28 @@ 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, acceptance = _a.acceptance;
     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),
             label: name
-        }
+        },
+        supportsCouponCode: acceptance.supportsCouponCode,
+        couponCode: transaction.couponCode,
+        requiredShippingContactFields: customer === null || customer === void 0 ? void 0 : customer.shippingContactFields,
+        shippingMethods: transaction.shipping,
+        lineItems: transaction.lineItems
     };
 };
 export var getApplePayPaymentMethod = function (paymentMethods) {

package/build/utils/defaultValues.d.ts

@@ -0,0 +1,32 @@
+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;
+        identifier?: string | undefined;
+    };
+    customer?: import("../@types").Customer | undefined;
+    acceptance: import("../@types").Acceptance;
+    transaction: import("../@types").Transaction;
+    onCancel?: (() => void) | undefined;
+    onError?: ((error: any) => void) | undefined;
+    onSuccess?: ((data: Record<string, any>) => Promise<void>) | undefined;
+    onClick?: (() => void) | undefined;
+    onReady?: (() => void) | undefined;
+    onMerchantValidation?: ((status: "initiated" | "completed" | "error") => void) | undefined;
+    onShippingContactSelected?: ((shippingContact: import("../@types").ApplePayPaymentContact) => Promise<void | import("../@types").ApplePayUpdateData>) | undefined;
+    onPaymentMethodSelected?: ((paymentMethod: import("../@types").ApplePayPaymentMethod) => Promise<void | import("../@types").ApplePayUpdateData>) | undefined;
+    onCouponChanged?: ((couponCode: string) => Promise<void | import("../@types").ApplePayUpdateData>) | 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.2",
+	"version": "1.0.3-test",
 	"description": "Apple Pay Button React Component",
 	"main": "build/index.js",
 	"module": "build/index.js",
@@ -20,7 +20,7 @@
 		"copy:files": "copyfiles -u 1 src/**/*.css build/",
 		"tsc:alias": "tsc-alias -p tsconfig.json",
 		"ts:build": "rm -rf build && tsc && yarn tsc:alias && yarn copy:files",
-		"push": "npm publish --access public"
+		"push": "npm publish --access public --tag test"
 	},
 	"keywords": [],
 	"author": {