@paykit-sdk/react 1.0.1-alpha.6 → 1.1.0-alpha.1

package/README.md

@@ -5,7 +5,7 @@ React hooks and components for PayKit SDK - Universal payment processing with St
 ## Installation
 
 ```bash
-npm install @paykit-sdk/react @tanstack/react-query
+npm install @paykit-sdk/react
 ```
 
 ## Quick Start
@@ -15,21 +15,17 @@ npm install @paykit-sdk/react @tanstack/react-query
 ```tsx
 import { PaykitProvider } from '@paykit-sdk/react';
 import { stripe } from '@paykit-sdk/stripe';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 
 // or import { local } from '@paykit-sdk/local';
 // or import { polar } from '@paykit-sdk/polar';
 
-const queryClient = new QueryClient();
 const provider = stripe();
 
 function App() {
   return (
-    <QueryClientProvider client={queryClient}>
-      <PaykitProvider provider={provider}>
-        <YourApp />
-      </PaykitProvider>
-    </QueryClientProvider>
+    <PaykitProvider provider={provider}>
+      <YourApp />
+    </PaykitProvider>
   );
 }
 ```
@@ -40,27 +36,16 @@ function App() {
 import { useCustomer, useSubscription, useCheckout } from '@paykit-sdk/react';
 
 function CustomerDashboard() {
-  const { customer, create, update } = useCustomer({ customerId: 'cus_123' });
-  const { subscriptions, cancel } = useSubscription('sub_456');
-  const { checkout, create: createCheckout } = useCheckout();
+  const { retrieve, create, update } = useCustomer();
 
-  const handleCreateCheckout = async () => {
-    const newCheckout = await createCheckout.mutate({
-      customer_id: 'cus_123',
-      item_id: 'price_123',
-      session_type: 'one_time',
-    });
+  React.useEffect(() => {
+    retrieve.run(customerId);
+  }, [customerId]);
 
-    // Redirect to payment URL
-    window.location.href = newCheckout.payment_url;
-  };
+  if (retrieve.loading) return <Spinner />;
+  if (retrieve.error) return <Error error={retrieve.error} />;
 
-  return (
-    <div>
-      <h1>Welcome, {customer?.name}</h1>
-      <button onClick={handleCreateCheckout}>Buy Now</button>
-    </div>
-  );
+  return <CustomerView customer={retrieve.data} />;
 }
 ```
 

package/dist/index.d.mts

@@ -1,64 +1,76 @@
-import * as _tanstack_react_query from '@tanstack/react-query';
-import { QueryClient } from '@tanstack/react-query';
-import * as _paykit_sdk_core from '@paykit-sdk/core';
-import { CreateCustomerParams, UpdateCustomerParams, PayKitProvider, UpdateSubscriptionParams, CreateCheckoutParams } from '@paykit-sdk/core';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
+import * as _paykit_sdk_core from '@paykit-sdk/core';
+import { PayKitProvider } from '@paykit-sdk/core';
+
+type PaykitContextValue = {
+    provider: PayKitProvider;
+};
+declare const PaykitProvider: ({ provider, children }: React.PropsWithChildren<PaykitContextValue>) => react_jsx_runtime.JSX.Element;
+declare const usePaykitContext: () => PaykitContextValue;
 
-declare const useCustomer: ({ customerId }: {
-    customerId: string;
-}) => {
-    customer: _paykit_sdk_core.Customer | null | undefined;
-    isLoading: boolean;
-    error: Error | null;
+declare const useCustomer: () => {
+    retrieve: {
+        run: (id: string) => Promise<{
+            data: _paykit_sdk_core.Customer | null | undefined;
+            error: Error | undefined;
+        }>;
+        loading: boolean;
+    };
     create: {
-        mutate: _tanstack_react_query.UseMutateAsyncFunction<_paykit_sdk_core.Customer, Error, CreateCustomerParams, unknown>;
-        isLoading: boolean;
-        error: Error | null;
+        run: (params: _paykit_sdk_core.CreateCustomerParams) => Promise<{
+            data: _paykit_sdk_core.Customer | undefined;
+            error: Error | undefined;
+        }>;
+        loading: boolean;
     };
     update: {
-        mutate: _tanstack_react_query.UseMutateAsyncFunction<_paykit_sdk_core.Customer, Error, {
-            id: string;
-            params: UpdateCustomerParams;
-        }, unknown>;
-        isLoading: boolean;
-        error: Error | null;
+        run: (id: string, params: _paykit_sdk_core.UpdateCustomerParams) => Promise<{
+            data: _paykit_sdk_core.Customer | undefined;
+            error: Error | undefined;
+        }>;
+        loading: boolean;
     };
 };
 
-type PaykitContextValue = {
-    provider: PayKitProvider;
-    queryClient?: QueryClient;
-};
-declare const PaykitProvider: ({ provider, queryClient, children }: React.PropsWithChildren<PaykitContextValue>) => react_jsx_runtime.JSX.Element;
-declare const usePaykitContext: () => PaykitContextValue;
-
-declare const useSubscription: ({ subscriptionId }: {
-    subscriptionId: string;
-}) => {
-    subscription: _paykit_sdk_core.Subscription | undefined;
-    isLoading: boolean;
-    error: Error | null;
+declare const useSubscription: () => {
+    retrieve: {
+        run: (id: string) => Promise<{
+            data: _paykit_sdk_core.Subscription | undefined;
+            error: Error | undefined;
+        }>;
+        loading: boolean;
+    };
     update: {
-        mutate: _tanstack_react_query.UseMutateAsyncFunction<_paykit_sdk_core.Subscription, Error, UpdateSubscriptionParams, unknown>;
-        isLoading: boolean;
-        error: Error | null;
+        run: (id: string, params: _paykit_sdk_core.UpdateSubscriptionParams) => Promise<{
+            data: _paykit_sdk_core.Subscription | undefined;
+            error: Error | undefined;
+        }>;
+        loading: boolean;
     };
     cancel: {
-        mutate: _tanstack_react_query.UseMutateAsyncFunction<_paykit_sdk_core.Subscription, Error, void, unknown>;
-        isLoading: boolean;
-        error: Error | null;
+        run: (id: string) => Promise<{
+            data: _paykit_sdk_core.Subscription | undefined;
+            error: Error | undefined;
+        }>;
+        loading: boolean;
     };
 };
 
-declare const useCheckout: (checkoutId?: string) => {
-    checkout: _paykit_sdk_core.Checkout | undefined;
-    isLoading: boolean;
-    error: Error | null;
+declare const useCheckout: () => {
     create: {
-        mutate: _tanstack_react_query.UseMutateAsyncFunction<_paykit_sdk_core.Checkout, Error, CreateCheckoutParams, unknown>;
-        isLoading: boolean;
-        error: Error | null;
+        run: (params: _paykit_sdk_core.CreateCheckoutParams) => Promise<{
+            data: _paykit_sdk_core.Checkout | undefined;
+            error: Error | undefined;
+        }>;
+        loading: boolean;
+    };
+    retrieve: {
+        run: (id: string) => Promise<{
+            data: _paykit_sdk_core.Checkout | undefined;
+            error: Error | undefined;
+        }>;
+        loading: boolean;
     };
 };
 

package/dist/index.d.ts

@@ -1,64 +1,76 @@
-import * as _tanstack_react_query from '@tanstack/react-query';
-import { QueryClient } from '@tanstack/react-query';
-import * as _paykit_sdk_core from '@paykit-sdk/core';
-import { CreateCustomerParams, UpdateCustomerParams, PayKitProvider, UpdateSubscriptionParams, CreateCheckoutParams } from '@paykit-sdk/core';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
+import * as _paykit_sdk_core from '@paykit-sdk/core';
+import { PayKitProvider } from '@paykit-sdk/core';
+
+type PaykitContextValue = {
+    provider: PayKitProvider;
+};
+declare const PaykitProvider: ({ provider, children }: React.PropsWithChildren<PaykitContextValue>) => react_jsx_runtime.JSX.Element;
+declare const usePaykitContext: () => PaykitContextValue;
 
-declare const useCustomer: ({ customerId }: {
-    customerId: string;
-}) => {
-    customer: _paykit_sdk_core.Customer | null | undefined;
-    isLoading: boolean;
-    error: Error | null;
+declare const useCustomer: () => {
+    retrieve: {
+        run: (id: string) => Promise<{
+            data: _paykit_sdk_core.Customer | null | undefined;
+            error: Error | undefined;
+        }>;
+        loading: boolean;
+    };
     create: {
-        mutate: _tanstack_react_query.UseMutateAsyncFunction<_paykit_sdk_core.Customer, Error, CreateCustomerParams, unknown>;
-        isLoading: boolean;
-        error: Error | null;
+        run: (params: _paykit_sdk_core.CreateCustomerParams) => Promise<{
+            data: _paykit_sdk_core.Customer | undefined;
+            error: Error | undefined;
+        }>;
+        loading: boolean;
     };
     update: {
-        mutate: _tanstack_react_query.UseMutateAsyncFunction<_paykit_sdk_core.Customer, Error, {
-            id: string;
-            params: UpdateCustomerParams;
-        }, unknown>;
-        isLoading: boolean;
-        error: Error | null;
+        run: (id: string, params: _paykit_sdk_core.UpdateCustomerParams) => Promise<{
+            data: _paykit_sdk_core.Customer | undefined;
+            error: Error | undefined;
+        }>;
+        loading: boolean;
     };
 };
 
-type PaykitContextValue = {
-    provider: PayKitProvider;
-    queryClient?: QueryClient;
-};
-declare const PaykitProvider: ({ provider, queryClient, children }: React.PropsWithChildren<PaykitContextValue>) => react_jsx_runtime.JSX.Element;
-declare const usePaykitContext: () => PaykitContextValue;
-
-declare const useSubscription: ({ subscriptionId }: {
-    subscriptionId: string;
-}) => {
-    subscription: _paykit_sdk_core.Subscription | undefined;
-    isLoading: boolean;
-    error: Error | null;
+declare const useSubscription: () => {
+    retrieve: {
+        run: (id: string) => Promise<{
+            data: _paykit_sdk_core.Subscription | undefined;
+            error: Error | undefined;
+        }>;
+        loading: boolean;
+    };
     update: {
-        mutate: _tanstack_react_query.UseMutateAsyncFunction<_paykit_sdk_core.Subscription, Error, UpdateSubscriptionParams, unknown>;
-        isLoading: boolean;
-        error: Error | null;
+        run: (id: string, params: _paykit_sdk_core.UpdateSubscriptionParams) => Promise<{
+            data: _paykit_sdk_core.Subscription | undefined;
+            error: Error | undefined;
+        }>;
+        loading: boolean;
     };
     cancel: {
-        mutate: _tanstack_react_query.UseMutateAsyncFunction<_paykit_sdk_core.Subscription, Error, void, unknown>;
-        isLoading: boolean;
-        error: Error | null;
+        run: (id: string) => Promise<{
+            data: _paykit_sdk_core.Subscription | undefined;
+            error: Error | undefined;
+        }>;
+        loading: boolean;
     };
 };
 
-declare const useCheckout: (checkoutId?: string) => {
-    checkout: _paykit_sdk_core.Checkout | undefined;
-    isLoading: boolean;
-    error: Error | null;
+declare const useCheckout: () => {
     create: {
-        mutate: _tanstack_react_query.UseMutateAsyncFunction<_paykit_sdk_core.Checkout, Error, CreateCheckoutParams, unknown>;
-        isLoading: boolean;
-        error: Error | null;
+        run: (params: _paykit_sdk_core.CreateCheckoutParams) => Promise<{
+            data: _paykit_sdk_core.Checkout | undefined;
+            error: Error | undefined;
+        }>;
+        loading: boolean;
+    };
+    retrieve: {
+        run: (id: string) => Promise<{
+            data: _paykit_sdk_core.Checkout | undefined;
+            error: Error | undefined;
+        }>;
+        loading: boolean;
     };
 };
 

package/dist/index.js

@@ -38,12 +38,8 @@ __export(index_exports, {
 });
 module.exports = __toCommonJS(index_exports);
 
-// src/customer.ts
-var import_react_query2 = require("@tanstack/react-query");
-
-// src/paykit.tsx
+// src/core.tsx
 var React = __toESM(require("react"));
-var import_react_query = require("@tanstack/react-query");
 
 // src/util.ts
 var parseElementContext = (ctx, name) => {
@@ -51,112 +47,55 @@ var parseElementContext = (ctx, name) => {
   return ctx;
 };
 
-// src/paykit.tsx
+// src/core.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var PaykitContext = React.createContext({});
-var PaykitProvider = ({ provider, queryClient, children }) => {
-  const queryClient$1 = queryClient != null ? queryClient : new import_react_query.QueryClient();
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PaykitContext.Provider, { value: { provider, queryClient: queryClient$1 }, children });
+var PaykitProvider = ({ provider, children }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PaykitContext.Provider, { value: { provider }, children });
 };
 var usePaykitContext = () => parseElementContext(React.useContext(PaykitContext), "PaykitContext");
 
-// src/customer.ts
-var useCustomer = ({ customerId }) => {
+// src/hooks/use-async-fn.ts
+var React2 = __toESM(require("react"));
+var import_core = require("@paykit-sdk/core");
+var useAsyncFn = (fn) => {
+  const [loading, setLoading] = React2.useState(false);
+  const run = React2.useCallback(
+    async (...args) => {
+      setLoading(true);
+      const [data, error] = await (0, import_core.tryCatchAsync)(fn(...args));
+      setLoading(false);
+      return { data, error };
+    },
+    [fn]
+  );
+  return { run, loading };
+};
+
+// src/resources/customer.ts
+var useCustomer = () => {
   const { provider } = usePaykitContext();
-  const {
-    data: customer,
-    isLoading,
-    error
-  } = (0, import_react_query2.useQuery)({
-    queryKey: ["paykit", "customer", customerId],
-    queryFn: () => provider.retrieveCustomer(customerId),
-    enabled: !!customerId
-  });
-  const {
-    mutateAsync: createCustomer,
-    isPending: isCreating,
-    error: createError
-  } = (0, import_react_query2.useMutation)({
-    mutationFn: (params) => provider.createCustomer(params)
-  });
-  const {
-    mutateAsync: updateCustomer,
-    isPending: isUpdating,
-    error: updateError
-  } = (0, import_react_query2.useMutation)({
-    mutationFn: ({ id, params }) => provider.updateCustomer(id, params)
-  });
-  return {
-    customer,
-    isLoading,
-    error,
-    create: { mutate: createCustomer, isLoading: isCreating, error: createError },
-    update: { mutate: updateCustomer, isLoading: isUpdating, error: updateError }
-  };
+  const retrieve = useAsyncFn(provider.retrieveCustomer);
+  const create = useAsyncFn(provider.createCustomer);
+  const update = useAsyncFn(provider.updateCustomer);
+  return { retrieve, create, update };
 };
 
-// src/subscription.tsx
-var import_react_query3 = require("@tanstack/react-query");
-var useSubscription = ({ subscriptionId }) => {
+// src/resources/subscription.ts
+var useSubscription = () => {
   const { provider } = usePaykitContext();
-  const {
-    data: subscription,
-    isLoading,
-    error
-  } = (0, import_react_query3.useQuery)({
-    queryKey: ["paykit", "subscription", subscriptionId],
-    queryFn: () => provider.retrieveSubscription(subscriptionId),
-    enabled: !!subscriptionId
-  });
-  const {
-    mutateAsync: updateSubscription,
-    isPending: isUpdating,
-    error: updateError
-  } = (0, import_react_query3.useMutation)({
-    mutationFn: (params) => provider.updateSubscription(subscriptionId, params)
-  });
-  const {
-    mutateAsync: cancelSubscription,
-    isPending: isCancelling,
-    error: cancelError
-  } = (0, import_react_query3.useMutation)({
-    mutationFn: () => provider.cancelSubscription(subscriptionId)
-  });
-  return {
-    subscription,
-    isLoading,
-    error,
-    update: { mutate: updateSubscription, isLoading: isUpdating, error: updateError },
-    cancel: { mutate: cancelSubscription, isLoading: isCancelling, error: cancelError }
-  };
+  const retrieve = useAsyncFn(provider.retrieveSubscription);
+  const update = useAsyncFn(provider.updateSubscription);
+  const cancel = useAsyncFn(provider.cancelSubscription);
+  return { retrieve, update, cancel };
 };
 
-// src/checkout.ts
-var import_react_query4 = require("@tanstack/react-query");
-var useCheckout = (checkoutId) => {
+// src/resources/checkout.ts
+var useCheckout = () => {
   const { provider } = usePaykitContext();
-  const {
-    data: checkout,
-    isLoading,
-    error
-  } = (0, import_react_query4.useQuery)({
-    queryKey: ["paykit", "checkout", checkoutId],
-    queryFn: () => provider.retrieveCheckout(checkoutId),
-    enabled: !!checkoutId
-  });
-  const {
-    mutateAsync: createCheckout,
-    isPending: isCreating,
-    error: createError
-  } = (0, import_react_query4.useMutation)({
-    mutationFn: (params) => provider.createCheckout(params)
-  });
-  return {
-    checkout,
-    isLoading,
-    error,
-    create: { mutate: createCheckout, isLoading: isCreating, error: createError }
-  };
+  const create = useAsyncFn(provider.createCheckout);
+  const retrieve = useAsyncFn(provider.retrieveCheckout);
+  return { create, retrieve };
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/index.mjs

@@ -1,9 +1,5 @@
-// src/customer.ts
-import { useMutation, useQuery } from "@tanstack/react-query";
-
-// src/paykit.tsx
+// src/core.tsx
 import * as React from "react";
-import { QueryClient } from "@tanstack/react-query";
 
 // src/util.ts
 var parseElementContext = (ctx, name) => {
@@ -11,112 +7,55 @@ var parseElementContext = (ctx, name) => {
   return ctx;
 };
 
-// src/paykit.tsx
+// src/core.tsx
 import { jsx } from "react/jsx-runtime";
 var PaykitContext = React.createContext({});
-var PaykitProvider = ({ provider, queryClient, children }) => {
-  const queryClient$1 = queryClient != null ? queryClient : new QueryClient();
-  return /* @__PURE__ */ jsx(PaykitContext.Provider, { value: { provider, queryClient: queryClient$1 }, children });
+var PaykitProvider = ({ provider, children }) => {
+  return /* @__PURE__ */ jsx(PaykitContext.Provider, { value: { provider }, children });
 };
 var usePaykitContext = () => parseElementContext(React.useContext(PaykitContext), "PaykitContext");
 
-// src/customer.ts
-var useCustomer = ({ customerId }) => {
+// src/hooks/use-async-fn.ts
+import * as React2 from "react";
+import { tryCatchAsync } from "@paykit-sdk/core";
+var useAsyncFn = (fn) => {
+  const [loading, setLoading] = React2.useState(false);
+  const run = React2.useCallback(
+    async (...args) => {
+      setLoading(true);
+      const [data, error] = await tryCatchAsync(fn(...args));
+      setLoading(false);
+      return { data, error };
+    },
+    [fn]
+  );
+  return { run, loading };
+};
+
+// src/resources/customer.ts
+var useCustomer = () => {
   const { provider } = usePaykitContext();
-  const {
-    data: customer,
-    isLoading,
-    error
-  } = useQuery({
-    queryKey: ["paykit", "customer", customerId],
-    queryFn: () => provider.retrieveCustomer(customerId),
-    enabled: !!customerId
-  });
-  const {
-    mutateAsync: createCustomer,
-    isPending: isCreating,
-    error: createError
-  } = useMutation({
-    mutationFn: (params) => provider.createCustomer(params)
-  });
-  const {
-    mutateAsync: updateCustomer,
-    isPending: isUpdating,
-    error: updateError
-  } = useMutation({
-    mutationFn: ({ id, params }) => provider.updateCustomer(id, params)
-  });
-  return {
-    customer,
-    isLoading,
-    error,
-    create: { mutate: createCustomer, isLoading: isCreating, error: createError },
-    update: { mutate: updateCustomer, isLoading: isUpdating, error: updateError }
-  };
+  const retrieve = useAsyncFn(provider.retrieveCustomer);
+  const create = useAsyncFn(provider.createCustomer);
+  const update = useAsyncFn(provider.updateCustomer);
+  return { retrieve, create, update };
 };
 
-// src/subscription.tsx
-import { useMutation as useMutation2, useQuery as useQuery2 } from "@tanstack/react-query";
-var useSubscription = ({ subscriptionId }) => {
+// src/resources/subscription.ts
+var useSubscription = () => {
   const { provider } = usePaykitContext();
-  const {
-    data: subscription,
-    isLoading,
-    error
-  } = useQuery2({
-    queryKey: ["paykit", "subscription", subscriptionId],
-    queryFn: () => provider.retrieveSubscription(subscriptionId),
-    enabled: !!subscriptionId
-  });
-  const {
-    mutateAsync: updateSubscription,
-    isPending: isUpdating,
-    error: updateError
-  } = useMutation2({
-    mutationFn: (params) => provider.updateSubscription(subscriptionId, params)
-  });
-  const {
-    mutateAsync: cancelSubscription,
-    isPending: isCancelling,
-    error: cancelError
-  } = useMutation2({
-    mutationFn: () => provider.cancelSubscription(subscriptionId)
-  });
-  return {
-    subscription,
-    isLoading,
-    error,
-    update: { mutate: updateSubscription, isLoading: isUpdating, error: updateError },
-    cancel: { mutate: cancelSubscription, isLoading: isCancelling, error: cancelError }
-  };
+  const retrieve = useAsyncFn(provider.retrieveSubscription);
+  const update = useAsyncFn(provider.updateSubscription);
+  const cancel = useAsyncFn(provider.cancelSubscription);
+  return { retrieve, update, cancel };
 };
 
-// src/checkout.ts
-import { useMutation as useMutation3, useQuery as useQuery3 } from "@tanstack/react-query";
-var useCheckout = (checkoutId) => {
+// src/resources/checkout.ts
+var useCheckout = () => {
   const { provider } = usePaykitContext();
-  const {
-    data: checkout,
-    isLoading,
-    error
-  } = useQuery3({
-    queryKey: ["paykit", "checkout", checkoutId],
-    queryFn: () => provider.retrieveCheckout(checkoutId),
-    enabled: !!checkoutId
-  });
-  const {
-    mutateAsync: createCheckout,
-    isPending: isCreating,
-    error: createError
-  } = useMutation3({
-    mutationFn: (params) => provider.createCheckout(params)
-  });
-  return {
-    checkout,
-    isLoading,
-    error,
-    create: { mutate: createCheckout, isLoading: isCreating, error: createError }
-  };
+  const create = useAsyncFn(provider.createCheckout);
+  const retrieve = useAsyncFn(provider.retrieveCheckout);
+  return { create, retrieve };
 };
 export {
   PaykitProvider,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@paykit-sdk/react",
-  "version": "1.0.1-alpha.6",
+  "version": "1.1.0-alpha.1",
   "main": "dist/index.js",
   "module": "dist/index.esm.js",
   "types": "dist/index.d.ts",
@@ -20,13 +20,11 @@
     "@paykit-sdk/core": "workspace:*"
   },
   "peerDependencies": {
-    "@tanstack/react-query": "^5.80.5",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0"
   },
   "devDependencies": {
     "@swc/core": "^1.12.9",
-    "@tanstack/react-query": "^5.80.5",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
     "react": "^18.0.0",