@tap-payments/apple-pay-button 0.0.11-test → 0.0.13-test

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

@@ -1,4 +1,4 @@
-import { Scope, ButtonStyle, MerchantCapabilities, SupportedNetworks } from '../constants';
+import { Scope, ButtonStyle, MerchantCapabilities, SupportedNetworks, ButtonType, Locale } from '../constants';
 export interface ApplePayRequestData {
     countryCode: string;
     currencyCode: string;
@@ -47,6 +47,8 @@ export interface ApplePayButtonProps {
     onSuccess?: (data: Record<string, any>) => Promise<void>;
     onClick?: () => void;
     metaData?: ProfileResponse;
+    type?: typeof ButtonType[keyof typeof ButtonType];
+    locale?: typeof Locale[keyof typeof Locale];
 }
 export interface MerchantResponse {
     id: string;

package/build/constants/index.d.ts

@@ -7,6 +7,19 @@ export declare const ButtonStyle: {
     readonly White: "white";
     readonly WhiteOutline: "whiteOutline";
 };
+export declare const Locale: {
+    readonly EN: "en";
+    readonly AR: "ar";
+    readonly FR: "fr";
+};
+export declare const ButtonType: {
+    readonly BOOK: "book";
+    readonly BUY: "buy";
+    readonly CHECK_OUT: "check-out";
+    readonly PAY: "pay";
+    readonly PLAIN: "plain";
+    readonly SUBSCRIBE: "subscribe";
+};
 export declare const MerchantCapabilities: {
     readonly Supports3DS: "supports3DS";
     readonly SupportsCredit: "supportsCredit";

package/build/constants/index.js

@@ -7,6 +7,19 @@ export var ButtonStyle = {
     White: 'white',
     WhiteOutline: 'whiteOutline'
 };
+export var Locale = {
+    EN: 'en',
+    AR: 'ar',
+    FR: 'fr'
+};
+export var ButtonType = {
+    BOOK: 'book',
+    BUY: 'buy',
+    CHECK_OUT: 'check-out',
+    PAY: 'pay',
+    PLAIN: 'plain',
+    SUBSCRIBE: 'subscribe'
+};
 export var MerchantCapabilities = {
     Supports3DS: 'supports3DS',
     SupportsCredit: 'supportsCredit',

package/build/features/ApplePayButton/ApplePayButton.css

@@ -1,51 +1,21 @@
-.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;
+
+.apple-pay-button-tap {
+	-webkit-appearance: -apple-pay-button;
+	display: block;
 	width: 100%;
+	height: 48px;
+	min-height: 30px;
+	cursor: pointer;
 }
-
-.button-applepay-tap:disabled {
-	cursor: default;
+.black {
+	-apple-pay-button-style: black;
 }
 
-.img-container {
-	height: 24px;
-	max-width: 80px;
+.white {
+	-apple-pay-button-style: white;
 }
-
-.img-container img {
-	height: 100%;
-	width: 100%;
-	transform: scale(1.5);
-	filter: invert(0);
-}
-
 .whiteOutline {
+	-apple-pay-button-style: white;
 	border: solid 1px gray;
 }
-.black {
-	background-color: black;
-}
-.black .img-container img {
-	filter: invert(1);
-}
+

package/build/features/ApplePayButton/ApplePayButton.js

@@ -10,15 +10,15 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import React from 'react';
+import * as React from 'react';
 import { createRoot } from 'react-dom/client';
 import { findOrCreateElementAndInject } from '../../utils';
 import { useApplePay } from '../../hooks/useApplePay';
-import { ButtonStyle, Scope } from '../../constants';
+import { ButtonStyle, ButtonType, Locale, Scope } from '../../constants';
 import './ApplePayButton.css';
 var ApplePay = React.memo(function (_a) {
-    var publicKey = _a.publicKey, merchant = _a.merchant, transaction = _a.transaction, billingContact = _a.billingContact, supportedNetworks = _a.supportedNetworks, onCancel = _a.onCancel, onError = _a.onError, onSuccess = _a.onSuccess, onClick = _a.onClick, _b = _a.scope, scope = _b === void 0 ? Scope.TapToken : _b, _c = _a.buttonStyle, buttonStyle = _c === void 0 ? ButtonStyle.WhiteOutline : _c, metaData = _a.metaData;
-    var _d = useApplePay({
+    var publicKey = _a.publicKey, merchant = _a.merchant, transaction = _a.transaction, billingContact = _a.billingContact, supportedNetworks = _a.supportedNetworks, onCancel = _a.onCancel, onError = _a.onError, onSuccess = _a.onSuccess, onClick = _a.onClick, metaData = _a.metaData, _b = _a.scope, scope = _b === void 0 ? Scope.TapToken : _b, _c = _a.buttonStyle, buttonStyle = _c === void 0 ? ButtonStyle.WhiteOutline : _c, _d = _a.type, type = _d === void 0 ? ButtonType.PLAIN : _d, _e = _a.locale, locale = _e === void 0 ? Locale.EN : _e;
+    var _f = useApplePay({
         publicKey: publicKey,
         merchant: merchant,
         transaction: transaction,
@@ -29,11 +29,20 @@ var ApplePay = React.memo(function (_a) {
         onCancel: onCancel,
         scope: scope,
         metaData: metaData
-    }), loading = _d.loading, onApplePayButtonClicked = _d.onApplePayButtonClicked, disabled = _d.disabled;
-    return (_jsx("button", __assign({ className: "button-applepay-tap ".concat(buttonStyle), onClick: function () {
+    }), loading = _f.loading, onApplePayButtonClicked = _f.onApplePayButtonClicked, disabled = _f.disabled;
+    var ref = React.useRef();
+    React.useEffect(function () {
+        var _a;
+        if (ref.current) {
+            (_a = ref.current) === null || _a === void 0 ? void 0 : _a.click();
+        }
+    });
+    return (_jsx("div", { className: "apple-pay-button-tap ".concat(buttonStyle), style: {
+            '-apple-pay-button-type': type
+        }, onClick: function () {
             onApplePayButtonClicked();
             onClick === null || onClick === void 0 ? void 0 : onClick();
-        }, 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' }) })) })));
+        }, lang: locale }));
 });
 export function ApplePayButton(props) {
     return _jsx(ApplePay, __assign({}, props));

package/package.json

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