@flopay/react 0.3.19 → 0.4.0

package/README.md

@@ -299,9 +299,13 @@ The `SplitCardForm` layout:
 
 ### PayPal Handling
 
-PayPal requires its own Stripe Elements instance because it cannot share an Elements group that uses `paymentMethodCreation: 'manual'`. The SDK handles this in two ways:
+PayPal requires its own Stripe Elements instance because it cannot share an Elements group that uses `paymentMethodCreation: 'manual'`. In addition, the billing API may return a dedicated Stripe account for PayPal via `gatewayData.paypalPublishableKey` — when set, every PayPal Stripe operation uses that key. When the field is `null` or missing, PayPal is disabled (the button is not rendered); there is no fallback to the primary `publishableKey`.
 
-- **`SplitCardForm`**: Automatically manages two Elements instances internally. Card fields use the provider's elements with `paymentMethodCreation: 'manual'`. PayPal renders inside a separate `<Elements>` wrapper with `captureMethod: 'manual'` and no `paymentMethodCreation`.
+The SDK handles this in two ways:
+
+- **`SplitCardForm`**: Automatically manages two Elements instances internally. Card/wallet fields use the primary Stripe account with `paymentMethodCreation: 'manual'`. PayPal renders inside a separate `<Elements>` wrapper backed by the dedicated PayPal FloPay instance (exposed via the `usePayPalFloPay()` hook).
+
+- **`FloPayProvider`** (manual composition): accepts an optional `paypalFlopay` prop. Load a second `FloPay` instance with the PayPal publishable key yourself, then pass it in alongside the primary instance. `usePayPalFloPay()` exposes it to descendants.
 
 - **`PayPalButton`** (standalone): Must be rendered inside its own `FloPayProvider`:
 

package/dist/index.cjs

@@ -43,7 +43,8 @@ __export(index_exports, {
   SplitCardForm: () => SplitCardForm,
   useCheckout: () => useCheckout,
   useElements: () => useElements,
-  useFloPay: () => useFloPay
+  useFloPay: () => useFloPay,
+  usePayPalFloPay: () => usePayPalFloPay
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -55,6 +56,7 @@ var import_shared = require("@flopay/shared");
 var import_react = require("react");
 var FloPayContext = (0, import_react.createContext)({
   flopay: null,
+  paypalFlopay: null,
   elements: null,
   billingApiUrl: ""
 });
@@ -68,12 +70,16 @@ var CheckoutContext = (0, import_react.createContext)({
 var import_jsx_runtime = require("react/jsx-runtime");
 function FloPayProvider({
   flopay: floPayProp,
+  paypalFlopay: paypalFloPayProp,
   options,
   children
 }) {
   const [flopay, setFloPay] = (0, import_react2.useState)(
     floPayProp instanceof Promise ? null : floPayProp
   );
+  const [paypalFlopay, setPaypalFloPay] = (0, import_react2.useState)(
+    paypalFloPayProp instanceof Promise || !paypalFloPayProp ? null : paypalFloPayProp
+  );
   const [elements, setElements] = (0, import_react2.useState)(null);
   (0, import_react2.useEffect)(() => {
     let cancelled = false;
@@ -90,6 +96,25 @@ function FloPayProvider({
       cancelled = true;
     };
   }, [floPayProp]);
+  (0, import_react2.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]);
   (0, import_react2.useEffect)(() => {
     if (!flopay) {
       setElements(null);
@@ -109,8 +134,8 @@ function FloPayProvider({
   }, [flopay, options?.appearance, options?.clientSecret, options?.amount, options?.currency]);
   const resolvedBillingApiUrl = (0, import_shared.resolveBillingApiUrl)(options?.billingApiUrl);
   const value = (0, import_react2.useMemo)(
-    () => ({ flopay, elements, billingApiUrl: resolvedBillingApiUrl }),
-    [flopay, elements, resolvedBillingApiUrl]
+    () => ({ flopay, paypalFlopay, elements, billingApiUrl: resolvedBillingApiUrl }),
+    [flopay, paypalFlopay, elements, resolvedBillingApiUrl]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FloPayContext.Provider, { value, children });
 }
@@ -259,6 +284,10 @@ function useFloPay() {
   const ctx = (0, import_react5.useContext)(FloPayContext);
   return ctx.flopay;
 }
+function usePayPalFloPay() {
+  const ctx = (0, import_react5.useContext)(FloPayContext);
+  return ctx.paypalFlopay ?? null;
+}
 function useElements() {
   const ctx = (0, import_react5.useContext)(FloPayContext);
   return ctx.elements;
@@ -645,7 +674,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();
@@ -653,7 +682,7 @@ function PayPalButtonInner({
     }
     beforeClickRef.current = {
       accountPatch: beforeClick.accountPatch,
-      pendingInlinePatch: beforeClick.pendingInlinePatch
+      sessionId: beforeClick.sessionId
     };
     event.resolve();
   }, [isProcessing, runBeforeButtonClick, submitting]);
@@ -669,15 +698,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 {
@@ -801,16 +825,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 {
@@ -879,7 +898,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();
@@ -887,7 +906,7 @@ function WalletButtonInner({
           }
           beforeClickRef.current = {
             accountPatch: beforeClick.accountPatch,
-            pendingInlinePatch: beforeClick.pendingInlinePatch
+            sessionId: beforeClick.sessionId
           };
           event.resolve();
         },
@@ -957,6 +976,7 @@ function SplitCardFormInner({
   innerRef
 }) {
   const flopay = useFloPay();
+  const paypalFlopay = usePayPalFloPay();
   const elements = useElements();
   const checkout = (0, import_react6.useContext)(CheckoutContext);
   const contextBillingUrl = useBillingApiUrl();
@@ -1020,6 +1040,10 @@ function SplitCardFormInner({
     if (!flopay) return null;
     return flopay.getRawProvider();
   }, [flopay]);
+  const paypalStripeInstance = (0, import_react6.useMemo)(() => {
+    if (!paypalFlopay) return null;
+    return paypalFlopay.getRawProvider();
+  }, [paypalFlopay]);
   const amountInCents = totalAmount || 100;
   const walletOptions = (0, import_react6.useMemo)(() => ({
     mode: "payment",
@@ -1072,7 +1096,7 @@ function SplitCardFormInner({
     },
     [checkout.applyInlineSessionPatch, onError, sessionId, updateError]
   );
-  const runBeforeButtonClick = (0, import_react6.useCallback)(async (method, options) => {
+  const runBeforeButtonClick = (0, import_react6.useCallback)(async (method) => {
     if (!onBeforeButtonClick) return { proceed: true };
     try {
       const result = await onBeforeButtonClick({
@@ -1087,15 +1111,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,
@@ -1197,9 +1213,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 = {
@@ -1208,7 +1224,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"
@@ -1245,7 +1261,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 = (0, import_react6.useCallback)(
     (tokenizedBody, overrides) => {
@@ -1695,7 +1711,7 @@ function SplitCardFormInner({
           ...!isButtonsView && !buttonsAnim ? { visibility: "hidden", position: "absolute", pointerEvents: "none", width: "100%" } : {},
           ...buttonsAnim ? { animation: buttonsAnim, pointerEvents: "none" } : {}
         }, children: [
-          showPayPal && stripeInstance ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_stripe_js.Elements, { stripe: stripeInstance, options: paypalOptions, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+          showPayPal && paypalStripeInstance && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_stripe_js.Elements, { stripe: paypalStripeInstance, options: paypalOptions, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
             PayPalButtonInner,
             {
               sessionId,
@@ -1708,7 +1724,7 @@ function SplitCardFormInner({
               onDecline,
               runBeforeButtonClick
             }
-          ) }) : showPayPal ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("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__ */ (0, import_jsx_runtime4.jsx)(import_react_stripe_js.Elements, { stripe: stripeInstance, options: walletOptions, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
             WalletButtonInner,
             {
@@ -1807,7 +1823,7 @@ function SplitCardFormInner({
         onDecline
       }
     ) }),
-    showPayPal && stripeInstance && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_stripe_js.Elements, { stripe: stripeInstance, options: paypalOptions, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    showPayPal && paypalStripeInstance && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_stripe_js.Elements, { stripe: paypalStripeInstance, options: paypalOptions, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       PayPalButtonInner,
       {
         sessionId,
@@ -1819,7 +1835,7 @@ function SplitCardFormInner({
         onDecline
       }
     ) }),
-    (showWallets && stripeInstance || showPayPal && stripeInstance) && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: {
+    (showWallets && stripeInstance || showPayPal && paypalStripeInstance) && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { style: {
       display: "flex",
       alignItems: "center",
       gap: "0.75rem",
@@ -1884,6 +1900,8 @@ function FloPayCheckout({
   const [unified, setUnified] = (0, import_react7.useState)(null);
   const [flopay, setFloPay] = (0, import_react7.useState)(null);
   const flopayRef = (0, import_react7.useRef)(null);
+  const [paypalFlopay, setPaypalFloPay] = (0, import_react7.useState)(null);
+  const paypalFlopayRef = (0, import_react7.useRef)(null);
   const [session, setSession] = (0, import_react7.useState)(null);
   const [resolvedSessionId, setResolvedSessionId] = (0, import_react7.useState)(sessionIdProp ?? "");
   const [isLoading, setIsLoading] = (0, import_react7.useState)(true);
@@ -2001,13 +2019,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"
@@ -2116,8 +2139,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) {
@@ -2126,12 +2151,30 @@ function FloPayCheckout({
             "validation_error"
           );
         }
-        const instance = await (0, import_js.loadFloPay)(publishableKey, {
-          billingApiUrl: resolvedBillingUrl,
-          locale
-        });
+        const needsSeparatePaypal = Boolean(paypalPublishableKey) && paypalPublishableKey !== publishableKey;
+        const [instance, paypalInstanceOrError] = await Promise.all([
+          (0, import_js.loadFloPay)(publishableKey, {
+            billingApiUrl: resolvedBillingUrl,
+            locale
+          }),
+          needsSeparatePaypal ? (0, import_js.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) {
@@ -2244,8 +2287,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) {
@@ -2254,12 +2299,30 @@ function FloPayCheckout({
           "validation_error"
         );
       }
-      const instance = await (0, import_js.loadFloPay)(publishableKey, {
-        billingApiUrl: resolvedBillingUrl,
-        locale
-      });
+      const needsSeparatePaypal = Boolean(paypalPublishableKey) && paypalPublishableKey !== publishableKey;
+      const [instance, paypalInstanceOrError] = await Promise.all([
+        (0, import_js.loadFloPay)(publishableKey, {
+          billingApiUrl: resolvedBillingUrl,
+          locale
+        }),
+        needsSeparatePaypal ? (0, import_js.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 () => {
@@ -2394,7 +2457,7 @@ function FloPayCheckout({
   }
   if (!flopay || !providerOptions) return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, {});
   if (currentMode === "confirm") {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(FloPayProvider, { flopay, options: providerOptions, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className, children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(CheckoutContext.Provider, { value: checkoutValue, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(FloPayProvider, { flopay, paypalFlopay, options: providerOptions, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className, children: [
       modeError && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
         "div",
         {
@@ -3226,6 +3289,7 @@ function PayPalButton({
   SplitCardForm,
   useCheckout,
   useElements,
-  useFloPay
+  useFloPay,
+  usePayPalFloPay
 });
 //# sourceMappingURL=index.cjs.map