@flopay/react 0.3.19 → 0.4.0

package/dist/index.d.cts

@@ -8,6 +8,12 @@ export { BeforeButtonClickEvent, CheckoutButtonMethod, DeclineEvent, InlineSessi
 interface FloPayProviderProps {
     /** A `FloPay` instance or a promise that resolves to one (from `loadFloPay()`). */
     flopay: Promise<FloPay> | FloPay;
+    /**
+     * Optional dedicated `FloPay` instance for PayPal, loaded with
+     * `gatewayData.paypalPublishableKey`. When omitted or `null`, PayPal is
+     * disabled (the button is not rendered).
+     */
+    paypalFlopay?: Promise<FloPay> | FloPay | null;
     /** Optional configuration applied when creating the elements group. */
     options?: {
         locale?: string;
@@ -35,7 +41,7 @@ interface FloPayProviderProps {
  * </FloPayProvider>
  * ```
  */
-declare function FloPayProvider({ flopay: floPayProp, options, children, }: FloPayProviderProps): React.ReactElement;
+declare function FloPayProvider({ flopay: floPayProp, paypalFlopay: paypalFloPayProp, options, children, }: FloPayProviderProps): React.ReactElement;
 
 /** Props for the all-in-one `FloPayCheckout` wrapper. */
 interface FloPayCheckoutProps {
@@ -167,6 +173,14 @@ declare function FloPayCheckout({ sessionId: sessionIdProp, createSession: creat
  * Must be called within a `<FloPayProvider>`.
  */
 declare function useFloPay(): FloPay | null;
+/**
+ * Returns the dedicated PayPal `FloPay` instance (loaded with
+ * `gatewayData.paypalPublishableKey`), or `null` if PayPal is disabled
+ * for this session.
+ *
+ * Must be called within a `<FloPayProvider>`.
+ */
+declare function usePayPalFloPay(): FloPay | null;
 /**
  * Returns the current `FloPayElements` instance, or `null` if the
  * provider is still loading.
@@ -507,4 +521,4 @@ interface PayPalButtonProps {
  */
 declare function PayPalButton({ sessionId, billingApiUrl, email, userId, firstName, lastName, chv, onTokenizedBody, onComplete, onErrorChange, isProcessing, }: PayPalButtonProps): React.ReactElement;
 
-export { AddressElement, CardCvcElement, CardElement, CardExpiryElement, CardNumberElement, CheckoutForm, type CheckoutFormProps, type CheckoutFormRef, type CheckoutState, type ElementComponentProps, FloPayCheckout, type FloPayCheckoutProps, FloPayProvider, type FloPayProviderProps, PayPalButton, type PayPalButtonProps, PaymentElement, SplitCardForm, type SplitCardFormProps, type SplitCardFormRef, useCheckout, useElements, useFloPay };
+export { AddressElement, CardCvcElement, CardElement, CardExpiryElement, CardNumberElement, CheckoutForm, type CheckoutFormProps, type CheckoutFormRef, type CheckoutState, type ElementComponentProps, FloPayCheckout, type FloPayCheckoutProps, FloPayProvider, type FloPayProviderProps, PayPalButton, type PayPalButtonProps, PaymentElement, SplitCardForm, type SplitCardFormProps, type SplitCardFormRef, useCheckout, useElements, useFloPay, usePayPalFloPay };

package/dist/index.d.ts

@@ -8,6 +8,12 @@ export { BeforeButtonClickEvent, CheckoutButtonMethod, DeclineEvent, InlineSessi
 interface FloPayProviderProps {
     /** A `FloPay` instance or a promise that resolves to one (from `loadFloPay()`). */
     flopay: Promise<FloPay> | FloPay;
+    /**
+     * Optional dedicated `FloPay` instance for PayPal, loaded with
+     * `gatewayData.paypalPublishableKey`. When omitted or `null`, PayPal is
+     * disabled (the button is not rendered).
+     */
+    paypalFlopay?: Promise<FloPay> | FloPay | null;
     /** Optional configuration applied when creating the elements group. */
     options?: {
         locale?: string;
@@ -35,7 +41,7 @@ interface FloPayProviderProps {
  * </FloPayProvider>
  * ```
  */
-declare function FloPayProvider({ flopay: floPayProp, options, children, }: FloPayProviderProps): React.ReactElement;
+declare function FloPayProvider({ flopay: floPayProp, paypalFlopay: paypalFloPayProp, options, children, }: FloPayProviderProps): React.ReactElement;
 
 /** Props for the all-in-one `FloPayCheckout` wrapper. */
 interface FloPayCheckoutProps {
@@ -167,6 +173,14 @@ declare function FloPayCheckout({ sessionId: sessionIdProp, createSession: creat
  * Must be called within a `<FloPayProvider>`.
  */
 declare function useFloPay(): FloPay | null;
+/**
+ * Returns the dedicated PayPal `FloPay` instance (loaded with
+ * `gatewayData.paypalPublishableKey`), or `null` if PayPal is disabled
+ * for this session.
+ *
+ * Must be called within a `<FloPayProvider>`.
+ */
+declare function usePayPalFloPay(): FloPay | null;
 /**
  * Returns the current `FloPayElements` instance, or `null` if the
  * provider is still loading.
@@ -507,4 +521,4 @@ interface PayPalButtonProps {
  */
 declare function PayPalButton({ sessionId, billingApiUrl, email, userId, firstName, lastName, chv, onTokenizedBody, onComplete, onErrorChange, isProcessing, }: PayPalButtonProps): React.ReactElement;
 
-export { AddressElement, CardCvcElement, CardElement, CardExpiryElement, CardNumberElement, CheckoutForm, type CheckoutFormProps, type CheckoutFormRef, type CheckoutState, type ElementComponentProps, FloPayCheckout, type FloPayCheckoutProps, FloPayProvider, type FloPayProviderProps, PayPalButton, type PayPalButtonProps, PaymentElement, SplitCardForm, type SplitCardFormProps, type SplitCardFormRef, useCheckout, useElements, useFloPay };
+export { AddressElement, CardCvcElement, CardElement, CardExpiryElement, CardNumberElement, CheckoutForm, type CheckoutFormProps, type CheckoutFormRef, type CheckoutState, type ElementComponentProps, FloPayCheckout, type FloPayCheckoutProps, FloPayProvider, type FloPayProviderProps, PayPalButton, type PayPalButtonProps, PaymentElement, SplitCardForm, type SplitCardFormProps, type SplitCardFormRef, useCheckout, useElements, useFloPay, usePayPalFloPay };

package/dist/index.mjs

@@ -6,6 +6,7 @@ import { resolveBillingApiUrl } from "@flopay/shared";
 import { createContext } from "react";
 var FloPayContext = createContext({
   flopay: null,
+  paypalFlopay: null,
   elements: null,
   billingApiUrl: ""
 });
@@ -19,12 +20,16 @@ var CheckoutContext = createContext({
 import { jsx } from "react/jsx-runtime";
 function FloPayProvider({
   flopay: floPayProp,
+  paypalFlopay: paypalFloPayProp,
   options,
   children
 }) {
   const [flopay, setFloPay] = useState(
     floPayProp instanceof Promise ? null : floPayProp
   );
+  const [paypalFlopay, setPaypalFloPay] = useState(
+    paypalFloPayProp instanceof Promise || !paypalFloPayProp ? null : paypalFloPayProp
+  );
   const [elements, setElements] = useState(null);
   useEffect(() => {
     let cancelled = false;
@@ -41,6 +46,25 @@ function FloPayProvider({
       cancelled = true;
     };
   }, [floPayProp]);
+  useEffect(() => {
+    let cancelled = false;
+    if (!paypalFloPayProp) {
+      setPaypalFloPay(null);
+      return;
+    }
+    if (paypalFloPayProp instanceof Promise) {
+      paypalFloPayProp.then((instance) => {
+        if (!cancelled) {
+          setPaypalFloPay(instance);
+        }
+      });
+    } else {
+      setPaypalFloPay(paypalFloPayProp);
+    }
+    return () => {
+      cancelled = true;
+    };
+  }, [paypalFloPayProp]);
   useEffect(() => {
     if (!flopay) {
       setElements(null);
@@ -60,8 +84,8 @@ function FloPayProvider({
   }, [flopay, options?.appearance, options?.clientSecret, options?.amount, options?.currency]);
   const resolvedBillingApiUrl = resolveBillingApiUrl(options?.billingApiUrl);
   const value = useMemo(
-    () => ({ flopay, elements, billingApiUrl: resolvedBillingApiUrl }),
-    [flopay, elements, resolvedBillingApiUrl]
+    () => ({ flopay, paypalFlopay, elements, billingApiUrl: resolvedBillingApiUrl }),
+    [flopay, paypalFlopay, elements, resolvedBillingApiUrl]
   );
   return /* @__PURE__ */ jsx(FloPayContext.Provider, { value, children });
 }
@@ -215,6 +239,10 @@ function useFloPay() {
   const ctx = useContext2(FloPayContext);
   return ctx.flopay;
 }
+function usePayPalFloPay() {
+  const ctx = useContext2(FloPayContext);
+  return ctx.paypalFlopay ?? null;
+}
 function useElements() {
   const ctx = useContext2(FloPayContext);
   return ctx.elements;
@@ -601,7 +629,7 @@ function PayPalButtonInner({
       event.reject();
       return;
     }
-    const beforeClick = runBeforeButtonClick ? await runBeforeButtonClick("paypal", { deferInlineSessionPatch: true }) : { proceed: true };
+    const beforeClick = runBeforeButtonClick ? await runBeforeButtonClick("paypal") : { proceed: true };
     if (!beforeClick.proceed) {
       beforeClickRef.current = null;
       event.reject();
@@ -609,7 +637,7 @@ function PayPalButtonInner({
     }
     beforeClickRef.current = {
       accountPatch: beforeClick.accountPatch,
-      pendingInlinePatch: beforeClick.pendingInlinePatch
+      sessionId: beforeClick.sessionId
     };
     event.resolve();
   }, [isProcessing, runBeforeButtonClick, submitting]);
@@ -625,15 +653,10 @@ function PayPalButtonInner({
       }
       prepared = {
         accountPatch: beforeClick.accountPatch,
-        pendingInlinePatch: beforeClick.pendingInlinePatch ?? Promise.resolve({ error: null, sessionId: beforeClick.sessionId ?? sessionId })
+        sessionId: beforeClick.sessionId
       };
     }
-    const patchResult = prepared?.pendingInlinePatch ? await prepared.pendingInlinePatch : { error: null, sessionId };
-    if (patchResult.error) {
-      event.paymentFailed({ reason: "fail", message: patchResult.error.message });
-      return;
-    }
-    const effectiveSessionId = patchResult.sessionId ?? sessionId;
+    const effectiveSessionId = prepared?.sessionId ?? sessionId;
     const effectiveEmail = prepared?.accountPatch?.email ?? email;
     onButtonClick?.("paypal");
     try {
@@ -757,16 +780,11 @@ function WalletButtonInner({
         }
         prepared = {
           accountPatch: beforeClick.accountPatch,
-          pendingInlinePatch: beforeClick.pendingInlinePatch ?? Promise.resolve({ error: null, sessionId: beforeClick.sessionId ?? sessionId })
+          sessionId: beforeClick.sessionId
         };
       }
-      const patchResult = prepared?.pendingInlinePatch ? await prepared.pendingInlinePatch : { error: null, sessionId };
-      if (patchResult.error) {
-        event.paymentFailed({ reason: "fail", message: patchResult.error.message });
-        return;
-      }
       const method = walletType === "apple_pay" ? "apple_pay" : "google_pay";
-      const effectiveSessionId = patchResult.sessionId ?? sessionId;
+      const effectiveSessionId = prepared?.sessionId ?? sessionId;
       const effectiveEmail = prepared?.accountPatch?.email ?? email;
       onButtonClick?.(walletType === "apple_pay" ? "apple_pay" : "google_pay");
       try {
@@ -835,7 +853,7 @@ function WalletButtonInner({
         onLoadError: () => setLoadState("unavailable"),
         onClick: async (event) => {
           lastWalletMethodRef.current = event.expressPaymentType === "apple_pay" ? "apple_pay" : "google_pay";
-          const beforeClick = runBeforeButtonClick ? await runBeforeButtonClick(lastWalletMethodRef.current, { deferInlineSessionPatch: true }) : { proceed: true };
+          const beforeClick = runBeforeButtonClick ? await runBeforeButtonClick(lastWalletMethodRef.current) : { proceed: true };
           if (!beforeClick.proceed) {
             beforeClickRef.current = null;
             event.reject();
@@ -843,7 +861,7 @@ function WalletButtonInner({
           }
           beforeClickRef.current = {
             accountPatch: beforeClick.accountPatch,
-            pendingInlinePatch: beforeClick.pendingInlinePatch
+            sessionId: beforeClick.sessionId
           };
           event.resolve();
         },
@@ -913,6 +931,7 @@ function SplitCardFormInner({
   innerRef
 }) {
   const flopay = useFloPay();
+  const paypalFlopay = usePayPalFloPay();
   const elements = useElements();
   const checkout = useContext3(CheckoutContext);
   const contextBillingUrl = useBillingApiUrl();
@@ -976,6 +995,10 @@ function SplitCardFormInner({
     if (!flopay) return null;
     return flopay.getRawProvider();
   }, [flopay]);
+  const paypalStripeInstance = useMemo2(() => {
+    if (!paypalFlopay) return null;
+    return paypalFlopay.getRawProvider();
+  }, [paypalFlopay]);
   const amountInCents = totalAmount || 100;
   const walletOptions = useMemo2(() => ({
     mode: "payment",
@@ -1028,7 +1051,7 @@ function SplitCardFormInner({
     },
     [checkout.applyInlineSessionPatch, onError, sessionId, updateError]
   );
-  const runBeforeButtonClick = useCallback(async (method, options) => {
+  const runBeforeButtonClick = useCallback(async (method) => {
     if (!onBeforeButtonClick) return { proceed: true };
     try {
       const result = await onBeforeButtonClick({
@@ -1043,15 +1066,7 @@ function SplitCardFormInner({
         if (result.account) {
           setAccountPatch((prev) => ({ ...prev ?? {}, ...result.account }));
         }
-        const pendingInlinePatch = applyInlineSessionPatch(result, method);
-        if (options?.deferInlineSessionPatch) {
-          return {
-            proceed: true,
-            accountPatch: result.account,
-            pendingInlinePatch
-          };
-        }
-        const patchResult = await pendingInlinePatch;
+        const patchResult = await applyInlineSessionPatch(result, method);
         if (patchResult.error) {
           return {
             proceed: false,
@@ -1153,9 +1168,9 @@ function SplitCardFormInner({
             return;
           }
           try {
-            const stripeInstance2 = flopay.getRawProvider();
-            if (!stripeInstance2) {
-              updateError("Payment provider not available.");
+            const paypalStripe = paypalFlopay?.getRawProvider();
+            if (!paypalStripe) {
+              updateError("PayPal is not available.");
               return;
             }
             const confirmParams = {
@@ -1164,7 +1179,7 @@ function SplitCardFormInner({
             if (savedPmId) {
               confirmParams["payment_method"] = savedPmId;
             }
-            const { error: confirmError } = await stripeInstance2.confirmPayment({
+            const { error: confirmError } = await paypalStripe.confirmPayment({
               clientSecret: secret,
               confirmParams,
               redirect: "if_required"
@@ -1201,7 +1216,7 @@ function SplitCardFormInner({
         processingRef.current = false;
       }
     },
-    [baseUrl, sessionId, resolvedAccount, fullName, chv, flopay, onComplete, onError, updateError, emitDecline]
+    [baseUrl, sessionId, resolvedAccount, fullName, chv, flopay, paypalFlopay, onComplete, onError, updateError, emitDecline]
   );
   const dispatchTokenizedBody = useCallback(
     (tokenizedBody, overrides) => {
@@ -1651,7 +1666,7 @@ function SplitCardFormInner({
           ...!isButtonsView && !buttonsAnim ? { visibility: "hidden", position: "absolute", pointerEvents: "none", width: "100%" } : {},
           ...buttonsAnim ? { animation: buttonsAnim, pointerEvents: "none" } : {}
         }, children: [
-          showPayPal && stripeInstance ? /* @__PURE__ */ jsx4(StripeElements, { stripe: stripeInstance, options: paypalOptions, children: /* @__PURE__ */ jsx4(
+          showPayPal && paypalStripeInstance && /* @__PURE__ */ jsx4(StripeElements, { stripe: paypalStripeInstance, options: paypalOptions, children: /* @__PURE__ */ jsx4(
             PayPalButtonInner,
             {
               sessionId,
@@ -1664,7 +1679,7 @@ function SplitCardFormInner({
               onDecline,
               runBeforeButtonClick
             }
-          ) }) : showPayPal ? /* @__PURE__ */ jsx4("div", { style: { height: DEFAULT_BUTTONS_LAYOUT_BUTTON_HEIGHT, borderRadius: 8, background: "#e5e7eb", animation: "flopay-pulse 1.5s ease-in-out infinite" } }) : null,
+          ) }),
           showWallets && stripeInstance ? /* @__PURE__ */ jsx4(StripeElements, { stripe: stripeInstance, options: walletOptions, children: /* @__PURE__ */ jsx4(
             WalletButtonInner,
             {
@@ -1763,7 +1778,7 @@ function SplitCardFormInner({
         onDecline
       }
     ) }),
-    showPayPal && stripeInstance && /* @__PURE__ */ jsx4(StripeElements, { stripe: stripeInstance, options: paypalOptions, children: /* @__PURE__ */ jsx4(
+    showPayPal && paypalStripeInstance && /* @__PURE__ */ jsx4(StripeElements, { stripe: paypalStripeInstance, options: paypalOptions, children: /* @__PURE__ */ jsx4(
       PayPalButtonInner,
       {
         sessionId,
@@ -1775,7 +1790,7 @@ function SplitCardFormInner({
         onDecline
       }
     ) }),
-    (showWallets && stripeInstance || showPayPal && stripeInstance) && /* @__PURE__ */ jsxs2("div", { style: {
+    (showWallets && stripeInstance || showPayPal && paypalStripeInstance) && /* @__PURE__ */ jsxs2("div", { style: {
       display: "flex",
       alignItems: "center",
       gap: "0.75rem",
@@ -1840,6 +1855,8 @@ function FloPayCheckout({
   const [unified, setUnified] = useState3(null);
   const [flopay, setFloPay] = useState3(null);
   const flopayRef = useRef3(null);
+  const [paypalFlopay, setPaypalFloPay] = useState3(null);
+  const paypalFlopayRef = useRef3(null);
   const [session, setSession] = useState3(null);
   const [resolvedSessionId, setResolvedSessionId] = useState3(sessionIdProp ?? "");
   const [isLoading, setIsLoading] = useState3(true);
@@ -1957,13 +1974,18 @@ function FloPayCheckout({
         return false;
       }
       if (redirectResult.type === "paypal_redirect_required") {
+        const paypalStripe = paypalFlopayRef.current?.getRawProvider();
+        if (!paypalStripe) {
+          setModeError("PayPal is not available.");
+          return false;
+        }
         const confirmParams = {
           return_url: window.location.href
         };
         if (redirectResult.paymentMethodId) {
           confirmParams["payment_method"] = redirectResult.paymentMethodId;
         }
-        const { error } = await stripe.confirmPayment({
+        const { error } = await paypalStripe.confirmPayment({
           clientSecret: redirectResult.threeDSecureToken,
           confirmParams,
           redirect: "if_required"
@@ -2072,8 +2094,10 @@ function FloPayCheckout({
           setResolvedSessionId(sid);
         }
         let publishableKey;
+        let paypalPublishableKey;
         if (realResult.provider === "stripe") {
           publishableKey = realResult.data.stripe?.publishableKey;
+          paypalPublishableKey = realResult.data.stripe?.paypalPublishableKey;
         }
         if (!publishableKey) publishableKey = fallbackPublishableKey;
         if (!publishableKey) {
@@ -2082,12 +2106,30 @@ function FloPayCheckout({
             "validation_error"
           );
         }
-        const instance = await loadFloPay(publishableKey, {
-          billingApiUrl: resolvedBillingUrl,
-          locale
-        });
+        const needsSeparatePaypal = Boolean(paypalPublishableKey) && paypalPublishableKey !== publishableKey;
+        const [instance, paypalInstanceOrError] = await Promise.all([
+          loadFloPay(publishableKey, {
+            billingApiUrl: resolvedBillingUrl,
+            locale
+          }),
+          needsSeparatePaypal ? loadFloPay(paypalPublishableKey, {
+            billingApiUrl: resolvedBillingUrl,
+            locale
+          }).catch((err) => {
+            console.warn("[FloPay] Failed to load PayPal Stripe instance:", err);
+            return null;
+          }) : Promise.resolve(null)
+        ]);
         flopayRef.current = instance;
         setFloPay(instance);
+        if (paypalPublishableKey) {
+          const paypalInstance = needsSeparatePaypal ? paypalInstanceOrError : instance;
+          paypalFlopayRef.current = paypalInstance;
+          setPaypalFloPay(paypalInstance);
+        } else {
+          paypalFlopayRef.current = null;
+          setPaypalFloPay(null);
+        }
         setIsLoading(false);
       } catch (err) {
         if (initializedHashRef.current === cacheKey) {
@@ -2200,8 +2242,10 @@ function FloPayCheckout({
     }
     async function initStripe(result) {
       let publishableKey;
+      let paypalPublishableKey;
       if (result.provider === "stripe") {
         publishableKey = result.data.stripe?.publishableKey;
+        paypalPublishableKey = result.data.stripe?.paypalPublishableKey;
       }
       if (!publishableKey) publishableKey = fallbackPublishableKey;
       if (!publishableKey) {
@@ -2210,12 +2254,30 @@ function FloPayCheckout({
           "validation_error"
         );
       }
-      const instance = await loadFloPay(publishableKey, {
-        billingApiUrl: resolvedBillingUrl,
-        locale
-      });
+      const needsSeparatePaypal = Boolean(paypalPublishableKey) && paypalPublishableKey !== publishableKey;
+      const [instance, paypalInstanceOrError] = await Promise.all([
+        loadFloPay(publishableKey, {
+          billingApiUrl: resolvedBillingUrl,
+          locale
+        }),
+        needsSeparatePaypal ? loadFloPay(paypalPublishableKey, {
+          billingApiUrl: resolvedBillingUrl,
+          locale
+        }).catch((err) => {
+          console.warn("[FloPay] Failed to load PayPal Stripe instance:", err);
+          return null;
+        }) : Promise.resolve(null)
+      ]);
       flopayRef.current = instance;
       setFloPay(instance);
+      if (paypalPublishableKey) {
+        const paypalInstance = needsSeparatePaypal ? paypalInstanceOrError : instance;
+        paypalFlopayRef.current = paypalInstance;
+        setPaypalFloPay(paypalInstance);
+      } else {
+        paypalFlopayRef.current = null;
+        setPaypalFloPay(null);
+      }
     }
     init();
     return () => {
@@ -2350,7 +2412,7 @@ function FloPayCheckout({
   }
   if (!flopay || !providerOptions) return /* @__PURE__ */ jsx5(Fragment3, {});
   if (currentMode === "confirm") {
-    return /* @__PURE__ */ jsx5(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ jsx5(FloPayProvider, { flopay, options: providerOptions, children: /* @__PURE__ */ jsxs3("div", { className, children: [
+    return /* @__PURE__ */ jsx5(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ jsx5(FloPayProvider, { flopay, paypalFlopay, options: providerOptions, children: /* @__PURE__ */ jsxs3("div", { className, children: [
       modeError && /* @__PURE__ */ jsx5(
         "div",
         {
@@ -3181,6 +3243,7 @@ export {
   SplitCardForm,
   useCheckout,
   useElements,
-  useFloPay
+  useFloPay,
+  usePayPalFloPay
 };
 //# sourceMappingURL=index.mjs.map