@pelcro/react-pelcro-js 3.26.0-beta.15 → 3.26.0-beta.17

package/dist/index.cjs.js

@@ -21184,14 +21184,12 @@ 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, _order$, _ref2, _ref3, _ref4, _ref5, _state$updatedPrice, _props$plan;
+  var _window$Pelcro$site$r;
   let {
     onClick,
     props,
@@ -21212,28 +21210,43 @@ const ApplePayButton = _ref => {
     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 getOrderItemsTotal = () => {
+  const getOrderInfo = () => {
     if (!order) {
-      return null;
+      return {
+        price: null,
+        currency: null,
+        label: null
+      };
     }
     const isQuickPurchase = !Array.isArray(order);
     if (isQuickPurchase) {
-      return order.price * order.quantity;
+      return {
+        price: order.price * order.quantity,
+        currency: order.currency,
+        label: order.name
+      };
     }
     if (order.length === 0) {
-      return null;
+      return {
+        price: null,
+        currency: null,
+        label: null
+      };
     }
-    return order.reduce((total, item) => {
-      return total + item.price * item.quantity;
-    }, 0);
+    const price = order.reduce((total, item) => total + item.price * item.quantity, 0);
+    return {
+      price,
+      currency: order[0].currency,
+      label: "Order"
+    };
   };
-  const orderPrice = getOrderItemsTotal();
-  const orderCurrency = !Array.isArray(order) ? order === null || order === void 0 ? void 0 : order.currency : (_order$ = order[0]) === null || _order$ === void 0 ? void 0 : _order$.currency;
-  const orderLabel = !Array.isArray(order) ? order === null || order === void 0 ? void 0 : order.name : "Order";
-  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 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) {
@@ -21249,233 +21262,251 @@ const ApplePayButton = _ref => {
       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()) || orderCurrency.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) || orderLabel || `invoice #${invoice === null || invoice === void 0 ? void 0 : invoice.id}`,
-        type: "final",
-        amount: updatedPrice / 100
+  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;
       }
-    };
-    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)
-            }
-          });
+      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();
         }
-        // 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) || 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);
-    };
+      dispatch({
+        type: DISABLE_SUBMIT,
+        payload: true
+      });
 
-    // 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 || 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) => {
-    //   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
+      // 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
         }
       };
-      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"
+      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); // 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;
+        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) || 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);
       };
 
-      // successCallback function to handle the response from WorldPay.
-      function successCallback(vantivResponse) {
+      // 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 || 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) => {
+      //   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 // eslint-disable-line no-undef
+        };
+
+        const {
+          paymentData
+        } = event.payment.token;
         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
+          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"
         };
 
-        // Process the registrationId or continue with further payment processing.
+        // 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.
+        }
+
+        // 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) => {
+      //   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: HANDLE_APPLEPAY_SUBSCRIPTION,
-          payload: vantivPaymentRequest
+          type: LOADING,
+          payload: false
         });
         dispatch({
-          type: LOADING,
-          payload: true
+          type: DISABLE_SUBMIT,
+          payload: false
         });
-        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(() => {
+      };
+      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: {

package/dist/index.esm.js

@@ -21154,14 +21154,12 @@ 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, _order$, _ref2, _ref3, _ref4, _ref5, _state$updatedPrice, _props$plan;
+  var _window$Pelcro$site$r;
   let {
     onClick,
     props,
@@ -21182,28 +21180,43 @@ const ApplePayButton = _ref => {
     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 getOrderItemsTotal = () => {
+  const getOrderInfo = () => {
     if (!order) {
-      return null;
+      return {
+        price: null,
+        currency: null,
+        label: null
+      };
     }
     const isQuickPurchase = !Array.isArray(order);
     if (isQuickPurchase) {
-      return order.price * order.quantity;
+      return {
+        price: order.price * order.quantity,
+        currency: order.currency,
+        label: order.name
+      };
     }
     if (order.length === 0) {
-      return null;
+      return {
+        price: null,
+        currency: null,
+        label: null
+      };
     }
-    return order.reduce((total, item) => {
-      return total + item.price * item.quantity;
-    }, 0);
+    const price = order.reduce((total, item) => total + item.price * item.quantity, 0);
+    return {
+      price,
+      currency: order[0].currency,
+      label: "Order"
+    };
   };
-  const orderPrice = getOrderItemsTotal();
-  const orderCurrency = !Array.isArray(order) ? order === null || order === void 0 ? void 0 : order.currency : (_order$ = order[0]) === null || _order$ === void 0 ? void 0 : _order$.currency;
-  const orderLabel = !Array.isArray(order) ? order === null || order === void 0 ? void 0 : order.name : "Order";
-  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 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) {
@@ -21219,233 +21232,251 @@ const ApplePayButton = _ref => {
       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()) || orderCurrency.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) || orderLabel || `invoice #${invoice === null || invoice === void 0 ? void 0 : invoice.id}`,
-        type: "final",
-        amount: updatedPrice / 100
+  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;
       }
-    };
-    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)
-            }
-          });
+      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();
         }
-        // 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) || 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);
-    };
+      dispatch({
+        type: DISABLE_SUBMIT,
+        payload: true
+      });
 
-    // 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 || 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) => {
-    //   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
+      // 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
         }
       };
-      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"
+      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); // 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;
+        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) || 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);
       };
 
-      // successCallback function to handle the response from WorldPay.
-      function successCallback(vantivResponse) {
+      // 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 || 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) => {
+      //   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 // eslint-disable-line no-undef
+        };
+
+        const {
+          paymentData
+        } = event.payment.token;
         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
+          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"
         };
 
-        // Process the registrationId or continue with further payment processing.
+        // 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.
+        }
+
+        // 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) => {
+      //   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: HANDLE_APPLEPAY_SUBSCRIPTION,
-          payload: vantivPaymentRequest
+          type: LOADING,
+          payload: false
         });
         dispatch({
-          type: LOADING,
-          payload: true
+          type: DISABLE_SUBMIT,
+          payload: false
         });
-        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(() => {
+      };
+      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: {

package/package.json

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