@solvapay/react 1.0.0-preview.19 → 1.0.0-preview.20
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.
- package/README.md +29 -29
- package/dist/index.cjs +170 -166
- package/dist/index.d.cts +166 -147
- package/dist/index.d.ts +166 -147
- package/dist/index.js +160 -156
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -18,7 +18,7 @@ pnpm add @solvapay/react
|
|
|
18
18
|
### Zero-Config Usage (Recommended)
|
|
19
19
|
|
|
20
20
|
```tsx
|
|
21
|
-
import { SolvaPayProvider, PaymentForm,
|
|
21
|
+
import { SolvaPayProvider, PaymentForm, usePurchase } from '@solvapay/react'
|
|
22
22
|
|
|
23
23
|
export default function App() {
|
|
24
24
|
return (
|
|
@@ -31,7 +31,7 @@ export default function App() {
|
|
|
31
31
|
|
|
32
32
|
By default, `SolvaPayProvider` uses:
|
|
33
33
|
|
|
34
|
-
- `/api/check-
|
|
34
|
+
- `/api/check-purchase` for purchase checks
|
|
35
35
|
- `/api/create-payment-intent` for payment creation
|
|
36
36
|
- `/api/process-payment` for payment processing
|
|
37
37
|
|
|
@@ -45,7 +45,7 @@ export default function App() {
|
|
|
45
45
|
<SolvaPayProvider
|
|
46
46
|
config={{
|
|
47
47
|
api: {
|
|
48
|
-
|
|
48
|
+
checkPurchase: '/api/custom/purchase',
|
|
49
49
|
createPayment: '/api/custom/payment',
|
|
50
50
|
processPayment: '/api/custom/process',
|
|
51
51
|
},
|
|
@@ -93,9 +93,9 @@ export default function App() {
|
|
|
93
93
|
if (!res.ok) throw new Error('Failed to create payment')
|
|
94
94
|
return res.json()
|
|
95
95
|
}}
|
|
96
|
-
|
|
97
|
-
const res = await fetch(`/api/custom/
|
|
98
|
-
if (!res.ok) throw new Error('Failed to check
|
|
96
|
+
checkPurchase={async customerRef => {
|
|
97
|
+
const res = await fetch(`/api/custom/purchase?customerRef=${customerRef}`)
|
|
98
|
+
if (!res.ok) throw new Error('Failed to check purchase')
|
|
99
99
|
return res.json()
|
|
100
100
|
}}
|
|
101
101
|
>
|
|
@@ -109,12 +109,12 @@ export default function App() {
|
|
|
109
109
|
|
|
110
110
|
### SolvaPayProvider
|
|
111
111
|
|
|
112
|
-
Headless context provider that manages
|
|
112
|
+
Headless context provider that manages purchase state, payment methods, and customer references.
|
|
113
113
|
|
|
114
114
|
**Features:**
|
|
115
115
|
|
|
116
116
|
- Zero-config with sensible defaults
|
|
117
|
-
- Auto-fetches
|
|
117
|
+
- Auto-fetches purchases on mount
|
|
118
118
|
- Built-in localStorage caching with user validation
|
|
119
119
|
- Supports auth adapters for extracting user IDs and tokens
|
|
120
120
|
- Customizable API routes via config
|
|
@@ -125,7 +125,7 @@ Headless context provider that manages subscription state, payment methods, and
|
|
|
125
125
|
- `config.api?` - Custom API route paths
|
|
126
126
|
- `config.auth?` - Auth adapter configuration
|
|
127
127
|
- `createPayment?: (params: { planRef: string; agentRef?: string }) => Promise<PaymentIntentResult>` - Custom payment creation function (optional, overrides config)
|
|
128
|
-
- `
|
|
128
|
+
- `checkPurchase?: (customerRef: string) => Promise<CustomerPurchaseData>` - Custom purchase check function (optional, overrides config)
|
|
129
129
|
- `processPayment?: (params: { paymentIntentId: string; agentRef: string; planRef?: string }) => Promise<ProcessPaymentResult>` - Custom payment processing function (optional)
|
|
130
130
|
- `children: React.ReactNode` - Child components
|
|
131
131
|
|
|
@@ -134,7 +134,7 @@ Headless context provider that manages subscription state, payment methods, and
|
|
|
134
134
|
```tsx
|
|
135
135
|
interface SolvaPayConfig {
|
|
136
136
|
api?: {
|
|
137
|
-
|
|
137
|
+
checkPurchase?: string // Default: '/api/check-purchase'
|
|
138
138
|
createPayment?: string // Default: '/api/create-payment-intent'
|
|
139
139
|
processPayment?: string // Default: '/api/process-payment'
|
|
140
140
|
}
|
|
@@ -208,7 +208,7 @@ function CheckoutPage() {
|
|
|
208
208
|
|
|
209
209
|
### PlanBadge
|
|
210
210
|
|
|
211
|
-
Displays current
|
|
211
|
+
Displays current purchase plan with render props or className pattern.
|
|
212
212
|
|
|
213
213
|
**Props:**
|
|
214
214
|
|
|
@@ -222,9 +222,9 @@ Displays current subscription plan with render props or className pattern.
|
|
|
222
222
|
<PlanBadge className="badge badge-primary" />
|
|
223
223
|
```
|
|
224
224
|
|
|
225
|
-
###
|
|
225
|
+
### PurchaseGate
|
|
226
226
|
|
|
227
|
-
Controls access to content based on
|
|
227
|
+
Controls access to content based on purchase status.
|
|
228
228
|
|
|
229
229
|
**Props:**
|
|
230
230
|
|
|
@@ -234,29 +234,29 @@ Controls access to content based on subscription status.
|
|
|
234
234
|
**Example:**
|
|
235
235
|
|
|
236
236
|
```tsx
|
|
237
|
-
<
|
|
238
|
-
{({ hasAccess, loading,
|
|
237
|
+
<PurchaseGate requirePlan="Pro Plan">
|
|
238
|
+
{({ hasAccess, loading, purchases }) => {
|
|
239
239
|
if (loading) return <Loading />
|
|
240
240
|
if (!hasAccess) return <Paywall />
|
|
241
241
|
return <PremiumContent />
|
|
242
242
|
}}
|
|
243
|
-
</
|
|
243
|
+
</PurchaseGate>
|
|
244
244
|
```
|
|
245
245
|
|
|
246
246
|
## Hooks
|
|
247
247
|
|
|
248
|
-
###
|
|
248
|
+
### usePurchase
|
|
249
249
|
|
|
250
|
-
Access
|
|
250
|
+
Access purchase status, active purchases, and helper functions.
|
|
251
251
|
|
|
252
252
|
```tsx
|
|
253
253
|
const {
|
|
254
|
-
|
|
254
|
+
purchases, // Array of all purchases
|
|
255
255
|
loading, // Loading state
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
refetch, // Function to refetch
|
|
259
|
-
} =
|
|
256
|
+
hasPaidPurchase, // Boolean: has any paid purchase
|
|
257
|
+
activePurchase, // Most recent active purchase
|
|
258
|
+
refetch, // Function to refetch purchases
|
|
259
|
+
} = usePurchase()
|
|
260
260
|
```
|
|
261
261
|
|
|
262
262
|
### usePlans
|
|
@@ -275,17 +275,17 @@ const {
|
|
|
275
275
|
})
|
|
276
276
|
```
|
|
277
277
|
|
|
278
|
-
###
|
|
278
|
+
### usePurchaseStatus
|
|
279
279
|
|
|
280
|
-
Advanced
|
|
280
|
+
Advanced purchase status helpers.
|
|
281
281
|
|
|
282
282
|
```tsx
|
|
283
283
|
const {
|
|
284
|
-
|
|
284
|
+
cancelledPurchase, // Most recent cancelled purchase
|
|
285
285
|
shouldShowCancelledNotice, // Boolean: should show cancellation notice
|
|
286
286
|
formatDate, // Helper to format dates
|
|
287
287
|
getDaysUntilExpiration, // Helper to get days until expiration
|
|
288
|
-
} =
|
|
288
|
+
} = usePurchaseStatus()
|
|
289
289
|
```
|
|
290
290
|
|
|
291
291
|
### useCheckout
|
|
@@ -302,7 +302,7 @@ Access SolvaPay context directly.
|
|
|
302
302
|
|
|
303
303
|
```tsx
|
|
304
304
|
const {
|
|
305
|
-
|
|
305
|
+
purchaseData, // Full purchase data
|
|
306
306
|
loading, // Loading state
|
|
307
307
|
createPayment, // Payment creation function
|
|
308
308
|
processPayment, // Payment processing function
|
|
@@ -316,7 +316,7 @@ const {
|
|
|
316
316
|
All components and hooks are fully typed. Import types as needed:
|
|
317
317
|
|
|
318
318
|
```tsx
|
|
319
|
-
import type { PaymentFormProps,
|
|
319
|
+
import type { PaymentFormProps, PurchaseStatus, PaymentIntentResult } from '@solvapay/react'
|
|
320
320
|
```
|
|
321
321
|
|
|
322
322
|
## More Information
|