@tap-payments/apple-pay-button 0.0.0-test

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Tap Payments
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,120 @@
+# apple-pay-button
+
+Handling Apple Pay button in React and vanilla JS
+
+## Install
+
+This is a [React](https://reactjs.org/) module available through the
+[npm registry](https://www.npmjs.com/). Installation is done using the
+[`npm install` command](https://docs.npmjs.com/getting-started/installing-npm-packages-locally):
+
+```console
+npm install @tap-payments/apple-pay-button
+```
+
+---------------------------- OR -------------------------
+
+```console
+yarn add @tap-payments/apple-pay-button
+```
+
+## Examples
+
+### ES6
+
+```js
+import React from 'react'
+import { ApplePayButton, ButtonStyle, SupportedNetworks, Scope } from '@tap-payments/apple-pay-button'
+
+const App = () => {
+	return (
+		<ApplePayButton
+			// required (The public Key provided by Tap)
+			publicKey={'pk_test_xxxxxxxxxxxxxxxxxxxxxxxxxzh'}
+			// 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',
+				// required (The description/label of the transaction)
+				label: 'to Merchant'
+			}}
+			// 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)
+			}}
+		/>
+	)
+}
+```
+
+### Vanilla JS
+
+```js
+// coming soon...
+```
+
+## 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                                                 |
+| transaction.label    | `string`              | `required` | The description/label of the transaction                                   |
+| 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 |

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

@@ -0,0 +1,74 @@
+import { Scope, ButtonStyle, MerchantCapabilities, SupportedNetworks } 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;
+    };
+}
+export interface ApplePayButtonProps {
+    publicKey: string;
+    merchant: {
+        id?: string;
+        domain: string;
+    };
+    scope?: typeof Scope[keyof typeof Scope];
+    supportedNetworks?: Array<typeof SupportedNetworks[keyof typeof SupportedNetworks]>;
+    buttonStyle?: typeof ButtonStyle[keyof typeof ButtonStyle];
+    billingContact?: {
+        name: {
+            first: string;
+            middle?: string;
+            last: string;
+        };
+        email: {
+            address: string;
+        };
+        phone: {
+            code: string;
+            number: string;
+        };
+    };
+    transaction: {
+        amount: string;
+        currency: string;
+        label: string;
+    };
+    onCancel?: () => void;
+    onError?: (error: any) => void;
+    onSuccess?: (data: Record<string, any>) => Promise<void>;
+}
+export interface MerchantResponse {
+    id: string;
+    name: string;
+    country_code: string;
+    session_token: string;
+    [other: string]: string;
+}
+export interface PaymentMethod {
+    id: string;
+    image: string;
+    name: string;
+    payment_type: string;
+    supported_card_brands: Array<typeof SupportedNetworks[keyof typeof SupportedNetworks]>;
+    supported_currencies: string[];
+}
+export interface PaymentOptionsResponse {
+    id: string;
+    country: string;
+    currency: string;
+    payment_methods: PaymentMethod[];
+}
+export interface ProfileResponse {
+    merchant: MerchantResponse;
+    payment_options: PaymentOptionsResponse;
+}

package/build/@types/index.js

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

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

@@ -0,0 +1,11 @@
+import { MerchantResponse, ApplePayRequestData, ProfileResponse } from '../@types';
+import BaseService from './base';
+declare class APPService extends BaseService {
+    constructor();
+    init(publicKey: string, merchantId?: string): Promise<ProfileResponse>;
+    appleSession(merchant: MerchantResponse, validationURL: string, merchantRegisteredDomain: string): Promise<any>;
+    tapTokenization(applePaymentData: Record<string, string>, merchant: MerchantResponse): Promise<any>;
+    createCharge(publicKey: string, merchant: MerchantResponse, request: ApplePayRequestData, cardToken: string): Promise<import("axios").AxiosResponse<any, any>>;
+}
+declare const appService: APPService;
+export default appService;

package/build/api/app.service.js

@@ -0,0 +1,217 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import BaseService from './base';
+import httpClient from './httpClient';
+var APPService = (function (_super) {
+    __extends(APPService, _super);
+    function APPService() {
+        return _super.call(this, httpClient) || this;
+    }
+    Object.defineProperty(APPService.prototype, "init", {
+        enumerable: false,
+        configurable: true,
+        writable: true,
+        value: function (publicKey, merchantId) {
+            return __awaiter(this, void 0, void 0, function () {
+                var body, data;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            body = {
+                                headers: { authorization: "Bearer ".concat(publicKey) },
+                                reqBody: { public_key: publicKey, merchant_id: merchantId }
+                            };
+                            return [4, this.post('/init', body)];
+                        case 1:
+                            data = (_a.sent()).data;
+                            if (data.errors)
+                                throw data;
+                            return [2, {
+                                    merchant: data.merchant,
+                                    payment_options: data.payment_options
+                                }];
+                    }
+                });
+            });
+        }
+    });
+    Object.defineProperty(APPService.prototype, "appleSession", {
+        enumerable: false,
+        configurable: true,
+        writable: true,
+        value: function (merchant, validationURL, merchantRegisteredDomain) {
+            return __awaiter(this, void 0, void 0, function () {
+                var body, data;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            body = {
+                                validationUrl: validationURL,
+                                origin: merchantRegisteredDomain,
+                                merchantIdentifier: 'merchant.tap.gosell',
+                                merchantId: merchant.id,
+                                merchantName: merchant.name,
+                                session_token: merchant.session_token
+                            };
+                            return [4, this.post('/session', body)];
+                        case 1:
+                            data = (_a.sent()).data;
+                            if (data.errors)
+                                throw data;
+                            return [2, data];
+                    }
+                });
+            });
+        }
+    });
+    Object.defineProperty(APPService.prototype, "tapTokenization", {
+        enumerable: false,
+        configurable: true,
+        writable: true,
+        value: function (applePaymentData, merchant) {
+            return __awaiter(this, void 0, void 0, function () {
+                var body, data;
+                return __generator(this, function (_a) {
+                    switch (_a.label) {
+                        case 0:
+                            body = {
+                                method: 'POST',
+                                path: '/v2/token',
+                                headers: {
+                                    session_token: merchant.session_token
+                                },
+                                reqBody: {
+                                    type: 'applepay',
+                                    token_data: applePaymentData
+                                }
+                            };
+                            return [4, this.post('/api', body)];
+                        case 1:
+                            data = (_a.sent()).data;
+                            if (data.errors)
+                                throw data;
+                            return [2, data];
+                    }
+                });
+            });
+        }
+    });
+    Object.defineProperty(APPService.prototype, "createCharge", {
+        enumerable: false,
+        configurable: true,
+        writable: true,
+        value: function (publicKey, merchant, request, cardToken) {
+            var body = {
+                method: 'POST',
+                path: '/v2/charge',
+                headers: {
+                    session_token: merchant.session_token
+                },
+                reqBody: {
+                    id: null,
+                    amount: request.total.amount,
+                    currency: request.currencyCode,
+                    public_key: publicKey,
+                    product: 'GOSELL',
+                    threeDSecure: true,
+                    save_card: false,
+                    fee: 0,
+                    statement_descriptor: 'Sample',
+                    description: 'Test Description',
+                    metadata: {},
+                    reference: {
+                        transaction: 'txn_0001',
+                        order: 'ord_0001'
+                    },
+                    receipt: {
+                        email: false,
+                        sms: true
+                    },
+                    customer: {
+                        id: null,
+                        first_name: 'Hala',
+                        middle_name: null,
+                        last_name: 'Q.',
+                        email: 'email@email.com',
+                        phone: {
+                            country_code: '965',
+                            number: '00000000'
+                        }
+                    },
+                    source: {
+                        id: cardToken
+                    },
+                    hashstring: null,
+                    post: {
+                        url: null
+                    },
+                    redirect: {
+                        url: 'https://jslib.gosell.io/demo?token=63cce645332aa501e6cf768f&mode=popup'
+                    },
+                    ipaddress: null,
+                    selected_currency: request.currencyCode,
+                    selected_amount: request.total.amount,
+                    merchant: {
+                        id: merchant.id
+                    },
+                    order: {
+                        id: 'ord_06CO2023731xt7V22SC0X487'
+                    }
+                }
+            };
+            return this.post('/api', body);
+        }
+    });
+    return APPService;
+}(BaseService));
+var appService = new APPService();
+export default appService;

package/build/api/base.d.ts

@@ -0,0 +1,9 @@
+import { AxiosInstance, AxiosRequestConfig } from 'axios';
+export default class BaseService {
+    httpClient: AxiosInstance;
+    constructor(httpClient: AxiosInstance);
+    get(url: string, config?: AxiosRequestConfig<any>): Promise<import("axios").AxiosResponse<any, any>>;
+    post(url: string, data?: any, config?: AxiosRequestConfig<any>): Promise<import("axios").AxiosResponse<any, any>>;
+    put(url: string, data?: any, config?: AxiosRequestConfig<any>): Promise<import("axios").AxiosResponse<any, any>>;
+    delete(url: string, config?: AxiosRequestConfig<any>): Promise<import("axios").AxiosResponse<any, any>>;
+}

package/build/api/base.js

@@ -0,0 +1,45 @@
+var BaseService = (function () {
+    function BaseService(httpClient) {
+        Object.defineProperty(this, "httpClient", {
+            enumerable: true,
+            configurable: true,
+            writable: true,
+            value: void 0
+        });
+        this.httpClient = httpClient;
+    }
+    Object.defineProperty(BaseService.prototype, "get", {
+        enumerable: false,
+        configurable: true,
+        writable: true,
+        value: function (url, config) {
+            return this.httpClient.get(url, config);
+        }
+    });
+    Object.defineProperty(BaseService.prototype, "post", {
+        enumerable: false,
+        configurable: true,
+        writable: true,
+        value: function (url, data, config) {
+            return this.httpClient.post(url, data, config);
+        }
+    });
+    Object.defineProperty(BaseService.prototype, "put", {
+        enumerable: false,
+        configurable: true,
+        writable: true,
+        value: function (url, data, config) {
+            return this.httpClient.put(url, data, config);
+        }
+    });
+    Object.defineProperty(BaseService.prototype, "delete", {
+        enumerable: false,
+        configurable: true,
+        writable: true,
+        value: function (url, config) {
+            return this.httpClient.delete(url, config);
+        }
+    });
+    return BaseService;
+}());
+export default BaseService;

package/build/api/httpClient.d.ts

@@ -0,0 +1,2 @@
+declare const httpClient: import("axios").AxiosInstance;
+export default httpClient;

package/build/api/httpClient.js

@@ -0,0 +1,16 @@
+import axios from 'axios';
+var MW_BASE_URL = 'https://checkout.payments.tap.company/api';
+var httpClient = axios.create({
+    baseURL: MW_BASE_URL,
+    headers: {
+        'Content-Type': 'application/json',
+        Accept: 'application/json'
+    }
+});
+httpClient.interceptors.request.use(function (config) {
+    return config;
+});
+httpClient.interceptors.response.use(function (response) {
+    return response;
+});
+export default httpClient;

package/build/constants/index.d.ts

@@ -0,0 +1,21 @@
+export declare const Scope: {
+    readonly AppleToken: "AppleToken";
+    readonly TapToken: "TapToken";
+};
+export declare const ButtonStyle: {
+    readonly Black: "black";
+    readonly White: "white";
+    readonly WhiteOutline: "whiteOutline";
+};
+export declare const MerchantCapabilities: {
+    readonly Supports3DS: "supports3DS";
+    readonly SupportsCredit: "supportsCredit";
+    readonly SupportsDebit: "supportsDebit";
+};
+export declare const SupportedNetworks: {
+    readonly Amex: "amex";
+    readonly Mada: "mada";
+    readonly MasterCard: "masterCard";
+    readonly Visa: "visa";
+};
+export declare const ApplePayVersion = 5;

package/build/constants/index.js

@@ -0,0 +1,21 @@
+export var Scope = {
+    AppleToken: 'AppleToken',
+    TapToken: 'TapToken'
+};
+export var ButtonStyle = {
+    Black: 'black',
+    White: 'white',
+    WhiteOutline: 'whiteOutline'
+};
+export var MerchantCapabilities = {
+    Supports3DS: 'supports3DS',
+    SupportsCredit: 'supportsCredit',
+    SupportsDebit: 'supportsDebit'
+};
+export var SupportedNetworks = {
+    Amex: 'amex',
+    Mada: 'mada',
+    MasterCard: 'masterCard',
+    Visa: 'visa'
+};
+export var ApplePayVersion = 5;

package/build/features/ApplePayButton/ApplePayButton.css

@@ -0,0 +1,51 @@
+.button-applepay-tap {
+	appearance: none;
+	border: none;
+	cursor: pointer;
+	-webkit-user-select: none;
+	user-select: none;
+	display: flex;
+	position: relative;
+	-webkit-box-pack: center;
+	-ms-flex-pack: center;
+	-webkit-justify-content: center;
+	justify-content: center;
+	-webkit-align-items: center;
+	-webkit-box-align: center;
+	-ms-flex-align: center;
+	align-items: center;
+	-webkit-margin-end: 8px;
+	margin-inline-end: 8px;
+	min-width: 96px;
+	max-width: 300px;
+	min-height: 40px;
+	border-radius: 9px;
+	background-color: white;
+	width: 100%;
+}
+
+.button-applepay-tap:disabled {
+	cursor: default;
+}
+
+.img-container {
+	height: 24px;
+	max-width: 80px;
+}
+
+.img-container img {
+	height: 100%;
+	width: 100%;
+	transform: scale(1.5);
+	filter: invert(0);
+}
+
+.whiteOutline {
+	border: solid 1px gray;
+}
+.dark {
+	background-color: black;
+}
+.dark .img-container img {
+	filter: invert(1);
+}

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { ApplePayButtonProps } from '../../@types';
+import './ApplePayButton.css';
+export type { ApplePayButtonProps };
+export declare function ApplePayButton(props: ApplePayButtonProps): JSX.Element;
+export declare function renderApplePayButton(config: ApplePayButtonProps, elementId: string): {
+    unmount: () => void;
+};

package/build/features/ApplePayButton/ApplePayButton.js

@@ -0,0 +1,43 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import { createElementAndInject } from '../../utils';
+import { useApplePay } from '../../hooks/useApplePay';
+import { ButtonStyle, 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, _b = _a.scope, scope = _b === void 0 ? Scope.TapToken : _b, _c = _a.buttonStyle, buttonStyle = _c === void 0 ? ButtonStyle.WhiteOutline : _c;
+    var _d = useApplePay({
+        publicKey: publicKey,
+        merchant: merchant,
+        transaction: transaction,
+        billingContact: billingContact,
+        supportedNetworks: supportedNetworks,
+        onCancel: onCancel,
+        onError: onError,
+        onSuccess: onSuccess,
+        scope: scope
+    }), loading = _d.loading, onApplePayButtonClicked = _d.onApplePayButtonClicked, disabled = _d.disabled;
+    return (_jsx("button", __assign({ className: "button-applepay-tap ".concat(buttonStyle), onClick: onApplePayButtonClicked, disabled: loading || disabled }, { children: _jsx("div", __assign({ className: 'img-container' }, { children: _jsx("img", { loading: 'eager', src: 'https://back-end.b-cdn.net/payment_methods/apple_pay.svg' }) })) })));
+});
+export function ApplePayButton(props) {
+    return _jsx(ApplePay, __assign({}, props));
+}
+export function renderApplePayButton(config, elementId) {
+    var el = createElementAndInject(elementId);
+    var root = createRoot(el);
+    root.render(_jsx(ApplePay, __assign({}, config)));
+    var unmount = function () { return root.unmount(); };
+    return { unmount: unmount };
+}

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

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

package/build/features/ApplePayButton/index.js

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

package/build/hooks/index.d.ts

@@ -0,0 +1 @@
+export * from './useScript';

package/build/hooks/index.js

@@ -0,0 +1 @@
+export * from './useScript';

package/build/hooks/useApplePay.d.ts

@@ -0,0 +1,9 @@
+import { ApplePayButtonProps } from '../@types';
+declare type UseApplePayProps = Omit<ApplePayButtonProps, 'buttonStyle'>;
+interface UseApplePayReturnProps {
+    loading: boolean;
+    onApplePayButtonClicked: () => Promise<void>;
+    disabled: boolean;
+}
+export declare const useApplePay: ({ publicKey, merchant, transaction, billingContact, onCancel, onError, onSuccess, scope, supportedNetworks }: UseApplePayProps) => UseApplePayReturnProps;
+export {};

package/build/hooks/useApplePay.js

@@ -0,0 +1,202 @@
+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 __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import { useCallback, useEffect, useState } from 'react';
+import appService from '../api/app.service';
+import { ApplePayVersion } from '../constants';
+import { getApplePayPaymentMethod, getApplePayRequest, validateCurrency, validateSupportedNetworks } from '../utils/config';
+export var useApplePay = function (_a) {
+    var publicKey = _a.publicKey, merchant = _a.merchant, transaction = _a.transaction, billingContact = _a.billingContact, onCancel = _a.onCancel, onError = _a.onError, onSuccess = _a.onSuccess, scope = _a.scope, supportedNetworks = _a.supportedNetworks;
+    var _b = useState(false), loading = _b[0], setLoading = _b[1];
+    var _c = useState(null), profileData = _c[0], setProfile = _c[1];
+    var getMerchantData = useCallback(function () {
+        setLoading(true);
+        appService
+            .init(publicKey, merchant.id)
+            .then(function (data) {
+            setProfile(data);
+        })
+            .catch(function (error) {
+            onError && onError(error.errors || error);
+        })
+            .finally(function () {
+            setLoading(false);
+        });
+    }, [merchant, onError, publicKey]);
+    useEffect(function () {
+        getMerchantData();
+    }, [getMerchantData]);
+    var onApplePayButtonClicked = function () { return __awaiter(void 0, void 0, void 0, function () {
+        var ApplePaySession, paymentMethod, currency, cardBrands, request, session_1;
+        var _a;
+        return __generator(this, function (_b) {
+            ApplePaySession = window.ApplePaySession;
+            if (!ApplePaySession) {
+                console.error('ApplePaySession is not available, please check if you are using Safari browser');
+                return [2];
+            }
+            if (!profileData) {
+                console.error('The profile data is not available, please check networks and try again');
+                return [2];
+            }
+            try {
+                paymentMethod = getApplePayPaymentMethod((profileData === null || profileData === void 0 ? void 0 : profileData.payment_options.payment_methods) || []);
+                currency = validateCurrency(transaction.currency, paymentMethod.supported_currencies);
+                cardBrands = validateSupportedNetworks(paymentMethod.supported_card_brands, supportedNetworks);
+                request = getApplePayRequest({
+                    countryCode: profileData === null || profileData === void 0 ? void 0 : profileData.merchant.country_code,
+                    transaction: __assign(__assign({}, transaction), { currency: currency }),
+                    billingContact: billingContact,
+                    supportedNetworks: cardBrands
+                });
+                console.info("Creating ApplePaySession with version: ".concat(ApplePayVersion, " and request: ").concat(JSON.stringify(request)));
+                session_1 = new ApplePaySession(ApplePayVersion, request);
+                session_1.oncancel = function () {
+                    console.info('oncancel event');
+                    if (onCancel)
+                        onCancel();
+                };
+                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:
+                                console.info('Creating merchant session and validating merchant session');
+                                console.info('onvalidatemerchant event', event);
+                                setLoading(true);
+                                _a.label = 1;
+                            case 1:
+                                _a.trys.push([1, 3, , 4]);
+                                console.info("creating merchant session for merchantData: ".concat(JSON.stringify(profileData === null || profileData === void 0 ? void 0 : profileData.merchant), " and validationURL: ").concat(event.validationURL, " and merchant.domain: ").concat(merchant.domain));
+                                return [4, appService.appleSession(profileData === null || profileData === void 0 ? void 0 : profileData.merchant, event.validationURL, merchant.domain)];
+                            case 2:
+                                merchantSession = (_a.sent()).body;
+                                console.info('merchantSession', merchantSession);
+                                session_1.completeMerchantValidation(merchantSession);
+                                console.info('merchantSession completed successfully!');
+                                return [3, 4];
+                            case 3:
+                                error_1 = _a.sent();
+                                console.error('error in onvalidatemerchant', error_1);
+                                session_1.completePayment({ status: 'STATUS_FAILURE' });
+                                throw error_1;
+                            case 4:
+                                setLoading(false);
+                                return [2];
+                        }
+                    });
+                }); };
+                session_1.onpaymentauthorized = function (event) { return __awaiter(void 0, void 0, void 0, function () {
+                    var _a, data, error_2;
+                    return __generator(this, function (_b) {
+                        switch (_b.label) {
+                            case 0:
+                                setLoading(true);
+                                console.info('onpaymentauthorized event', event);
+                                _b.label = 1;
+                            case 1:
+                                _b.trys.push([1, 9, , 10]);
+                                _a = scope;
+                                switch (_a) {
+                                    case 'AppleToken': return [3, 2];
+                                    case 'TapToken': return [3, 4];
+                                }
+                                return [3, 7];
+                            case 2: return [4, (onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess(event.payment.token.paymentData))];
+                            case 3:
+                                _b.sent();
+                                session_1.completePayment({ status: 'STATUS_SUCCESS' });
+                                return [3, 8];
+                            case 4: return [4, appService.tapTokenization(event.payment.token.paymentData, profileData === null || profileData === void 0 ? void 0 : profileData.merchant)];
+                            case 5:
+                                data = _b.sent();
+                                return [4, (onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess(data))];
+                            case 6:
+                                _b.sent();
+                                session_1.completePayment({ status: 'STATUS_SUCCESS' });
+                                return [3, 8];
+                            case 7:
+                                console.error('We only support AppleToken and ApplePay for now');
+                                console.info('Completing payment with status: STATUS_FAILURE');
+                                session_1.completePayment({ status: 'STATUS_FAILURE' });
+                                _b.label = 8;
+                            case 8: return [3, 10];
+                            case 9:
+                                error_2 = _b.sent();
+                                console.error('error in onpaymentauthorized', error_2);
+                                session_1.completePayment({ status: 'STATUS_FAILURE' });
+                                throw error_2;
+                            case 10:
+                                setLoading(false);
+                                return [2];
+                        }
+                    });
+                }); };
+                session_1.begin();
+            }
+            catch (e) {
+                if (!onError)
+                    return [2];
+                if (e.errors) {
+                    onError(e.errors);
+                    return [2];
+                }
+                if ((_a = e.response) === null || _a === void 0 ? void 0 : _a.data.errors) {
+                    onError(e.response.data.errors);
+                    return [2];
+                }
+                if (e.message) {
+                    onError([{ description: e.message, code: '400' }]);
+                    return [2];
+                }
+                onError(e);
+            }
+            return [2];
+        });
+    }); };
+    return { loading: loading, onApplePayButtonClicked: onApplePayButtonClicked, disabled: !profileData };
+};

package/build/hooks/useScript.d.ts

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

package/build/hooks/useScript.js

@@ -0,0 +1,39 @@
+import { useEffect, useState } from 'react';
+export function useScript(src, async) {
+    if (async === void 0) { async = true; }
+    var _a = useState(src ? 'loading' : 'idle'), status = _a[0], setStatus = _a[1];
+    useEffect(function () {
+        if (!src) {
+            setStatus('idle');
+            return;
+        }
+        var script = document.querySelector("script[src=\"".concat(src, "\"]"));
+        if (!script) {
+            script = document.createElement('script');
+            script.src = src;
+            script.async = async;
+            script.setAttribute('data-status', 'loading');
+            document.body.appendChild(script);
+            var setAttributeFromEvent = function (event) {
+                script.setAttribute('data-status', event.type === 'load' ? 'ready' : 'error');
+            };
+            script.addEventListener('load', setAttributeFromEvent);
+            script.addEventListener('error', setAttributeFromEvent);
+        }
+        else {
+            setStatus(script.getAttribute('data-status'));
+        }
+        var setStateFromEvent = function (event) {
+            setStatus(event.type === 'load' ? 'ready' : 'error');
+        };
+        script.addEventListener('load', setStateFromEvent);
+        script.addEventListener('error', setStateFromEvent);
+        return function () {
+            if (script) {
+                script.removeEventListener('load', setStateFromEvent);
+                script.removeEventListener('error', setStateFromEvent);
+            }
+        };
+    }, [src]);
+    return status;
+}

package/build/index.d.ts

@@ -0,0 +1,4 @@
+import { ApplePayButtonProps, ApplePayButton } from './features/ApplePayButton';
+import { ButtonStyle, Scope, SupportedNetworks } from './constants';
+export type { ApplePayButtonProps };
+export { ApplePayButton, ButtonStyle, Scope, SupportedNetworks };

package/build/index.js

@@ -0,0 +1,9 @@
+import { ApplePayButton, renderApplePayButton } from './features/ApplePayButton';
+import { ButtonStyle, Scope, SupportedNetworks } from './constants';
+export { ApplePayButton, ButtonStyle, Scope, SupportedNetworks };
+window['TapSDKs'] = {
+    renderApplePayButton: renderApplePayButton,
+    ButtonStyle: ButtonStyle,
+    Scope: Scope,
+    SupportedNetworks: SupportedNetworks
+};

package/build/utils/config.d.ts

@@ -0,0 +1,8 @@
+import { 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")[];
+export declare const validateCurrency: (currency: string, currencies: string[]) => string;
+export declare const getApplePayRequest: ({ transaction, billingContact, supportedNetworks, countryCode }: Pick<ApplePayButtonProps, "supportedNetworks" | "transaction" | "billingContact"> & {
+    countryCode: string;
+}) => ApplePayRequestData;
+export declare const getApplePayPaymentMethod: (paymentMethods: Array<PaymentMethod>) => PaymentMethod;

package/build/utils/config.js

@@ -0,0 +1,54 @@
+import { MerchantCapabilities } from '../constants';
+export var validateSupportedNetworks = function (supportedNetworksConfig, supportedNetworks) {
+    var toLowerCase = function (item) { return item.toLowerCase(); };
+    if (!supportedNetworks)
+        return supportedNetworksConfig.map(toLowerCase);
+    if (supportedNetworks.length === 0)
+        return supportedNetworksConfig.map(toLowerCase);
+    if (supportedNetworks.length > supportedNetworksConfig.length) {
+        throw new Error("The supported networks list is not valid");
+    }
+    supportedNetworks.forEach(function (network) {
+        var isSupported = supportedNetworksConfig.some(function (item) { return item.toLowerCase() === network.toLowerCase(); });
+        if (!isSupported) {
+            throw new Error("The supported network ".concat(network, " is not supported"));
+        }
+    });
+    return supportedNetworks;
+};
+export var validateCurrency = function (currency, currencies) {
+    var isSupported = currencies.some(function (item) { return item.toLowerCase() === currency.toLowerCase(); });
+    if (!isSupported) {
+        throw new Error("The currency \"".concat(currency, "\" is not supported, you have to use one of these currencies: ").concat(currencies));
+    }
+    return currency;
+};
+export var getApplePayRequest = function (_a) {
+    var transaction = _a.transaction, billingContact = _a.billingContact, supportedNetworks = _a.supportedNetworks, countryCode = _a.countryCode;
+    return {
+        countryCode: countryCode,
+        currencyCode: transaction.currency,
+        merchantCapabilities: [MerchantCapabilities.Supports3DS],
+        supportedNetworks: supportedNetworks,
+        billingContact: billingContact && {
+            phoneNumber: billingContact.phone.code + billingContact.phone.number,
+            emailAddress: billingContact.email.address,
+            givenName: billingContact.name.first,
+            familyName: billingContact.name.last
+        },
+        total: {
+            amount: Number(transaction.amount),
+            label: transaction.label
+        }
+    };
+};
+export var getApplePayPaymentMethod = function (paymentMethods) {
+    var paymentMethod = paymentMethods.find(function (_a) {
+        var name = _a.name, payment_type = _a.payment_type;
+        return [name, payment_type].some(function (item) { return item.toLowerCase() === 'apple_pay'; });
+    });
+    if (!paymentMethod) {
+        throw new Error('Apple Pay is not configured in your payment options');
+    }
+    return paymentMethod;
+};

package/build/utils/html.d.ts

@@ -0,0 +1,3 @@
+export declare const createElementAndInject: (id: string) => HTMLDivElement;
+export declare const reactElement: (elementId: string) => import("react-dom/client").Root;
+export declare const removeElement: (elementId: string) => void;

package/build/utils/html.js

@@ -0,0 +1,20 @@
+import { createRoot } from 'react-dom/client';
+export var createElementAndInject = function (id) {
+    var element = document.createElement('div');
+    element.setAttribute('id', id);
+    document.body.appendChild(element);
+    return element;
+};
+export var reactElement = function (elementId) {
+    var element = document.getElementById(elementId);
+    if (!element) {
+        element = createElementAndInject('tap-apple-pay-sdk-element');
+    }
+    return createRoot(element);
+};
+export var removeElement = function (elementId) {
+    var el = document.getElementById(elementId);
+    if (!el)
+        return;
+    el.remove();
+};

package/build/utils/index.d.ts

@@ -0,0 +1 @@
+export * from './html';

package/build/utils/index.js

@@ -0,0 +1 @@
+export * from './html';

package/package.json

@@ -0,0 +1,102 @@
+{
+	"name": "@tap-payments/apple-pay-button",
+	"version": "0.0.0-test",
+	"description": "Apple Pay Button React Component",
+	"main": "build/index.js",
+	"module": "build/index.js",
+	"types": "build/index.d.ts",
+	"files": [
+		"build",
+		"README.md"
+	],
+	"scripts": {
+		"prepare": "npx husky install",
+		"prettier": "prettier --list-different \"src/**/*.{md,mdx,ts,js,tsx,jsx,json}\" *.json *.js",
+		"prettier:fix": "prettier --write \"src/**/*.{ts,tsx,js,jsx,json,md,css,json}\"  *.json *.js",
+		"lint": "eslint src --color --ext .js,.jsx,.ts,.tsx,.json",
+		"lint:fix": "eslint src --ext .js,.jsx,.ts,.tsx --fix",
+		"start": "cross-env NODE_ENV=development webpack serve",
+		"build": "cross-env NODE_ENV=production webpack",
+		"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"
+	},
+	"keywords": [],
+	"author": {
+		"name": "Ahmed Elsharkawy",
+		"email": "a.elsharkawy@tap.company"
+	},
+	"license": "ISC",
+	"devDependencies": {
+		"@babel/core": "^7.18.6",
+		"@babel/preset-env": "^7.18.6",
+		"@babel/preset-react": "^7.18.6",
+		"@babel/preset-typescript": "^7.18.6",
+		"@types/crypto-js": "^4.1.1",
+		"@types/react": "^18.0.15",
+		"@types/react-dom": "^18.0.6",
+		"@typescript-eslint/eslint-plugin": "^5.30.5",
+		"@typescript-eslint/parser": "^5.30.5",
+		"babel-loader": "^8.2.5",
+		"copyfiles": "^2.4.1",
+		"cross-env": "^7.0.3",
+		"css-loader": "^6.7.1",
+		"css-minimizer-webpack-plugin": "^4.0.0",
+		"eslint": "^8.19.0",
+		"eslint-config-airbnb": "^19.0.4",
+		"eslint-config-prettier": "^8.5.0",
+		"eslint-plugin-import": "^2.26.0",
+		"eslint-plugin-jsx-a11y": "^6.6.0",
+		"eslint-plugin-node": "^11.1.0",
+		"eslint-plugin-prettier": "^4.2.1",
+		"eslint-plugin-react": "^7.30.1",
+		"eslint-plugin-react-hooks": "^4.6.0",
+		"file-loader": "^6.2.0",
+		"fork-ts-checker-webpack-plugin": "^7.2.12",
+		"html-loader": "^3.1.2",
+		"html-webpack-plugin": "^5.5.0",
+		"husky": "^8.0.1",
+		"lint-staged": "^13.0.3",
+		"mini-css-extract-plugin": "^2.6.1",
+		"prettier": "^2.7.1",
+		"sass": "^1.53.0",
+		"sass-loader": "^13.0.2",
+		"style-loader": "^3.3.1",
+		"terser-webpack-plugin": "^5.3.3",
+		"tsc-alias": "^1.6.11",
+		"typescript": "^4.7.4",
+		"webpack": "^5.73.0",
+		"webpack-cli": "^4.10.0",
+		"webpack-dev-server": "^4.9.3",
+		"webpack-merge": "^5.8.0"
+	},
+	"dependencies": {
+		"axios": "^1.2.2",
+		"react": ">=17.0.2",
+		"react-dom": ">=17.0.2"
+	},
+	"peerDependencies": {
+		"react": ">=17.0.2",
+		"react-dom": ">=17.0.2"
+	},
+	"lint-staged": {
+		"src/**/*.{ts,tsx,json,js,jsx}": [
+			"yarn run prettier:fix",
+			"yarn run lint",
+			"git add ."
+		]
+	},
+	"browserslist": {
+		"production": [
+			">0.2%",
+			"not dead",
+			"not op_mini all"
+		],
+		"development": [
+			"last 1 chrome version",
+			"last 1 firefox version",
+			"last 1 safari version"
+		]
+	}
+}