@tap-payments/apple-pay-button 1.0.18 → 1.0.20

package/README.md

@@ -2,7 +2,7 @@
 
 Handling Apple Pay button in React and vanilla JS
 
-## Install
+# Install
 
 This is a [React](https://reactjs.org/) module available through the
 [npm registry](https://www.npmjs.com/). Installation is done using the
@@ -17,224 +17,10 @@ npm install @tap-payments/apple-pay-button
 ```console
 yarn add @tap-payments/apple-pay-button
 ```
+# Get your keys
 
-## Examples
+You can always use the example keys within our example app, but we do recommend you to head to our [onboarding](https://register.tap.company/sell) page. You will need to register your `domain` to get your `Key`.
 
-### ES6
+# Documentation
 
-```javascript
-import React from 'react'
-import {
- ApplePayButton,
- ThemeMode,
- SupportedNetworks,
- Scope,
- Environment,
- Locale,
- ButtonType,
- Edges
-} from '@tap-payments/apple-pay-button'
-
-const App = () => {
- 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')
-   }}
-  />
- )
-}
-```
-
-### Vanilla JS
-
-```html
-<!DOCTYPE html>
-<html lang="en">
-	<head>
-		<meta charset="UTF-8" />
-		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
-		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-		<title>apple pay button</title>
-		<link rel="stylesheet" href="https://tap-sdks.b-cdn.net/apple-pay/build-1.0.18/main.css" />
-		<script src="https://tap-sdks.b-cdn.net/apple-pay/build-1.0.18/main.js"></script>
-	</head>
-
-	<body>
-		<div id="apple-pay-button"></div>
-		<script type="text/javascript">
-			const { render, ThemeMode, SupportedNetworks, Scope, Environment, Locale, ButtonType, Edges } =
-				window.TapApplepaySDK
-			render(
-				{
-					publicKey: 'pk_test_7xxxxxxxxx',
-					environment: Environment.Development,
-					scope: Scope.TapToken,
-					merchant: {
-						domain: window.location.hostname,
-						id: 'merchant_xxxxxxxxxx'
-					},
-					transaction: {
-						currency: 'SAR',
-						amount: '3'
-					},
-					acceptance: {
-						supportedBrands: [SupportedNetworks.Mada, SupportedNetworks.Visa, SupportedNetworks.MasterCard],
-						supportedCards: ['DEBIT', 'CREDIT'],
-						supportedCardsWithAuthentications: ['3DS', 'EMV']
-					},
-
-					customer: {
-						id: 'cus_xxx',
-						name: [
-							{
-								locale: 'en',
-								first: 'test',
-								last: 'tester',
-								middle: 'test'
-							}
-						],
-						contact: {
-							email: 'test@gmail.com',
-							phone: {
-								number: '10XXXXXX56',
-								countryCode: '+20'
-							}
-						}
-					},
-					interface: {
-						locale: Locale.EN,
-						theme: ThemeMode.DARK,
-						type: ButtonType.BUY,
-						edges: Edges.CURVED
-					},
-					onCancel: async () => {
-						console.log('onCancel')
-					},
-					onError: async (error) => {
-						console.log('onError', error)
-					},
-					onSuccess: async (data) => {
-						console.log('onSuccess', data)
-					},
-					onReady: async () => {
-						console.log('onReady')
-					}
-				},
-				'apple-pay-button'
-			)
-		</script>
-	</body>
-</html>
-```
-
-## Configurations
-
-| 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                                       |
+Please find all the documentation needed through our [Tap official Docs](https://developers.tap.company/docs/web-applepay-sdk).

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

@@ -0,0 +1,110 @@
+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 ApplePayPaymentTokenContext {
+    merchantIdentifier: string;
+    externalIdentifier: string;
+    merchantName: string;
+    merchantDomain?: string;
+    amount: string;
+}
+export interface ApplePayPaymentMethod {
+    displayName?: string;
+    network?: string;
+    type?: ApplePayPaymentMethodType;
+    billingContact?: ApplePayPaymentContact;
+}
+export interface ApplePayAutomaticReloadPaymentRequest {
+    paymentDescription: string;
+    automaticReloadBilling: ApplePayLineItem;
+    billingAgreement?: string;
+    managementURL: string;
+    tokenNotificationURL?: string;
+}
+export interface ApplePayRecurringPaymentRequest {
+    paymentDescription: string;
+    regularBilling: ApplePayLineItem;
+    trialBilling?: ApplePayLineItem;
+    billingAgreement?: string;
+    managementURL: string;
+    tokenNotificationURL?: string;
+}
+export interface ApplePayDeferredPaymentRequest {
+    billingAgreement?: string;
+    deferredBilling: ApplePayLineItem;
+    freeCancellationDate?: Date;
+    freeCancellationDateTimeZone?: string;
+    managementURL: string;
+    paymentDescription: string;
+    tokenNotificationURL?: string;
+}
+export interface ApplePayError {
+    code: string;
+    contactField: string;
+    message: string;
+}
+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[];
+    newMultiTokenContexts?: ApplePayPaymentTokenContext[];
+    newAutomaticReloadPaymentRequest?: ApplePayAutomaticReloadPaymentRequest;
+    newRecurringPaymentRequest?: ApplePayRecurringPaymentRequest;
+    newDeferredPaymentRequest?: ApplePayDeferredPaymentRequest;
+    errors?: ApplePayError[];
+    newShippingMethods?: ApplePayShippingMethod[];
+}
+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,20 +1,6 @@
-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;
-        givenName: string;
-        familyName: string;
-    };
-    total: {
-        label: string;
-        amount: number;
-    };
-}
+import { Scope, SupportedNetworks, ButtonType, Locale, Environment, ThemeMode, Edges } from '../constants';
+import { 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];
@@ -42,6 +28,34 @@ export interface Acceptance {
     supportedCards?: Array<string>;
     supportedCardsWithAuthentications?: Array<string>;
 }
+export interface Transaction {
+    amount: string;
+    currency: string;
+    couponCode?: string;
+    shipping?: ApplePayShippingMethod[];
+    items?: Array<{
+        type?: 'final' | 'pending';
+        label?: string;
+        amount?: string;
+        paymentTiming?: 'immediate' | 'recurring' | 'deferred' | 'automaticReload';
+        scheduledPayment?: {
+            recurringStartDate?: Date;
+            recurringEndDate?: Date;
+            recurringIntervalUnit?: 'year' | 'month' | 'day' | 'hour' | 'minute';
+            recurringIntervalCount?: number;
+        };
+        deferredPayment?: {
+            deferredPaymentDate?: Date;
+        };
+        automaticReloadPayment?: {
+            thresholdAmount?: string;
+        };
+    }>;
+}
+export interface Features {
+    shippingContactFields?: Array<RequiredShippingContactField>;
+    supportsCouponCode?: boolean;
+}
 export interface ApplePayButtonProps {
     scope?: typeof Scope[keyof typeof Scope];
     publicKey: string;
@@ -49,19 +63,23 @@ export interface ApplePayButtonProps {
     merchant: {
         id: string;
         domain: string;
+        identifier?: string;
     };
     interface?: Interface;
     customer?: Customer;
     acceptance: Acceptance;
-    transaction: {
-        amount: string;
-        currency: string;
-    };
+    transaction: Transaction;
+    features: Features;
     onCancel?: () => void;
     onError?: (error: any) => void;
     onSuccess?: (data: Record<string, any>) => Promise<void>;
     onClick?: () => void;
     onReady?: () => void;
+    onMerchantValidation?: (status: 'initiated' | 'completed' | 'error') => void;
+    onShippingMethodSelected?: (shippingMethod: ApplePayShippingMethod) => Promise<ApplePayUpdateData>;
+    onShippingContactSelected?: (shippingContact: ApplePayPaymentContact) => Promise<ApplePayUpdateData>;
+    onPaymentMethodSelected?: (paymentMethod: ApplePayPaymentMethod) => Promise<ApplePayUpdateData>;
+    onCouponChanged?: (couponCode: string) => Promise<ApplePayUpdateData>;
     metaData?: MetaData;
     debug?: boolean;
 }

package/build/@types/index.js

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

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 function abortApplePaySession(): void;
 export declare const render: (props: ApplePayButtonProps, elementId: string) => any;

package/build/features/ApplePayButton/ApplePayButton.js

@@ -17,9 +17,16 @@ import { useApplePay } from '../../hooks/useApplePay';
 import './ApplePayButton.css';
 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;
+    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 (props.debug) {
             console.log('ApplePayButtonProps', props);
@@ -38,6 +45,9 @@ var ApplePay = React.memo(function (props) {
 export function ApplePayButton(props) {
     return _jsx(ApplePay, __assign({}, props));
 }
+export function abortApplePaySession() {
+    window.postMessage({ event: GetEvents.ABORT }, '*');
+}
 var tapConnectInstance = null;
 export var render = function (props, elementId) {
     if (tapConnectInstance) {

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

@@ -1,3 +1,3 @@
-import { ApplePayButtonProps, ApplePayButton, render } from './ApplePayButton';
-export { ApplePayButton, render };
+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, render } from './ApplePayButton';
-export { ApplePayButton, render };
+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, interface: interfaceObj, customer, onCancel, onError, onSuccess, scope, acceptance, metaData, debug, environment, onReady }: UseApplePayProps) => UseApplePayReturnProps;
+export declare const useApplePay: ({ publicKey, merchant, transaction, interface: interfaceObj, customer, onCancel, onError, onSuccess, scope, acceptance, features, metaData, debug, environment, onReady, onMerchantValidation, onShippingMethodSelected, onShippingContactSelected, onPaymentMethodSelected, onCouponChanged }: UseApplePayProps) => UseApplePayReturnProps;
 export {};

package/build/hooks/useApplePay.js

@@ -52,10 +52,14 @@ 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, 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 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, features = _a.features, metaData = _a.metaData, debug = _a.debug, environment = _a.environment, onReady = _a.onReady, onMerchantValidation = _a.onMerchantValidation, onShippingMethodSelected = _a.onShippingMethodSelected, 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;
         var _a, _b, _c, _d, _e, _f, _g;
@@ -147,8 +151,9 @@ 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, acceptance.supportedBrands);
+                cardBrands = validateSupportedNetworks(paymentMethod.supported_card_brands, acceptance === null || acceptance === void 0 ? void 0 : acceptance.supportedBrands);
                 request = getApplePayRequest({
+                    features: features,
                     countryCode: profileData.merchant.country_code,
                     transaction: __assign(__assign({}, transaction), { currency: currency }),
                     customer: customer,
@@ -160,11 +165,13 @@ export var useApplePay = function (_a) {
                     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);
@@ -176,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(__assign(__assign({}, profileData.merchant), { id: merchant.id }), event.validationURL, merchant.domain, merchant.id)];
+                                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 });
@@ -245,6 +255,82 @@ export var useApplePay = function (_a) {
                         }
                     });
                 }); };
+                if (onShippingContactSelected) {
+                    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(shippingContact)];
+                                    case 1:
+                                        response = _b.sent();
+                                        if (response) {
+                                            session_1.completeShippingContactSelection(response);
+                                        }
+                                        return [2];
+                                }
+                            });
+                        });
+                    };
+                }
+                if (onShippingMethodSelected) {
+                    session_1.onshippingmethodselected = function (_a) {
+                        var shippingMethod = _a.shippingMethod;
+                        return __awaiter(void 0, void 0, void 0, function () {
+                            var response;
+                            return __generator(this, function (_b) {
+                                switch (_b.label) {
+                                    case 0: return [4, onShippingMethodSelected(shippingMethod)];
+                                    case 1:
+                                        response = _b.sent();
+                                        if (response) {
+                                            session_1.completeShippingMethodSelection(response);
+                                        }
+                                        return [2];
+                                }
+                            });
+                        });
+                    };
+                }
+                if (onPaymentMethodSelected) {
+                    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(paymentMethod)];
+                                    case 1:
+                                        response = _b.sent();
+                                        if (response) {
+                                            session_1.completePaymentMethodSelection(response);
+                                        }
+                                        return [2];
+                                }
+                            });
+                        });
+                    };
+                }
+                if (onCouponChanged) {
+                    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(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)
@@ -272,5 +358,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 { ApplePayButtonProps, ApplePayButton, abortApplePaySession } from './features/ApplePayButton';
 import { ThemeMode, Scope, SupportedNetworks, Environment, Locale, ButtonType, Edges, MerchantCapabilities } from './constants';
 export type { ApplePayButtonProps };
-export { ApplePayButton, ThemeMode, Scope, SupportedNetworks, Environment, Locale, ButtonType, Edges, MerchantCapabilities };
+export { ApplePayButton, abortApplePaySession, ThemeMode, Scope, SupportedNetworks, Environment, Locale, ButtonType, Edges, MerchantCapabilities };

package/build/index.js

@@ -1,8 +1,9 @@
-import { ApplePayButton, render } from './features/ApplePayButton';
+import { ApplePayButton, render, abortApplePaySession } from './features/ApplePayButton';
 import { ThemeMode, Scope, SupportedNetworks, Environment, Locale, ButtonType, Edges, MerchantCapabilities } from './constants';
-export { ApplePayButton, ThemeMode, Scope, SupportedNetworks, Environment, Locale, ButtonType, Edges, MerchantCapabilities };
+export { ApplePayButton, abortApplePaySession, ThemeMode, Scope, SupportedNetworks, Environment, Locale, ButtonType, Edges, MerchantCapabilities };
 window['TapApplepaySDK'] = {
     render: render,
+    abortApplePaySession: abortApplePaySession,
     Scope: Scope,
     SupportedNetworks: SupportedNetworks,
     Environment: Environment,

package/build/utils/config.d.ts

@@ -2,7 +2,7 @@ import { Acceptance, ApplePayButtonProps, ApplePayRequestData, PaymentMethod } f
 import { SupportedNetworks } from '../constants';
 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, customer, supportedNetworks, merchantCapabilities, countryCode, name }: Pick<ApplePayButtonProps, "transaction" | "customer"> & {
+export declare const getApplePayRequest: ({ transaction, customer, supportedNetworks, merchantCapabilities, countryCode, name, features }: Pick<ApplePayButtonProps, "transaction" | "customer" | "features"> & {
     supportedNetworks: Acceptance['supportedBrands'];
     merchantCapabilities: ApplePayRequestData['merchantCapabilities'];
     countryCode: string;

package/build/utils/config.js

@@ -24,8 +24,8 @@ export var validateCurrency = function (currency, currencies) {
     return currency;
 };
 export var getApplePayRequest = function (_a) {
-    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;
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    var transaction = _a.transaction, customer = _a.customer, supportedNetworks = _a.supportedNetworks, merchantCapabilities = _a.merchantCapabilities, countryCode = _a.countryCode, name = _a.name, features = _a.features;
     return {
         countryCode: countryCode,
         currencyCode: transaction.currency,
@@ -40,7 +40,26 @@ export var getApplePayRequest = function (_a) {
         total: {
             amount: Number(transaction.amount),
             label: name
-        }
+        },
+        supportsCouponCode: features.supportsCouponCode,
+        couponCode: transaction.couponCode,
+        requiredShippingContactFields: features === null || features === void 0 ? void 0 : features.shippingContactFields,
+        shippingMethods: transaction.shipping,
+        lineItems: (_l = transaction.items) === null || _l === void 0 ? void 0 : _l.map(function (item) {
+            var _a, _b, _c, _d, _e, _f;
+            return ({
+                type: item.type,
+                label: item.label,
+                amount: item.amount,
+                paymentTiming: item.paymentTiming,
+                recurringPaymentStartDate: (_a = item.scheduledPayment) === null || _a === void 0 ? void 0 : _a.recurringStartDate,
+                recurringPaymentIntervalUnit: (_b = item.scheduledPayment) === null || _b === void 0 ? void 0 : _b.recurringIntervalUnit,
+                recurringPaymentIntervalCount: (_c = item.scheduledPayment) === null || _c === void 0 ? void 0 : _c.recurringIntervalCount,
+                recurringPaymentEndDate: (_d = item.scheduledPayment) === null || _d === void 0 ? void 0 : _d.recurringEndDate,
+                deferredPaymentDate: (_e = item.deferredPayment) === null || _e === void 0 ? void 0 : _e.deferredPaymentDate,
+                automaticReloadPaymentThresholdAmount: (_f = item.automaticReloadPayment) === null || _f === void 0 ? void 0 : _f.thresholdAmount
+            });
+        })
     };
 };
 export var getApplePayPaymentMethod = function (paymentMethods) {

package/build/utils/defaultValues.d.ts

@@ -12,18 +12,22 @@ export declare const getDefaultValues: (mainObject: ApplePayButtonProps) => {
     merchant: {
         id: string;
         domain: string;
+        identifier?: string | undefined;
     };
     customer?: import("../@types").Customer | undefined;
     acceptance: import("../@types").Acceptance;
-    transaction: {
-        amount: string;
-        currency: string;
-    };
+    transaction: import("../@types").Transaction;
+    features: import("../@types").Features;
     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;
+    onShippingMethodSelected?: ((shippingMethod: import("../@types").ApplePayShippingMethod) => Promise<import("../@types").ApplePayUpdateData>) | undefined;
+    onShippingContactSelected?: ((shippingContact: import("../@types").ApplePayPaymentContact) => Promise<import("../@types").ApplePayUpdateData>) | undefined;
+    onPaymentMethodSelected?: ((paymentMethod: import("../@types").ApplePayPaymentMethod) => Promise<import("../@types").ApplePayUpdateData>) | undefined;
+    onCouponChanged?: ((couponCode: string) => Promise<import("../@types").ApplePayUpdateData>) | undefined;
     metaData?: import("../@types").MetaData | undefined;
     debug?: boolean | undefined;
 };

package/package.json

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