@pelcro/react-pelcro-js 3.26.0-beta.5 → 3.26.0-beta.7

package/dist/index.cjs.js

@@ -11848,21 +11848,31 @@ const initPaywalls = () => {
       return;
     }
     const {
-      switchView
+      switchView,
+      isAuthenticated
     } = usePelcro.getStore();
-    if (paywallMethods !== null && paywallMethods !== void 0 && paywallMethods.displayMeterPaywall()) {
-      /* 
-        showing both the meter and the entitlements notification doesn't make sense from
-        a product prespective + they would take half the screen on mobile devies, so we're
-        not showing the meter, and only showing the entitlements notification.
-        */
-      if (!didBlurContent) {
-        switchView("meter");
+    function displayPaywalls() {
+      if (paywallMethods !== null && paywallMethods !== void 0 && paywallMethods.displayMeterPaywall()) {
+        /* 
+          showing both the meter and the entitlements notification doesn't make sense from
+          a product prespective + they would take half the screen on mobile devies, so we're
+          not showing the meter, and only showing the entitlements notification.
+          */
+        if (!didBlurContent) {
+          switchView("meter");
+        }
+      } else if (paywallMethods !== null && paywallMethods !== void 0 && paywallMethods.displayNewsletterPaywall()) {
+        switchView("newsletter");
+      } else if (paywallMethods !== null && paywallMethods !== void 0 && paywallMethods.displayPaywall()) {
+        switchView("plan-select");
       }
-    } else if (paywallMethods !== null && paywallMethods !== void 0 && paywallMethods.displayNewsletterPaywall()) {
-      switchView("newsletter");
-    } else if (paywallMethods !== null && paywallMethods !== void 0 && paywallMethods.displayPaywall()) {
-      switchView("plan-select");
+    }
+    if (isAuthenticated()) {
+      addEventListener("PelcroUserLoaded", function () {
+        displayPaywalls();
+      });
+    } else {
+      displayPaywalls();
     }
   }
 };
@@ -11874,6 +11884,7 @@ const loadPaymentSDKs = () => {
   if (!window.Stripe && !supportsVantiv && !supportsTap) {
     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);
@@ -11887,6 +11898,8 @@ 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");
+    window.Pelcro.helpers.loadSDK("https://request.eprotect.vantivprelive.com/eProtect/eProtect-api3.js", "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";
@@ -12758,6 +12771,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";
@@ -18132,7 +18146,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
     });
   };
 
-  /*====== 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) {
@@ -18401,9 +18415,9 @@ const PaymentMethodContainerWithoutStripe = _ref => {
     });
   };
 
-  /*====== End Cybersource integration ========*/
+  /* ====== End Cybersource integration ======== */
 
-  /*====== Start Tap integration ========*/
+  /* ====== Start Tap integration ======== */
   const submitUsingTap = state => {
     var _ref4, _ref5, _getPlanAmount;
     const isUsingExistingPaymentMethod = Boolean(selectedPaymentMethodId);
@@ -18675,28 +18689,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);
@@ -18884,7 +18898,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);
@@ -19044,7 +19058,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,
@@ -19105,7 +19119,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,
@@ -19178,7 +19192,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,
@@ -19999,6 +20013,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,
@@ -21140,6 +21158,329 @@ const DonationEmail = props => /*#__PURE__*/React__default['default'].createElem
   store: store$k
 }, props));
 
+/* eslint-disable no-undef */
+
+/**
+ * ApplePayButton component
+ * @return {JSX}
+ */
+const ApplePayButton = _ref => {
+  var _window$Pelcro$site$r, _ref2, _ref3, _state$updatedPrice, _props$plan;
+  let {
+    onClick,
+    props,
+    ...otherProps
+  } = _ref;
+  const {
+    dispatch,
+    state
+  } = React.useContext(store$k);
+  const {
+    plan,
+    invoice
+  } = usePelcro();
+  const {
+    payPageId,
+    reportGroup,
+    apple_pay_merchant_id: ApplePayMerchantId,
+    apple_pay_enabled: ApplePayEnabled,
+    apple_pay_billing_agreement: ApplePayBillingAgreement
+  } = (_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 updatedPrice = (_ref2 = (_ref3 = (_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 && _ref3 !== void 0 ? _ref3 : plan === null || plan === void 0 ? void 0 : plan.amount) !== null && _ref2 !== void 0 ? _ref2 : invoice.amount_remaining;
+  React.useEffect(() => {
+    if (window.ApplePaySession) {
+      // Indicates whether the device supports Apple Pay and whether the user has an active card in Wallet.
+      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("canMakePayments", canMakePayments);
+        }
+      });
+    } else {
+      console.error("ApplePay is not available on this browser");
+    }
+  }, []);
+  function onApplePayButtonClicked() {
+    var _window, _window$Pelcro, _window$Pelcro$user, _window$Pelcro$user$l;
+    if (!ApplePaySession) {
+      return;
+    }
+    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: (plan === null || plan === void 0 ? void 0 : plan.currency.toUpperCase()) || (invoice === null || invoice === void 0 ? void 0 : invoice.currency.toUpperCase()),
+      merchantCapabilities: ["supports3DS"],
+      supportedNetworks: ["visa", "masterCard", "amex", "discover"],
+      total: {
+        label: (plan === null || plan === void 0 ? void 0 : plan.nickname) || `invoice #${invoice.id}`,
+        amount: updatedPrice / 100
+      },
+      lineItems: [plan !== null && plan !== void 0 && plan.auto_renew ? {
+        label: (plan === null || plan === void 0 ? void 0 : plan.nickname) || `invoice #${invoice.id}`,
+        amount: updatedPrice / 100,
+        paymentTiming: "recurring",
+        recurringPaymentStartDate: new Date().toISOString(),
+        recurringPaymentIntervalUnit: (plan === null || plan === void 0 ? void 0 : plan.interval) === "week" ? "day" : plan === null || plan === void 0 ? void 0 : plan.interval,
+        recurringPaymentIntervalCount: (plan === null || plan === void 0 ? void 0 : plan.interval) === "week" ? (plan === null || plan === void 0 ? void 0 : plan.interval_count) * 7 : plan === null || plan === void 0 ? void 0 : plan.interval_count
+      } : {
+        label: (plan === null || plan === void 0 ? void 0 : plan.nickname) || `invoice #${invoice.id}`,
+        amount: updatedPrice / 100
+      }],
+      ...((plan === null || plan === void 0 ? void 0 : plan.auto_renew) && {
+        recurringPaymentRequest: {
+          paymentDescription: "A description of the recurring payment to display to the user in the payment sheet.",
+          regularBilling: {
+            label: (plan === null || plan === void 0 ? void 0 : plan.nickname) || `invoice #${invoice.id}`,
+            amount: updatedPrice / 100,
+            paymentTiming: "recurring",
+            recurringPaymentStartDate: new Date().toISOString(),
+            recurringPaymentIntervalUnit: (plan === null || plan === void 0 ? void 0 : plan.interval) === "week" ? "day" : plan === null || plan === void 0 ? void 0 : plan.interval,
+            recurringPaymentIntervalCount: (plan === null || plan === void 0 ? void 0 : plan.interval) === "week" ? (plan === null || plan === void 0 ? void 0 : plan.interval_count) * 7 : plan === null || plan === void 0 ? void 0 : plan.interval_count
+          },
+          billingAgreement: ApplePayBillingAgreement !== null && ApplePayBillingAgreement !== void 0 ? ApplePayBillingAgreement : "",
+          managementURL: "https://applepaydemo.apple.com",
+          tokenNotificationURL: "https://applepaydemo.apple.com"
+        }
+      })
+    };
+    console.log(ApplePayPaymentRequest);
+    // Create ApplePaySession
+    // @todo - Clarify supported version parameter
+    // @odo - Apple Pay demo uses version 6 (https://applepaydemo.apple.com/)
+    const session = new ApplePaySession(3, ApplePayPaymentRequest);
+
+    // @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;
+      console.log("then merchantSession step", 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
+          console.error("Merchant validation SDK error: ", err);
+          session.abort();
+          return dispatch({
+            type: SHOW_ALERT,
+            payload: {
+              type: "error",
+              content: getErrorMessages(err)
+            }
+          });
+        }
+        // Complete merchant validation with the merchant session object
+        console.log("Merchant validation SDK response: ", res);
+        const merchantSession = res;
+        session.completeMerchantValidation(merchantSession);
+      });
+    };
+    session.onpaymentmethodselected = event => {
+      console.log("payment method selected step", 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) || `invoice #${invoice.id}`,
+        amount: updatedPrice / 100
+      };
+      const newLineItems = [plan !== null && plan !== void 0 && plan.auto_renew ? {
+        label: (plan === null || plan === void 0 ? void 0 : plan.nickname) || `invoice #${invoice.id}`,
+        amount: updatedPrice / 100,
+        paymentTiming: "recurring",
+        recurringPaymentStartDate: new Date().toISOString(),
+        recurringPaymentIntervalUnit: (plan === null || plan === void 0 ? void 0 : plan.interval) === "week" ? "day" : plan === null || plan === void 0 ? void 0 : plan.interval,
+        recurringPaymentIntervalCount: (plan === null || plan === void 0 ? void 0 : plan.interval) === "week" ? (plan === null || plan === void 0 ? void 0 : plan.interval_count) * 7 : plan === null || plan === void 0 ? void 0 : plan.interval_count
+      } : {
+        label: (plan === null || plan === void 0 ? void 0 : plan.nickname) || `invoice #${invoice.id}`,
+        amount: updatedPrice / 100
+      }];
+      session.completePaymentMethodSelection(newTotal, newLineItems);
+    };
+
+    // TODO: Check if onshippingmethodselected it should be implemented
+    // session.onshippingmethodselected = (event) => {
+    //   console.log("on shipping method selected step", event);
+    //   // Define ApplePayShippingMethodUpdate based on the selected shipping method.
+    //   // No updates or errors are needed, pass an empty object.
+    //   const newTotal = {
+    //     label: plan?.nickname || `invoice #${invoice.id}`,
+    //     amount: updatedPrice / 100
+    //   };
+
+    //   const newLineItems = [
+    //     plan?.auto_renew
+    //       ? {
+    //           label: plan?.nickname || `invoice #${invoice.id}`,
+    //           amount: updatedPrice / 100,
+    //           paymentTiming: "recurring",
+    //           recurringPaymentStartDate: new Date().toISOString(),
+    //           recurringPaymentIntervalUnit: plan?.interval,
+    //           recurringPaymentIntervalCount: plan?.interval_count
+    //         }
+    //       : {
+    //           label: plan?.nickname || `invoice #${invoice.id}`,
+    //           amount: updatedPrice / 100
+    //         }
+    //   ];
+
+    //   session.completeShippingMethodSelection(newTotal, newLineItems);
+    // };
+
+    // TODO: Check if onshippingcontactselected it should be implemented
+    // session.onshippingcontactselected = (event) => {
+    //   console.log("on shipping contact selected step", event);
+    //   // Define ApplePayShippingContactUpdate based on the selected shipping contact.
+    //   const update = {};
+    //   session.completeShippingContactSelection(update);
+    // };
+
+    session.onpaymentauthorized = event => {
+      console.log("on payment authorized step", event);
+      // Define ApplePayPaymentAuthorizationResult
+      const result = {
+        status: ApplePaySession.STATUS_SUCCESS
+      };
+      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
+        }
+      };
+      console.log(applePayToken);
+      const orderId = `pelcro-${new Date().getTime()}`;
+      const eProtectRequest = {
+        paypageId: payPageId,
+        reportGroup: reportGroup,
+        orderId: orderId,
+        id: orderId,
+        applepay: applePayToken,
+        url: "https://request.eprotect.vantivprelive.com"
+      };
+
+      // successCallback function to handle the response from WorldPay.
+      function successCallback(vantivResponse) {
+        const {
+          expDate
+        } = vantivResponse;
+        console.log("Response:", vantivResponse);
+        const expMonth = expDate.substring(0, 2);
+        const expYear = expDate.substring(2);
+        const vantivPaymentRequest = {
+          ...vantivResponse,
+          expMonth: expMonth,
+          expYear: expYear
+        };
+
+        // 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.
+      }
+
+      new eProtect().sendToEprotect(eProtectRequest, {}, successCallback, errorCallback, timeoutCallback, 15000);
+    };
+
+    // TODO: Check if oncouponcodechanged it should be implemented
+    // session.oncouponcodechanged = (event) => {
+    //   console.log("on coupon code changed step", 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
+      console.log("on cancel step", event);
+      dispatch({
+        type: LOADING,
+        payload: false
+      });
+      dispatch({
+        type: DISABLE_SUBMIT,
+        payload: false
+      });
+    };
+    session.begin();
+  }
+  React.useEffect(() => {
+    const pelcroApplyPayButton = document.getElementById("pelcro-apple-pay-button");
+    if (pelcroApplyPayButton) {
+      pelcroApplyPayButton.addEventListener("click", onApplePayButtonClicked);
+    }
+  }, []);
+  return /*#__PURE__*/React__default['default'].createElement("apple-pay-button", {
+    id: "pelcro-apple-pay-button",
+    style: {
+      display: "none"
+    },
+    buttonstyle: "black",
+    type: "plain",
+    locale: "en-US"
+  });
+};
+
 /**
  *
  */
@@ -21230,7 +21571,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(ApplePayButton, null), /*#__PURE__*/React__default['default'].createElement(PaypalSubscribeButton, null)) : null)))));
 }
 
 const SubscriptionRenewView = _ref => {

package/dist/index.esm.js

@@ -11818,21 +11818,31 @@ const initPaywalls = () => {
       return;
     }
     const {
-      switchView
+      switchView,
+      isAuthenticated
     } = usePelcro.getStore();
-    if (paywallMethods !== null && paywallMethods !== void 0 && paywallMethods.displayMeterPaywall()) {
-      /* 
-        showing both the meter and the entitlements notification doesn't make sense from
-        a product prespective + they would take half the screen on mobile devies, so we're
-        not showing the meter, and only showing the entitlements notification.
-        */
-      if (!didBlurContent) {
-        switchView("meter");
+    function displayPaywalls() {
+      if (paywallMethods !== null && paywallMethods !== void 0 && paywallMethods.displayMeterPaywall()) {
+        /* 
+          showing both the meter and the entitlements notification doesn't make sense from
+          a product prespective + they would take half the screen on mobile devies, so we're
+          not showing the meter, and only showing the entitlements notification.
+          */
+        if (!didBlurContent) {
+          switchView("meter");
+        }
+      } else if (paywallMethods !== null && paywallMethods !== void 0 && paywallMethods.displayNewsletterPaywall()) {
+        switchView("newsletter");
+      } else if (paywallMethods !== null && paywallMethods !== void 0 && paywallMethods.displayPaywall()) {
+        switchView("plan-select");
       }
-    } else if (paywallMethods !== null && paywallMethods !== void 0 && paywallMethods.displayNewsletterPaywall()) {
-      switchView("newsletter");
-    } else if (paywallMethods !== null && paywallMethods !== void 0 && paywallMethods.displayPaywall()) {
-      switchView("plan-select");
+    }
+    if (isAuthenticated()) {
+      addEventListener("PelcroUserLoaded", function () {
+        displayPaywalls();
+      });
+    } else {
+      displayPaywalls();
     }
   }
 };
@@ -11844,6 +11854,7 @@ const loadPaymentSDKs = () => {
   if (!window.Stripe && !supportsVantiv && !supportsTap) {
     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);
@@ -11857,6 +11868,8 @@ 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");
+    window.Pelcro.helpers.loadSDK("https://request.eprotect.vantivprelive.com/eProtect/eProtect-api3.js", "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";
@@ -12728,6 +12741,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";
@@ -18102,7 +18116,7 @@ const PaymentMethodContainerWithoutStripe = _ref => {
     });
   };
 
-  /*====== 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) {
@@ -18371,9 +18385,9 @@ const PaymentMethodContainerWithoutStripe = _ref => {
     });
   };
 
-  /*====== End Cybersource integration ========*/
+  /* ====== End Cybersource integration ======== */
 
-  /*====== Start Tap integration ========*/
+  /* ====== Start Tap integration ======== */
   const submitUsingTap = state => {
     var _ref4, _ref5, _getPlanAmount;
     const isUsingExistingPaymentMethod = Boolean(selectedPaymentMethodId);
@@ -18645,28 +18659,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);
@@ -18854,7 +18868,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);
@@ -19014,7 +19028,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,
@@ -19075,7 +19089,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,
@@ -19148,7 +19162,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,
@@ -19969,6 +19983,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,
@@ -21110,6 +21128,329 @@ const DonationEmail = props => /*#__PURE__*/React__default.createElement(Email,
   store: store$k
 }, props));
 
+/* eslint-disable no-undef */
+
+/**
+ * ApplePayButton component
+ * @return {JSX}
+ */
+const ApplePayButton = _ref => {
+  var _window$Pelcro$site$r, _ref2, _ref3, _state$updatedPrice, _props$plan;
+  let {
+    onClick,
+    props,
+    ...otherProps
+  } = _ref;
+  const {
+    dispatch,
+    state
+  } = useContext(store$k);
+  const {
+    plan,
+    invoice
+  } = usePelcro();
+  const {
+    payPageId,
+    reportGroup,
+    apple_pay_merchant_id: ApplePayMerchantId,
+    apple_pay_enabled: ApplePayEnabled,
+    apple_pay_billing_agreement: ApplePayBillingAgreement
+  } = (_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 updatedPrice = (_ref2 = (_ref3 = (_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 && _ref3 !== void 0 ? _ref3 : plan === null || plan === void 0 ? void 0 : plan.amount) !== null && _ref2 !== void 0 ? _ref2 : invoice.amount_remaining;
+  useEffect(() => {
+    if (window.ApplePaySession) {
+      // Indicates whether the device supports Apple Pay and whether the user has an active card in Wallet.
+      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("canMakePayments", canMakePayments);
+        }
+      });
+    } else {
+      console.error("ApplePay is not available on this browser");
+    }
+  }, []);
+  function onApplePayButtonClicked() {
+    var _window, _window$Pelcro, _window$Pelcro$user, _window$Pelcro$user$l;
+    if (!ApplePaySession) {
+      return;
+    }
+    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: (plan === null || plan === void 0 ? void 0 : plan.currency.toUpperCase()) || (invoice === null || invoice === void 0 ? void 0 : invoice.currency.toUpperCase()),
+      merchantCapabilities: ["supports3DS"],
+      supportedNetworks: ["visa", "masterCard", "amex", "discover"],
+      total: {
+        label: (plan === null || plan === void 0 ? void 0 : plan.nickname) || `invoice #${invoice.id}`,
+        amount: updatedPrice / 100
+      },
+      lineItems: [plan !== null && plan !== void 0 && plan.auto_renew ? {
+        label: (plan === null || plan === void 0 ? void 0 : plan.nickname) || `invoice #${invoice.id}`,
+        amount: updatedPrice / 100,
+        paymentTiming: "recurring",
+        recurringPaymentStartDate: new Date().toISOString(),
+        recurringPaymentIntervalUnit: (plan === null || plan === void 0 ? void 0 : plan.interval) === "week" ? "day" : plan === null || plan === void 0 ? void 0 : plan.interval,
+        recurringPaymentIntervalCount: (plan === null || plan === void 0 ? void 0 : plan.interval) === "week" ? (plan === null || plan === void 0 ? void 0 : plan.interval_count) * 7 : plan === null || plan === void 0 ? void 0 : plan.interval_count
+      } : {
+        label: (plan === null || plan === void 0 ? void 0 : plan.nickname) || `invoice #${invoice.id}`,
+        amount: updatedPrice / 100
+      }],
+      ...((plan === null || plan === void 0 ? void 0 : plan.auto_renew) && {
+        recurringPaymentRequest: {
+          paymentDescription: "A description of the recurring payment to display to the user in the payment sheet.",
+          regularBilling: {
+            label: (plan === null || plan === void 0 ? void 0 : plan.nickname) || `invoice #${invoice.id}`,
+            amount: updatedPrice / 100,
+            paymentTiming: "recurring",
+            recurringPaymentStartDate: new Date().toISOString(),
+            recurringPaymentIntervalUnit: (plan === null || plan === void 0 ? void 0 : plan.interval) === "week" ? "day" : plan === null || plan === void 0 ? void 0 : plan.interval,
+            recurringPaymentIntervalCount: (plan === null || plan === void 0 ? void 0 : plan.interval) === "week" ? (plan === null || plan === void 0 ? void 0 : plan.interval_count) * 7 : plan === null || plan === void 0 ? void 0 : plan.interval_count
+          },
+          billingAgreement: ApplePayBillingAgreement !== null && ApplePayBillingAgreement !== void 0 ? ApplePayBillingAgreement : "",
+          managementURL: "https://applepaydemo.apple.com",
+          tokenNotificationURL: "https://applepaydemo.apple.com"
+        }
+      })
+    };
+    console.log(ApplePayPaymentRequest);
+    // Create ApplePaySession
+    // @todo - Clarify supported version parameter
+    // @odo - Apple Pay demo uses version 6 (https://applepaydemo.apple.com/)
+    const session = new ApplePaySession(3, ApplePayPaymentRequest);
+
+    // @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;
+      console.log("then merchantSession step", 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
+          console.error("Merchant validation SDK error: ", err);
+          session.abort();
+          return dispatch({
+            type: SHOW_ALERT,
+            payload: {
+              type: "error",
+              content: getErrorMessages(err)
+            }
+          });
+        }
+        // Complete merchant validation with the merchant session object
+        console.log("Merchant validation SDK response: ", res);
+        const merchantSession = res;
+        session.completeMerchantValidation(merchantSession);
+      });
+    };
+    session.onpaymentmethodselected = event => {
+      console.log("payment method selected step", 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) || `invoice #${invoice.id}`,
+        amount: updatedPrice / 100
+      };
+      const newLineItems = [plan !== null && plan !== void 0 && plan.auto_renew ? {
+        label: (plan === null || plan === void 0 ? void 0 : plan.nickname) || `invoice #${invoice.id}`,
+        amount: updatedPrice / 100,
+        paymentTiming: "recurring",
+        recurringPaymentStartDate: new Date().toISOString(),
+        recurringPaymentIntervalUnit: (plan === null || plan === void 0 ? void 0 : plan.interval) === "week" ? "day" : plan === null || plan === void 0 ? void 0 : plan.interval,
+        recurringPaymentIntervalCount: (plan === null || plan === void 0 ? void 0 : plan.interval) === "week" ? (plan === null || plan === void 0 ? void 0 : plan.interval_count) * 7 : plan === null || plan === void 0 ? void 0 : plan.interval_count
+      } : {
+        label: (plan === null || plan === void 0 ? void 0 : plan.nickname) || `invoice #${invoice.id}`,
+        amount: updatedPrice / 100
+      }];
+      session.completePaymentMethodSelection(newTotal, newLineItems);
+    };
+
+    // TODO: Check if onshippingmethodselected it should be implemented
+    // session.onshippingmethodselected = (event) => {
+    //   console.log("on shipping method selected step", event);
+    //   // Define ApplePayShippingMethodUpdate based on the selected shipping method.
+    //   // No updates or errors are needed, pass an empty object.
+    //   const newTotal = {
+    //     label: plan?.nickname || `invoice #${invoice.id}`,
+    //     amount: updatedPrice / 100
+    //   };
+
+    //   const newLineItems = [
+    //     plan?.auto_renew
+    //       ? {
+    //           label: plan?.nickname || `invoice #${invoice.id}`,
+    //           amount: updatedPrice / 100,
+    //           paymentTiming: "recurring",
+    //           recurringPaymentStartDate: new Date().toISOString(),
+    //           recurringPaymentIntervalUnit: plan?.interval,
+    //           recurringPaymentIntervalCount: plan?.interval_count
+    //         }
+    //       : {
+    //           label: plan?.nickname || `invoice #${invoice.id}`,
+    //           amount: updatedPrice / 100
+    //         }
+    //   ];
+
+    //   session.completeShippingMethodSelection(newTotal, newLineItems);
+    // };
+
+    // TODO: Check if onshippingcontactselected it should be implemented
+    // session.onshippingcontactselected = (event) => {
+    //   console.log("on shipping contact selected step", event);
+    //   // Define ApplePayShippingContactUpdate based on the selected shipping contact.
+    //   const update = {};
+    //   session.completeShippingContactSelection(update);
+    // };
+
+    session.onpaymentauthorized = event => {
+      console.log("on payment authorized step", event);
+      // Define ApplePayPaymentAuthorizationResult
+      const result = {
+        status: ApplePaySession.STATUS_SUCCESS
+      };
+      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
+        }
+      };
+      console.log(applePayToken);
+      const orderId = `pelcro-${new Date().getTime()}`;
+      const eProtectRequest = {
+        paypageId: payPageId,
+        reportGroup: reportGroup,
+        orderId: orderId,
+        id: orderId,
+        applepay: applePayToken,
+        url: "https://request.eprotect.vantivprelive.com"
+      };
+
+      // successCallback function to handle the response from WorldPay.
+      function successCallback(vantivResponse) {
+        const {
+          expDate
+        } = vantivResponse;
+        console.log("Response:", vantivResponse);
+        const expMonth = expDate.substring(0, 2);
+        const expYear = expDate.substring(2);
+        const vantivPaymentRequest = {
+          ...vantivResponse,
+          expMonth: expMonth,
+          expYear: expYear
+        };
+
+        // 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.
+      }
+
+      new eProtect().sendToEprotect(eProtectRequest, {}, successCallback, errorCallback, timeoutCallback, 15000);
+    };
+
+    // TODO: Check if oncouponcodechanged it should be implemented
+    // session.oncouponcodechanged = (event) => {
+    //   console.log("on coupon code changed step", 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
+      console.log("on cancel step", event);
+      dispatch({
+        type: LOADING,
+        payload: false
+      });
+      dispatch({
+        type: DISABLE_SUBMIT,
+        payload: false
+      });
+    };
+    session.begin();
+  }
+  useEffect(() => {
+    const pelcroApplyPayButton = document.getElementById("pelcro-apple-pay-button");
+    if (pelcroApplyPayButton) {
+      pelcroApplyPayButton.addEventListener("click", onApplePayButtonClicked);
+    }
+  }, []);
+  return /*#__PURE__*/React__default.createElement("apple-pay-button", {
+    id: "pelcro-apple-pay-button",
+    style: {
+      display: "none"
+    },
+    buttonstyle: "black",
+    type: "plain",
+    locale: "en-US"
+  });
+};
+
 /**
  *
  */
@@ -21200,7 +21541,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(ApplePayButton, null), /*#__PURE__*/React__default.createElement(PaypalSubscribeButton, null)) : null)))));
 }
 
 const SubscriptionRenewView = _ref => {

package/dist/pelcro.css

@@ -1728,6 +1728,14 @@ layer components {
   }
 }
 
+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.26.0-beta.5",
+  "version": "3.26.0-beta.7",
   "license": "MIT",
   "private": false,
   "main": "dist/index.cjs.js",