@tap-payments/apple-pay-button 0.0.21-test → 0.0.22-test

package/README.md

@@ -129,74 +129,57 @@ const App = () => {
 		<script type="text/javascript">
 			const { renderApplePayButton, ButtonStyle, Scope, SupportedNetworks, Locale, ButtonType } = window.TapSDKs
 			renderApplePayButton(
-				{
-					// required
-					publicKey: 'pk_test_xxxxxxxxxxxxxxxzh',
-					// optional (The environment of the SDK and it can be one of these Environment)
-					environment: Environment.Development,
-					// optional (to enable the debug mode)
-					debug: true,
-					// required (The merchant identifier provided by Tap)
-					merchantIdentifier: 'merchant.tap.applepay.test',
-					merchant: {
-						// required
-						domain: 'example.com'
-						// optional
-						// id: '123...'
-					},
-					// required
-					transaction: {
-						// required
-						currency: 'USD',
-						// required
-						amount: '100'
-					},
-					// optional
-					scope: Scope.TapToken,
-					// optional
-					buttonStyle: ButtonStyle.WhiteOutline,
-					// optional (The locale of the Apple Pay button and it can be one of these locales)
-					locale: Locale.EN,
-					// optional (The type of the Apple Pay button and it can be one of these types)
-					type: ButtonType.PLAIN,
-					// optional
-					supportedNetworks: [SupportedNetworks.Visa, SupportedNetworks.MasterCard],
-					// optional (The billing contact information)
-					billingContact: {
-						// required
-						email: {
-							// required
-							address: 'test@gmail.com'
-						},
-						// required
-						name: {
-							// required
-							first: 'test',
-							// required
-							last: 'tester',
-							// optional
-							middle: 'test'
-						},
-						// required
-						phone: {
-							number: '10XXXXXX56',
-							code: '+20'
-						}
-					},
-					// optional
-					onCancel: () => {
-						console.log('onCancel')
-					},
-					// optional
-					onError: (error) => {
-						console.log('onError', error)
-					},
-					// optional
-					onSuccess: async (data) => {
-						console.log('onSuccess', data)
-					}
-				},
-				'apple-pay-button'
+			 {
+			  publicKey: 'pk_test_7xxxxxxxxx',
+			  merchantIdentifier: 'merchant.com.xxxxx',
+			  environment: Environment.Sandbox,
+			  merchant: {
+			   domain: 'tp-txxxxxxxx',
+
+			   id: 'merchant_xxxxxxxxxx"
+			  },
+
+			  transaction: {
+
+			   currency: 'SAR',
+
+			   amount: '3'
+			  },
+
+			  scope: Scope.TapToken,
+			  buttonStyle: ButtonStyle.Black,
+			  type: ButtonType.PLAIN,
+			  locale: Locale.EN,
+			  supportedNetworks: [SupportedNetworks.Visa, SupportedNetworks.MasterCard, SupportedNetworks.Mada],
+			  billingContact: {
+			   email: {
+
+			    address: 'test`@gmail.com'
+			   },
+			   name: {
+			    first: 'test',
+			    last: 'test',
+			    middle: '123'
+			   },
+			   phone: {
+			    number: '555555555',
+			    code: '966'
+			   }
+			  },
+			  onCancel: async () => {
+			   console.log('onCancel')
+			  },
+			  onError: async (error) => {
+			   console.log('onError', error)
+			  },
+			  onSuccess: async (data) => {
+			   console.log('onSuccess', data)
+			  },
+			  onReady: async () => {
+			   console.log('onReady')
+			  }
+			 },
+			 'apple-pay-button'
 			)
 		</script>
 	</body>

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

@@ -80,3 +80,32 @@ export interface MetaData {
     payment_options: PaymentOptionsResponse;
     headers: Record<string, string>;
 }
+export interface CheckoutProfileRequest {
+    currency: string;
+    merchant_id: string;
+    total_amount: number;
+    order: {
+        amount: number;
+        currency: string;
+        customer?: {
+            id: string;
+            email: string;
+            first_name: string;
+            last_name: string;
+            phone: {
+                country_code: string;
+                number: string;
+            };
+        };
+        items: {
+            quantity: number;
+            amount: number;
+            currency: string;
+            name: string;
+            requiresShipping: string;
+        }[];
+        merchant: {
+            id: string;
+        };
+    };
+}

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

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

package/build/api/app.service.js

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

package/build/hooks/useApplePay.js

@@ -57,15 +57,16 @@ export var useApplePay = function (_a) {
     var _d = useState(false), disabled = _d[0], setDisabled = _d[1];
     var initialize = useCallback(function (metaData) { return __awaiter(void 0, void 0, void 0, function () {
         var merchantProfile, payment_options, headers, data, err_1;
-        return __generator(this, function (_a) {
-            switch (_a.label) {
+        var _a, _b;
+        return __generator(this, function (_c) {
+            switch (_c.label) {
                 case 0:
                     setLoading(true);
                     appService.setEnv(environment);
                     appService.setBaseUrl();
-                    _a.label = 1;
+                    _c.label = 1;
                 case 1:
-                    _a.trys.push([1, 4, 5, 6]);
+                    _c.trys.push([1, 4, 5, 6]);
                     if (metaData) {
                         merchantProfile = metaData.merchant, payment_options = metaData.payment_options, headers = metaData.headers;
                         setAxiosGlobalHeaders(__assign({}, headers));
@@ -74,16 +75,42 @@ export var useApplePay = function (_a) {
                     }
                     return [4, appService.setBrowserHeaders({ locale: locale, domain: merchant.domain, pk: publicKey })];
                 case 2:
-                    _a.sent();
-                    return [4, appService.checkoutProfile()];
+                    _c.sent();
+                    return [4, appService.checkoutProfile({
+                            currency: transaction.currency,
+                            merchant_id: (_a = merchant.id) !== null && _a !== void 0 ? _a : '',
+                            total_amount: Number(transaction.amount),
+                            order: __assign(__assign({ amount: Number(transaction.amount), currency: transaction.currency }, (billingContact && {
+                                customer: {
+                                    id: '',
+                                    email: billingContact.email.address,
+                                    first_name: billingContact.name.first,
+                                    last_name: billingContact.name.last,
+                                    phone: {
+                                        country_code: billingContact.phone.code,
+                                        number: billingContact.phone.number
+                                    }
+                                }
+                            })), { merchant: {
+                                    id: (_b = merchant.id) !== null && _b !== void 0 ? _b : ''
+                                }, items: [
+                                    {
+                                        amount: Number(transaction.amount),
+                                        currency: transaction.currency,
+                                        name: 'apple pay sdk order item',
+                                        quantity: 1,
+                                        requiresShipping: 'no'
+                                    }
+                                ] })
+                        })];
                 case 3:
-                    data = _a.sent();
+                    data = _c.sent();
                     if (debug)
                         console.log('merchant configuration: ', data);
                     setProfile(data);
                     return [3, 6];
                 case 4:
-                    err_1 = _a.sent();
+                    err_1 = _c.sent();
                     onError && onError(err_1.errors || err_1);
                     return [3, 6];
                 case 5:

package/package.json

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