@flopay/react 0.3.20 → 0.4.1

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 });
 }
@@ -69,7 +93,7 @@ function FloPayProvider({
 // src/flopay-checkout.tsx
 import React5, { useCallback as useCallback2, useEffect as useEffect4, useMemo as useMemo3, useRef as useRef3, useState as useState3 } from "react";
 import { loadFloPay, PaymentAPI } from "@flopay/js";
-import { FloPayError as FloPayError3, resolveBillingApiUrl as resolveBillingApiUrl3, buildCheckoutDisplayData, resolveButtonsLayoutTheme as resolveButtonsLayoutTheme2 } from "@flopay/shared";
+import { SDK_VERSION, FloPayError as FloPayError3, resolveBillingApiUrl as resolveBillingApiUrl3, buildCheckoutDisplayData, resolveButtonsLayoutTheme as resolveButtonsLayoutTheme2 } from "@flopay/shared";
 
 // src/card-button-content.tsx
 import "react";
@@ -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;
@@ -903,6 +931,7 @@ function SplitCardFormInner({
   innerRef
 }) {
   const flopay = useFloPay();
+  const paypalFlopay = usePayPalFloPay();
   const elements = useElements();
   const checkout = useContext3(CheckoutContext);
   const contextBillingUrl = useBillingApiUrl();
@@ -966,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",
@@ -1135,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 = {
@@ -1146,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"
@@ -1183,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) => {
@@ -1633,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,
@@ -1646,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,
             {
@@ -1745,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,
@@ -1757,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",
@@ -1819,9 +1852,13 @@ function FloPayCheckout({
   onSessionCompleted
 }) {
   const resolvedBillingUrl = resolveBillingApiUrl3(billingApiUrl);
+  const checkoutType = createSessionParams ? "embedded_checkout" : "standard_checkout";
+  const checkoutLayout = children ? "custom_layout" : layout === "buttons" ? "buttons_layout" : "default_layout";
   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);
@@ -1841,6 +1878,14 @@ function FloPayCheckout({
   onDeclineRef.current = onDecline;
   const onSessionCompletedRef = useRef3(onSessionCompleted);
   onSessionCompletedRef.current = onSessionCompleted;
+  useEffect4(() => {
+    console.info("[FloPay] Checkout initialized", {
+      sdk_version: SDK_VERSION,
+      checkout_type: checkoutType,
+      checkout_layout: checkoutLayout,
+      billing_api_url: resolvedBillingUrl
+    });
+  }, [checkoutLayout, checkoutType, resolvedBillingUrl]);
   const baseCreateSessionHash = useMemo3(
     () => createSessionParams ? hashCreateParams(createSessionParams) : "",
     [createSessionParams]
@@ -1939,13 +1984,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"
@@ -2054,8 +2104,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) {
@@ -2064,12 +2116,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) {
@@ -2182,8 +2252,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) {
@@ -2192,12 +2264,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 () => {
@@ -2332,7 +2422,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",
         {
@@ -3163,6 +3253,7 @@ export {
   SplitCardForm,
   useCheckout,
   useElements,
-  useFloPay
+  useFloPay,
+  usePayPalFloPay
 };
 //# sourceMappingURL=index.mjs.map