@pelcro/react-pelcro-js 3.29.1 → 3.31.0

package/dist/index.cjs.js

@@ -11603,6 +11603,7 @@ const loadPaymentSDKs = () => {
       pure_1(window.Pelcro.environment.stripe);
     }
   });
+  window.Pelcro.helpers.loadSDK("https://applepay.cdn-apple.com/jsapi/v1/apple-pay-sdk.js", "apple-pay-sdk");
 
   // Load PayPal SDKs
   const supportsPaypal = Boolean(window.Pelcro.site.read().braintree_tokenization);
@@ -11616,6 +11617,11 @@ const loadPaymentSDKs = () => {
     if (!window.jQuery) {
       window.Pelcro.helpers.loadSDK("https://code.jquery.com/jquery-3.6.0.slim.min.js", "vantiv-jquery-sdk");
     }
+    window.Pelcro.helpers.loadSDK("https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js", "vantiv-jquery-sdk");
+    const eProtectApi3PreLiveURL = "https://request.eprotect.vantivprelive.com/eProtect/eProtect-api3.js";
+    const eProtectApi3ProductionURL = "https://request.eprotect.vantivcnp.com/eProtect/eProtect-api3.js";
+    const eProtectApi3scriptUrlToUse = window.Pelcro.site.read().vantiv_gateway_settings.environment === "production" ? eProtectApi3ProductionURL : eProtectApi3PreLiveURL;
+    window.Pelcro.helpers.loadSDK(eProtectApi3scriptUrlToUse, "vantiv-eprotect-api");
     if (!window.EprotectIframeClient) {
       const PRELIVE_URL = "https://request.eprotect.vantivprelive.com/eProtect/js/eProtect-iframe-client.min.js";
       const PRODUCTION_URL = "https://request.eprotect.vantivcnp.com/eProtect/js/eProtect-iframe-client3.min.js";
@@ -12419,6 +12425,7 @@ const LOADING = "LOADING";
 const SUBMIT_PAYMENT = "SUBMIT_PAYMENT";
 const SUBSCRIBE = "CREATE_SUBSCRIPTION";
 const HANDLE_PAYPAL_SUBSCRIPTION = "HANDLE_PAYPAL_SUBSCRIPTION";
+const HANDLE_APPLEPAY_SUBSCRIPTION = "HANDLE_APPLEPAY_SUBSCRIPTION";
 const DISABLE_COUPON_BUTTON = "DISABLE_COUPON_BUTTON";
 const APPLY_COUPON_CODE = "APPLY_COUPON_CODE";
 const REMOVE_APPLIED_COUPON = "REMOVE_APPLIED_COUPON";
@@ -17335,7 +17342,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
     updateTotalAmountWithTax();
   }, []);
 
-  /*====== Start Cybersource integration ========*/
+  /* ====== Start Cybersource integration ======== */
   const cybersourceErrorHandle = err => {
     var _err$details, _err$details$response, _err$details$response2;
     if ((err === null || err === void 0 ? void 0 : (_err$details = err.details) === null || _err$details === void 0 ? void 0 : (_err$details$response = _err$details.responseStatus) === null || _err$details$response === void 0 ? void 0 : (_err$details$response2 = _err$details$response.details) === null || _err$details$response2 === void 0 ? void 0 : _err$details$response2.length) > 0) {
@@ -17604,9 +17611,9 @@ const PaymentMethodContainerWithoutStripe = _ref => {
     });
   };
 
-  /*====== End Cybersource integration ========*/
+  /* ====== End Cybersource integration ======== */
 
-  /*====== Start Tap integration ========*/
+  /* ====== Start Tap integration ======== */
   const submitUsingTap = state => {
     var _ref3, _ref4, _ref5, _state$updatedPrice;
     const isUsingExistingPaymentMethod = Boolean(selectedPaymentMethodId);
@@ -17870,28 +17877,28 @@ const PaymentMethodContainerWithoutStripe = _ref => {
       cardHolder: "Card Holder Name"
     };
 
-    //payment options
+    // payment options
     let paymentOptions = {
       labels: labels,
       TextDirection: "ltr"
     };
 
-    //create element, pass style and payment options
+    // create element, pass style and payment options
     let card = elements.create("card", {
       style: style
     }, paymentOptions);
 
-    //mount element
+    // mount element
     card.mount("#tapPaymentIframe");
 
-    //card change event listener
+    // card change event listener
     card.addEventListener("change", function (event) {
-      //If needed
+      // If needed
     });
     tapInstanceRef.current = tapKey;
     tapInstanceCard.current = card;
   };
-  /*====== End Tap integration ========*/
+  /* ====== End Tap integration ======== */
 
   const submitUsingVantiv = state => {
     const isUsingExistingPaymentMethod = Boolean(selectedPaymentMethodId);
@@ -18079,7 +18086,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
     }
   }, [selectedPaymentMethodId]);
 
-  //Trigger the handleVantivPayment method when a vantivePaymentRequest is present
+  // Trigger the handleVantivPayment method when a vantivPaymentRequest is present
   React.useEffect(() => {
     if (vantivPaymentRequest) {
       handleVantivPayment(vantivPaymentRequest, updatedCouponCode);
@@ -18226,7 +18233,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
       if (err) {
         onFailure(err);
 
-        //reset the coupon code in local state
+        // reset the coupon code in local state
         setUpdatedCouponCode("");
         dispatch({
           type: SET_COUPON_ERROR,
@@ -18287,7 +18294,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
         payload: res.data.coupon
       });
 
-      //set the coupon code in local state to be able to use with Vantiv
+      // set the coupon code in local state to be able to use with Vantiv
       setUpdatedCouponCode(res.data.coupon.code);
       dispatch({
         type: SET_PERCENT_OFF,
@@ -18360,7 +18367,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
   const removeAppliedCoupon = state => {
     state.couponCode = "";
 
-    //reset the coupon code in local state
+    // reset the coupon code in local state
     setUpdatedCouponCode("");
     dispatch({
       type: SET_COUPON_ERROR,
@@ -19100,6 +19107,10 @@ const PaymentMethodContainerWithoutStripe = _ref => {
             handlePaypalSubscription(state, action.payload);
           }
         });
+      case HANDLE_APPLEPAY_SUBSCRIPTION:
+        return lib_5(state, (state, dispatch) => {
+          setVantivPaymentRequest(action.payload);
+        });
       case SET_UPDATED_PRICE:
         return lib_7({
           ...state,
@@ -20213,6 +20224,333 @@ const OrderCreateFreeButton = _ref => {
   }, otherProps), t("labels.submit"));
 };
 
+/**
+ * ApplePayButton component
+ * @return {JSX}
+ */
+const ApplePayButton = _ref => {
+  var _window$Pelcro$site$r;
+  let {
+    onClick,
+    props,
+    ...otherProps
+  } = _ref;
+  const {
+    dispatch,
+    state
+  } = React.useContext(store$k);
+  const {
+    plan,
+    invoice,
+    order
+  } = usePelcro();
+  const {
+    pay_page_id: payPageId,
+    report_group: reportGroup,
+    apple_pay_merchant_id: ApplePayMerchantId,
+    apple_pay_enabled: ApplePayEnabled
+  } = (_window$Pelcro$site$r = window.Pelcro.site.read()) === null || _window$Pelcro$site$r === void 0 ? void 0 : _window$Pelcro$site$r.vantiv_gateway_settings;
+  const getOrderInfo = () => {
+    if (!order) {
+      return {
+        price: null,
+        currency: null,
+        label: null
+      };
+    }
+    const isQuickPurchase = !Array.isArray(order);
+    if (isQuickPurchase) {
+      return {
+        price: order.price * order.quantity,
+        currency: order.currency,
+        label: order.name
+      };
+    }
+    if (order.length === 0) {
+      return {
+        price: null,
+        currency: null,
+        label: null
+      };
+    }
+    const price = order.reduce((total, item) => total + item.price * item.quantity, 0);
+    return {
+      price,
+      currency: order[0].currency,
+      label: "Order"
+    };
+  };
+  const orderPrice = getOrderInfo().price;
+  const orderCurrency = getOrderInfo().currency;
+  const orderLabel = getOrderInfo().label;
+  React.useEffect(() => {
+    if (window.ApplePaySession) {
+      // Indicates whether the device supports Apple Pay and whether the user has an active card in Wallet.
+      // eslint-disable-next-line no-undef
+      const promise = ApplePaySession.canMakePaymentsWithActiveCard(ApplePayMerchantId);
+      promise.then(function (canMakePayments) {
+        if (canMakePayments && ApplePayEnabled) {
+          // Display Apple Pay Buttons here…
+          const pelcroApplyPayButton = document.getElementById("pelcro-apple-pay-button");
+          if (pelcroApplyPayButton) {
+            pelcroApplyPayButton.style.display = "block";
+          }
+          console.log("ApplePay canMakePayments function: ", canMakePayments);
+        }
+      });
+    } else {
+      console.error("ApplePay is not available on this browser");
+    }
+  }, []);
+  React.useEffect(() => {
+    function onApplePayButtonClicked() {
+      var _ref2, _ref3, _ref4, _ref5, _state$updatedPrice, _props$plan, _window, _window$Pelcro, _window$Pelcro$user, _window$Pelcro$user$l;
+      // eslint-disable-next-line no-undef
+      if (!ApplePaySession) {
+        return;
+      }
+      const updatedPrice = (_ref2 = (_ref3 = (_ref4 = (_ref5 = (_state$updatedPrice = state.updatedPrice) !== null && _state$updatedPrice !== void 0 ? _state$updatedPrice : props === null || props === void 0 ? void 0 : (_props$plan = props.plan) === null || _props$plan === void 0 ? void 0 : _props$plan.amount) !== null && _ref5 !== void 0 ? _ref5 : plan === null || plan === void 0 ? void 0 : plan.amount) !== null && _ref4 !== void 0 ? _ref4 : orderPrice) !== null && _ref3 !== void 0 ? _ref3 : invoice === null || invoice === void 0 ? void 0 : invoice.amount_remaining) !== null && _ref2 !== void 0 ? _ref2 : null;
+      const getCurrencyCode = () => {
+        if (plan) {
+          return plan === null || plan === void 0 ? void 0 : plan.currency.toUpperCase();
+        } else if (order) {
+          return orderCurrency.toUpperCase();
+        } else if (invoice) {
+          return invoice === null || invoice === void 0 ? void 0 : invoice.currency.toUpperCase();
+        }
+      };
+      dispatch({
+        type: DISABLE_SUBMIT,
+        payload: true
+      });
+
+      // Define ApplePayPaymentRequest
+      // @see https://developer.apple.com/documentation/apple_pay_on_the_web/apple_pay_js_api/creating_an_apple_pay_session
+      const ApplePayPaymentRequest = {
+        countryCode: ((_window = window) === null || _window === void 0 ? void 0 : (_window$Pelcro = _window.Pelcro) === null || _window$Pelcro === void 0 ? void 0 : (_window$Pelcro$user = _window$Pelcro.user) === null || _window$Pelcro$user === void 0 ? void 0 : (_window$Pelcro$user$l = _window$Pelcro$user.location) === null || _window$Pelcro$user$l === void 0 ? void 0 : _window$Pelcro$user$l.countryCode) || "US",
+        currencyCode: getCurrencyCode(),
+        merchantCapabilities: ["supports3DS"],
+        supportedNetworks: ["visa", "masterCard", "amex", "discover"],
+        total: {
+          label: (plan === null || plan === void 0 ? void 0 : plan.nickname) || orderLabel || `invoice #${invoice === null || invoice === void 0 ? void 0 : invoice.id}`,
+          type: "final",
+          amount: updatedPrice / 100
+        }
+      };
+
+      // Create ApplePaySession
+      // @todo - Clarify supported version parameter
+      // @odo - Apple Pay demo uses version 6 (https://applepaydemo.apple.com/)
+      const session = new ApplePaySession(3, ApplePayPaymentRequest); // eslint-disable-line no-undef
+
+      // @todo - Detect whether web browser supports a particular Apple Pay version.
+      // @see https://developer.apple.com/documentation/apple_pay_on_the_web/applepaysession/1778014-supportsversion
+
+      session.onvalidatemerchant = async event => {
+        const {
+          validationURL
+        } = event;
+        // Call your own server to request a new merchant session.
+        window.Pelcro.payment.startSession({
+          auth_token: window.Pelcro.user.read().auth_token,
+          site_id: window.Pelcro.siteid,
+          validation_url: validationURL
+        }, (err, res) => {
+          if (err) {
+            // Handle any errors during merchant validation
+            session.abort();
+            return dispatch({
+              type: SHOW_ALERT,
+              payload: {
+                type: "error",
+                content: getErrorMessages(err)
+              }
+            });
+          }
+          // Complete merchant validation with the merchant session object
+          const merchantSession = res;
+          session.completeMerchantValidation(merchantSession);
+        });
+      };
+      session.onpaymentmethodselected = event => {
+        // Define ApplePayPaymentMethodUpdate based on the selected payment method.
+        // No updates or errors are needed, pass an empty object.
+        const newTotal = {
+          label: (plan === null || plan === void 0 ? void 0 : plan.nickname) || orderLabel || `invoice #${invoice === null || invoice === void 0 ? void 0 : invoice.id}`,
+          type: "final",
+          amount: updatedPrice / 100
+        };
+        const newLineItems = [{
+          label: (plan === null || plan === void 0 ? void 0 : plan.nickname) || orderLabel || `invoice #${invoice === null || invoice === void 0 ? void 0 : invoice.id}`,
+          type: "final",
+          amount: updatedPrice / 100
+        }];
+        session.completePaymentMethodSelection(newTotal, newLineItems);
+      };
+
+      // TODO: Check if onshippingmethodselected it should be implemented
+      // session.onshippingmethodselected = (event) => {
+      //   // Define ApplePayShippingMethodUpdate based on the selected shipping method.
+      //   // No updates or errors are needed, pass an empty object.
+      //   const newTotal = {
+      //     label: plan?.nickname || orderLabel || `invoice #${invoice?.id}`,
+      //     type: "final",
+      //     amount: updatedPrice / 100
+      //   };
+
+      //   const newLineItems = [
+      //     {
+      //       label: plan?.nickname || orderLabel || `invoice #${invoice?.id}`,
+      //       type: "final",
+      //       amount: updatedPrice / 100
+      //     }
+      //   ];
+
+      //   session.completeShippingMethodSelection(newTotal, newLineItems);
+      // };
+
+      // TODO: Check if onshippingcontactselected it should be implemented
+      // session.onshippingcontactselected = (event) => {
+      //   // Define ApplePayShippingContactUpdate based on the selected shipping contact.
+      //   const update = {};
+      //   session.completeShippingContactSelection(update);
+      // };
+
+      session.onpaymentauthorized = event => {
+        // Define ApplePayPaymentAuthorizationResult
+        const result = {
+          status: ApplePaySession.STATUS_SUCCESS // eslint-disable-line no-undef
+        };
+
+        const {
+          paymentData
+        } = event.payment.token;
+        const {
+          data,
+          signature,
+          version
+        } = paymentData;
+        const {
+          ephemeralPublicKey,
+          publicKeyHash,
+          transactionId
+        } = paymentData.header;
+        const applePayToken = {
+          data: data,
+          signature: signature,
+          version: version,
+          header: {
+            ephemeralPublicKey: ephemeralPublicKey,
+            publicKeyHash: publicKeyHash,
+            transactionId: transactionId
+          }
+        };
+        const orderId = `pelcro-${new Date().getTime()}`;
+        const eProtectRequestPreLiveURL = "https://request.eprotect.vantivprelive.com";
+        const eProtectRequestProductionURL = "https://request.eprotect.vantivcnp.com";
+        const eProtectRequestUrlToUse = window.Pelcro.site.read().vantiv_gateway_settings.environment === "production" ? eProtectRequestProductionURL : eProtectRequestPreLiveURL;
+        const eProtectRequest = {
+          paypageId: payPageId,
+          reportGroup: reportGroup,
+          orderId: orderId,
+          id: orderId,
+          applepay: applePayToken,
+          url: eProtectRequestUrlToUse
+        };
+
+        // successCallback function to handle the response from WorldPay.
+        function successCallback(vantivResponse) {
+          const {
+            expDate
+          } = vantivResponse;
+          const expMonth = expDate.substring(0, 2);
+          const expYear = expDate.substring(2);
+          const vantivPaymentRequest = {
+            ...vantivResponse,
+            expMonth: expMonth,
+            expYear: expYear,
+            applePay: true
+          };
+
+          // Process the registrationId or continue with further payment processing.
+          dispatch({
+            type: HANDLE_APPLEPAY_SUBSCRIPTION,
+            payload: vantivPaymentRequest
+          });
+          dispatch({
+            type: LOADING,
+            payload: true
+          });
+          session.completePayment(result);
+        }
+
+        // errorCallback function to handle any errors that may occur during the tokenization process.
+        function errorCallback(error) {
+          console.error("Error retrieving Registration ID:", error);
+          // Handle error appropriately.
+        }
+        // errorCallback function to handle any errors that may occur during the tokenization process.
+        function timeoutCallback() {
+          console.error("eProtect Timeout");
+          // Handle error appropriately.
+        }
+
+        // eslint-disable-next-line no-undef
+        new eProtect().sendToEprotect(eProtectRequest, {}, successCallback, errorCallback, timeoutCallback, 15000);
+      };
+
+      // TODO: Check if oncouponcodechanged it should be implemented
+      // session.oncouponcodechanged = (event) => {
+      //   // Define ApplePayCouponCodeUpdate
+      //   const newTotal = calculateNewTotal(event.couponCode);
+      //   const newLineItems = calculateNewLineItems(event.couponCode);
+      //   const newShippingMethods = calculateNewShippingMethods(
+      //     event.couponCode
+      //   );
+      //   const errors = calculateErrors(event.couponCode);
+
+      //   session.completeCouponCodeChange({
+      //     newTotal: newTotal,
+      //     newLineItems: newLineItems,
+      //     newShippingMethods: newShippingMethods,
+      //     errors: errors
+      //   });
+      // };
+
+      session.oncancel = event => {
+        // Payment cancelled by WebKit
+        dispatch({
+          type: LOADING,
+          payload: false
+        });
+        dispatch({
+          type: DISABLE_SUBMIT,
+          payload: false
+        });
+      };
+      session.begin();
+    }
+    const pelcroApplyPayButton = document.getElementById("pelcro-apple-pay-button");
+    if (pelcroApplyPayButton) {
+      pelcroApplyPayButton.addEventListener("click", onApplePayButtonClicked);
+    }
+    return () => {
+      if (pelcroApplyPayButton) {
+        pelcroApplyPayButton.removeEventListener("click", onApplePayButtonClicked);
+      }
+    };
+  }, [state.updatedPrice]);
+  return /*#__PURE__*/React__default['default'].createElement("apple-pay-button", {
+    id: "pelcro-apple-pay-button",
+    style: {
+      display: "none"
+    },
+    buttonstyle: "black",
+    type: "plain",
+    locale: "en-US"
+  });
+};
+
 /**
  *
  */
@@ -20227,6 +20565,7 @@ function PaymentMethodView(_ref) {
     showExternalPaymentMethods,
     showSubscriptionButton,
     showOrderButton,
+    showApplePayButton,
     order
   } = _ref;
   const {
@@ -20293,7 +20632,7 @@ function PaymentMethodView(_ref) {
     className: "plc-mb-2"
   }, /*#__PURE__*/React__default['default'].createElement(CouponCode, null), /*#__PURE__*/React__default['default'].createElement(DiscountedPrice, null)), /*#__PURE__*/React__default['default'].createElement(TaxAmount, null), /*#__PURE__*/React__default['default'].createElement("div", {
     className: "plc-grid plc-mt-4 plc-gap-y-2"
-  }, /*#__PURE__*/React__default['default'].createElement(SubmitPaymentMethod, null), showExternalPaymentMethods && !supportsVantiv && !supportsCybersource && !supportsTap ? /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(PelcroPaymentRequestButton, null), /*#__PURE__*/React__default['default'].createElement(PaypalSubscribeButton, null)) : showExternalPaymentMethods && supportsVantiv ? /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(PaypalSubscribeButton, null)) : null)))));
+  }, /*#__PURE__*/React__default['default'].createElement(SubmitPaymentMethod, null), showExternalPaymentMethods && !supportsVantiv && !supportsCybersource && !supportsTap ? /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(PelcroPaymentRequestButton, null), /*#__PURE__*/React__default['default'].createElement(PaypalSubscribeButton, null)) : showExternalPaymentMethods && supportsVantiv ? /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(PaypalSubscribeButton, null)) : null, showApplePayButton && supportsVantiv ? /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(ApplePayButton, null)) : null)))));
 }
 
 const SubscriptionRenewView = _ref => {
@@ -20344,6 +20683,7 @@ const SubscriptionRenewView = _ref => {
     type: "createPayment",
     showCoupon: true,
     showExternalPaymentMethods: false,
+    showApplePayButton: true,
     onSuccess: onSuccess,
     onGiftRenewalSuccess: onGiftRenewalSuccess,
     onFailure: onFailure,
@@ -21716,6 +22056,7 @@ const SubscriptionCreateView = _ref => {
     type: "createPayment",
     showCoupon: true,
     showExternalPaymentMethods: true,
+    showApplePayButton: true,
     onSuccess: onSuccess,
     onFailure: onFailure,
     showSubscriptionButton: showSubscriptionButton
@@ -24328,6 +24669,7 @@ function PaymentMethodUpdateView(props) {
     type: "updatePaymentSource",
     showCoupon: false,
     showExternalPaymentMethods: false,
+    showApplePayButton: false,
     onDisplay: props.onDisplay,
     onFailure: props.onFailure,
     onSuccess: props.onSuccess
@@ -25753,6 +26095,7 @@ const OrderCreateView = props => {
     type: "orderCreate",
     showCoupon: true,
     showExternalPaymentMethods: false,
+    showApplePayButton: true,
     showOrderButton: showOrderButton,
     order: order
   }, props))));
@@ -32074,7 +32417,8 @@ const InvoicePaymentView = props => {
   }, /*#__PURE__*/React__default['default'].createElement(PaymentMethodView, Object.assign({
     type: "invoicePayment",
     showCoupon: false,
-    showExternalPaymentMethods: true
+    showExternalPaymentMethods: true,
+    showApplePayButton: true
   }, props))));
 };
 
@@ -33736,6 +34080,7 @@ exports.AddressUpdateTextInput = AddressUpdateTextInput;
 exports.AddressUpdateView = AddressUpdateView;
 exports.Alert = AlertWithContext;
 exports.AlertElement = Alert;
+exports.ApplePayButton = ApplePayButton;
 exports.ApplyCouponButton = ApplyCouponButton;
 exports.Auth0LoginButton = Auth0LoginButton;
 exports.Badge = Badge;

package/dist/index.esm.js

@@ -11573,6 +11573,7 @@ const loadPaymentSDKs = () => {
       pure_1(window.Pelcro.environment.stripe);
     }
   });
+  window.Pelcro.helpers.loadSDK("https://applepay.cdn-apple.com/jsapi/v1/apple-pay-sdk.js", "apple-pay-sdk");
 
   // Load PayPal SDKs
   const supportsPaypal = Boolean(window.Pelcro.site.read().braintree_tokenization);
@@ -11586,6 +11587,11 @@ const loadPaymentSDKs = () => {
     if (!window.jQuery) {
       window.Pelcro.helpers.loadSDK("https://code.jquery.com/jquery-3.6.0.slim.min.js", "vantiv-jquery-sdk");
     }
+    window.Pelcro.helpers.loadSDK("https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js", "vantiv-jquery-sdk");
+    const eProtectApi3PreLiveURL = "https://request.eprotect.vantivprelive.com/eProtect/eProtect-api3.js";
+    const eProtectApi3ProductionURL = "https://request.eprotect.vantivcnp.com/eProtect/eProtect-api3.js";
+    const eProtectApi3scriptUrlToUse = window.Pelcro.site.read().vantiv_gateway_settings.environment === "production" ? eProtectApi3ProductionURL : eProtectApi3PreLiveURL;
+    window.Pelcro.helpers.loadSDK(eProtectApi3scriptUrlToUse, "vantiv-eprotect-api");
     if (!window.EprotectIframeClient) {
       const PRELIVE_URL = "https://request.eprotect.vantivprelive.com/eProtect/js/eProtect-iframe-client.min.js";
       const PRODUCTION_URL = "https://request.eprotect.vantivcnp.com/eProtect/js/eProtect-iframe-client3.min.js";
@@ -12389,6 +12395,7 @@ const LOADING = "LOADING";
 const SUBMIT_PAYMENT = "SUBMIT_PAYMENT";
 const SUBSCRIBE = "CREATE_SUBSCRIPTION";
 const HANDLE_PAYPAL_SUBSCRIPTION = "HANDLE_PAYPAL_SUBSCRIPTION";
+const HANDLE_APPLEPAY_SUBSCRIPTION = "HANDLE_APPLEPAY_SUBSCRIPTION";
 const DISABLE_COUPON_BUTTON = "DISABLE_COUPON_BUTTON";
 const APPLY_COUPON_CODE = "APPLY_COUPON_CODE";
 const REMOVE_APPLIED_COUPON = "REMOVE_APPLIED_COUPON";
@@ -17305,7 +17312,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
     updateTotalAmountWithTax();
   }, []);
 
-  /*====== Start Cybersource integration ========*/
+  /* ====== Start Cybersource integration ======== */
   const cybersourceErrorHandle = err => {
     var _err$details, _err$details$response, _err$details$response2;
     if ((err === null || err === void 0 ? void 0 : (_err$details = err.details) === null || _err$details === void 0 ? void 0 : (_err$details$response = _err$details.responseStatus) === null || _err$details$response === void 0 ? void 0 : (_err$details$response2 = _err$details$response.details) === null || _err$details$response2 === void 0 ? void 0 : _err$details$response2.length) > 0) {
@@ -17574,9 +17581,9 @@ const PaymentMethodContainerWithoutStripe = _ref => {
     });
   };
 
-  /*====== End Cybersource integration ========*/
+  /* ====== End Cybersource integration ======== */
 
-  /*====== Start Tap integration ========*/
+  /* ====== Start Tap integration ======== */
   const submitUsingTap = state => {
     var _ref3, _ref4, _ref5, _state$updatedPrice;
     const isUsingExistingPaymentMethod = Boolean(selectedPaymentMethodId);
@@ -17840,28 +17847,28 @@ const PaymentMethodContainerWithoutStripe = _ref => {
       cardHolder: "Card Holder Name"
     };
 
-    //payment options
+    // payment options
     let paymentOptions = {
       labels: labels,
       TextDirection: "ltr"
     };
 
-    //create element, pass style and payment options
+    // create element, pass style and payment options
     let card = elements.create("card", {
       style: style
     }, paymentOptions);
 
-    //mount element
+    // mount element
     card.mount("#tapPaymentIframe");
 
-    //card change event listener
+    // card change event listener
     card.addEventListener("change", function (event) {
-      //If needed
+      // If needed
     });
     tapInstanceRef.current = tapKey;
     tapInstanceCard.current = card;
   };
-  /*====== End Tap integration ========*/
+  /* ====== End Tap integration ======== */
 
   const submitUsingVantiv = state => {
     const isUsingExistingPaymentMethod = Boolean(selectedPaymentMethodId);
@@ -18049,7 +18056,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
     }
   }, [selectedPaymentMethodId]);
 
-  //Trigger the handleVantivPayment method when a vantivePaymentRequest is present
+  // Trigger the handleVantivPayment method when a vantivPaymentRequest is present
   useEffect(() => {
     if (vantivPaymentRequest) {
       handleVantivPayment(vantivPaymentRequest, updatedCouponCode);
@@ -18196,7 +18203,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
       if (err) {
         onFailure(err);
 
-        //reset the coupon code in local state
+        // reset the coupon code in local state
         setUpdatedCouponCode("");
         dispatch({
           type: SET_COUPON_ERROR,
@@ -18257,7 +18264,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
         payload: res.data.coupon
       });
 
-      //set the coupon code in local state to be able to use with Vantiv
+      // set the coupon code in local state to be able to use with Vantiv
       setUpdatedCouponCode(res.data.coupon.code);
       dispatch({
         type: SET_PERCENT_OFF,
@@ -18330,7 +18337,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
   const removeAppliedCoupon = state => {
     state.couponCode = "";
 
-    //reset the coupon code in local state
+    // reset the coupon code in local state
     setUpdatedCouponCode("");
     dispatch({
       type: SET_COUPON_ERROR,
@@ -19070,6 +19077,10 @@ const PaymentMethodContainerWithoutStripe = _ref => {
             handlePaypalSubscription(state, action.payload);
           }
         });
+      case HANDLE_APPLEPAY_SUBSCRIPTION:
+        return lib_5(state, (state, dispatch) => {
+          setVantivPaymentRequest(action.payload);
+        });
       case SET_UPDATED_PRICE:
         return lib_7({
           ...state,
@@ -20183,6 +20194,333 @@ const OrderCreateFreeButton = _ref => {
   }, otherProps), t("labels.submit"));
 };
 
+/**
+ * ApplePayButton component
+ * @return {JSX}
+ */
+const ApplePayButton = _ref => {
+  var _window$Pelcro$site$r;
+  let {
+    onClick,
+    props,
+    ...otherProps
+  } = _ref;
+  const {
+    dispatch,
+    state
+  } = useContext(store$k);
+  const {
+    plan,
+    invoice,
+    order
+  } = usePelcro();
+  const {
+    pay_page_id: payPageId,
+    report_group: reportGroup,
+    apple_pay_merchant_id: ApplePayMerchantId,
+    apple_pay_enabled: ApplePayEnabled
+  } = (_window$Pelcro$site$r = window.Pelcro.site.read()) === null || _window$Pelcro$site$r === void 0 ? void 0 : _window$Pelcro$site$r.vantiv_gateway_settings;
+  const getOrderInfo = () => {
+    if (!order) {
+      return {
+        price: null,
+        currency: null,
+        label: null
+      };
+    }
+    const isQuickPurchase = !Array.isArray(order);
+    if (isQuickPurchase) {
+      return {
+        price: order.price * order.quantity,
+        currency: order.currency,
+        label: order.name
+      };
+    }
+    if (order.length === 0) {
+      return {
+        price: null,
+        currency: null,
+        label: null
+      };
+    }
+    const price = order.reduce((total, item) => total + item.price * item.quantity, 0);
+    return {
+      price,
+      currency: order[0].currency,
+      label: "Order"
+    };
+  };
+  const orderPrice = getOrderInfo().price;
+  const orderCurrency = getOrderInfo().currency;
+  const orderLabel = getOrderInfo().label;
+  useEffect(() => {
+    if (window.ApplePaySession) {
+      // Indicates whether the device supports Apple Pay and whether the user has an active card in Wallet.
+      // eslint-disable-next-line no-undef
+      const promise = ApplePaySession.canMakePaymentsWithActiveCard(ApplePayMerchantId);
+      promise.then(function (canMakePayments) {
+        if (canMakePayments && ApplePayEnabled) {
+          // Display Apple Pay Buttons here…
+          const pelcroApplyPayButton = document.getElementById("pelcro-apple-pay-button");
+          if (pelcroApplyPayButton) {
+            pelcroApplyPayButton.style.display = "block";
+          }
+          console.log("ApplePay canMakePayments function: ", canMakePayments);
+        }
+      });
+    } else {
+      console.error("ApplePay is not available on this browser");
+    }
+  }, []);
+  useEffect(() => {
+    function onApplePayButtonClicked() {
+      var _ref2, _ref3, _ref4, _ref5, _state$updatedPrice, _props$plan, _window, _window$Pelcro, _window$Pelcro$user, _window$Pelcro$user$l;
+      // eslint-disable-next-line no-undef
+      if (!ApplePaySession) {
+        return;
+      }
+      const updatedPrice = (_ref2 = (_ref3 = (_ref4 = (_ref5 = (_state$updatedPrice = state.updatedPrice) !== null && _state$updatedPrice !== void 0 ? _state$updatedPrice : props === null || props === void 0 ? void 0 : (_props$plan = props.plan) === null || _props$plan === void 0 ? void 0 : _props$plan.amount) !== null && _ref5 !== void 0 ? _ref5 : plan === null || plan === void 0 ? void 0 : plan.amount) !== null && _ref4 !== void 0 ? _ref4 : orderPrice) !== null && _ref3 !== void 0 ? _ref3 : invoice === null || invoice === void 0 ? void 0 : invoice.amount_remaining) !== null && _ref2 !== void 0 ? _ref2 : null;
+      const getCurrencyCode = () => {
+        if (plan) {
+          return plan === null || plan === void 0 ? void 0 : plan.currency.toUpperCase();
+        } else if (order) {
+          return orderCurrency.toUpperCase();
+        } else if (invoice) {
+          return invoice === null || invoice === void 0 ? void 0 : invoice.currency.toUpperCase();
+        }
+      };
+      dispatch({
+        type: DISABLE_SUBMIT,
+        payload: true
+      });
+
+      // Define ApplePayPaymentRequest
+      // @see https://developer.apple.com/documentation/apple_pay_on_the_web/apple_pay_js_api/creating_an_apple_pay_session
+      const ApplePayPaymentRequest = {
+        countryCode: ((_window = window) === null || _window === void 0 ? void 0 : (_window$Pelcro = _window.Pelcro) === null || _window$Pelcro === void 0 ? void 0 : (_window$Pelcro$user = _window$Pelcro.user) === null || _window$Pelcro$user === void 0 ? void 0 : (_window$Pelcro$user$l = _window$Pelcro$user.location) === null || _window$Pelcro$user$l === void 0 ? void 0 : _window$Pelcro$user$l.countryCode) || "US",
+        currencyCode: getCurrencyCode(),
+        merchantCapabilities: ["supports3DS"],
+        supportedNetworks: ["visa", "masterCard", "amex", "discover"],
+        total: {
+          label: (plan === null || plan === void 0 ? void 0 : plan.nickname) || orderLabel || `invoice #${invoice === null || invoice === void 0 ? void 0 : invoice.id}`,
+          type: "final",
+          amount: updatedPrice / 100
+        }
+      };
+
+      // Create ApplePaySession
+      // @todo - Clarify supported version parameter
+      // @odo - Apple Pay demo uses version 6 (https://applepaydemo.apple.com/)
+      const session = new ApplePaySession(3, ApplePayPaymentRequest); // eslint-disable-line no-undef
+
+      // @todo - Detect whether web browser supports a particular Apple Pay version.
+      // @see https://developer.apple.com/documentation/apple_pay_on_the_web/applepaysession/1778014-supportsversion
+
+      session.onvalidatemerchant = async event => {
+        const {
+          validationURL
+        } = event;
+        // Call your own server to request a new merchant session.
+        window.Pelcro.payment.startSession({
+          auth_token: window.Pelcro.user.read().auth_token,
+          site_id: window.Pelcro.siteid,
+          validation_url: validationURL
+        }, (err, res) => {
+          if (err) {
+            // Handle any errors during merchant validation
+            session.abort();
+            return dispatch({
+              type: SHOW_ALERT,
+              payload: {
+                type: "error",
+                content: getErrorMessages(err)
+              }
+            });
+          }
+          // Complete merchant validation with the merchant session object
+          const merchantSession = res;
+          session.completeMerchantValidation(merchantSession);
+        });
+      };
+      session.onpaymentmethodselected = event => {
+        // Define ApplePayPaymentMethodUpdate based on the selected payment method.
+        // No updates or errors are needed, pass an empty object.
+        const newTotal = {
+          label: (plan === null || plan === void 0 ? void 0 : plan.nickname) || orderLabel || `invoice #${invoice === null || invoice === void 0 ? void 0 : invoice.id}`,
+          type: "final",
+          amount: updatedPrice / 100
+        };
+        const newLineItems = [{
+          label: (plan === null || plan === void 0 ? void 0 : plan.nickname) || orderLabel || `invoice #${invoice === null || invoice === void 0 ? void 0 : invoice.id}`,
+          type: "final",
+          amount: updatedPrice / 100
+        }];
+        session.completePaymentMethodSelection(newTotal, newLineItems);
+      };
+
+      // TODO: Check if onshippingmethodselected it should be implemented
+      // session.onshippingmethodselected = (event) => {
+      //   // Define ApplePayShippingMethodUpdate based on the selected shipping method.
+      //   // No updates or errors are needed, pass an empty object.
+      //   const newTotal = {
+      //     label: plan?.nickname || orderLabel || `invoice #${invoice?.id}`,
+      //     type: "final",
+      //     amount: updatedPrice / 100
+      //   };
+
+      //   const newLineItems = [
+      //     {
+      //       label: plan?.nickname || orderLabel || `invoice #${invoice?.id}`,
+      //       type: "final",
+      //       amount: updatedPrice / 100
+      //     }
+      //   ];
+
+      //   session.completeShippingMethodSelection(newTotal, newLineItems);
+      // };
+
+      // TODO: Check if onshippingcontactselected it should be implemented
+      // session.onshippingcontactselected = (event) => {
+      //   // Define ApplePayShippingContactUpdate based on the selected shipping contact.
+      //   const update = {};
+      //   session.completeShippingContactSelection(update);
+      // };
+
+      session.onpaymentauthorized = event => {
+        // Define ApplePayPaymentAuthorizationResult
+        const result = {
+          status: ApplePaySession.STATUS_SUCCESS // eslint-disable-line no-undef
+        };
+
+        const {
+          paymentData
+        } = event.payment.token;
+        const {
+          data,
+          signature,
+          version
+        } = paymentData;
+        const {
+          ephemeralPublicKey,
+          publicKeyHash,
+          transactionId
+        } = paymentData.header;
+        const applePayToken = {
+          data: data,
+          signature: signature,
+          version: version,
+          header: {
+            ephemeralPublicKey: ephemeralPublicKey,
+            publicKeyHash: publicKeyHash,
+            transactionId: transactionId
+          }
+        };
+        const orderId = `pelcro-${new Date().getTime()}`;
+        const eProtectRequestPreLiveURL = "https://request.eprotect.vantivprelive.com";
+        const eProtectRequestProductionURL = "https://request.eprotect.vantivcnp.com";
+        const eProtectRequestUrlToUse = window.Pelcro.site.read().vantiv_gateway_settings.environment === "production" ? eProtectRequestProductionURL : eProtectRequestPreLiveURL;
+        const eProtectRequest = {
+          paypageId: payPageId,
+          reportGroup: reportGroup,
+          orderId: orderId,
+          id: orderId,
+          applepay: applePayToken,
+          url: eProtectRequestUrlToUse
+        };
+
+        // successCallback function to handle the response from WorldPay.
+        function successCallback(vantivResponse) {
+          const {
+            expDate
+          } = vantivResponse;
+          const expMonth = expDate.substring(0, 2);
+          const expYear = expDate.substring(2);
+          const vantivPaymentRequest = {
+            ...vantivResponse,
+            expMonth: expMonth,
+            expYear: expYear,
+            applePay: true
+          };
+
+          // Process the registrationId or continue with further payment processing.
+          dispatch({
+            type: HANDLE_APPLEPAY_SUBSCRIPTION,
+            payload: vantivPaymentRequest
+          });
+          dispatch({
+            type: LOADING,
+            payload: true
+          });
+          session.completePayment(result);
+        }
+
+        // errorCallback function to handle any errors that may occur during the tokenization process.
+        function errorCallback(error) {
+          console.error("Error retrieving Registration ID:", error);
+          // Handle error appropriately.
+        }
+        // errorCallback function to handle any errors that may occur during the tokenization process.
+        function timeoutCallback() {
+          console.error("eProtect Timeout");
+          // Handle error appropriately.
+        }
+
+        // eslint-disable-next-line no-undef
+        new eProtect().sendToEprotect(eProtectRequest, {}, successCallback, errorCallback, timeoutCallback, 15000);
+      };
+
+      // TODO: Check if oncouponcodechanged it should be implemented
+      // session.oncouponcodechanged = (event) => {
+      //   // Define ApplePayCouponCodeUpdate
+      //   const newTotal = calculateNewTotal(event.couponCode);
+      //   const newLineItems = calculateNewLineItems(event.couponCode);
+      //   const newShippingMethods = calculateNewShippingMethods(
+      //     event.couponCode
+      //   );
+      //   const errors = calculateErrors(event.couponCode);
+
+      //   session.completeCouponCodeChange({
+      //     newTotal: newTotal,
+      //     newLineItems: newLineItems,
+      //     newShippingMethods: newShippingMethods,
+      //     errors: errors
+      //   });
+      // };
+
+      session.oncancel = event => {
+        // Payment cancelled by WebKit
+        dispatch({
+          type: LOADING,
+          payload: false
+        });
+        dispatch({
+          type: DISABLE_SUBMIT,
+          payload: false
+        });
+      };
+      session.begin();
+    }
+    const pelcroApplyPayButton = document.getElementById("pelcro-apple-pay-button");
+    if (pelcroApplyPayButton) {
+      pelcroApplyPayButton.addEventListener("click", onApplePayButtonClicked);
+    }
+    return () => {
+      if (pelcroApplyPayButton) {
+        pelcroApplyPayButton.removeEventListener("click", onApplePayButtonClicked);
+      }
+    };
+  }, [state.updatedPrice]);
+  return /*#__PURE__*/React__default.createElement("apple-pay-button", {
+    id: "pelcro-apple-pay-button",
+    style: {
+      display: "none"
+    },
+    buttonstyle: "black",
+    type: "plain",
+    locale: "en-US"
+  });
+};
+
 /**
  *
  */
@@ -20197,6 +20535,7 @@ function PaymentMethodView(_ref) {
     showExternalPaymentMethods,
     showSubscriptionButton,
     showOrderButton,
+    showApplePayButton,
     order
   } = _ref;
   const {
@@ -20263,7 +20602,7 @@ function PaymentMethodView(_ref) {
     className: "plc-mb-2"
   }, /*#__PURE__*/React__default.createElement(CouponCode, null), /*#__PURE__*/React__default.createElement(DiscountedPrice, null)), /*#__PURE__*/React__default.createElement(TaxAmount, null), /*#__PURE__*/React__default.createElement("div", {
     className: "plc-grid plc-mt-4 plc-gap-y-2"
-  }, /*#__PURE__*/React__default.createElement(SubmitPaymentMethod, null), showExternalPaymentMethods && !supportsVantiv && !supportsCybersource && !supportsTap ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(PelcroPaymentRequestButton, null), /*#__PURE__*/React__default.createElement(PaypalSubscribeButton, null)) : showExternalPaymentMethods && supportsVantiv ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(PaypalSubscribeButton, null)) : null)))));
+  }, /*#__PURE__*/React__default.createElement(SubmitPaymentMethod, null), showExternalPaymentMethods && !supportsVantiv && !supportsCybersource && !supportsTap ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(PelcroPaymentRequestButton, null), /*#__PURE__*/React__default.createElement(PaypalSubscribeButton, null)) : showExternalPaymentMethods && supportsVantiv ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(PaypalSubscribeButton, null)) : null, showApplePayButton && supportsVantiv ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ApplePayButton, null)) : null)))));
 }
 
 const SubscriptionRenewView = _ref => {
@@ -20314,6 +20653,7 @@ const SubscriptionRenewView = _ref => {
     type: "createPayment",
     showCoupon: true,
     showExternalPaymentMethods: false,
+    showApplePayButton: true,
     onSuccess: onSuccess,
     onGiftRenewalSuccess: onGiftRenewalSuccess,
     onFailure: onFailure,
@@ -21686,6 +22026,7 @@ const SubscriptionCreateView = _ref => {
     type: "createPayment",
     showCoupon: true,
     showExternalPaymentMethods: true,
+    showApplePayButton: true,
     onSuccess: onSuccess,
     onFailure: onFailure,
     showSubscriptionButton: showSubscriptionButton
@@ -24298,6 +24639,7 @@ function PaymentMethodUpdateView(props) {
     type: "updatePaymentSource",
     showCoupon: false,
     showExternalPaymentMethods: false,
+    showApplePayButton: false,
     onDisplay: props.onDisplay,
     onFailure: props.onFailure,
     onSuccess: props.onSuccess
@@ -25723,6 +26065,7 @@ const OrderCreateView = props => {
     type: "orderCreate",
     showCoupon: true,
     showExternalPaymentMethods: false,
+    showApplePayButton: true,
     showOrderButton: showOrderButton,
     order: order
   }, props))));
@@ -32044,7 +32387,8 @@ const InvoicePaymentView = props => {
   }, /*#__PURE__*/React__default.createElement(PaymentMethodView, Object.assign({
     type: "invoicePayment",
     showCoupon: false,
-    showExternalPaymentMethods: true
+    showExternalPaymentMethods: true,
+    showApplePayButton: true
   }, props))));
 };
 
@@ -33671,4 +34015,4 @@ const QrCodeModal = _ref => {
 };
 QrCodeModal.viewId = "qrcode";
 
-export { AddressCreateCity, AddressCreateContainer, AddressCreateCountrySelect, AddressCreateFirstName, AddressCreateLastName, AddressCreateLine1, AddressCreateLine2, AddressCreateModal, AddressCreatePostalCode, AddressCreateSetDefault, AddressCreateStateSelect, AddressCreateSubmit, AddressCreateTextInput, AddressCreateView, AddressSelectContainer, AddressSelectList, AddressSelectModal, AddressSelectSubmit, AddressSelectView, AddressUpdateCity, AddressUpdateContainer, AddressUpdateCountrySelect, AddressUpdateFirstName, AddressUpdateLastName, AddressUpdateLine1, AddressUpdateLine2, AddressUpdateModal, AddressUpdatePostalCode, AddressUpdateSetDefault, AddressUpdateStateSelect, AddressUpdateSubmit, AddressUpdateTextInput, AddressUpdateView, AlertWithContext as Alert, Alert as AlertElement, ApplyCouponButton, Auth0LoginButton, Badge, BankAuthenticationSuccess, BankRedirection, Button, CartContainer, CartModal, CartRemoveItemButton, CartSubmit, CartTotalPrice, CartView, Checkbox, CheckoutForm, ConfirmPassword, CouponCode, CouponCodeField, DashboardWithHook as Dashboard, DashboardOpenButton, DatePicker, DiscountedPrice, Email, EmailVerifyContainer, EmailVerifyModal, EmailVerifyResendButton, EmailVerifyView, FacebookLoginButton, GiftCreateContainer, GiftCreateEmail, GiftCreateFirstName, GiftCreateLastName, GiftCreateMessage, GiftCreateModal, GiftCreateStartDate, GiftCreateSubmitButton, GiftCreateView, GiftRedeemCode, GiftRedeemContainer, GiftRedeemModal, GiftRedeemSubmitButton, GiftRedeemView, GoogleLoginButton, IncludeFirstName, IncludeLastName, IncludePhone, Input, InvoiceDetailsContainer, InvoiceDetailsDownloadButton, InvoiceDetailsModal, InvoiceDetailsPayButton, InvoiceDetailsView, InvoicePaymentContainer, InvoicePaymentModal, InvoicePaymentView, Link, LoginButton, LoginContainer, LoginEmail, LoginModal, LoginPassword, LoginRequestLoginToken, LoginUsername, LoginView, Logout, MeterModal, MeterView, Modal, ModalBody, ModalFooter, NewsletterWithHook as NewsLetter, NewsletterUpdateButton, NewsletterUpdateContainer, NewsletterUpdateList, NewsletterUpdateModal, NewsletterUpdateView, Notification, OrderConfirmModal, OrderCreateContainer, OrderCreateFreeButton, OrderCreateModal, OrderCreateSubmitButton, OrderCreateView, Password, PasswordChangeButton, PasswordChangeConfirmNewPassword, PasswordChangeContainer, PasswordChangeCurrentPassword, PasswordChangeModal, PasswordChangeNewPassword, PasswordChangeView, PasswordForgotButton, PasswordForgotContainer, PasswordForgotEmail, PasswordForgotModal, PasswordForgotView, PasswordResetButton, PasswordResetConfirmPassword, PasswordResetContainer, PasswordResetEmail, PasswordResetModal, PasswordResetPassword, PasswordResetView, PasswordlessRequestContainer, PasswordlessRequestEmail, PasswordlessRequestModal, PasswordlessRequestView, PasswordlessRequestViewButton, PaymentCreateContainer, PaymentCreateView, PaymentMethodContainer, PaymentMethodSelectContainer, PaymentMethodSelectList, PaymentMethodSelectModal, PaymentMethodSelectSubmit, PaymentMethodSelectView, PaymentMethodUpdateContainer, PaymentMethodUpdateModal, PaymentMethodUpdateView, PaymentMethodView, PaymentSuccessModal, PaymentSuccessView, PaypalSubscribeButton, PelcroCardCVC, PelcroCardExpiry, PelcroCardNumber, PelcroModalController, PelcroPaymentRequestButton, ProfilePicChangeButton, ProfilePicChangeContainer, ProfilePicChangeCropper, ProfilePicChangeModal, ProfilePicChangeRemoveButton, ProfilePicChangeSelectButton, ProfilePicChangeView, ProfilePicChangeZoom, QrCodeModal, QrCodeView, Radio, RegisterButton, RegisterCompany, RegisterContainer, RegisterEmail, RegisterFirstName, RegisterJobTitle, RegisterLastName, RegisterModal, RegisterPassword, RegisterView, Select, SelectModalWithHook as SelectModal, SelectedPaymentMethod, ShopPurchaseButton, ShopSelectProductButton, ShopView, SubmitPaymentMethod, SubscriptionCancelModal, SubscriptionCreateContainer, SubscriptionCreateFreePlanButton, SubscriptionCreateModal, SubscriptionCreateView, SubscriptionManageMembersButton, SubscriptionManageMembersContainer, SubscriptionManageMembersEmails, SubscriptionManageMembersList, SubscriptionManageMembersModal, SubscriptionManageMembersView, SubscriptionRenewContainer, SubscriptionRenewModal, SubscriptionRenewView, SubscriptionSuspendContainer, SubscriptionSuspendModal, SubscriptionSuspendView, TaxAmount, TextArea, Tooltip, UserNameInput, UserUpdateButton, UserUpdateContainer, UserUpdateDisplayName, UserUpdateEmail, UserUpdateFirstName, UserUpdateLastName, UserUpdateModal, UserUpdatePhone, UserUpdateProfilePic, UserUpdateTextInput, UserUpdateTin, UserUpdateUsername, UserUpdateView, VerifyLinkTokenContainer, VerifyLinkTokenLoader, VerifyLinkTokenModal, VerifyLinkTokenView, authenticatedButtons, i18next as i18n, init$1 as initButtons, init as initContentEntitlement, invoicePaymentSubmitButton, notify$1 as notify, unauthenticatedButtons, usePelcro };
+export { AddressCreateCity, AddressCreateContainer, AddressCreateCountrySelect, AddressCreateFirstName, AddressCreateLastName, AddressCreateLine1, AddressCreateLine2, AddressCreateModal, AddressCreatePostalCode, AddressCreateSetDefault, AddressCreateStateSelect, AddressCreateSubmit, AddressCreateTextInput, AddressCreateView, AddressSelectContainer, AddressSelectList, AddressSelectModal, AddressSelectSubmit, AddressSelectView, AddressUpdateCity, AddressUpdateContainer, AddressUpdateCountrySelect, AddressUpdateFirstName, AddressUpdateLastName, AddressUpdateLine1, AddressUpdateLine2, AddressUpdateModal, AddressUpdatePostalCode, AddressUpdateSetDefault, AddressUpdateStateSelect, AddressUpdateSubmit, AddressUpdateTextInput, AddressUpdateView, AlertWithContext as Alert, Alert as AlertElement, ApplePayButton, ApplyCouponButton, Auth0LoginButton, Badge, BankAuthenticationSuccess, BankRedirection, Button, CartContainer, CartModal, CartRemoveItemButton, CartSubmit, CartTotalPrice, CartView, Checkbox, CheckoutForm, ConfirmPassword, CouponCode, CouponCodeField, DashboardWithHook as Dashboard, DashboardOpenButton, DatePicker, DiscountedPrice, Email, EmailVerifyContainer, EmailVerifyModal, EmailVerifyResendButton, EmailVerifyView, FacebookLoginButton, GiftCreateContainer, GiftCreateEmail, GiftCreateFirstName, GiftCreateLastName, GiftCreateMessage, GiftCreateModal, GiftCreateStartDate, GiftCreateSubmitButton, GiftCreateView, GiftRedeemCode, GiftRedeemContainer, GiftRedeemModal, GiftRedeemSubmitButton, GiftRedeemView, GoogleLoginButton, IncludeFirstName, IncludeLastName, IncludePhone, Input, InvoiceDetailsContainer, InvoiceDetailsDownloadButton, InvoiceDetailsModal, InvoiceDetailsPayButton, InvoiceDetailsView, InvoicePaymentContainer, InvoicePaymentModal, InvoicePaymentView, Link, LoginButton, LoginContainer, LoginEmail, LoginModal, LoginPassword, LoginRequestLoginToken, LoginUsername, LoginView, Logout, MeterModal, MeterView, Modal, ModalBody, ModalFooter, NewsletterWithHook as NewsLetter, NewsletterUpdateButton, NewsletterUpdateContainer, NewsletterUpdateList, NewsletterUpdateModal, NewsletterUpdateView, Notification, OrderConfirmModal, OrderCreateContainer, OrderCreateFreeButton, OrderCreateModal, OrderCreateSubmitButton, OrderCreateView, Password, PasswordChangeButton, PasswordChangeConfirmNewPassword, PasswordChangeContainer, PasswordChangeCurrentPassword, PasswordChangeModal, PasswordChangeNewPassword, PasswordChangeView, PasswordForgotButton, PasswordForgotContainer, PasswordForgotEmail, PasswordForgotModal, PasswordForgotView, PasswordResetButton, PasswordResetConfirmPassword, PasswordResetContainer, PasswordResetEmail, PasswordResetModal, PasswordResetPassword, PasswordResetView, PasswordlessRequestContainer, PasswordlessRequestEmail, PasswordlessRequestModal, PasswordlessRequestView, PasswordlessRequestViewButton, PaymentCreateContainer, PaymentCreateView, PaymentMethodContainer, PaymentMethodSelectContainer, PaymentMethodSelectList, PaymentMethodSelectModal, PaymentMethodSelectSubmit, PaymentMethodSelectView, PaymentMethodUpdateContainer, PaymentMethodUpdateModal, PaymentMethodUpdateView, PaymentMethodView, PaymentSuccessModal, PaymentSuccessView, PaypalSubscribeButton, PelcroCardCVC, PelcroCardExpiry, PelcroCardNumber, PelcroModalController, PelcroPaymentRequestButton, ProfilePicChangeButton, ProfilePicChangeContainer, ProfilePicChangeCropper, ProfilePicChangeModal, ProfilePicChangeRemoveButton, ProfilePicChangeSelectButton, ProfilePicChangeView, ProfilePicChangeZoom, QrCodeModal, QrCodeView, Radio, RegisterButton, RegisterCompany, RegisterContainer, RegisterEmail, RegisterFirstName, RegisterJobTitle, RegisterLastName, RegisterModal, RegisterPassword, RegisterView, Select, SelectModalWithHook as SelectModal, SelectedPaymentMethod, ShopPurchaseButton, ShopSelectProductButton, ShopView, SubmitPaymentMethod, SubscriptionCancelModal, SubscriptionCreateContainer, SubscriptionCreateFreePlanButton, SubscriptionCreateModal, SubscriptionCreateView, SubscriptionManageMembersButton, SubscriptionManageMembersContainer, SubscriptionManageMembersEmails, SubscriptionManageMembersList, SubscriptionManageMembersModal, SubscriptionManageMembersView, SubscriptionRenewContainer, SubscriptionRenewModal, SubscriptionRenewView, SubscriptionSuspendContainer, SubscriptionSuspendModal, SubscriptionSuspendView, TaxAmount, TextArea, Tooltip, UserNameInput, UserUpdateButton, UserUpdateContainer, UserUpdateDisplayName, UserUpdateEmail, UserUpdateFirstName, UserUpdateLastName, UserUpdateModal, UserUpdatePhone, UserUpdateProfilePic, UserUpdateTextInput, UserUpdateTin, UserUpdateUsername, UserUpdateView, VerifyLinkTokenContainer, VerifyLinkTokenLoader, VerifyLinkTokenModal, VerifyLinkTokenView, authenticatedButtons, i18next as i18n, init$1 as initButtons, init as initContentEntitlement, invoicePaymentSubmitButton, notify$1 as notify, unauthenticatedButtons, usePelcro };

package/dist/pelcro.css

@@ -1722,6 +1722,14 @@ in order to scope selectors under pelcro-root
   border-right: 0;
 }
 
+apple-pay-button {
+  --apple-pay-button-width: 100%;
+  --apple-pay-button-height: 48px;
+  --apple-pay-button-border-radius: 0.25rem;
+  --apple-pay-button-padding: 0px 0px;
+  --apple-pay-button-box-sizing: border-box;
+}
+
 /* utilities */
 
 .pelcro-root .plc-space-x-0 > :not([hidden]) ~ :not([hidden]) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pelcro/react-pelcro-js",
   "description": "Pelcro's React UI Elements",
-  "version": "3.29.1",
+  "version": "3.31.0",
   "license": "MIT",
   "private": false,
   "main": "dist/index.cjs.js",