@flopay/react 0.3.20 → 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;
@@ -947,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();
@@ -1010,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",
@@ -1179,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 = {
@@ -1190,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"
@@ -1227,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) => {
@@ -1677,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,
@@ -1690,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,
             {
@@ -1789,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,
@@ -1801,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",
@@ -1866,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);
@@ -1983,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"
@@ -2098,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) {
@@ -2108,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) {
@@ -2226,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) {
@@ -2236,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 () => {
@@ -2376,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",
         {
@@ -3208,6 +3289,7 @@ function PayPalButton({
   SplitCardForm,
   useCheckout,
   useElements,
-  useFloPay
+  useFloPay,
+  usePayPalFloPay
 });
 //# sourceMappingURL=index.cjs.map