@paykit-sdk/react 1.1.0 → 1.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/README.md +16 -61
  2. package/dist/index.d.mts +62 -27
  3. package/dist/index.d.ts +62 -27
  4. package/dist/index.js +4 -8
  5. package/dist/index.mjs +4 -8
  6. package/package.json +21 -14
package/README.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # @paykit-sdk/react
2
2
 
3
- React hooks and components for PayKit SDK - Universal payment processing with Stripe, Polar, and more.
3
+ PayKit React is a toolkit designed to simplify payment processing in React applications. It provides hooks and components that work seamlessly with any PayKit provider (Stripe, Polar, Gumroad, etc.) to handle customers, subscriptions, and checkouts.
4
4
 
5
5
  ## Installation
6
6
 
@@ -16,9 +16,6 @@ npm install @paykit-sdk/react
16
16
  import { PaykitProvider } from '@paykit-sdk/react';
17
17
  import { stripe } from '@paykit-sdk/stripe';
18
18
 
19
- // or import { local } from '@paykit-sdk/local';
20
- // or import { polar } from '@paykit-sdk/polar';
21
-
22
19
  const provider = stripe();
23
20
 
24
21
  function App() {
@@ -33,9 +30,11 @@ function App() {
33
30
  ### 2. Use Hooks
34
31
 
35
32
  ```tsx
33
+ import * as React from 'react';
36
34
  import { useCustomer, useSubscription, useCheckout } from '@paykit-sdk/react';
35
+ import { CustomerView } from './customer-view';
37
36
 
38
- function CustomerDashboard() {
37
+ const CustomerDashboard = ({ customerId }: { customerId: string }) => {
39
38
  const { retrieve, create, update } = useCustomer();
40
39
 
41
40
  React.useEffect(() => {
@@ -43,76 +42,32 @@ function CustomerDashboard() {
43
42
  }, [customerId]);
44
43
 
45
44
  if (retrieve.loading) return <Spinner />;
45
+
46
46
  if (retrieve.error) return <Error error={retrieve.error} />;
47
47
 
48
48
  return <CustomerView customer={retrieve.data} />;
49
- }
49
+ };
50
50
  ```
51
51
 
52
- ## Hooks API
53
-
54
- ### `useCustomer(options)`
55
-
56
- ```tsx
57
- const { customer, create, update } = useCustomer({ customerId: 'cus_123' });
58
- ```
59
-
60
- **Returns:**
61
-
62
- - `customer` - Customer data
63
- - `isLoading` - Loading state
64
- - `error` - Error state
65
- - `create` - Create customer mutation
66
- - `update` - Update customer mutation
67
-
68
- ### `useSubscription(subscriptionId)`
69
-
70
- ```tsx
71
- const { subscription, update, cancel } = useSubscription('sub_123');
72
- ```
52
+ ## Available Hooks
73
53
 
74
- **Returns:**
75
-
76
- - `subscription` - Subscription data
77
- - `isLoading` - Loading state
78
- - `error` - Error state
79
- - `update` - Update subscription mutation
80
- - `cancel` - Cancel subscription mutation
81
-
82
- ### `useCheckout(checkoutId?)`
83
-
84
- ```tsx
85
- const { checkout, create } = useCheckout();
86
- ```
87
-
88
- **Returns:**
89
-
90
- - `checkout` - Checkout data (if ID provided)
91
- - `isLoading` - Loading state
92
- - `error` - Error state
93
- - `create` - Create checkout mutation
54
+ - `useCustomer()` - Manage customer data
55
+ - `useSubscription()` - Handle subscriptions
56
+ - `useCheckout()` - Process checkouts
94
57
 
95
58
  ## Providers
96
59
 
97
- Works with any PayKit provider:
98
-
99
- ```tsx
100
- // Stripe
101
- import { stripe } from '@paykit-sdk/stripe';
102
- const provider = stripe();
60
+ Works with any PayKit provider including Stripe, Polar, Gumroad, and more.
103
61
 
104
- // Local (for development)
105
- import { local } from '@paykit-sdk/local';
106
- const provider = local();
62
+ ## Documentation
107
63
 
108
- // Polar
109
- import { polar } from '@paykit-sdk/polar';
110
- const provider = polar();
111
- ```
64
+ - [React Documentation](https://usepaykit.dev/docs/react)
65
+ - [PayKit Documentation](https://usepaykit.dev)
66
+ - [Production Examples](https://usepaykit.dev/docs/examples)
112
67
 
113
68
  ## TypeScript Support
114
69
 
115
- Full TypeScript support included with proper type definitions.
70
+ Full TypeScript support included.
116
71
 
117
72
  ## License
118
73
 
package/dist/index.d.mts CHANGED
@@ -3,66 +3,101 @@ import * as React from 'react';
3
3
  import * as _paykit_sdk_core from '@paykit-sdk/core';
4
4
  import { PayKitProvider } from '@paykit-sdk/core';
5
5
 
6
- type PaykitContextValue = {
6
+ interface PaykitProviderProps {
7
+ children: React.ReactNode;
8
+ provider: PayKitProvider;
9
+ }
10
+ declare const PaykitProvider: ({ provider, children }: PaykitProviderProps) => react_jsx_runtime.JSX.Element;
11
+ declare const usePaykitContext: () => {
7
12
  provider: PayKitProvider;
8
13
  };
9
- declare const PaykitProvider: ({ provider, children }: React.PropsWithChildren<PaykitContextValue>) => react_jsx_runtime.JSX.Element;
10
- declare const usePaykitContext: () => PaykitContextValue;
11
14
 
12
15
  declare const useCustomer: () => {
13
16
  retrieve: {
14
- run: (id: string) => Promise<void>;
17
+ run: (id: string) => Promise<{
18
+ data: undefined;
19
+ error: Error;
20
+ } | {
21
+ data: _paykit_sdk_core.Customer | null;
22
+ error: undefined;
23
+ }>;
15
24
  loading: boolean;
16
- error: Error | null;
17
- data: _paykit_sdk_core.Customer | null;
18
25
  };
19
26
  create: {
20
- run: (params: _paykit_sdk_core.CreateCustomerParams) => Promise<void>;
27
+ run: (params: _paykit_sdk_core.CreateCustomerParams) => Promise<{
28
+ data: undefined;
29
+ error: Error;
30
+ } | {
31
+ data: _paykit_sdk_core.Customer;
32
+ error: undefined;
33
+ }>;
21
34
  loading: boolean;
22
- error: Error | null;
23
- data: _paykit_sdk_core.Customer | null;
24
35
  };
25
36
  update: {
26
- run: (id: string, params: _paykit_sdk_core.UpdateCustomerParams) => Promise<void>;
37
+ run: (id: string, params: _paykit_sdk_core.UpdateCustomerParams) => Promise<{
38
+ data: undefined;
39
+ error: Error;
40
+ } | {
41
+ data: _paykit_sdk_core.Customer;
42
+ error: undefined;
43
+ }>;
27
44
  loading: boolean;
28
- error: Error | null;
29
- data: _paykit_sdk_core.Customer | null;
30
45
  };
31
46
  };
32
47
 
33
48
  declare const useSubscription: () => {
34
49
  retrieve: {
35
- run: (id: string) => Promise<void>;
50
+ run: (id: string) => Promise<{
51
+ data: undefined;
52
+ error: Error;
53
+ } | {
54
+ data: _paykit_sdk_core.Subscription | null;
55
+ error: undefined;
56
+ }>;
36
57
  loading: boolean;
37
- error: Error | null;
38
- data: _paykit_sdk_core.Subscription | null;
39
58
  };
40
59
  update: {
41
- run: (id: string, params: _paykit_sdk_core.UpdateSubscriptionParams) => Promise<void>;
60
+ run: (id: string, params: _paykit_sdk_core.UpdateSubscriptionParams) => Promise<{
61
+ data: undefined;
62
+ error: Error;
63
+ } | {
64
+ data: _paykit_sdk_core.Subscription;
65
+ error: undefined;
66
+ }>;
42
67
  loading: boolean;
43
- error: Error | null;
44
- data: _paykit_sdk_core.Subscription | null;
45
68
  };
46
69
  cancel: {
47
- run: (id: string) => Promise<void>;
70
+ run: (id: string) => Promise<{
71
+ data: undefined;
72
+ error: Error;
73
+ } | {
74
+ data: null;
75
+ error: undefined;
76
+ }>;
48
77
  loading: boolean;
49
- error: Error | null;
50
- data: _paykit_sdk_core.Subscription | null;
51
78
  };
52
79
  };
53
80
 
54
81
  declare const useCheckout: () => {
55
82
  create: {
56
- run: (params: _paykit_sdk_core.CreateCheckoutParams) => Promise<void>;
83
+ run: (params: _paykit_sdk_core.CreateCheckoutParams) => Promise<{
84
+ data: undefined;
85
+ error: Error;
86
+ } | {
87
+ data: _paykit_sdk_core.Checkout;
88
+ error: undefined;
89
+ }>;
57
90
  loading: boolean;
58
- error: Error | null;
59
- data: _paykit_sdk_core.Checkout | null;
60
91
  };
61
92
  retrieve: {
62
- run: (id: string) => Promise<void>;
93
+ run: (id: string) => Promise<{
94
+ data: undefined;
95
+ error: Error;
96
+ } | {
97
+ data: _paykit_sdk_core.Checkout | null;
98
+ error: undefined;
99
+ }>;
63
100
  loading: boolean;
64
- error: Error | null;
65
- data: _paykit_sdk_core.Checkout | null;
66
101
  };
67
102
  };
68
103
 
package/dist/index.d.ts CHANGED
@@ -3,66 +3,101 @@ import * as React from 'react';
3
3
  import * as _paykit_sdk_core from '@paykit-sdk/core';
4
4
  import { PayKitProvider } from '@paykit-sdk/core';
5
5
 
6
- type PaykitContextValue = {
6
+ interface PaykitProviderProps {
7
+ children: React.ReactNode;
8
+ provider: PayKitProvider;
9
+ }
10
+ declare const PaykitProvider: ({ provider, children }: PaykitProviderProps) => react_jsx_runtime.JSX.Element;
11
+ declare const usePaykitContext: () => {
7
12
  provider: PayKitProvider;
8
13
  };
9
- declare const PaykitProvider: ({ provider, children }: React.PropsWithChildren<PaykitContextValue>) => react_jsx_runtime.JSX.Element;
10
- declare const usePaykitContext: () => PaykitContextValue;
11
14
 
12
15
  declare const useCustomer: () => {
13
16
  retrieve: {
14
- run: (id: string) => Promise<void>;
17
+ run: (id: string) => Promise<{
18
+ data: undefined;
19
+ error: Error;
20
+ } | {
21
+ data: _paykit_sdk_core.Customer | null;
22
+ error: undefined;
23
+ }>;
15
24
  loading: boolean;
16
- error: Error | null;
17
- data: _paykit_sdk_core.Customer | null;
18
25
  };
19
26
  create: {
20
- run: (params: _paykit_sdk_core.CreateCustomerParams) => Promise<void>;
27
+ run: (params: _paykit_sdk_core.CreateCustomerParams) => Promise<{
28
+ data: undefined;
29
+ error: Error;
30
+ } | {
31
+ data: _paykit_sdk_core.Customer;
32
+ error: undefined;
33
+ }>;
21
34
  loading: boolean;
22
- error: Error | null;
23
- data: _paykit_sdk_core.Customer | null;
24
35
  };
25
36
  update: {
26
- run: (id: string, params: _paykit_sdk_core.UpdateCustomerParams) => Promise<void>;
37
+ run: (id: string, params: _paykit_sdk_core.UpdateCustomerParams) => Promise<{
38
+ data: undefined;
39
+ error: Error;
40
+ } | {
41
+ data: _paykit_sdk_core.Customer;
42
+ error: undefined;
43
+ }>;
27
44
  loading: boolean;
28
- error: Error | null;
29
- data: _paykit_sdk_core.Customer | null;
30
45
  };
31
46
  };
32
47
 
33
48
  declare const useSubscription: () => {
34
49
  retrieve: {
35
- run: (id: string) => Promise<void>;
50
+ run: (id: string) => Promise<{
51
+ data: undefined;
52
+ error: Error;
53
+ } | {
54
+ data: _paykit_sdk_core.Subscription | null;
55
+ error: undefined;
56
+ }>;
36
57
  loading: boolean;
37
- error: Error | null;
38
- data: _paykit_sdk_core.Subscription | null;
39
58
  };
40
59
  update: {
41
- run: (id: string, params: _paykit_sdk_core.UpdateSubscriptionParams) => Promise<void>;
60
+ run: (id: string, params: _paykit_sdk_core.UpdateSubscriptionParams) => Promise<{
61
+ data: undefined;
62
+ error: Error;
63
+ } | {
64
+ data: _paykit_sdk_core.Subscription;
65
+ error: undefined;
66
+ }>;
42
67
  loading: boolean;
43
- error: Error | null;
44
- data: _paykit_sdk_core.Subscription | null;
45
68
  };
46
69
  cancel: {
47
- run: (id: string) => Promise<void>;
70
+ run: (id: string) => Promise<{
71
+ data: undefined;
72
+ error: Error;
73
+ } | {
74
+ data: null;
75
+ error: undefined;
76
+ }>;
48
77
  loading: boolean;
49
- error: Error | null;
50
- data: _paykit_sdk_core.Subscription | null;
51
78
  };
52
79
  };
53
80
 
54
81
  declare const useCheckout: () => {
55
82
  create: {
56
- run: (params: _paykit_sdk_core.CreateCheckoutParams) => Promise<void>;
83
+ run: (params: _paykit_sdk_core.CreateCheckoutParams) => Promise<{
84
+ data: undefined;
85
+ error: Error;
86
+ } | {
87
+ data: _paykit_sdk_core.Checkout;
88
+ error: undefined;
89
+ }>;
57
90
  loading: boolean;
58
- error: Error | null;
59
- data: _paykit_sdk_core.Checkout | null;
60
91
  };
61
92
  retrieve: {
62
- run: (id: string) => Promise<void>;
93
+ run: (id: string) => Promise<{
94
+ data: undefined;
95
+ error: Error;
96
+ } | {
97
+ data: _paykit_sdk_core.Checkout | null;
98
+ error: undefined;
99
+ }>;
63
100
  loading: boolean;
64
- error: Error | null;
65
- data: _paykit_sdk_core.Checkout | null;
66
101
  };
67
102
  };
68
103
 
package/dist/index.js CHANGED
@@ -60,21 +60,17 @@ var React2 = __toESM(require("react"));
60
60
  var import_core = require("@paykit-sdk/core");
61
61
  var useAsyncFn = (fn) => {
62
62
  const [loading, setLoading] = React2.useState(false);
63
- const [error, setError] = React2.useState(null);
64
- const [data, setData] = React2.useState(null);
65
63
  const run = React2.useCallback(
66
64
  async (...args) => {
67
65
  setLoading(true);
68
- setError(null);
69
- setData(null);
70
- const [result, error2] = await (0, import_core.tryCatchAsync)(fn(...args));
71
- if (result) setData(result);
72
- if (error2) setError(error2);
66
+ const [data, error] = await (0, import_core.tryCatchAsync)(fn(...args));
73
67
  setLoading(false);
68
+ if (error) return { data: void 0, error };
69
+ return { data, error: void 0 };
74
70
  },
75
71
  [fn]
76
72
  );
77
- return { run, loading, error, data };
73
+ return { run, loading };
78
74
  };
79
75
 
80
76
  // src/resources/customer.ts
package/dist/index.mjs CHANGED
@@ -20,21 +20,17 @@ import * as React2 from "react";
20
20
  import { tryCatchAsync } from "@paykit-sdk/core";
21
21
  var useAsyncFn = (fn) => {
22
22
  const [loading, setLoading] = React2.useState(false);
23
- const [error, setError] = React2.useState(null);
24
- const [data, setData] = React2.useState(null);
25
23
  const run = React2.useCallback(
26
24
  async (...args) => {
27
25
  setLoading(true);
28
- setError(null);
29
- setData(null);
30
- const [result, error2] = await tryCatchAsync(fn(...args));
31
- if (result) setData(result);
32
- if (error2) setError(error2);
26
+ const [data, error] = await tryCatchAsync(fn(...args));
33
27
  setLoading(false);
28
+ if (error) return { data: void 0, error };
29
+ return { data, error: void 0 };
34
30
  },
35
31
  [fn]
36
32
  );
37
- return { run, loading, error, data };
33
+ return { run, loading };
38
34
  };
39
35
 
40
36
  // src/resources/customer.ts
package/package.json CHANGED
@@ -1,21 +1,32 @@
1
1
  {
2
2
  "name": "@paykit-sdk/react",
3
- "version": "1.1.0",
3
+ "version": "1.1.1",
4
4
  "main": "dist/index.js",
5
- "module": "dist/index.esm.js",
5
+ "module": "dist/index.mjs",
6
6
  "types": "dist/index.d.ts",
7
+ "exports": {
8
+ ".": {
9
+ "types": "./dist/index.d.ts",
10
+ "import": "./dist/index.mjs",
11
+ "require": "./dist/index.js"
12
+ }
13
+ },
7
14
  "files": [
8
15
  "dist"
9
16
  ],
17
+ "scripts": {
18
+ "build": "tsup src/index.ts --format cjs,esm --dts --clean",
19
+ "dev": "tsup src/index.ts --format cjs,esm --dts --watch",
20
+ "prepublishOnly": "rm -rf dist && npm run build",
21
+ "typecheck": "tsc --noEmit"
22
+ },
10
23
  "publishConfig": {
11
24
  "access": "public"
12
25
  },
13
- "dependencies": {
14
- "@paykit-sdk/core": "1.1.0"
15
- },
16
26
  "peerDependencies": {
17
27
  "react": ">=16.8.0",
18
- "react-dom": ">=16.8.0"
28
+ "react-dom": ">=16.8.0",
29
+ "@paykit-sdk/core": ">=1.1.2"
19
30
  },
20
31
  "devDependencies": {
21
32
  "@swc/core": "^1.12.9",
@@ -24,7 +35,8 @@
24
35
  "react": "^18.0.0",
25
36
  "react-dom": "^18.0.0",
26
37
  "tsup": "^8.0.0",
27
- "typescript": "^5.0.0"
38
+ "typescript": "^5.0.0",
39
+ "@paykit-sdk/core": "workspace:*"
28
40
  },
29
41
  "description": "React hooks and components for PayKit SDK - Universal payment processing with Stripe, Polar, and more",
30
42
  "keywords": [
@@ -39,10 +51,5 @@
39
51
  ],
40
52
  "author": "Emmanuel Odii",
41
53
  "license": "ISC",
42
- "homepage": "https://paykit-web.vercel.app",
43
- "scripts": {
44
- "build": "tsup src/index.ts --format cjs,esm --dts --clean",
45
- "dev": "tsup src/index.ts --format cjs,esm --dts --watch",
46
- "typecheck": "tsc --noEmit"
47
- }
48
- }
54
+ "homepage": "https://usepaykit.dev"
55
+ }