@paykit-sdk/react 1.1.0-alpha.1 → 1.1.0-alpha.3

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 +13 -59
  2. package/dist/index.d.mts +46 -19
  3. package/dist/index.d.ts +46 -19
  4. package/dist/index.js +2 -1
  5. package/dist/index.mjs +2 -1
  6. package/package.json +15 -9
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,6 +30,7 @@ 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';
37
35
 
38
36
  function CustomerDashboard() {
@@ -43,76 +41,32 @@ function CustomerDashboard() {
43
41
  }, [customerId]);
44
42
 
45
43
  if (retrieve.loading) return <Spinner />;
44
+
46
45
  if (retrieve.error) return <Error error={retrieve.error} />;
47
46
 
48
47
  return <CustomerView customer={retrieve.data} />;
49
48
  }
50
49
  ```
51
50
 
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
- ```
73
-
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:**
51
+ ## Available Hooks
89
52
 
90
- - `checkout` - Checkout data (if ID provided)
91
- - `isLoading` - Loading state
92
- - `error` - Error state
93
- - `create` - Create checkout mutation
53
+ - `useCustomer()` - Manage customer data
54
+ - `useSubscription()` - Handle subscriptions
55
+ - `useCheckout()` - Process checkouts
94
56
 
95
57
  ## Providers
96
58
 
97
- Works with any PayKit provider:
98
-
99
- ```tsx
100
- // Stripe
101
- import { stripe } from '@paykit-sdk/stripe';
102
- const provider = stripe();
59
+ Works with any PayKit provider including Stripe, Polar, Gumroad, and more.
103
60
 
104
- // Local (for development)
105
- import { local } from '@paykit-sdk/local';
106
- const provider = local();
61
+ ## Documentation
107
62
 
108
- // Polar
109
- import { polar } from '@paykit-sdk/polar';
110
- const provider = polar();
111
- ```
63
+ - [React Documentation](https://paykit.dev/docs/react)
64
+ - [PayKit Documentation](https://paykit.dev)
65
+ - [Production Examples](https://usepaykit.dev/docs/examples)
112
66
 
113
67
  ## TypeScript Support
114
68
 
115
- Full TypeScript support included with proper type definitions.
69
+ Full TypeScript support included.
116
70
 
117
71
  ## License
118
72
 
package/dist/index.d.mts CHANGED
@@ -3,31 +3,43 @@ 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
17
  run: (id: string) => Promise<{
15
- data: _paykit_sdk_core.Customer | null | undefined;
16
- error: Error | undefined;
18
+ data: undefined;
19
+ error: Error;
20
+ } | {
21
+ data: _paykit_sdk_core.Customer | null;
22
+ error: undefined;
17
23
  }>;
18
24
  loading: boolean;
19
25
  };
20
26
  create: {
21
27
  run: (params: _paykit_sdk_core.CreateCustomerParams) => Promise<{
22
- data: _paykit_sdk_core.Customer | undefined;
23
- error: Error | undefined;
28
+ data: undefined;
29
+ error: Error;
30
+ } | {
31
+ data: _paykit_sdk_core.Customer;
32
+ error: undefined;
24
33
  }>;
25
34
  loading: boolean;
26
35
  };
27
36
  update: {
28
37
  run: (id: string, params: _paykit_sdk_core.UpdateCustomerParams) => Promise<{
29
- data: _paykit_sdk_core.Customer | undefined;
30
- error: Error | undefined;
38
+ data: undefined;
39
+ error: Error;
40
+ } | {
41
+ data: _paykit_sdk_core.Customer;
42
+ error: undefined;
31
43
  }>;
32
44
  loading: boolean;
33
45
  };
@@ -36,22 +48,31 @@ declare const useCustomer: () => {
36
48
  declare const useSubscription: () => {
37
49
  retrieve: {
38
50
  run: (id: string) => Promise<{
39
- data: _paykit_sdk_core.Subscription | undefined;
40
- error: Error | undefined;
51
+ data: undefined;
52
+ error: Error;
53
+ } | {
54
+ data: _paykit_sdk_core.Subscription | null;
55
+ error: undefined;
41
56
  }>;
42
57
  loading: boolean;
43
58
  };
44
59
  update: {
45
60
  run: (id: string, params: _paykit_sdk_core.UpdateSubscriptionParams) => Promise<{
46
- data: _paykit_sdk_core.Subscription | undefined;
47
- error: Error | undefined;
61
+ data: undefined;
62
+ error: Error;
63
+ } | {
64
+ data: _paykit_sdk_core.Subscription;
65
+ error: undefined;
48
66
  }>;
49
67
  loading: boolean;
50
68
  };
51
69
  cancel: {
52
70
  run: (id: string) => Promise<{
53
- data: _paykit_sdk_core.Subscription | undefined;
54
- error: Error | undefined;
71
+ data: undefined;
72
+ error: Error;
73
+ } | {
74
+ data: null;
75
+ error: undefined;
55
76
  }>;
56
77
  loading: boolean;
57
78
  };
@@ -60,15 +81,21 @@ declare const useSubscription: () => {
60
81
  declare const useCheckout: () => {
61
82
  create: {
62
83
  run: (params: _paykit_sdk_core.CreateCheckoutParams) => Promise<{
63
- data: _paykit_sdk_core.Checkout | undefined;
64
- error: Error | undefined;
84
+ data: undefined;
85
+ error: Error;
86
+ } | {
87
+ data: _paykit_sdk_core.Checkout;
88
+ error: undefined;
65
89
  }>;
66
90
  loading: boolean;
67
91
  };
68
92
  retrieve: {
69
93
  run: (id: string) => Promise<{
70
- data: _paykit_sdk_core.Checkout | undefined;
71
- error: Error | undefined;
94
+ data: undefined;
95
+ error: Error;
96
+ } | {
97
+ data: _paykit_sdk_core.Checkout | null;
98
+ error: undefined;
72
99
  }>;
73
100
  loading: boolean;
74
101
  };
package/dist/index.d.ts CHANGED
@@ -3,31 +3,43 @@ 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
17
  run: (id: string) => Promise<{
15
- data: _paykit_sdk_core.Customer | null | undefined;
16
- error: Error | undefined;
18
+ data: undefined;
19
+ error: Error;
20
+ } | {
21
+ data: _paykit_sdk_core.Customer | null;
22
+ error: undefined;
17
23
  }>;
18
24
  loading: boolean;
19
25
  };
20
26
  create: {
21
27
  run: (params: _paykit_sdk_core.CreateCustomerParams) => Promise<{
22
- data: _paykit_sdk_core.Customer | undefined;
23
- error: Error | undefined;
28
+ data: undefined;
29
+ error: Error;
30
+ } | {
31
+ data: _paykit_sdk_core.Customer;
32
+ error: undefined;
24
33
  }>;
25
34
  loading: boolean;
26
35
  };
27
36
  update: {
28
37
  run: (id: string, params: _paykit_sdk_core.UpdateCustomerParams) => Promise<{
29
- data: _paykit_sdk_core.Customer | undefined;
30
- error: Error | undefined;
38
+ data: undefined;
39
+ error: Error;
40
+ } | {
41
+ data: _paykit_sdk_core.Customer;
42
+ error: undefined;
31
43
  }>;
32
44
  loading: boolean;
33
45
  };
@@ -36,22 +48,31 @@ declare const useCustomer: () => {
36
48
  declare const useSubscription: () => {
37
49
  retrieve: {
38
50
  run: (id: string) => Promise<{
39
- data: _paykit_sdk_core.Subscription | undefined;
40
- error: Error | undefined;
51
+ data: undefined;
52
+ error: Error;
53
+ } | {
54
+ data: _paykit_sdk_core.Subscription | null;
55
+ error: undefined;
41
56
  }>;
42
57
  loading: boolean;
43
58
  };
44
59
  update: {
45
60
  run: (id: string, params: _paykit_sdk_core.UpdateSubscriptionParams) => Promise<{
46
- data: _paykit_sdk_core.Subscription | undefined;
47
- error: Error | undefined;
61
+ data: undefined;
62
+ error: Error;
63
+ } | {
64
+ data: _paykit_sdk_core.Subscription;
65
+ error: undefined;
48
66
  }>;
49
67
  loading: boolean;
50
68
  };
51
69
  cancel: {
52
70
  run: (id: string) => Promise<{
53
- data: _paykit_sdk_core.Subscription | undefined;
54
- error: Error | undefined;
71
+ data: undefined;
72
+ error: Error;
73
+ } | {
74
+ data: null;
75
+ error: undefined;
55
76
  }>;
56
77
  loading: boolean;
57
78
  };
@@ -60,15 +81,21 @@ declare const useSubscription: () => {
60
81
  declare const useCheckout: () => {
61
82
  create: {
62
83
  run: (params: _paykit_sdk_core.CreateCheckoutParams) => Promise<{
63
- data: _paykit_sdk_core.Checkout | undefined;
64
- error: Error | undefined;
84
+ data: undefined;
85
+ error: Error;
86
+ } | {
87
+ data: _paykit_sdk_core.Checkout;
88
+ error: undefined;
65
89
  }>;
66
90
  loading: boolean;
67
91
  };
68
92
  retrieve: {
69
93
  run: (id: string) => Promise<{
70
- data: _paykit_sdk_core.Checkout | undefined;
71
- error: Error | undefined;
94
+ data: undefined;
95
+ error: Error;
96
+ } | {
97
+ data: _paykit_sdk_core.Checkout | null;
98
+ error: undefined;
72
99
  }>;
73
100
  loading: boolean;
74
101
  };
package/dist/index.js CHANGED
@@ -65,7 +65,8 @@ var useAsyncFn = (fn) => {
65
65
  setLoading(true);
66
66
  const [data, error] = await (0, import_core.tryCatchAsync)(fn(...args));
67
67
  setLoading(false);
68
- return { data, error };
68
+ if (error) return { data: void 0, error };
69
+ return { data, error: void 0 };
69
70
  },
70
71
  [fn]
71
72
  );
package/dist/index.mjs CHANGED
@@ -25,7 +25,8 @@ var useAsyncFn = (fn) => {
25
25
  setLoading(true);
26
26
  const [data, error] = await tryCatchAsync(fn(...args));
27
27
  setLoading(false);
28
- return { data, error };
28
+ if (error) return { data: void 0, error };
29
+ return { data, error: void 0 };
29
30
  },
30
31
  [fn]
31
32
  );
package/package.json CHANGED
@@ -1,27 +1,32 @@
1
1
  {
2
2
  "name": "@paykit-sdk/react",
3
- "version": "1.1.0-alpha.1",
3
+ "version": "1.1.0-alpha.3",
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
  ],
10
17
  "scripts": {
11
18
  "build": "tsup src/index.ts --format cjs,esm --dts --clean",
12
19
  "dev": "tsup src/index.ts --format cjs,esm --dts --watch",
13
- "prepublishOnly": "npm run build",
20
+ "prepublishOnly": "rm -rf dist && npm run build",
14
21
  "typecheck": "tsc --noEmit"
15
22
  },
16
23
  "publishConfig": {
17
24
  "access": "public"
18
25
  },
19
- "dependencies": {
20
- "@paykit-sdk/core": "workspace:*"
21
- },
22
26
  "peerDependencies": {
23
27
  "react": ">=16.8.0",
24
- "react-dom": ">=16.8.0"
28
+ "react-dom": ">=16.8.0",
29
+ "@paykit-sdk/core": ">=1.1.0"
25
30
  },
26
31
  "devDependencies": {
27
32
  "@swc/core": "^1.12.9",
@@ -30,7 +35,8 @@
30
35
  "react": "^18.0.0",
31
36
  "react-dom": "^18.0.0",
32
37
  "tsup": "^8.0.0",
33
- "typescript": "^5.0.0"
38
+ "typescript": "^5.0.0",
39
+ "@paykit-sdk/core": "workspace:*"
34
40
  },
35
41
  "description": "React hooks and components for PayKit SDK - Universal payment processing with Stripe, Polar, and more",
36
42
  "keywords": [
@@ -45,5 +51,5 @@
45
51
  ],
46
52
  "author": "Emmanuel Odii",
47
53
  "license": "ISC",
48
- "homepage": "https://paykit-web.vercel.app"
54
+ "homepage": "https://usepaykit.dev"
49
55
  }