@doujins/payments-ui 0.0.13 → 0.0.14

package/dist/index.cjs

@@ -2520,6 +2520,143 @@ var SolanaPaymentView = ({
     renderBody()
   ] });
 };
+var useSubscriptionActions = () => {
+  const { services } = usePaymentContext();
+  const ensurePrice = (priceId) => {
+    if (!priceId) {
+      throw new Error("payments-ui: priceId is required for subscription actions");
+    }
+    return priceId;
+  };
+  const subscribeWithCard = React3.useCallback(
+    async ({
+      priceId,
+      processor = "nmi",
+      provider,
+      paymentToken,
+      billing
+    }) => {
+      const payload = {
+        priceId: ensurePrice(priceId),
+        paymentToken,
+        processor,
+        provider,
+        email: billing.email,
+        firstName: billing.firstName,
+        lastName: billing.lastName,
+        address1: billing.address1,
+        city: billing.city,
+        state: billing.stateRegion,
+        zipCode: billing.postalCode,
+        country: billing.country
+      };
+      return services.subscriptions.subscribe("nmi", payload);
+    },
+    [services]
+  );
+  const subscribeWithSavedMethod = React3.useCallback(
+    async ({
+      priceId,
+      processor = "nmi",
+      provider,
+      paymentMethodId,
+      email
+    }) => {
+      const payload = {
+        priceId: ensurePrice(priceId),
+        paymentMethodId,
+        processor,
+        provider,
+        email
+      };
+      return services.subscriptions.subscribe("nmi", payload);
+    },
+    [services]
+  );
+  const subscribeWithCCBill = React3.useCallback(
+    async ({
+      priceId,
+      email,
+      firstName,
+      lastName,
+      zipCode,
+      country,
+      processor = "ccbill"
+    }) => {
+      const payload = {
+        priceId: ensurePrice(priceId),
+        email,
+        firstName,
+        lastName,
+        zipCode,
+        country,
+        processor
+      };
+      return services.subscriptions.subscribe("ccbill", payload);
+    },
+    [services]
+  );
+  const generateFlexFormUrl = React3.useCallback(
+    async ({
+      priceId,
+      firstName,
+      lastName,
+      address1,
+      city,
+      state,
+      zipCode,
+      country
+    }) => {
+      const payload = {
+        price_id: ensurePrice(priceId),
+        first_name: firstName,
+        last_name: lastName,
+        address1,
+        city,
+        state,
+        zip_code: zipCode,
+        country
+      };
+      return services.subscriptions.generateFlexFormUrl(payload);
+    },
+    [services]
+  );
+  return {
+    subscribeWithCard,
+    subscribeWithSavedMethod,
+    subscribeWithCCBill,
+    generateFlexFormUrl
+  };
+};
+
+// src/hooks/useAlternativePaymentProvider.ts
+var useAlternativePaymentProvider = () => {
+  const [isLoading, setIsLoading] = React3.useState(false);
+  const [error, setError] = React3.useState(null);
+  const { generateFlexFormUrl } = useSubscriptionActions();
+  const openFlexForm = React3.useCallback(
+    async (payload) => {
+      setIsLoading(true);
+      setError(null);
+      try {
+        const response = await generateFlexFormUrl(payload);
+        if (response?.iframe_url) {
+          window.location.href = response.iframe_url;
+        } else {
+          throw new Error("Unable to launch payment provider.");
+        }
+      } catch (err) {
+        const message = err instanceof Error ? err.message : "Failed to open payment provider.";
+        setError(message);
+        console.error("[payments-ui] failed to open alternative payment provider", err);
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [generateFlexFormUrl]
+  );
+  return { openFlexForm, isLoading, error };
+};
 var PaymentExperience = ({
   priceId,
   usdAmount,
@@ -2528,6 +2665,7 @@ var PaymentExperience = ({
   enableNewCard = true,
   enableStoredMethods = true,
   enableSolanaPay = true,
+  enableAlternativePayments = true,
   onSolanaSuccess,
   onSolanaError,
   initialMode = "cards"
@@ -2544,7 +2682,14 @@ var PaymentExperience = ({
   const [savedError, setSavedError] = React3.useState(null);
   const [newCardStatus, setNewCardStatus] = React3.useState("idle");
   const [newCardError, setNewCardError] = React3.useState(null);
+  const [billingDetails, setBillingDetails] = React3.useState(null);
+  const [alternativePaymentError, setAlternativePaymentError] = React3.useState(null);
   const { notifyStatus, notifySuccess, notifyError } = usePaymentNotifications();
+  const {
+    openFlexForm,
+    isLoading: flexFormLoading,
+    error: flexFormError
+  } = useAlternativePaymentProvider();
   React3.useEffect(() => {
     setActiveTab(showStored ? "saved" : "new");
   }, [showStored]);
@@ -2624,6 +2769,48 @@ var PaymentExperience = ({
     },
     [onSolanaError]
   );
+  const handleAlternativePayment = React3.useCallback(() => {
+    if (!enableAlternativePayments || !priceId) {
+      return;
+    }
+    if (!billingDetails) {
+      setAlternativePaymentError("Enter your billing details first.");
+      return;
+    }
+    const requiredFields = [
+      "firstName",
+      "lastName",
+      "address1",
+      "city",
+      "stateRegion",
+      "postalCode",
+      "country"
+    ];
+    const missingField = requiredFields.find((field) => {
+      const value = billingDetails[field];
+      return typeof value !== "string" || value.trim().length === 0;
+    });
+    if (missingField) {
+      setAlternativePaymentError("Please complete your billing address before continuing.");
+      return;
+    }
+    setAlternativePaymentError(null);
+    openFlexForm({
+      priceId,
+      firstName: billingDetails.firstName,
+      lastName: billingDetails.lastName,
+      address1: billingDetails.address1,
+      city: billingDetails.city,
+      state: billingDetails.stateRegion ?? "",
+      zipCode: billingDetails.postalCode,
+      country: billingDetails.country
+    });
+  }, [
+    billingDetails,
+    enableAlternativePayments,
+    openFlexForm,
+    priceId
+  ]);
   const renderSavedTab = () => {
     if (!showStored) {
       return /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: "Saved payment methods are unavailable right now. Add a new card to get started." });
@@ -2662,7 +2849,8 @@ var PaymentExperience = ({
         submitLabel: "Pay now",
         externalError: newCardError,
         onTokenize: handleNewCardTokenize,
-        submitting: newCardStatus === "processing"
+        submitting: newCardStatus === "processing",
+        onBillingChange: setBillingDetails
       }
     );
   };
@@ -2690,6 +2878,19 @@ var PaymentExperience = ({
   ] });
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6 pt-4", children: [
     mode === "cards" && renderCardExperience(),
+    mode === "cards" && enableAlternativePayments && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2 text-center text-sm text-muted-foreground", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          className: "text-primary underline-offset-4 hover:underline disabled:opacity-60",
+          onClick: handleAlternativePayment,
+          disabled: flexFormLoading || !priceId,
+          children: flexFormLoading ? "Preparing alternative checkout\u2026" : "Prefer a different processor? Pay with CCBill"
+        }
+      ),
+      (alternativePaymentError || flexFormError) && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-destructive", children: alternativePaymentError || flexFormError })
+    ] }),
     mode === "solana" && enableSolanaPay && /* @__PURE__ */ jsxRuntime.jsx(
       SolanaPaymentView,
       {
@@ -2730,114 +2931,6 @@ var SubscriptionSuccessDialog = ({
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-6 py-6", children: /* @__PURE__ */ jsxRuntime.jsx(Button, { className: "w-full", onClick: onClose, children: "Continue exploring" }) })
   ] }) });
 };
-var useSubscriptionActions = () => {
-  const { services } = usePaymentContext();
-  const ensurePrice = (priceId) => {
-    if (!priceId) {
-      throw new Error("payments-ui: priceId is required for subscription actions");
-    }
-    return priceId;
-  };
-  const subscribeWithCard = React3.useCallback(
-    async ({
-      priceId,
-      processor = "nmi",
-      provider,
-      paymentToken,
-      billing
-    }) => {
-      const payload = {
-        priceId: ensurePrice(priceId),
-        paymentToken,
-        processor,
-        provider,
-        email: billing.email,
-        firstName: billing.firstName,
-        lastName: billing.lastName,
-        address1: billing.address1,
-        city: billing.city,
-        state: billing.stateRegion,
-        zipCode: billing.postalCode,
-        country: billing.country
-      };
-      return services.subscriptions.subscribe("nmi", payload);
-    },
-    [services]
-  );
-  const subscribeWithSavedMethod = React3.useCallback(
-    async ({
-      priceId,
-      processor = "nmi",
-      provider,
-      paymentMethodId,
-      email
-    }) => {
-      const payload = {
-        priceId: ensurePrice(priceId),
-        paymentMethodId,
-        processor,
-        provider,
-        email
-      };
-      return services.subscriptions.subscribe("nmi", payload);
-    },
-    [services]
-  );
-  const subscribeWithCCBill = React3.useCallback(
-    async ({
-      priceId,
-      email,
-      firstName,
-      lastName,
-      zipCode,
-      country,
-      processor = "ccbill"
-    }) => {
-      const payload = {
-        priceId: ensurePrice(priceId),
-        email,
-        firstName,
-        lastName,
-        zipCode,
-        country,
-        processor
-      };
-      return services.subscriptions.subscribe("ccbill", payload);
-    },
-    [services]
-  );
-  const generateFlexFormUrl = React3.useCallback(
-    async ({
-      priceId,
-      firstName,
-      lastName,
-      address1,
-      city,
-      state,
-      zipCode,
-      country
-    }) => {
-      const payload = {
-        price_id: ensurePrice(priceId),
-        first_name: firstName,
-        last_name: lastName,
-        address1,
-        city,
-        state,
-        zip_code: zipCode,
-        country
-      };
-      return services.subscriptions.generateFlexFormUrl(payload);
-    },
-    [services]
-  );
-  return {
-    subscribeWithCard,
-    subscribeWithSavedMethod,
-    subscribeWithCCBill,
-    generateFlexFormUrl
-  };
-};
 var SubscriptionCheckoutModal = ({
   open,
   onOpenChange,
@@ -4885,33 +4978,6 @@ var usePaymentStatus = (options = {}) => {
     isPending: getConfirmationStatus() === "pending"
   };
 };
-var useAlternativePaymentProvider = () => {
-  const [isLoading, setIsLoading] = React3.useState(false);
-  const [error, setError] = React3.useState(null);
-  const { generateFlexFormUrl } = useSubscriptionActions();
-  const openFlexForm = React3.useCallback(
-    async (payload) => {
-      setIsLoading(true);
-      setError(null);
-      try {
-        const response = await generateFlexFormUrl(payload);
-        if (response?.iframe_url) {
-          window.location.href = response.iframe_url;
-        } else {
-          throw new Error("Unable to launch payment provider.");
-        }
-      } catch (err) {
-        const message = err instanceof Error ? err.message : "Failed to open payment provider.";
-        setError(message);
-        console.error("[payments-ui] failed to open alternative payment provider", err);
-      } finally {
-        setIsLoading(false);
-      }
-    },
-    [generateFlexFormUrl]
-  );
-  return { openFlexForm, isLoading, error };
-};
 
 exports.BillingHistory = BillingHistory;
 exports.CancelMembershipDialog = CancelMembershipDialog;