@solvapay/react 1.0.0-preview.1

package/README.md

@@ -0,0 +1,34 @@
+# @solvapay/react
+
+Payment components for SolvaPay with Stripe integration.
+
+## Install
+```bash
+pnpm add @solvapay/react
+```
+
+## Usage
+```tsx
+import { SolvaPayProvider, PaymentForm } from '@solvapay/react';
+
+export default function CheckoutPage() {
+  return (
+    <SolvaPayProvider
+      amount={999}
+      currency="USD"
+      planRef="pln_abc123"
+    >
+      <PaymentForm
+        returnUrl="/checkout/success"
+        onSuccess={(paymentIntent) => {
+          console.log('Payment successful!', paymentIntent);
+        }}
+      />
+    </SolvaPayProvider>
+  );
+}
+```
+
+Peer deps: react, react-dom
+
+More: docs/architecture.md

package/dist/index.cjs

@@ -0,0 +1,272 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.tsx
+var index_exports = {};
+__export(index_exports, {
+  PaymentForm: () => PaymentForm,
+  SolvaPayProvider: () => SolvaPayProvider
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/SolvaPayProvider.tsx
+var import_react = require("react");
+var import_react_stripe_js = require("@stripe/react-stripe-js");
+var import_stripe_js = require("@stripe/stripe-js");
+var import_jsx_runtime = require("react/jsx-runtime");
+var SolvaPayProvider = ({
+  children,
+  amount = 999,
+  // Default $9.99
+  currency = "USD",
+  planRef,
+  agentRef,
+  apiBaseUrl = "/api/solvapay",
+  onPaymentReady
+}) => {
+  const [stripePromise, setStripePromise] = (0, import_react.useState)(null);
+  const [clientSecret, setClientSecret] = (0, import_react.useState)("");
+  const [loading, setLoading] = (0, import_react.useState)(false);
+  const [error, setError] = (0, import_react.useState)(null);
+  const createPayment = async (paymentAmount) => {
+    setLoading(true);
+    setError(null);
+    try {
+      console.log("Creating SolvaPay payment intent for amount:", paymentAmount);
+      const response = await fetch(`${apiBaseUrl}/create-payment-intent`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify({
+          planRef,
+          agentRef,
+          amount: paymentAmount,
+          currency,
+          description: "SolvaPay - Plan Purchase"
+        })
+      });
+      if (!response.ok) {
+        const errorText = await response.text();
+        throw new Error(`Payment intent creation failed: ${response.status} ${errorText}`);
+      }
+      const result = await response.json();
+      if (!result || !result.clientSecret || !result.publishableKey) {
+        throw new Error("Invalid response from server: missing required fields");
+      }
+      console.log("Payment intent received:", {
+        hasClientSecret: !!result.clientSecret,
+        hasPublishableKey: !!result.publishableKey,
+        hasAccountId: !!result.accountId,
+        clientSecretLength: result.clientSecret?.length || 0,
+        publishableKeyLength: result.publishableKey?.length || 0
+      });
+      const stripeOptions = result.accountId ? { stripeAccount: result.accountId } : {};
+      const stripe = await (0, import_stripe_js.loadStripe)(result.publishableKey, stripeOptions);
+      if (!stripe) {
+        throw new Error("Failed to initialize Stripe. Please check your configuration.");
+      }
+      setStripePromise(stripe);
+      setClientSecret(result.clientSecret);
+      if (onPaymentReady) {
+        onPaymentReady(stripe, result.clientSecret);
+      }
+    } catch (error2) {
+      console.error("Failed to create payment:", error2);
+      let errorMessage = "Payment creation failed";
+      if (error2 instanceof Error) {
+        if (error2.message.includes("publishable key")) {
+          errorMessage = "Server configuration error: Missing Stripe publishable key";
+        } else if (error2.message.includes("client secret")) {
+          errorMessage = "Server error: Payment intent creation failed";
+        } else if (error2.message.includes("Failed to initialize Stripe")) {
+          errorMessage = "Stripe initialization failed. Please check your configuration.";
+        } else {
+          errorMessage = error2.message;
+        }
+      }
+      setError(errorMessage);
+    } finally {
+      setLoading(false);
+    }
+  };
+  (0, import_react.useEffect)(() => {
+    if (amount && !stripePromise && !loading && !error) {
+      createPayment(amount);
+    }
+  }, [amount]);
+  if (error) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: {
+      padding: "1rem",
+      backgroundColor: "#fed7d7",
+      color: "#742a2a",
+      borderRadius: "0.375rem",
+      marginBottom: "1rem"
+    }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("strong", { children: "Payment Setup Error:" }),
+      " ",
+      error,
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "button",
+        {
+          onClick: () => createPayment(amount),
+          style: {
+            marginLeft: "1rem",
+            padding: "0.5rem 1rem",
+            backgroundColor: "#742a2a",
+            color: "white",
+            border: "none",
+            borderRadius: "0.25rem",
+            cursor: "pointer"
+          },
+          children: "Retry"
+        }
+      )
+    ] });
+  }
+  if (loading) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: {
+      padding: "1rem",
+      textAlign: "center",
+      color: "#4a5568"
+    }, children: "Setting up payment..." });
+  }
+  if (!stripePromise || !clientSecret) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: {
+      padding: "1rem",
+      textAlign: "center",
+      color: "#4a5568"
+    }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "button",
+      {
+        onClick: () => createPayment(amount),
+        style: {
+          padding: "0.75rem 1.5rem",
+          backgroundColor: "#3182ce",
+          color: "white",
+          border: "none",
+          borderRadius: "0.375rem",
+          cursor: "pointer",
+          fontSize: "1rem"
+        },
+        children: "Initialize Payment"
+      }
+    ) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_stripe_js.Elements, { stripe: stripePromise, options: { clientSecret }, children });
+};
+
+// src/PaymentForm.tsx
+var import_react2 = require("react");
+var import_react_stripe_js2 = require("@stripe/react-stripe-js");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var PaymentForm = ({
+  onSuccess,
+  onError,
+  returnUrl,
+  submitButtonText = "Pay Now",
+  className
+}) => {
+  const stripe = (0, import_react_stripe_js2.useStripe)();
+  const elements = (0, import_react_stripe_js2.useElements)();
+  const [isProcessing, setIsProcessing] = (0, import_react2.useState)(false);
+  const [message, setMessage] = (0, import_react2.useState)(null);
+  const handleSubmit = async (event) => {
+    event.preventDefault();
+    if (!stripe || !elements) {
+      return;
+    }
+    setIsProcessing(true);
+    setMessage(null);
+    try {
+      const { error, paymentIntent } = await stripe.confirmPayment({
+        elements,
+        confirmParams: {
+          return_url: returnUrl || `${window.location.origin}/checkout/complete`
+        },
+        redirect: "if_required"
+        // Only redirect if required by payment method
+      });
+      if (error) {
+        const errorMessage = error.message || "An unexpected error occurred.";
+        setMessage(errorMessage);
+        if (onError) {
+          onError(new Error(errorMessage));
+        }
+      } else if (paymentIntent && paymentIntent.status === "succeeded") {
+        setMessage("Payment successful!");
+        if (onSuccess) {
+          onSuccess(paymentIntent);
+        }
+      } else {
+        setMessage(`Payment status: ${paymentIntent?.status || "processing"}`);
+      }
+    } catch (err) {
+      const error = err instanceof Error ? err : new Error("Unknown error occurred");
+      setMessage(error.message);
+      if (onError) {
+        onError(error);
+      }
+    } finally {
+      setIsProcessing(false);
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("form", { onSubmit: handleSubmit, className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_stripe_js2.PaymentElement, {}),
+    message && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "div",
+      {
+        style: {
+          marginTop: "1rem",
+          padding: "0.75rem",
+          borderRadius: "0.375rem",
+          backgroundColor: message.includes("successful") ? "#d1fae5" : "#fee2e2",
+          color: message.includes("successful") ? "#065f46" : "#7f1d1d"
+        },
+        children: message
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "button",
+      {
+        type: "submit",
+        disabled: !stripe || isProcessing,
+        style: {
+          marginTop: "1.5rem",
+          width: "100%",
+          padding: "0.75rem 1.5rem",
+          backgroundColor: isProcessing || !stripe ? "#9ca3af" : "#3b82f6",
+          color: "white",
+          border: "none",
+          borderRadius: "0.375rem",
+          fontSize: "1rem",
+          fontWeight: "500",
+          cursor: isProcessing || !stripe ? "not-allowed" : "pointer",
+          transition: "background-color 0.2s"
+        },
+        children: isProcessing ? "Processing..." : submitButtonText
+      }
+    )
+  ] });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PaymentForm,
+  SolvaPayProvider
+});

package/dist/index.d.cts

@@ -0,0 +1,84 @@
+import React from 'react';
+import { Stripe } from '@stripe/stripe-js';
+
+interface SolvaPayProviderProps {
+    children: React.ReactNode;
+    amount?: number;
+    currency?: string;
+    planRef: string;
+    agentRef: string;
+    apiBaseUrl?: string;
+    onPaymentReady?: (stripe: Stripe | null, clientSecret: string) => void;
+}
+/**
+ * SolvaPay Payment Provider Component
+ *
+ * Wraps children with Stripe Elements context after initializing a payment intent
+ * via the backend API. This component handles the secure payment flow:
+ *
+ * 1. Calls backend API route to create payment intent (backend uses secret key)
+ * 2. Backend returns clientSecret and publishableKey from Stripe
+ * 3. Initializes Stripe.js with publishableKey
+ * 4. Wraps children in Stripe Elements provider
+ *
+ * @example
+ * ```tsx
+ * // In your Next.js page
+ * import { SolvaPayProvider, PaymentForm } from '@solvapay/react';
+ *
+ * export default function CheckoutPage() {
+ *   return (
+ *     <SolvaPayProvider
+ *       amount={999}
+ *       currency="USD"
+ *       planRef="pln_abc123"
+ *       agentRef="agt_xyz789"
+ *       onPaymentReady={(stripe, clientSecret) => {
+ *         console.log('Payment ready!');
+ *       }}
+ *     >
+ *       <PaymentForm />
+ *     </SolvaPayProvider>
+ *   );
+ * }
+ * ```
+ */
+declare const SolvaPayProvider: React.FC<SolvaPayProviderProps>;
+
+interface PaymentFormProps {
+    onSuccess?: (paymentIntent: any) => void;
+    onError?: (error: Error) => void;
+    returnUrl?: string;
+    submitButtonText?: string;
+    className?: string;
+}
+/**
+ * SolvaPay Payment Form Component
+ *
+ * Renders a payment form using Stripe's PaymentElement for secure card input.
+ * This component must be wrapped in a SolvaPayProvider to work properly.
+ *
+ * @example
+ * ```tsx
+ * import { SolvaPayProvider, PaymentForm } from '@solvapay/react';
+ *
+ * export default function CheckoutPage() {
+ *   return (
+ *     <SolvaPayProvider amount={999} planRef="pln_abc123">
+ *       <PaymentForm
+ *         returnUrl={`${window.location.origin}/checkout/success`}
+ *         onSuccess={(paymentIntent) => {
+ *           console.log('Payment successful!', paymentIntent);
+ *         }}
+ *         onError={(error) => {
+ *           console.error('Payment failed:', error);
+ *         }}
+ *       />
+ *     </SolvaPayProvider>
+ *   );
+ * }
+ * ```
+ */
+declare const PaymentForm: React.FC<PaymentFormProps>;
+
+export { PaymentForm, type PaymentFormProps, SolvaPayProvider, type SolvaPayProviderProps };

package/dist/index.d.ts

@@ -0,0 +1,84 @@
+import React from 'react';
+import { Stripe } from '@stripe/stripe-js';
+
+interface SolvaPayProviderProps {
+    children: React.ReactNode;
+    amount?: number;
+    currency?: string;
+    planRef: string;
+    agentRef: string;
+    apiBaseUrl?: string;
+    onPaymentReady?: (stripe: Stripe | null, clientSecret: string) => void;
+}
+/**
+ * SolvaPay Payment Provider Component
+ *
+ * Wraps children with Stripe Elements context after initializing a payment intent
+ * via the backend API. This component handles the secure payment flow:
+ *
+ * 1. Calls backend API route to create payment intent (backend uses secret key)
+ * 2. Backend returns clientSecret and publishableKey from Stripe
+ * 3. Initializes Stripe.js with publishableKey
+ * 4. Wraps children in Stripe Elements provider
+ *
+ * @example
+ * ```tsx
+ * // In your Next.js page
+ * import { SolvaPayProvider, PaymentForm } from '@solvapay/react';
+ *
+ * export default function CheckoutPage() {
+ *   return (
+ *     <SolvaPayProvider
+ *       amount={999}
+ *       currency="USD"
+ *       planRef="pln_abc123"
+ *       agentRef="agt_xyz789"
+ *       onPaymentReady={(stripe, clientSecret) => {
+ *         console.log('Payment ready!');
+ *       }}
+ *     >
+ *       <PaymentForm />
+ *     </SolvaPayProvider>
+ *   );
+ * }
+ * ```
+ */
+declare const SolvaPayProvider: React.FC<SolvaPayProviderProps>;
+
+interface PaymentFormProps {
+    onSuccess?: (paymentIntent: any) => void;
+    onError?: (error: Error) => void;
+    returnUrl?: string;
+    submitButtonText?: string;
+    className?: string;
+}
+/**
+ * SolvaPay Payment Form Component
+ *
+ * Renders a payment form using Stripe's PaymentElement for secure card input.
+ * This component must be wrapped in a SolvaPayProvider to work properly.
+ *
+ * @example
+ * ```tsx
+ * import { SolvaPayProvider, PaymentForm } from '@solvapay/react';
+ *
+ * export default function CheckoutPage() {
+ *   return (
+ *     <SolvaPayProvider amount={999} planRef="pln_abc123">
+ *       <PaymentForm
+ *         returnUrl={`${window.location.origin}/checkout/success`}
+ *         onSuccess={(paymentIntent) => {
+ *           console.log('Payment successful!', paymentIntent);
+ *         }}
+ *         onError={(error) => {
+ *           console.error('Payment failed:', error);
+ *         }}
+ *       />
+ *     </SolvaPayProvider>
+ *   );
+ * }
+ * ```
+ */
+declare const PaymentForm: React.FC<PaymentFormProps>;
+
+export { PaymentForm, type PaymentFormProps, SolvaPayProvider, type SolvaPayProviderProps };

package/dist/index.js

@@ -0,0 +1,244 @@
+// src/SolvaPayProvider.tsx
+import { useState, useEffect } from "react";
+import { Elements } from "@stripe/react-stripe-js";
+import { loadStripe } from "@stripe/stripe-js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var SolvaPayProvider = ({
+  children,
+  amount = 999,
+  // Default $9.99
+  currency = "USD",
+  planRef,
+  agentRef,
+  apiBaseUrl = "/api/solvapay",
+  onPaymentReady
+}) => {
+  const [stripePromise, setStripePromise] = useState(null);
+  const [clientSecret, setClientSecret] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const createPayment = async (paymentAmount) => {
+    setLoading(true);
+    setError(null);
+    try {
+      console.log("Creating SolvaPay payment intent for amount:", paymentAmount);
+      const response = await fetch(`${apiBaseUrl}/create-payment-intent`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify({
+          planRef,
+          agentRef,
+          amount: paymentAmount,
+          currency,
+          description: "SolvaPay - Plan Purchase"
+        })
+      });
+      if (!response.ok) {
+        const errorText = await response.text();
+        throw new Error(`Payment intent creation failed: ${response.status} ${errorText}`);
+      }
+      const result = await response.json();
+      if (!result || !result.clientSecret || !result.publishableKey) {
+        throw new Error("Invalid response from server: missing required fields");
+      }
+      console.log("Payment intent received:", {
+        hasClientSecret: !!result.clientSecret,
+        hasPublishableKey: !!result.publishableKey,
+        hasAccountId: !!result.accountId,
+        clientSecretLength: result.clientSecret?.length || 0,
+        publishableKeyLength: result.publishableKey?.length || 0
+      });
+      const stripeOptions = result.accountId ? { stripeAccount: result.accountId } : {};
+      const stripe = await loadStripe(result.publishableKey, stripeOptions);
+      if (!stripe) {
+        throw new Error("Failed to initialize Stripe. Please check your configuration.");
+      }
+      setStripePromise(stripe);
+      setClientSecret(result.clientSecret);
+      if (onPaymentReady) {
+        onPaymentReady(stripe, result.clientSecret);
+      }
+    } catch (error2) {
+      console.error("Failed to create payment:", error2);
+      let errorMessage = "Payment creation failed";
+      if (error2 instanceof Error) {
+        if (error2.message.includes("publishable key")) {
+          errorMessage = "Server configuration error: Missing Stripe publishable key";
+        } else if (error2.message.includes("client secret")) {
+          errorMessage = "Server error: Payment intent creation failed";
+        } else if (error2.message.includes("Failed to initialize Stripe")) {
+          errorMessage = "Stripe initialization failed. Please check your configuration.";
+        } else {
+          errorMessage = error2.message;
+        }
+      }
+      setError(errorMessage);
+    } finally {
+      setLoading(false);
+    }
+  };
+  useEffect(() => {
+    if (amount && !stripePromise && !loading && !error) {
+      createPayment(amount);
+    }
+  }, [amount]);
+  if (error) {
+    return /* @__PURE__ */ jsxs("div", { style: {
+      padding: "1rem",
+      backgroundColor: "#fed7d7",
+      color: "#742a2a",
+      borderRadius: "0.375rem",
+      marginBottom: "1rem"
+    }, children: [
+      /* @__PURE__ */ jsx("strong", { children: "Payment Setup Error:" }),
+      " ",
+      error,
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: () => createPayment(amount),
+          style: {
+            marginLeft: "1rem",
+            padding: "0.5rem 1rem",
+            backgroundColor: "#742a2a",
+            color: "white",
+            border: "none",
+            borderRadius: "0.25rem",
+            cursor: "pointer"
+          },
+          children: "Retry"
+        }
+      )
+    ] });
+  }
+  if (loading) {
+    return /* @__PURE__ */ jsx("div", { style: {
+      padding: "1rem",
+      textAlign: "center",
+      color: "#4a5568"
+    }, children: "Setting up payment..." });
+  }
+  if (!stripePromise || !clientSecret) {
+    return /* @__PURE__ */ jsx("div", { style: {
+      padding: "1rem",
+      textAlign: "center",
+      color: "#4a5568"
+    }, children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        onClick: () => createPayment(amount),
+        style: {
+          padding: "0.75rem 1.5rem",
+          backgroundColor: "#3182ce",
+          color: "white",
+          border: "none",
+          borderRadius: "0.375rem",
+          cursor: "pointer",
+          fontSize: "1rem"
+        },
+        children: "Initialize Payment"
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsx(Elements, { stripe: stripePromise, options: { clientSecret }, children });
+};
+
+// src/PaymentForm.tsx
+import { useState as useState2 } from "react";
+import { useStripe, useElements, PaymentElement } from "@stripe/react-stripe-js";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var PaymentForm = ({
+  onSuccess,
+  onError,
+  returnUrl,
+  submitButtonText = "Pay Now",
+  className
+}) => {
+  const stripe = useStripe();
+  const elements = useElements();
+  const [isProcessing, setIsProcessing] = useState2(false);
+  const [message, setMessage] = useState2(null);
+  const handleSubmit = async (event) => {
+    event.preventDefault();
+    if (!stripe || !elements) {
+      return;
+    }
+    setIsProcessing(true);
+    setMessage(null);
+    try {
+      const { error, paymentIntent } = await stripe.confirmPayment({
+        elements,
+        confirmParams: {
+          return_url: returnUrl || `${window.location.origin}/checkout/complete`
+        },
+        redirect: "if_required"
+        // Only redirect if required by payment method
+      });
+      if (error) {
+        const errorMessage = error.message || "An unexpected error occurred.";
+        setMessage(errorMessage);
+        if (onError) {
+          onError(new Error(errorMessage));
+        }
+      } else if (paymentIntent && paymentIntent.status === "succeeded") {
+        setMessage("Payment successful!");
+        if (onSuccess) {
+          onSuccess(paymentIntent);
+        }
+      } else {
+        setMessage(`Payment status: ${paymentIntent?.status || "processing"}`);
+      }
+    } catch (err) {
+      const error = err instanceof Error ? err : new Error("Unknown error occurred");
+      setMessage(error.message);
+      if (onError) {
+        onError(error);
+      }
+    } finally {
+      setIsProcessing(false);
+    }
+  };
+  return /* @__PURE__ */ jsxs2("form", { onSubmit: handleSubmit, className, children: [
+    /* @__PURE__ */ jsx2(PaymentElement, {}),
+    message && /* @__PURE__ */ jsx2(
+      "div",
+      {
+        style: {
+          marginTop: "1rem",
+          padding: "0.75rem",
+          borderRadius: "0.375rem",
+          backgroundColor: message.includes("successful") ? "#d1fae5" : "#fee2e2",
+          color: message.includes("successful") ? "#065f46" : "#7f1d1d"
+        },
+        children: message
+      }
+    ),
+    /* @__PURE__ */ jsx2(
+      "button",
+      {
+        type: "submit",
+        disabled: !stripe || isProcessing,
+        style: {
+          marginTop: "1.5rem",
+          width: "100%",
+          padding: "0.75rem 1.5rem",
+          backgroundColor: isProcessing || !stripe ? "#9ca3af" : "#3b82f6",
+          color: "white",
+          border: "none",
+          borderRadius: "0.375rem",
+          fontSize: "1rem",
+          fontWeight: "500",
+          cursor: isProcessing || !stripe ? "not-allowed" : "pointer",
+          transition: "background-color 0.2s"
+        },
+        children: isProcessing ? "Processing..." : submitButtonText
+      }
+    )
+  ] });
+};
+export {
+  PaymentForm,
+  SolvaPayProvider
+};

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@solvapay/react",
+  "version": "1.0.0-preview.1",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/solvapay/solvapay-sdk.git",
+    "directory": "packages/react"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0 || ^19.0.0",
+    "react-dom": "^18.2.0 || ^19.0.0"
+  },
+  "dependencies": {
+    "@stripe/react-stripe-js": "^2.9.0",
+    "@stripe/stripe-js": "^4.8.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.74",
+    "@types/react-dom": "^18.2.25",
+    "typescript": "^5.5.4",
+    "vitest": "^2.0.5",
+    "@solvapay/test-utils": "0.0.0"
+  },
+  "scripts": {
+    "build": "tsup src/index.tsx --format esm,cjs --dts --tsconfig tsconfig.build.json",
+    "test": "vitest run || exit 0",
+    "test:unit": "vitest run || exit 0",
+    "test:watch": "vitest"
+  }
+}