@paykit-sdk/react 1.0.1-alpha.6

package/README.md

@@ -0,0 +1,134 @@
+# @paykit-sdk/react
+
+React hooks and components for PayKit SDK - Universal payment processing with Stripe, Polar, and more.
+
+## Installation
+
+```bash
+npm install @paykit-sdk/react @tanstack/react-query
+```
+
+## Quick Start
+
+### 1. Setup Provider
+
+```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>
+  );
+}
+```
+
+### 2. Use Hooks
+
+```tsx
+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 handleCreateCheckout = async () => {
+    const newCheckout = await createCheckout.mutate({
+      customer_id: 'cus_123',
+      item_id: 'price_123',
+      session_type: 'one_time',
+    });
+
+    // Redirect to payment URL
+    window.location.href = newCheckout.payment_url;
+  };
+
+  return (
+    <div>
+      <h1>Welcome, {customer?.name}</h1>
+      <button onClick={handleCreateCheckout}>Buy Now</button>
+    </div>
+  );
+}
+```
+
+## Hooks API
+
+### `useCustomer(options)`
+
+```tsx
+const { customer, create, update } = useCustomer({ customerId: 'cus_123' });
+```
+
+**Returns:**
+
+- `customer` - Customer data
+- `isLoading` - Loading state
+- `error` - Error state
+- `create` - Create customer mutation
+- `update` - Update customer mutation
+
+### `useSubscription(subscriptionId)`
+
+```tsx
+const { subscription, update, cancel } = useSubscription('sub_123');
+```
+
+**Returns:**
+
+- `subscription` - Subscription data
+- `isLoading` - Loading state
+- `error` - Error state
+- `update` - Update subscription mutation
+- `cancel` - Cancel subscription mutation
+
+### `useCheckout(checkoutId?)`
+
+```tsx
+const { checkout, create } = useCheckout();
+```
+
+**Returns:**
+
+- `checkout` - Checkout data (if ID provided)
+- `isLoading` - Loading state
+- `error` - Error state
+- `create` - Create checkout mutation
+
+## Providers
+
+Works with any PayKit provider:
+
+```tsx
+// Stripe
+import { stripe } from '@paykit-sdk/stripe';
+const provider = stripe();
+
+// Local (for development)
+import { local } from '@paykit-sdk/local';
+const provider = local();
+
+// Polar
+import { polar } from '@paykit-sdk/polar';
+const provider = polar();
+```
+
+## TypeScript Support
+
+Full TypeScript support included with proper type definitions.
+
+## License
+
+MIT

package/dist/index.d.mts

@@ -0,0 +1,65 @@
+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';
+
+declare const useCustomer: ({ customerId }: {
+    customerId: string;
+}) => {
+    customer: _paykit_sdk_core.Customer | null | undefined;
+    isLoading: boolean;
+    error: Error | null;
+    create: {
+        mutate: _tanstack_react_query.UseMutateAsyncFunction<_paykit_sdk_core.Customer, Error, CreateCustomerParams, unknown>;
+        isLoading: boolean;
+        error: Error | null;
+    };
+    update: {
+        mutate: _tanstack_react_query.UseMutateAsyncFunction<_paykit_sdk_core.Customer, Error, {
+            id: string;
+            params: UpdateCustomerParams;
+        }, unknown>;
+        isLoading: boolean;
+        error: Error | null;
+    };
+};
+
+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;
+    update: {
+        mutate: _tanstack_react_query.UseMutateAsyncFunction<_paykit_sdk_core.Subscription, Error, UpdateSubscriptionParams, unknown>;
+        isLoading: boolean;
+        error: Error | null;
+    };
+    cancel: {
+        mutate: _tanstack_react_query.UseMutateAsyncFunction<_paykit_sdk_core.Subscription, Error, void, unknown>;
+        isLoading: boolean;
+        error: Error | null;
+    };
+};
+
+declare const useCheckout: (checkoutId?: string) => {
+    checkout: _paykit_sdk_core.Checkout | undefined;
+    isLoading: boolean;
+    error: Error | null;
+    create: {
+        mutate: _tanstack_react_query.UseMutateAsyncFunction<_paykit_sdk_core.Checkout, Error, CreateCheckoutParams, unknown>;
+        isLoading: boolean;
+        error: Error | null;
+    };
+};
+
+export { PaykitProvider, useCheckout, useCustomer, usePaykitContext, useSubscription };

package/dist/index.d.ts

@@ -0,0 +1,65 @@
+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';
+
+declare const useCustomer: ({ customerId }: {
+    customerId: string;
+}) => {
+    customer: _paykit_sdk_core.Customer | null | undefined;
+    isLoading: boolean;
+    error: Error | null;
+    create: {
+        mutate: _tanstack_react_query.UseMutateAsyncFunction<_paykit_sdk_core.Customer, Error, CreateCustomerParams, unknown>;
+        isLoading: boolean;
+        error: Error | null;
+    };
+    update: {
+        mutate: _tanstack_react_query.UseMutateAsyncFunction<_paykit_sdk_core.Customer, Error, {
+            id: string;
+            params: UpdateCustomerParams;
+        }, unknown>;
+        isLoading: boolean;
+        error: Error | null;
+    };
+};
+
+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;
+    update: {
+        mutate: _tanstack_react_query.UseMutateAsyncFunction<_paykit_sdk_core.Subscription, Error, UpdateSubscriptionParams, unknown>;
+        isLoading: boolean;
+        error: Error | null;
+    };
+    cancel: {
+        mutate: _tanstack_react_query.UseMutateAsyncFunction<_paykit_sdk_core.Subscription, Error, void, unknown>;
+        isLoading: boolean;
+        error: Error | null;
+    };
+};
+
+declare const useCheckout: (checkoutId?: string) => {
+    checkout: _paykit_sdk_core.Checkout | undefined;
+    isLoading: boolean;
+    error: Error | null;
+    create: {
+        mutate: _tanstack_react_query.UseMutateAsyncFunction<_paykit_sdk_core.Checkout, Error, CreateCheckoutParams, unknown>;
+        isLoading: boolean;
+        error: Error | null;
+    };
+};
+
+export { PaykitProvider, useCheckout, useCustomer, usePaykitContext, useSubscription };

package/dist/index.js

@@ -0,0 +1,168 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  PaykitProvider: () => PaykitProvider,
+  useCheckout: () => useCheckout,
+  useCustomer: () => useCustomer,
+  usePaykitContext: () => usePaykitContext,
+  useSubscription: () => useSubscription
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/customer.ts
+var import_react_query2 = require("@tanstack/react-query");
+
+// src/paykit.tsx
+var React = __toESM(require("react"));
+var import_react_query = require("@tanstack/react-query");
+
+// src/util.ts
+var parseElementContext = (ctx, name) => {
+  if (!ctx) throw new Error(`${name}Context must be used within the ${name}Provider`);
+  return ctx;
+};
+
+// src/paykit.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 usePaykitContext = () => parseElementContext(React.useContext(PaykitContext), "PaykitContext");
+
+// src/customer.ts
+var useCustomer = ({ customerId }) => {
+  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 }
+  };
+};
+
+// src/subscription.tsx
+var import_react_query3 = require("@tanstack/react-query");
+var useSubscription = ({ subscriptionId }) => {
+  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 }
+  };
+};
+
+// src/checkout.ts
+var import_react_query4 = require("@tanstack/react-query");
+var useCheckout = (checkoutId) => {
+  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 }
+  };
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PaykitProvider,
+  useCheckout,
+  useCustomer,
+  usePaykitContext,
+  useSubscription
+});

package/dist/index.mjs

@@ -0,0 +1,127 @@
+// src/customer.ts
+import { useMutation, useQuery } from "@tanstack/react-query";
+
+// src/paykit.tsx
+import * as React from "react";
+import { QueryClient } from "@tanstack/react-query";
+
+// src/util.ts
+var parseElementContext = (ctx, name) => {
+  if (!ctx) throw new Error(`${name}Context must be used within the ${name}Provider`);
+  return ctx;
+};
+
+// src/paykit.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 usePaykitContext = () => parseElementContext(React.useContext(PaykitContext), "PaykitContext");
+
+// src/customer.ts
+var useCustomer = ({ customerId }) => {
+  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 }
+  };
+};
+
+// src/subscription.tsx
+import { useMutation as useMutation2, useQuery as useQuery2 } from "@tanstack/react-query";
+var useSubscription = ({ subscriptionId }) => {
+  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 }
+  };
+};
+
+// src/checkout.ts
+import { useMutation as useMutation3, useQuery as useQuery3 } from "@tanstack/react-query";
+var useCheckout = (checkoutId) => {
+  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 }
+  };
+};
+export {
+  PaykitProvider,
+  useCheckout,
+  useCustomer,
+  usePaykitContext,
+  useSubscription
+};

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@paykit-sdk/react",
+  "version": "1.0.1-alpha.6",
+  "main": "dist/index.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup src/index.ts --format cjs,esm --dts --clean",
+    "dev": "tsup src/index.ts --format cjs,esm --dts --watch",
+    "prepublishOnly": "npm run build",
+    "typecheck": "tsc --noEmit"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@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",
+    "react-dom": "^18.0.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.0.0"
+  },
+  "description": "React hooks and components for PayKit SDK - Universal payment processing with Stripe, Polar, and more",
+  "keywords": [
+    "paykit",
+    "react",
+    "hooks",
+    "payments",
+    "stripe",
+    "polar",
+    "subscriptions",
+    "checkout"
+  ],
+  "author": "Emmanuel Odii",
+  "license": "ISC",
+  "homepage": "https://paykit-web.vercel.app"
+}