@pelcro/react-pelcro-js 4.0.0-alpha.117 → 4.0.0-alpha.119

package/dist/index.cjs.js

@@ -14406,7 +14406,7 @@ const RegisterLastName = props => /*#__PURE__*/React__default['default'].createE
  *
  */
 function RegisterView(props) {
-  var _window$Pelcro$site$r, _window$Pelcro$site$r2, _window$Pelcro$site$r3, _window$Pelcro, _window$Pelcro$uiSett;
+  var _window$Pelcro$site$r, _window$Pelcro$site$r2, _window$Pelcro$site$r3, _window$Pelcro, _window$Pelcro$uiSett, _window$Pelcro2, _window$Pelcro2$uiSet;
   const {
     t
   } = useTranslation("register");
@@ -14414,6 +14414,7 @@ function RegisterView(props) {
   const auth0LoginEnabled = (_window$Pelcro$site$r = window.Pelcro.site.read()) === null || _window$Pelcro$site$r === void 0 ? void 0 : _window$Pelcro$site$r.auth0_client_id;
   const socialLoginEnabled = ((_window$Pelcro$site$r2 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r2 === void 0 ? void 0 : _window$Pelcro$site$r2.facebook_app_id) || ((_window$Pelcro$site$r3 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r3 === void 0 ? void 0 : _window$Pelcro$site$r3.google_app_id) || auth0LoginEnabled;
   const showNameFields = (_window$Pelcro = window.Pelcro) === null || _window$Pelcro === void 0 ? void 0 : (_window$Pelcro$uiSett = _window$Pelcro.uiSettings) === null || _window$Pelcro$uiSett === void 0 ? void 0 : _window$Pelcro$uiSett.enableNameFieldsInRegister;
+  const nameFieldsRequired = (_window$Pelcro2 = window.Pelcro) === null || _window$Pelcro2 === void 0 ? void 0 : (_window$Pelcro2$uiSet = _window$Pelcro2.uiSettings) === null || _window$Pelcro2$uiSet === void 0 ? void 0 : _window$Pelcro2$uiSet.requireNameFieldsInRegister;
   return /*#__PURE__*/React__default['default'].createElement("div", {
     id: "pelcro-register-view"
   }, /*#__PURE__*/React__default['default'].createElement("form", {
@@ -14441,11 +14442,15 @@ function RegisterView(props) {
     className: "plc-flex plc-items-start"
   }, /*#__PURE__*/React__default['default'].createElement(RegisterFirstName, {
     id: "pelcro-input-first-name",
-    label: t("labels.firstName")
+    label: `${t("labels.firstName")}${nameFieldsRequired ? " *" : ""}`,
+    errorId: "pelcro-input-firstName-error",
+    required: nameFieldsRequired
   }), /*#__PURE__*/React__default['default'].createElement(RegisterLastName, {
     wrapperClassName: "plc-ml-3",
     id: "pelcro-input-last-name",
-    label: t("labels.lastName")
+    label: `${t("labels.lastName")}${nameFieldsRequired ? " *" : ""}`,
+    errorId: "pelcro-input-lastName-error",
+    required: nameFieldsRequired
   })), /*#__PURE__*/React__default['default'].createElement(RegisterEmail, {
     id: "pelcro-input-email",
     errorId: "pelcro-input-email-error",
@@ -46423,7 +46428,10 @@ axios.formToJSON = thing => formDataToJSON(utils.isHTMLForm(thing) ? new FormDat
 
 axios.default = axios;
 
-const OrderCreateView = props => {
+const OrderCreateView = ({
+  showExternalPaymentMethods = false,
+  ...props
+}) => {
   var _window$Pelcro, _window$Pelcro$uiSett, _window$Pelcro$user$r, _window, _window$Pelcro2, _window$Pelcro2$user, _window$Pelcro$user$r2, _window2, _window2$Pelcro, _window2$Pelcro$user, _addresses$find, _addresses$find2;
   const {
     t
@@ -46512,7 +46520,7 @@ const OrderCreateView = props => {
   }, address === null || address === void 0 ? void 0 : address.phone))), /*#__PURE__*/React__default['default'].createElement(PaymentMethodView, Object.assign({
     type: "orderCreate",
     showCoupon: true,
-    showExternalPaymentMethods: false,
+    showExternalPaymentMethods: showExternalPaymentMethods,
     showApplePayButton: true,
     showOrderButton: showOrderButton,
     order: order,
@@ -49281,57 +49289,306 @@ function YearSelect({
   }, placeholder), createYearsItems);
 }
 
-const PelcroPaymentRequestButton = props => {
+const PelcroPaymentRequestButton = ({
+  type,
+  onSuccess,
+  onFailure,
+  ...props
+}) => {
+  const stripe = useStripe();
+  const [isInitializing, setIsInitializing] = React.useState(true);
+  const [localPaymentRequest, setLocalPaymentRequest] = React.useState(null);
   const {
-    state: {
-      canMakePayment,
-      paymentRequest,
-      currentPlan,
-      updatedPrice
-    }
+    state,
+    dispatch
   } = React.useContext(store$m);
-  const updatePaymentRequest = () => {
-    // Make sure payment request is up to date, eg. user added a coupon code.
-    paymentRequest === null || paymentRequest === void 0 ? void 0 : paymentRequest.update({
-      total: {
-        label: (currentPlan === null || currentPlan === void 0 ? void 0 : currentPlan.nickname) || (currentPlan === null || currentPlan === void 0 ? void 0 : currentPlan.description),
-        amount: updatedPrice !== null && updatedPrice !== void 0 ? updatedPrice : currentPlan === null || currentPlan === void 0 ? void 0 : currentPlan.amount
+  const {
+    canMakePayment,
+    currentPlan,
+    updatedPrice
+  } = state;
+  const {
+    order,
+    set,
+    selectedPaymentMethodId
+  } = usePelcro();
+  const getOrderInfo = () => {
+    if (!order) {
+      return {
+        price: null,
+        currency: null,
+        label: null
+      };
+    }
+    const isQuickPurchase = !Array.isArray(order);
+    if (isQuickPurchase) {
+      return {
+        price: order.price * order.quantity,
+        currency: order.currency,
+        label: order.name
+      };
+    }
+    if (order.length === 0) {
+      return {
+        price: null,
+        currency: null,
+        label: null
+      };
+    }
+    const price = order.reduce((total, item) => total + item.price * item.quantity, 0);
+    return {
+      price,
+      currency: order[0].currency,
+      label: "Order"
+    };
+  };
+  const orderPrice = getOrderInfo().price;
+  const orderCurrency = getOrderInfo().currency;
+  const orderLabel = getOrderInfo().label;
+  const purchase = (gatewayService, gatewayToken, state, dispatch) => {
+    const isQuickPurchase = !Array.isArray(order);
+    const mappedOrderItems = isQuickPurchase ? [{
+      sku_id: order.id,
+      quantity: order.quantity
+    }] : order.map(item => ({
+      sku_id: item.id,
+      quantity: item.quantity
+    }));
+    const {
+      couponCode
+    } = state;
+    const payment = new Payment(gatewayService);
+    payment.execute({
+      type: PAYMENT_TYPES.PURCHASE_ECOMMERCE_ORDER,
+      token: gatewayToken,
+      isExistingSource: Boolean(selectedPaymentMethodId),
+      items: mappedOrderItems,
+      addressId: state.selectedAddressId,
+      couponCode
+    }, (err, orderResponse) => {
+      var _window$Pelcro, _window$Pelcro$user, _window$Pelcro$user$r;
+      if (err) {
+        toggleAuthenticationSuccessPendingView(false);
+        dispatch({
+          type: DISABLE_SUBMIT,
+          payload: false
+        });
+        dispatch({
+          type: LOADING,
+          payload: false
+        });
+        onFailure === null || onFailure === void 0 ? void 0 : onFailure(err);
+        return dispatch({
+          type: SHOW_ALERT,
+          payload: {
+            type: "error",
+            content: getErrorMessages(err)
+          }
+        });
       }
+      if (isQuickPurchase) {
+        set({
+          order: null
+        });
+      } else {
+        set({
+          order: null,
+          cartItems: []
+        });
+      }
+      window.Pelcro.user.refresh({
+        auth_token: (_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$r = _window$Pelcro$user.read()) === null || _window$Pelcro$user$r === void 0 ? void 0 : _window$Pelcro$user$r.auth_token
+      }, (err, res) => {
+        dispatch({
+          type: DISABLE_SUBMIT,
+          payload: false
+        });
+        dispatch({
+          type: LOADING,
+          payload: false
+        });
+        toggleAuthenticationSuccessPendingView(false);
+        if (err) {
+          onFailure === null || onFailure === void 0 ? void 0 : onFailure(err);
+          return dispatch({
+            type: SHOW_ALERT,
+            payload: {
+              type: "error",
+              content: getErrorMessages(err)
+            }
+          });
+        }
+        onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess(orderResponse);
+      });
     });
   };
-  if (canMakePayment) {
-    return /*#__PURE__*/React__default['default'].createElement(PaymentRequestButtonElement, Object.assign({
-      className: "StripeElement stripe-payment-request-btn",
-      onClick: updatePaymentRequest,
-      paymentRequest: paymentRequest,
+  React.useEffect(() => {
+    if (!stripe) {
+      setIsInitializing(false);
+      return;
+    }
+    let mounted = true;
+    const initializePaymentRequest = async () => {
+      try {
+        var _ref;
+        const pr = stripe.paymentRequest({
+          country: window.Pelcro.user.location.countryCode || "US",
+          currency: ((currentPlan === null || currentPlan === void 0 ? void 0 : currentPlan.currency) || orderCurrency).toLowerCase(),
+          total: {
+            label: (currentPlan === null || currentPlan === void 0 ? void 0 : currentPlan.nickname) || (currentPlan === null || currentPlan === void 0 ? void 0 : currentPlan.description) || orderLabel || "Payment",
+            amount: (_ref = updatedPrice !== null && updatedPrice !== void 0 ? updatedPrice : currentPlan === null || currentPlan === void 0 ? void 0 : currentPlan.amount) !== null && _ref !== void 0 ? _ref : orderPrice,
+            pending: false
+          },
+          requestPayerEmail: false,
+          requestPayerName: false,
+          requestShipping: false
+        });
+        pr.on("source", async event => {
+          try {
+            var _event$source, _event$source$card;
+            dispatch({
+              type: DISABLE_COUPON_BUTTON,
+              payload: true
+            });
+            dispatch({
+              type: DISABLE_SUBMIT,
+              payload: true
+            });
+            dispatch({
+              type: LOADING,
+              payload: true
+            });
+            event.complete("success");
+            if (((_event$source = event.source) === null || _event$source === void 0 ? void 0 : (_event$source$card = _event$source.card) === null || _event$source$card === void 0 ? void 0 : _event$source$card.three_d_secure) === "required") {
+              return generate3DSecureSource(event.source).then(({
+                source,
+                error
+              }) => {
+                if (error) {
+                  return handlePaymentError(error);
+                }
+                toggleAuthenticationPendingView(true, source);
+              });
+            }
+
+            // Handle different payment types
+            if (type === "orderCreate") {
+              purchase(new StripeGateway(), event.source.id, state, dispatch);
+            } else {
+              dispatch({
+                type: SUBSCRIBE,
+                payload: {
+                  id: event.source.id,
+                  isExistingSource: false
+                }
+              });
+            }
+          } catch (error) {
+            dispatch({
+              type: SHOW_ALERT,
+              payload: {
+                type: "error",
+                content: error.message || "Payment failed. Please try again."
+              }
+            });
+            event.complete("fail");
+            dispatch({
+              type: DISABLE_COUPON_BUTTON,
+              payload: false
+            });
+            dispatch({
+              type: DISABLE_SUBMIT,
+              payload: false
+            });
+            dispatch({
+              type: LOADING,
+              payload: false
+            });
+          }
+        });
+        pr.on("cancel", () => {
+          dispatch({
+            type: DISABLE_COUPON_BUTTON,
+            payload: false
+          });
+          dispatch({
+            type: DISABLE_SUBMIT,
+            payload: false
+          });
+          dispatch({
+            type: LOADING,
+            payload: false
+          });
+        });
+        const result = await pr.canMakePayment();
+        if (mounted && result) {
+          setLocalPaymentRequest(pr);
+          dispatch({
+            type: SET_PAYMENT_REQUEST,
+            payload: pr
+          });
+          dispatch({
+            type: SET_CAN_MAKE_PAYMENT,
+            payload: true
+          });
+        } else if (mounted) {
+          dispatch({
+            type: SET_CAN_MAKE_PAYMENT,
+            payload: false
+          });
+        }
+      } catch (error) {
+        if (mounted) {
+          dispatch({
+            type: SET_CAN_MAKE_PAYMENT,
+            payload: false
+          });
+        }
+      } finally {
+        if (mounted) {
+          setIsInitializing(false);
+        }
+      }
+    };
+    initializePaymentRequest();
+    return () => {
+      mounted = false;
+    };
+  }, [stripe, currentPlan, updatedPrice, dispatch, order, type]);
+  if (isInitializing || !canMakePayment || !localPaymentRequest) {
+    return null;
+  }
+  return /*#__PURE__*/React__default['default'].createElement(PaymentRequestButtonElement, Object.assign({
+    className: "StripeElement stripe-payment-request-btn",
+    options: {
+      paymentRequest: localPaymentRequest,
       style: {
         paymentRequestButton: {
           theme: "dark",
-          height: "40px"
+          height: "40px",
+          buttonType: "plain"
         }
       }
-    }, props));
-  }
-  return null;
+    }
+  }, props));
 };
 const CheckoutForm = ({
   type
 }) => {
-  var _window, _window$Pelcro, _window$Pelcro$user, _window$Pelcro$user$r, _window2, _window2$Pelcro, _window2$Pelcro$user, _window2$Pelcro$user$, _window3, _window3$Pelcro, _window3$Pelcro$user, _window3$Pelcro$user$;
+  var _window, _window$Pelcro2, _window$Pelcro2$user, _window$Pelcro2$user$, _window2, _window2$Pelcro, _window2$Pelcro$user, _window2$Pelcro$user$, _window3, _window3$Pelcro, _window3$Pelcro$user, _window3$Pelcro$user$;
   const {
     selectedPaymentMethodId,
     paymentMethodToEdit
   } = usePelcro();
   const cardProcessor = getSiteCardProcessor();
   const billingDetails = {
-    name: (_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$r = _window$Pelcro$user.read()) === null || _window$Pelcro$user$r === void 0 ? void 0 : _window$Pelcro$user$r.name,
+    name: (_window = window) === null || _window === void 0 ? void 0 : (_window$Pelcro2 = _window.Pelcro) === null || _window$Pelcro2 === void 0 ? void 0 : (_window$Pelcro2$user = _window$Pelcro2.user) === null || _window$Pelcro2$user === void 0 ? void 0 : (_window$Pelcro2$user$ = _window$Pelcro2$user.read()) === null || _window$Pelcro2$user$ === void 0 ? void 0 : _window$Pelcro2$user$.name,
     email: (_window2 = window) === null || _window2 === void 0 ? void 0 : (_window2$Pelcro = _window2.Pelcro) === null || _window2$Pelcro === void 0 ? void 0 : (_window2$Pelcro$user = _window2$Pelcro.user) === null || _window2$Pelcro$user === void 0 ? void 0 : (_window2$Pelcro$user$ = _window2$Pelcro$user.read()) === null || _window2$Pelcro$user$ === void 0 ? void 0 : _window2$Pelcro$user$.email,
     phone: (_window3 = window) === null || _window3 === void 0 ? void 0 : (_window3$Pelcro = _window3.Pelcro) === null || _window3$Pelcro === void 0 ? void 0 : (_window3$Pelcro$user = _window3$Pelcro.user) === null || _window3$Pelcro$user === void 0 ? void 0 : (_window3$Pelcro$user$ = _window3$Pelcro$user.read()) === null || _window3$Pelcro$user$ === void 0 ? void 0 : _window3$Pelcro$user$.phone
   };
   const paymentElementOptions = {
     layout: {
       type: "tabs",
-      // or accordion
       defaultCollapsed: false
     },
     defaultValues: {
@@ -49345,11 +49602,8 @@ const CheckoutForm = ({
         address: "never"
       }
     },
-    terms: {
-      applePay: "never",
-      card: "never",
-      googlePay: "never",
-      paypal: "never"
+    wallets: {
+      applePay: "never"
     }
   };
   if (selectedPaymentMethodId) {
@@ -50722,7 +50976,11 @@ function PaymentMethodView({
     className: "plc-grid plc-mt-4 plc-gap-y-2"
   }, /*#__PURE__*/React__default['default'].createElement(SubmitPaymentMethod, {
     isSubmitDisabled: isSubmitDisabled
-  }), showExternalPaymentMethods && !supportsVantiv && !supportsCybersource && !supportsTap ? /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(PelcroPaymentRequestButton, null), /*#__PURE__*/React__default['default'].createElement(PaypalSubscribeButton, null)) : showExternalPaymentMethods && supportsVantiv ? /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(PaypalSubscribeButton, null)) : null, showApplePayButton && supportsVantiv ? /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(ApplePayButton, null)) : null)))));
+  }), showExternalPaymentMethods && !supportsVantiv && !supportsCybersource && !supportsTap ? /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(PelcroPaymentRequestButton, {
+    type: type,
+    onSuccess: onSuccess,
+    onFailure: onFailure
+  }), /*#__PURE__*/React__default['default'].createElement(PaypalSubscribeButton, null)) : showExternalPaymentMethods && supportsVantiv ? /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(PaypalSubscribeButton, null)) : null, showApplePayButton && supportsVantiv ? /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(ApplePayButton, null)) : null)))));
 }
 
 const SubscriptionRenewView = ({
@@ -56565,6 +56823,7 @@ const OrderCreateContainer = props => /*#__PURE__*/React__default['default'].cre
 const OrderCreateModal = ({
   onDisplay,
   onClose,
+  showExternalPaymentMethods = false,
   ...otherProps
 }) => {
   const {
@@ -56618,7 +56877,8 @@ const OrderCreateModal = ({
   }, /*#__PURE__*/React__default['default'].createElement(SvgArrowLeft, null)), /*#__PURE__*/React__default['default'].createElement("h4", {
     className: "plc-text-xl plc-font-bold plc-text-center"
   }, t("labels.checkout.title")))), /*#__PURE__*/React__default['default'].createElement(ModalBody, null, /*#__PURE__*/React__default['default'].createElement(OrderCreateView, Object.assign({}, otherProps, {
-    onSuccess: onSuccess
+    onSuccess: onSuccess,
+    showExternalPaymentMethods: showExternalPaymentMethods
   }))), /*#__PURE__*/React__default['default'].createElement(ModalFooter, null));
 };
 OrderCreateModal.viewId = "order-create";

package/dist/index.esm.js

@@ -14364,7 +14364,7 @@ const RegisterLastName = props => /*#__PURE__*/React__default.createElement(Last
  *
  */
 function RegisterView(props) {
-  var _window$Pelcro$site$r, _window$Pelcro$site$r2, _window$Pelcro$site$r3, _window$Pelcro, _window$Pelcro$uiSett;
+  var _window$Pelcro$site$r, _window$Pelcro$site$r2, _window$Pelcro$site$r3, _window$Pelcro, _window$Pelcro$uiSett, _window$Pelcro2, _window$Pelcro2$uiSet;
   const {
     t
   } = useTranslation("register");
@@ -14372,6 +14372,7 @@ function RegisterView(props) {
   const auth0LoginEnabled = (_window$Pelcro$site$r = window.Pelcro.site.read()) === null || _window$Pelcro$site$r === void 0 ? void 0 : _window$Pelcro$site$r.auth0_client_id;
   const socialLoginEnabled = ((_window$Pelcro$site$r2 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r2 === void 0 ? void 0 : _window$Pelcro$site$r2.facebook_app_id) || ((_window$Pelcro$site$r3 = window.Pelcro.site.read()) === null || _window$Pelcro$site$r3 === void 0 ? void 0 : _window$Pelcro$site$r3.google_app_id) || auth0LoginEnabled;
   const showNameFields = (_window$Pelcro = window.Pelcro) === null || _window$Pelcro === void 0 ? void 0 : (_window$Pelcro$uiSett = _window$Pelcro.uiSettings) === null || _window$Pelcro$uiSett === void 0 ? void 0 : _window$Pelcro$uiSett.enableNameFieldsInRegister;
+  const nameFieldsRequired = (_window$Pelcro2 = window.Pelcro) === null || _window$Pelcro2 === void 0 ? void 0 : (_window$Pelcro2$uiSet = _window$Pelcro2.uiSettings) === null || _window$Pelcro2$uiSet === void 0 ? void 0 : _window$Pelcro2$uiSet.requireNameFieldsInRegister;
   return /*#__PURE__*/React__default.createElement("div", {
     id: "pelcro-register-view"
   }, /*#__PURE__*/React__default.createElement("form", {
@@ -14399,11 +14400,15 @@ function RegisterView(props) {
     className: "plc-flex plc-items-start"
   }, /*#__PURE__*/React__default.createElement(RegisterFirstName, {
     id: "pelcro-input-first-name",
-    label: t("labels.firstName")
+    label: `${t("labels.firstName")}${nameFieldsRequired ? " *" : ""}`,
+    errorId: "pelcro-input-firstName-error",
+    required: nameFieldsRequired
   }), /*#__PURE__*/React__default.createElement(RegisterLastName, {
     wrapperClassName: "plc-ml-3",
     id: "pelcro-input-last-name",
-    label: t("labels.lastName")
+    label: `${t("labels.lastName")}${nameFieldsRequired ? " *" : ""}`,
+    errorId: "pelcro-input-lastName-error",
+    required: nameFieldsRequired
   })), /*#__PURE__*/React__default.createElement(RegisterEmail, {
     id: "pelcro-input-email",
     errorId: "pelcro-input-email-error",
@@ -46381,7 +46386,10 @@ axios.formToJSON = thing => formDataToJSON(utils.isHTMLForm(thing) ? new FormDat
 
 axios.default = axios;
 
-const OrderCreateView = props => {
+const OrderCreateView = ({
+  showExternalPaymentMethods = false,
+  ...props
+}) => {
   var _window$Pelcro, _window$Pelcro$uiSett, _window$Pelcro$user$r, _window, _window$Pelcro2, _window$Pelcro2$user, _window$Pelcro$user$r2, _window2, _window2$Pelcro, _window2$Pelcro$user, _addresses$find, _addresses$find2;
   const {
     t
@@ -46470,7 +46478,7 @@ const OrderCreateView = props => {
   }, address === null || address === void 0 ? void 0 : address.phone))), /*#__PURE__*/React__default.createElement(PaymentMethodView, Object.assign({
     type: "orderCreate",
     showCoupon: true,
-    showExternalPaymentMethods: false,
+    showExternalPaymentMethods: showExternalPaymentMethods,
     showApplePayButton: true,
     showOrderButton: showOrderButton,
     order: order,
@@ -49239,57 +49247,306 @@ function YearSelect({
   }, placeholder), createYearsItems);
 }
 
-const PelcroPaymentRequestButton = props => {
+const PelcroPaymentRequestButton = ({
+  type,
+  onSuccess,
+  onFailure,
+  ...props
+}) => {
+  const stripe = useStripe();
+  const [isInitializing, setIsInitializing] = useState(true);
+  const [localPaymentRequest, setLocalPaymentRequest] = useState(null);
   const {
-    state: {
-      canMakePayment,
-      paymentRequest,
-      currentPlan,
-      updatedPrice
-    }
+    state,
+    dispatch
   } = useContext(store$m);
-  const updatePaymentRequest = () => {
-    // Make sure payment request is up to date, eg. user added a coupon code.
-    paymentRequest === null || paymentRequest === void 0 ? void 0 : paymentRequest.update({
-      total: {
-        label: (currentPlan === null || currentPlan === void 0 ? void 0 : currentPlan.nickname) || (currentPlan === null || currentPlan === void 0 ? void 0 : currentPlan.description),
-        amount: updatedPrice !== null && updatedPrice !== void 0 ? updatedPrice : currentPlan === null || currentPlan === void 0 ? void 0 : currentPlan.amount
+  const {
+    canMakePayment,
+    currentPlan,
+    updatedPrice
+  } = state;
+  const {
+    order,
+    set,
+    selectedPaymentMethodId
+  } = usePelcro();
+  const getOrderInfo = () => {
+    if (!order) {
+      return {
+        price: null,
+        currency: null,
+        label: null
+      };
+    }
+    const isQuickPurchase = !Array.isArray(order);
+    if (isQuickPurchase) {
+      return {
+        price: order.price * order.quantity,
+        currency: order.currency,
+        label: order.name
+      };
+    }
+    if (order.length === 0) {
+      return {
+        price: null,
+        currency: null,
+        label: null
+      };
+    }
+    const price = order.reduce((total, item) => total + item.price * item.quantity, 0);
+    return {
+      price,
+      currency: order[0].currency,
+      label: "Order"
+    };
+  };
+  const orderPrice = getOrderInfo().price;
+  const orderCurrency = getOrderInfo().currency;
+  const orderLabel = getOrderInfo().label;
+  const purchase = (gatewayService, gatewayToken, state, dispatch) => {
+    const isQuickPurchase = !Array.isArray(order);
+    const mappedOrderItems = isQuickPurchase ? [{
+      sku_id: order.id,
+      quantity: order.quantity
+    }] : order.map(item => ({
+      sku_id: item.id,
+      quantity: item.quantity
+    }));
+    const {
+      couponCode
+    } = state;
+    const payment = new Payment(gatewayService);
+    payment.execute({
+      type: PAYMENT_TYPES.PURCHASE_ECOMMERCE_ORDER,
+      token: gatewayToken,
+      isExistingSource: Boolean(selectedPaymentMethodId),
+      items: mappedOrderItems,
+      addressId: state.selectedAddressId,
+      couponCode
+    }, (err, orderResponse) => {
+      var _window$Pelcro, _window$Pelcro$user, _window$Pelcro$user$r;
+      if (err) {
+        toggleAuthenticationSuccessPendingView(false);
+        dispatch({
+          type: DISABLE_SUBMIT,
+          payload: false
+        });
+        dispatch({
+          type: LOADING,
+          payload: false
+        });
+        onFailure === null || onFailure === void 0 ? void 0 : onFailure(err);
+        return dispatch({
+          type: SHOW_ALERT,
+          payload: {
+            type: "error",
+            content: getErrorMessages(err)
+          }
+        });
       }
+      if (isQuickPurchase) {
+        set({
+          order: null
+        });
+      } else {
+        set({
+          order: null,
+          cartItems: []
+        });
+      }
+      window.Pelcro.user.refresh({
+        auth_token: (_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$r = _window$Pelcro$user.read()) === null || _window$Pelcro$user$r === void 0 ? void 0 : _window$Pelcro$user$r.auth_token
+      }, (err, res) => {
+        dispatch({
+          type: DISABLE_SUBMIT,
+          payload: false
+        });
+        dispatch({
+          type: LOADING,
+          payload: false
+        });
+        toggleAuthenticationSuccessPendingView(false);
+        if (err) {
+          onFailure === null || onFailure === void 0 ? void 0 : onFailure(err);
+          return dispatch({
+            type: SHOW_ALERT,
+            payload: {
+              type: "error",
+              content: getErrorMessages(err)
+            }
+          });
+        }
+        onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess(orderResponse);
+      });
     });
   };
-  if (canMakePayment) {
-    return /*#__PURE__*/React__default.createElement(PaymentRequestButtonElement, Object.assign({
-      className: "StripeElement stripe-payment-request-btn",
-      onClick: updatePaymentRequest,
-      paymentRequest: paymentRequest,
+  useEffect(() => {
+    if (!stripe) {
+      setIsInitializing(false);
+      return;
+    }
+    let mounted = true;
+    const initializePaymentRequest = async () => {
+      try {
+        var _ref;
+        const pr = stripe.paymentRequest({
+          country: window.Pelcro.user.location.countryCode || "US",
+          currency: ((currentPlan === null || currentPlan === void 0 ? void 0 : currentPlan.currency) || orderCurrency).toLowerCase(),
+          total: {
+            label: (currentPlan === null || currentPlan === void 0 ? void 0 : currentPlan.nickname) || (currentPlan === null || currentPlan === void 0 ? void 0 : currentPlan.description) || orderLabel || "Payment",
+            amount: (_ref = updatedPrice !== null && updatedPrice !== void 0 ? updatedPrice : currentPlan === null || currentPlan === void 0 ? void 0 : currentPlan.amount) !== null && _ref !== void 0 ? _ref : orderPrice,
+            pending: false
+          },
+          requestPayerEmail: false,
+          requestPayerName: false,
+          requestShipping: false
+        });
+        pr.on("source", async event => {
+          try {
+            var _event$source, _event$source$card;
+            dispatch({
+              type: DISABLE_COUPON_BUTTON,
+              payload: true
+            });
+            dispatch({
+              type: DISABLE_SUBMIT,
+              payload: true
+            });
+            dispatch({
+              type: LOADING,
+              payload: true
+            });
+            event.complete("success");
+            if (((_event$source = event.source) === null || _event$source === void 0 ? void 0 : (_event$source$card = _event$source.card) === null || _event$source$card === void 0 ? void 0 : _event$source$card.three_d_secure) === "required") {
+              return generate3DSecureSource(event.source).then(({
+                source,
+                error
+              }) => {
+                if (error) {
+                  return handlePaymentError(error);
+                }
+                toggleAuthenticationPendingView(true, source);
+              });
+            }
+
+            // Handle different payment types
+            if (type === "orderCreate") {
+              purchase(new StripeGateway(), event.source.id, state, dispatch);
+            } else {
+              dispatch({
+                type: SUBSCRIBE,
+                payload: {
+                  id: event.source.id,
+                  isExistingSource: false
+                }
+              });
+            }
+          } catch (error) {
+            dispatch({
+              type: SHOW_ALERT,
+              payload: {
+                type: "error",
+                content: error.message || "Payment failed. Please try again."
+              }
+            });
+            event.complete("fail");
+            dispatch({
+              type: DISABLE_COUPON_BUTTON,
+              payload: false
+            });
+            dispatch({
+              type: DISABLE_SUBMIT,
+              payload: false
+            });
+            dispatch({
+              type: LOADING,
+              payload: false
+            });
+          }
+        });
+        pr.on("cancel", () => {
+          dispatch({
+            type: DISABLE_COUPON_BUTTON,
+            payload: false
+          });
+          dispatch({
+            type: DISABLE_SUBMIT,
+            payload: false
+          });
+          dispatch({
+            type: LOADING,
+            payload: false
+          });
+        });
+        const result = await pr.canMakePayment();
+        if (mounted && result) {
+          setLocalPaymentRequest(pr);
+          dispatch({
+            type: SET_PAYMENT_REQUEST,
+            payload: pr
+          });
+          dispatch({
+            type: SET_CAN_MAKE_PAYMENT,
+            payload: true
+          });
+        } else if (mounted) {
+          dispatch({
+            type: SET_CAN_MAKE_PAYMENT,
+            payload: false
+          });
+        }
+      } catch (error) {
+        if (mounted) {
+          dispatch({
+            type: SET_CAN_MAKE_PAYMENT,
+            payload: false
+          });
+        }
+      } finally {
+        if (mounted) {
+          setIsInitializing(false);
+        }
+      }
+    };
+    initializePaymentRequest();
+    return () => {
+      mounted = false;
+    };
+  }, [stripe, currentPlan, updatedPrice, dispatch, order, type]);
+  if (isInitializing || !canMakePayment || !localPaymentRequest) {
+    return null;
+  }
+  return /*#__PURE__*/React__default.createElement(PaymentRequestButtonElement, Object.assign({
+    className: "StripeElement stripe-payment-request-btn",
+    options: {
+      paymentRequest: localPaymentRequest,
       style: {
         paymentRequestButton: {
           theme: "dark",
-          height: "40px"
+          height: "40px",
+          buttonType: "plain"
         }
       }
-    }, props));
-  }
-  return null;
+    }
+  }, props));
 };
 const CheckoutForm = ({
   type
 }) => {
-  var _window, _window$Pelcro, _window$Pelcro$user, _window$Pelcro$user$r, _window2, _window2$Pelcro, _window2$Pelcro$user, _window2$Pelcro$user$, _window3, _window3$Pelcro, _window3$Pelcro$user, _window3$Pelcro$user$;
+  var _window, _window$Pelcro2, _window$Pelcro2$user, _window$Pelcro2$user$, _window2, _window2$Pelcro, _window2$Pelcro$user, _window2$Pelcro$user$, _window3, _window3$Pelcro, _window3$Pelcro$user, _window3$Pelcro$user$;
   const {
     selectedPaymentMethodId,
     paymentMethodToEdit
   } = usePelcro();
   const cardProcessor = getSiteCardProcessor();
   const billingDetails = {
-    name: (_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$r = _window$Pelcro$user.read()) === null || _window$Pelcro$user$r === void 0 ? void 0 : _window$Pelcro$user$r.name,
+    name: (_window = window) === null || _window === void 0 ? void 0 : (_window$Pelcro2 = _window.Pelcro) === null || _window$Pelcro2 === void 0 ? void 0 : (_window$Pelcro2$user = _window$Pelcro2.user) === null || _window$Pelcro2$user === void 0 ? void 0 : (_window$Pelcro2$user$ = _window$Pelcro2$user.read()) === null || _window$Pelcro2$user$ === void 0 ? void 0 : _window$Pelcro2$user$.name,
     email: (_window2 = window) === null || _window2 === void 0 ? void 0 : (_window2$Pelcro = _window2.Pelcro) === null || _window2$Pelcro === void 0 ? void 0 : (_window2$Pelcro$user = _window2$Pelcro.user) === null || _window2$Pelcro$user === void 0 ? void 0 : (_window2$Pelcro$user$ = _window2$Pelcro$user.read()) === null || _window2$Pelcro$user$ === void 0 ? void 0 : _window2$Pelcro$user$.email,
     phone: (_window3 = window) === null || _window3 === void 0 ? void 0 : (_window3$Pelcro = _window3.Pelcro) === null || _window3$Pelcro === void 0 ? void 0 : (_window3$Pelcro$user = _window3$Pelcro.user) === null || _window3$Pelcro$user === void 0 ? void 0 : (_window3$Pelcro$user$ = _window3$Pelcro$user.read()) === null || _window3$Pelcro$user$ === void 0 ? void 0 : _window3$Pelcro$user$.phone
   };
   const paymentElementOptions = {
     layout: {
       type: "tabs",
-      // or accordion
       defaultCollapsed: false
     },
     defaultValues: {
@@ -49303,11 +49560,8 @@ const CheckoutForm = ({
         address: "never"
       }
     },
-    terms: {
-      applePay: "never",
-      card: "never",
-      googlePay: "never",
-      paypal: "never"
+    wallets: {
+      applePay: "never"
     }
   };
   if (selectedPaymentMethodId) {
@@ -50680,7 +50934,11 @@ function PaymentMethodView({
     className: "plc-grid plc-mt-4 plc-gap-y-2"
   }, /*#__PURE__*/React__default.createElement(SubmitPaymentMethod, {
     isSubmitDisabled: isSubmitDisabled
-  }), showExternalPaymentMethods && !supportsVantiv && !supportsCybersource && !supportsTap ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(PelcroPaymentRequestButton, null), /*#__PURE__*/React__default.createElement(PaypalSubscribeButton, null)) : showExternalPaymentMethods && supportsVantiv ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(PaypalSubscribeButton, null)) : null, showApplePayButton && supportsVantiv ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ApplePayButton, null)) : null)))));
+  }), showExternalPaymentMethods && !supportsVantiv && !supportsCybersource && !supportsTap ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(PelcroPaymentRequestButton, {
+    type: type,
+    onSuccess: onSuccess,
+    onFailure: onFailure
+  }), /*#__PURE__*/React__default.createElement(PaypalSubscribeButton, null)) : showExternalPaymentMethods && supportsVantiv ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(PaypalSubscribeButton, null)) : null, showApplePayButton && supportsVantiv ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ApplePayButton, null)) : null)))));
 }
 
 const SubscriptionRenewView = ({
@@ -56523,6 +56781,7 @@ const OrderCreateContainer = props => /*#__PURE__*/React__default.createElement(
 const OrderCreateModal = ({
   onDisplay,
   onClose,
+  showExternalPaymentMethods = false,
   ...otherProps
 }) => {
   const {
@@ -56576,7 +56835,8 @@ const OrderCreateModal = ({
   }, /*#__PURE__*/React__default.createElement(SvgArrowLeft, null)), /*#__PURE__*/React__default.createElement("h4", {
     className: "plc-text-xl plc-font-bold plc-text-center"
   }, t("labels.checkout.title")))), /*#__PURE__*/React__default.createElement(ModalBody, null, /*#__PURE__*/React__default.createElement(OrderCreateView, Object.assign({}, otherProps, {
-    onSuccess: onSuccess
+    onSuccess: onSuccess,
+    showExternalPaymentMethods: showExternalPaymentMethods
   }))), /*#__PURE__*/React__default.createElement(ModalFooter, null));
 };
 OrderCreateModal.viewId = "order-create";

package/package.json

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