@b3dotfun/sdk 0.1.65-alpha.6 → 0.1.65-alpha.7
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/package.json
CHANGED
package/src/anyspend/README.md
CHANGED
|
@@ -81,6 +81,7 @@ That's it! Your users can now purchase NFTs with any token from any supported ch
|
|
|
81
81
|
| [🧩 Components API](./docs/components.md) | Pre-built React components for common use cases |
|
|
82
82
|
| [🪝 Hooks API](./docs/hooks.md) | React hooks for custom implementations |
|
|
83
83
|
| [💡 Examples & Use Cases](./docs/examples.md) | Real-world integration examples |
|
|
84
|
+
| [🛒 Checkout Sessions](./docs/checkout-sessions.md) | Stripe-like checkout sessions for merchant integrations |
|
|
84
85
|
| [⚠️ Error Handling](./docs/error-handling.md) | Error handling patterns and troubleshooting |
|
|
85
86
|
| [🤝 Contributing](./docs/contributing.md) | How to contribute to AnySpend |
|
|
86
87
|
|
|
@@ -123,6 +124,19 @@ That's it! Your users can now purchase NFTs with any token from any supported ch
|
|
|
123
124
|
/>
|
|
124
125
|
```
|
|
125
126
|
|
|
127
|
+
### Merchant Checkout Sessions
|
|
128
|
+
```tsx
|
|
129
|
+
<AnySpend
|
|
130
|
+
defaultActiveTab="fiat"
|
|
131
|
+
destinationTokenAddress="0x..." // USDC
|
|
132
|
+
recipientAddress={userAddress}
|
|
133
|
+
checkoutSession={{
|
|
134
|
+
success_url: "https://myshop.com/success?session={SESSION_ID}",
|
|
135
|
+
metadata: { sku: "widget-1" },
|
|
136
|
+
}}
|
|
137
|
+
/>
|
|
138
|
+
```
|
|
139
|
+
|
|
126
140
|
## 🌐 Supported Networks
|
|
127
141
|
|
|
128
142
|
- **Ethereum** (Mainnet & Sepolia)
|
|
@@ -0,0 +1,228 @@
|
|
|
1
|
+
# Checkout Sessions
|
|
2
|
+
|
|
3
|
+
Stripe-like checkout sessions for AnySpend. Sessions are decoupled from orders — create a session first, then create an order when the user is ready to pay.
|
|
4
|
+
|
|
5
|
+
## Flow
|
|
6
|
+
|
|
7
|
+
```
|
|
8
|
+
1. Merchant creates session POST /checkout-sessions
|
|
9
|
+
<- { id, status: "open" }
|
|
10
|
+
|
|
11
|
+
2. User picks payment method POST /orders { checkoutSessionId }
|
|
12
|
+
<- { id, globalAddress, oneClickBuyUrl }
|
|
13
|
+
|
|
14
|
+
3. User pays Crypto: send to globalAddress
|
|
15
|
+
Onramp: redirect to oneClickBuyUrl
|
|
16
|
+
|
|
17
|
+
4. Merchant polls for completion GET /checkout-sessions/:id
|
|
18
|
+
<- { status: "complete", order_id }
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
### Why Decoupled?
|
|
22
|
+
|
|
23
|
+
Session creation is instant (DB-only, no external calls). The order is created separately when the user commits to a payment method. This means:
|
|
24
|
+
|
|
25
|
+
- Payment method doesn't need to be known at session creation
|
|
26
|
+
- A hosted checkout page can let users choose how to pay
|
|
27
|
+
- Session creation never fails due to external API errors
|
|
28
|
+
|
|
29
|
+
## Session Status Lifecycle
|
|
30
|
+
|
|
31
|
+
```
|
|
32
|
+
open --> processing --> complete
|
|
33
|
+
|
|
|
34
|
+
└--> expired
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
| Status | When |
|
|
38
|
+
|--------|------|
|
|
39
|
+
| `open` | Created, waiting for order/payment |
|
|
40
|
+
| `processing` | Payment received, order executing |
|
|
41
|
+
| `complete` | Order executed successfully |
|
|
42
|
+
| `expired` | TTL expired, payment failed, or manually expired |
|
|
43
|
+
|
|
44
|
+
## API
|
|
45
|
+
|
|
46
|
+
### `POST /checkout-sessions` — Create Session
|
|
47
|
+
|
|
48
|
+
Creates a lightweight session. No order, no external API calls.
|
|
49
|
+
|
|
50
|
+
```json
|
|
51
|
+
{
|
|
52
|
+
"success_url": "https://merchant.com/success?session_id={SESSION_ID}",
|
|
53
|
+
"cancel_url": "https://merchant.com/cancel",
|
|
54
|
+
"metadata": { "sku": "widget-1" },
|
|
55
|
+
"client_reference_id": "merchant-order-456",
|
|
56
|
+
"expires_in": 1800
|
|
57
|
+
}
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
All fields are optional. Payment config (amount, tokens, chains) lives on the order, not the session.
|
|
61
|
+
|
|
62
|
+
### `POST /orders` — Create Order with Session Linking
|
|
63
|
+
|
|
64
|
+
Pass `checkoutSessionId` in the standard order creation request to link the order to a session.
|
|
65
|
+
|
|
66
|
+
```json
|
|
67
|
+
{
|
|
68
|
+
"recipientAddress": "0x...",
|
|
69
|
+
"srcChain": 8453,
|
|
70
|
+
"dstChain": 8453,
|
|
71
|
+
"srcTokenAddress": "0x...",
|
|
72
|
+
"dstTokenAddress": "0x...",
|
|
73
|
+
"srcAmount": "1000000",
|
|
74
|
+
"type": "swap",
|
|
75
|
+
"payload": { "expectedDstAmount": "1000000" },
|
|
76
|
+
"checkoutSessionId": "550e8400-..."
|
|
77
|
+
}
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
**Validation:**
|
|
81
|
+
- Session must exist (`400` if not found)
|
|
82
|
+
- Session must be `open` (`400` if expired/processing/complete)
|
|
83
|
+
- Session must not already have an order (`409 Conflict`)
|
|
84
|
+
|
|
85
|
+
### `GET /checkout-sessions/:id` — Retrieve Session
|
|
86
|
+
|
|
87
|
+
Returns current session state. Status is synced from the underlying order on each retrieval.
|
|
88
|
+
|
|
89
|
+
| Query Param | Description |
|
|
90
|
+
|-------------|-------------|
|
|
91
|
+
| `include=order` | Embed the full order object with transactions |
|
|
92
|
+
|
|
93
|
+
### `POST /checkout-sessions/:id/expire` — Manually Expire
|
|
94
|
+
|
|
95
|
+
Only works on sessions with status `open`.
|
|
96
|
+
|
|
97
|
+
## Redirect URL Templates
|
|
98
|
+
|
|
99
|
+
Use template variables in `success_url` and `cancel_url`:
|
|
100
|
+
|
|
101
|
+
| Variable | Replaced with |
|
|
102
|
+
|----------|--------------|
|
|
103
|
+
| `{SESSION_ID}` | The checkout session UUID |
|
|
104
|
+
| `{ORDER_ID}` | Same value (alias) |
|
|
105
|
+
|
|
106
|
+
If no template variable is present, `?sessionId=<uuid>` is appended automatically.
|
|
107
|
+
|
|
108
|
+
## SDK Integration
|
|
109
|
+
|
|
110
|
+
### Service Methods
|
|
111
|
+
|
|
112
|
+
```typescript
|
|
113
|
+
// Create a checkout session
|
|
114
|
+
const session = await anyspend.createCheckoutSession({
|
|
115
|
+
success_url: "https://mysite.com/success/{SESSION_ID}",
|
|
116
|
+
metadata: { sku: "widget-1" },
|
|
117
|
+
});
|
|
118
|
+
|
|
119
|
+
// Retrieve session status
|
|
120
|
+
const session = await anyspend.getCheckoutSession(sessionId);
|
|
121
|
+
```
|
|
122
|
+
|
|
123
|
+
### React Hooks
|
|
124
|
+
|
|
125
|
+
#### `useCreateCheckoutSession`
|
|
126
|
+
|
|
127
|
+
Mutation hook for creating sessions.
|
|
128
|
+
|
|
129
|
+
```tsx
|
|
130
|
+
import { useCreateCheckoutSession } from "@b3dotfun/sdk/anyspend";
|
|
131
|
+
|
|
132
|
+
const { mutate: createSession, data, isPending } = useCreateCheckoutSession();
|
|
133
|
+
```
|
|
134
|
+
|
|
135
|
+
#### `useCheckoutSession`
|
|
136
|
+
|
|
137
|
+
Query hook with auto-polling. Stops polling when status reaches `complete` or `expired`.
|
|
138
|
+
|
|
139
|
+
```tsx
|
|
140
|
+
import { useCheckoutSession } from "@b3dotfun/sdk/anyspend";
|
|
141
|
+
|
|
142
|
+
const { data: session, isLoading } = useCheckoutSession(sessionId);
|
|
143
|
+
```
|
|
144
|
+
|
|
145
|
+
### Component `checkoutSession` Prop
|
|
146
|
+
|
|
147
|
+
The `<AnySpend>`, `<AnySpendCustom>`, and `<AnySpendCustomExactIn>` components accept an optional `checkoutSession` prop:
|
|
148
|
+
|
|
149
|
+
```tsx
|
|
150
|
+
<AnySpend
|
|
151
|
+
defaultActiveTab="fiat"
|
|
152
|
+
destinationTokenAddress="0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913"
|
|
153
|
+
destinationTokenChainId={8453}
|
|
154
|
+
recipientAddress="0x..."
|
|
155
|
+
checkoutSession={{
|
|
156
|
+
success_url: "https://myshop.com/success?session={SESSION_ID}",
|
|
157
|
+
cancel_url: "https://myshop.com/cancel",
|
|
158
|
+
metadata: { sku: "widget-1" },
|
|
159
|
+
}}
|
|
160
|
+
/>
|
|
161
|
+
```
|
|
162
|
+
|
|
163
|
+
When the `checkoutSession` prop is set, the component automatically creates a session before creating the order, and uses the session's `success_url` for redirects. Without the prop, existing flows are unchanged.
|
|
164
|
+
|
|
165
|
+
## Examples
|
|
166
|
+
|
|
167
|
+
### Crypto Payment
|
|
168
|
+
|
|
169
|
+
```typescript
|
|
170
|
+
// 1. Create session
|
|
171
|
+
const session = await fetch("/checkout-sessions", {
|
|
172
|
+
method: "POST",
|
|
173
|
+
body: JSON.stringify({
|
|
174
|
+
success_url: "https://mysite.com/success/{SESSION_ID}",
|
|
175
|
+
metadata: { sku: "widget-1" },
|
|
176
|
+
}),
|
|
177
|
+
}).then(r => r.json());
|
|
178
|
+
|
|
179
|
+
// 2. Create order linked to session
|
|
180
|
+
const order = await fetch("/orders", {
|
|
181
|
+
method: "POST",
|
|
182
|
+
body: JSON.stringify({
|
|
183
|
+
recipientAddress: "0x...",
|
|
184
|
+
srcChain: 8453,
|
|
185
|
+
dstChain: 8453,
|
|
186
|
+
srcTokenAddress: "0x833589fcd6edb6e08f4c7c32d4f71b54bda02913",
|
|
187
|
+
dstTokenAddress: "0x833589fcd6edb6e08f4c7c32d4f71b54bda02913",
|
|
188
|
+
srcAmount: "1000000",
|
|
189
|
+
type: "swap",
|
|
190
|
+
payload: { expectedDstAmount: "1000000" },
|
|
191
|
+
checkoutSessionId: session.data.id,
|
|
192
|
+
}),
|
|
193
|
+
}).then(r => r.json());
|
|
194
|
+
|
|
195
|
+
// 3. User sends crypto to order.data.globalAddress
|
|
196
|
+
|
|
197
|
+
// 4. Poll session until complete
|
|
198
|
+
const poll = setInterval(async () => {
|
|
199
|
+
const s = await fetch(`/checkout-sessions/${session.data.id}`).then(r => r.json());
|
|
200
|
+
if (s.data.status === "complete") {
|
|
201
|
+
clearInterval(poll);
|
|
202
|
+
// redirect to success_url or show confirmation
|
|
203
|
+
}
|
|
204
|
+
}, 3000);
|
|
205
|
+
```
|
|
206
|
+
|
|
207
|
+
### Onramp Payment (Coinbase/Stripe)
|
|
208
|
+
|
|
209
|
+
```typescript
|
|
210
|
+
// Steps 1-2 same as above, but include onramp config in order creation:
|
|
211
|
+
const order = await fetch("/orders", {
|
|
212
|
+
method: "POST",
|
|
213
|
+
body: JSON.stringify({
|
|
214
|
+
// ... same order fields ...
|
|
215
|
+
checkoutSessionId: session.data.id,
|
|
216
|
+
onramp: {
|
|
217
|
+
vendor: "coinbase",
|
|
218
|
+
payment_method: "card",
|
|
219
|
+
country: "US",
|
|
220
|
+
},
|
|
221
|
+
}),
|
|
222
|
+
}).then(r => r.json());
|
|
223
|
+
|
|
224
|
+
// Redirect user to vendor checkout page
|
|
225
|
+
window.location.href = order.data.oneClickBuyUrl;
|
|
226
|
+
|
|
227
|
+
// After vendor redirects back, poll GET /checkout-sessions/:id for completion
|
|
228
|
+
```
|
|
@@ -207,6 +207,32 @@ const stakingCalldata = encodeFunctionData({
|
|
|
207
207
|
/>
|
|
208
208
|
```
|
|
209
209
|
|
|
210
|
+
### Checkout Session Prop
|
|
211
|
+
|
|
212
|
+
The `<AnySpend>`, `<AnySpendCustom>`, and `<AnySpendCustomExactIn>` components accept an optional `checkoutSession` prop for merchant checkout flows. When set, the component creates a session before the order and uses the session's redirect URLs. See [Checkout Sessions](./checkout-sessions.md) for the full guide.
|
|
213
|
+
|
|
214
|
+
```tsx
|
|
215
|
+
<AnySpend
|
|
216
|
+
defaultActiveTab="fiat"
|
|
217
|
+
destinationTokenAddress="0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913"
|
|
218
|
+
destinationTokenChainId={8453}
|
|
219
|
+
recipientAddress="0x..."
|
|
220
|
+
checkoutSession={{
|
|
221
|
+
success_url: "https://myshop.com/success?session={SESSION_ID}",
|
|
222
|
+
cancel_url: "https://myshop.com/cancel",
|
|
223
|
+
metadata: { sku: "widget-1" },
|
|
224
|
+
}}
|
|
225
|
+
/>
|
|
226
|
+
```
|
|
227
|
+
|
|
228
|
+
| Prop | Type | Description |
|
|
229
|
+
|------|------|-------------|
|
|
230
|
+
| `checkoutSession.success_url` | `string` | Redirect URL on completion. Supports `{SESSION_ID}` template. |
|
|
231
|
+
| `checkoutSession.cancel_url` | `string` | Redirect URL on cancellation |
|
|
232
|
+
| `checkoutSession.metadata` | `Record<string, string>` | Custom metadata attached to the session |
|
|
233
|
+
|
|
234
|
+
---
|
|
235
|
+
|
|
210
236
|
## Specialized Components
|
|
211
237
|
|
|
212
238
|
### `<AnySpendNFT>`
|
|
@@ -720,8 +720,66 @@ function PortfolioRebalancer() {
|
|
|
720
720
|
}
|
|
721
721
|
```
|
|
722
722
|
|
|
723
|
+
## 🛒 Checkout Sessions (Merchant Integration)
|
|
724
|
+
|
|
725
|
+
### Hosted Checkout with Payment Choice
|
|
726
|
+
|
|
727
|
+
Let users choose their payment method (crypto or fiat) after session creation.
|
|
728
|
+
|
|
729
|
+
```tsx
|
|
730
|
+
import { AnySpend } from "@b3dotfun/sdk/anyspend/react";
|
|
731
|
+
|
|
732
|
+
function MerchantCheckout({ sku, price }: { sku: string; price: string }) {
|
|
733
|
+
const [userAddress] = useWallet();
|
|
734
|
+
|
|
735
|
+
return (
|
|
736
|
+
<AnySpend
|
|
737
|
+
defaultActiveTab="fiat"
|
|
738
|
+
destinationTokenAddress="0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913"
|
|
739
|
+
destinationTokenChainId={8453}
|
|
740
|
+
recipientAddress={userAddress}
|
|
741
|
+
checkoutSession={{
|
|
742
|
+
success_url: "https://myshop.com/success?session={SESSION_ID}",
|
|
743
|
+
cancel_url: "https://myshop.com/cancel",
|
|
744
|
+
metadata: { sku, price },
|
|
745
|
+
}}
|
|
746
|
+
/>
|
|
747
|
+
);
|
|
748
|
+
}
|
|
749
|
+
```
|
|
750
|
+
|
|
751
|
+
### Server-Side Session with Custom Polling
|
|
752
|
+
|
|
753
|
+
```tsx
|
|
754
|
+
import {
|
|
755
|
+
useCreateCheckoutSession,
|
|
756
|
+
useCheckoutSession,
|
|
757
|
+
} from "@b3dotfun/sdk/anyspend";
|
|
758
|
+
|
|
759
|
+
function ServerCheckout() {
|
|
760
|
+
const { mutate: createSession, data: session } = useCreateCheckoutSession();
|
|
761
|
+
const { data: sessionStatus } = useCheckoutSession(session?.data?.id);
|
|
762
|
+
|
|
763
|
+
useEffect(() => {
|
|
764
|
+
createSession({
|
|
765
|
+
success_url: "https://mysite.com/success/{SESSION_ID}",
|
|
766
|
+
metadata: { sku: "widget-1" },
|
|
767
|
+
});
|
|
768
|
+
}, []);
|
|
769
|
+
|
|
770
|
+
if (sessionStatus?.data?.status === "complete") {
|
|
771
|
+
return <div>Payment complete!</div>;
|
|
772
|
+
}
|
|
773
|
+
|
|
774
|
+
// Render order creation UI...
|
|
775
|
+
}
|
|
776
|
+
```
|
|
777
|
+
|
|
778
|
+
See [Checkout Sessions](./checkout-sessions.md) for the full guide including API details and the session lifecycle.
|
|
779
|
+
|
|
723
780
|
## Next Steps
|
|
724
781
|
|
|
782
|
+
- [Checkout Sessions →](./checkout-sessions.md)
|
|
725
783
|
- [Error Handling Guide →](./error-handling.md)
|
|
726
784
|
- [Components Reference →](./components.md)
|
|
727
785
|
- [Hooks Reference →](./hooks.md)
|
|
@@ -385,6 +385,38 @@ Get Stripe payment intent for credit card payments.
|
|
|
385
385
|
const { clientSecret, isLoadingClientSecret } = useStripeClientSecret(orderData);
|
|
386
386
|
```
|
|
387
387
|
|
|
388
|
+
### `useCreateCheckoutSession`
|
|
389
|
+
|
|
390
|
+
Create checkout sessions for merchant integrations. See [Checkout Sessions](./checkout-sessions.md) for the full guide.
|
|
391
|
+
|
|
392
|
+
```tsx
|
|
393
|
+
import { useCreateCheckoutSession } from "@b3dotfun/sdk/anyspend";
|
|
394
|
+
|
|
395
|
+
const { mutate: createSession, data, isPending } = useCreateCheckoutSession();
|
|
396
|
+
|
|
397
|
+
createSession({
|
|
398
|
+
success_url: "https://mysite.com/success/{SESSION_ID}",
|
|
399
|
+
cancel_url: "https://mysite.com/cancel",
|
|
400
|
+
metadata: { sku: "widget-1" },
|
|
401
|
+
});
|
|
402
|
+
```
|
|
403
|
+
|
|
404
|
+
---
|
|
405
|
+
|
|
406
|
+
### `useCheckoutSession`
|
|
407
|
+
|
|
408
|
+
Poll a checkout session's status. Auto-polls while the session is `open` or `processing`, and stops when `complete` or `expired`.
|
|
409
|
+
|
|
410
|
+
```tsx
|
|
411
|
+
import { useCheckoutSession } from "@b3dotfun/sdk/anyspend";
|
|
412
|
+
|
|
413
|
+
const { data: session, isLoading } = useCheckoutSession(sessionId);
|
|
414
|
+
|
|
415
|
+
// session.data.status: "open" | "processing" | "complete" | "expired"
|
|
416
|
+
```
|
|
417
|
+
|
|
418
|
+
---
|
|
419
|
+
|
|
388
420
|
## Hook Patterns
|
|
389
421
|
|
|
390
422
|
### Error Handling Pattern
|
|
@@ -0,0 +1,185 @@
|
|
|
1
|
+
# AnySpend SDK
|
|
2
|
+
|
|
3
|
+
> Accept crypto payments and onboard users with zero friction. Users pay with any token on any chain in one seamless experience.
|
|
4
|
+
|
|
5
|
+
## Overview
|
|
6
|
+
|
|
7
|
+
AnySpend is a payment SDK (`@b3dotfun/sdk`) for crypto payments and fiat onramps. It provides React components, hooks, and service methods for token swaps, cross-chain transactions, NFT purchases, and merchant checkout flows.
|
|
8
|
+
|
|
9
|
+
Supported networks: Ethereum, Base, B3.
|
|
10
|
+
Supported platforms: React Web (full), React Native (hooks + services only), Node.js (services only).
|
|
11
|
+
|
|
12
|
+
## Installation
|
|
13
|
+
|
|
14
|
+
```bash
|
|
15
|
+
npm install @b3dotfun/sdk
|
|
16
|
+
```
|
|
17
|
+
|
|
18
|
+
Wrap your app with the provider:
|
|
19
|
+
|
|
20
|
+
```tsx
|
|
21
|
+
import { AnySpendProvider } from "@b3dotfun/sdk/anyspend/react";
|
|
22
|
+
import "@b3dotfun/sdk/index.css";
|
|
23
|
+
|
|
24
|
+
function App() {
|
|
25
|
+
return <AnySpendProvider>{/* app */}</AnySpendProvider>;
|
|
26
|
+
}
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
Requires Node.js v20.15.0+, React 18/19.
|
|
30
|
+
|
|
31
|
+
## Components
|
|
32
|
+
|
|
33
|
+
### AnySpend
|
|
34
|
+
|
|
35
|
+
Primary swap/onramp interface. Supports modal or page mode.
|
|
36
|
+
|
|
37
|
+
Props: `mode` ("modal"|"page"), `defaultActiveTab` ("crypto"|"fiat"), `destinationTokenAddress`, `destinationTokenChainId`, `recipientAddress`, `hideTransactionHistoryButton`, `loadOrder`, `onSuccess`, `checkoutSession`.
|
|
38
|
+
|
|
39
|
+
```tsx
|
|
40
|
+
<AnySpend
|
|
41
|
+
mode="page"
|
|
42
|
+
defaultActiveTab="crypto"
|
|
43
|
+
recipientAddress="0x..."
|
|
44
|
+
onSuccess={(txHash) => console.log(txHash)}
|
|
45
|
+
/>
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
### AnySpendNFTButton
|
|
49
|
+
|
|
50
|
+
One-click NFT purchase button.
|
|
51
|
+
|
|
52
|
+
Props: `nftContract` (NFTContract), `recipientAddress`, `onSuccess`.
|
|
53
|
+
|
|
54
|
+
NFTContract shape: `{ chainId, contractAddress, price (wei), priceFormatted, currency: { chainId, address, name, symbol, decimals }, name, description, imageUrl }`.
|
|
55
|
+
|
|
56
|
+
### AnySpendCustom
|
|
57
|
+
|
|
58
|
+
Flexible component for custom smart contract interactions (staking, gaming, DeFi).
|
|
59
|
+
|
|
60
|
+
Props: `orderType` ("custom"), `dstChainId`, `dstToken`, `dstAmount`, `contractAddress`, `encodedData`, `spenderAddress`, `metadata`, `header`, `onSuccess`, `checkoutSession`.
|
|
61
|
+
|
|
62
|
+
### AnySpendCustomExactIn
|
|
63
|
+
|
|
64
|
+
Like AnySpendCustom but for exact-input flows. Also supports `checkoutSession` prop.
|
|
65
|
+
|
|
66
|
+
### Specialized Components
|
|
67
|
+
|
|
68
|
+
- `AnySpendNFT` — Enhanced NFT with marketplace features
|
|
69
|
+
- `AnySpendStakeB3` — B3 token staking
|
|
70
|
+
- `AnySpendBuySpin` — Gaming spin wheel purchases
|
|
71
|
+
- `AnySpendTournament` — Tournament entry payments
|
|
72
|
+
|
|
73
|
+
## Hooks
|
|
74
|
+
|
|
75
|
+
### useAnyspendQuote(quoteRequest)
|
|
76
|
+
|
|
77
|
+
Get real-time pricing. QuoteRequest: `{ srcChain, dstChain, srcTokenAddress, dstTokenAddress, type ("swap"|"custom"), tradeType ("EXACT_INPUT"|"EXACT_OUTPUT"), amount }`.
|
|
78
|
+
|
|
79
|
+
Returns: `{ anyspendQuote, isLoadingAnyspendQuote, getAnyspendQuoteError, refetchAnyspendQuote }`.
|
|
80
|
+
|
|
81
|
+
### useAnyspendCreateOrder(options)
|
|
82
|
+
|
|
83
|
+
Create orders. Options: `{ onSuccess, onError, onSettled }`.
|
|
84
|
+
|
|
85
|
+
Returns: `{ createOrder(request), isCreatingOrder, createOrderError }`.
|
|
86
|
+
|
|
87
|
+
### useAnyspendOrderAndTransactions(orderId)
|
|
88
|
+
|
|
89
|
+
Monitor order status and transactions in real-time.
|
|
90
|
+
|
|
91
|
+
Returns: `{ orderAndTransactions: { order, depositTxs, relayTx, executeTx, refundTxs }, isLoadingOrderAndTransactions, getOrderAndTransactionsError }`.
|
|
92
|
+
|
|
93
|
+
### useAnyspendOrderHistory(creatorAddress, limit, offset)
|
|
94
|
+
|
|
95
|
+
Paginated order history for a user.
|
|
96
|
+
|
|
97
|
+
### useAnyspendTokens(chainId, search)
|
|
98
|
+
|
|
99
|
+
Get available tokens for a chain.
|
|
100
|
+
|
|
101
|
+
### useCoinbaseOnrampOptions()
|
|
102
|
+
|
|
103
|
+
Get Coinbase onramp config for fiat payments.
|
|
104
|
+
|
|
105
|
+
### useStripeClientSecret(orderData)
|
|
106
|
+
|
|
107
|
+
Get Stripe payment intent for card payments.
|
|
108
|
+
|
|
109
|
+
### useCreateCheckoutSession()
|
|
110
|
+
|
|
111
|
+
Mutation hook for creating checkout sessions.
|
|
112
|
+
|
|
113
|
+
Returns: `{ mutate: createSession, data, isPending }`.
|
|
114
|
+
|
|
115
|
+
### useCheckoutSession(sessionId)
|
|
116
|
+
|
|
117
|
+
Query hook that auto-polls a checkout session. Stops on `complete` or `expired`.
|
|
118
|
+
|
|
119
|
+
Returns: `{ data: session, isLoading }`.
|
|
120
|
+
|
|
121
|
+
## Checkout Sessions
|
|
122
|
+
|
|
123
|
+
Stripe-like checkout sessions decoupled from orders. Merchants create a session first, then create an order when the user picks a payment method.
|
|
124
|
+
|
|
125
|
+
### Flow
|
|
126
|
+
|
|
127
|
+
1. `POST /checkout-sessions` → Creates session (DB only, instant). Returns `{ id, status: "open" }`.
|
|
128
|
+
2. `POST /orders` with `checkoutSessionId` → Creates order linked to session. Returns order with `globalAddress` or `oneClickBuyUrl`.
|
|
129
|
+
3. User pays (crypto to globalAddress, or onramp redirect).
|
|
130
|
+
4. `GET /checkout-sessions/:id` → Poll status. Returns `{ status: "complete", order_id }`.
|
|
131
|
+
|
|
132
|
+
### Session Statuses
|
|
133
|
+
|
|
134
|
+
`open` → `processing` → `complete`, or `open` → `expired`.
|
|
135
|
+
|
|
136
|
+
### API Endpoints
|
|
137
|
+
|
|
138
|
+
**POST /checkout-sessions** — Create session. All fields optional: `success_url`, `cancel_url`, `metadata`, `client_reference_id`, `expires_in`.
|
|
139
|
+
|
|
140
|
+
**POST /orders** — Standard order creation. Add `checkoutSessionId` to link. Validates: session exists (400), session is open (400), session has no order yet (409).
|
|
141
|
+
|
|
142
|
+
**GET /checkout-sessions/:id** — Retrieve session. Query `?include=order` to embed full order with transactions.
|
|
143
|
+
|
|
144
|
+
**POST /checkout-sessions/:id/expire** — Manually expire an open session.
|
|
145
|
+
|
|
146
|
+
### Redirect URL Templates
|
|
147
|
+
|
|
148
|
+
`success_url` and `cancel_url` support `{SESSION_ID}` and `{ORDER_ID}` template variables. If no variable present, `?sessionId=<uuid>` is appended.
|
|
149
|
+
|
|
150
|
+
### Component Integration
|
|
151
|
+
|
|
152
|
+
Pass `checkoutSession` prop to `AnySpend`, `AnySpendCustom`, or `AnySpendCustomExactIn`:
|
|
153
|
+
|
|
154
|
+
```tsx
|
|
155
|
+
<AnySpend
|
|
156
|
+
checkoutSession={{
|
|
157
|
+
success_url: "https://myshop.com/success?session={SESSION_ID}",
|
|
158
|
+
cancel_url: "https://myshop.com/cancel",
|
|
159
|
+
metadata: { sku: "widget-1" },
|
|
160
|
+
}}
|
|
161
|
+
/>
|
|
162
|
+
```
|
|
163
|
+
|
|
164
|
+
Without the prop, all existing flows are unchanged.
|
|
165
|
+
|
|
166
|
+
## Order Status Lifecycle
|
|
167
|
+
|
|
168
|
+
`scanning_deposit_transaction` → `obtain_token` → `sending_token_from_vault` → `relay` → `executed`
|
|
169
|
+
|
|
170
|
+
Failure states: `obtain_failed`, `expired`, `refunding`, `refunded`, `failure`.
|
|
171
|
+
|
|
172
|
+
For Stripe: `waiting_stripe_payment` precedes processing.
|
|
173
|
+
|
|
174
|
+
## Error Codes
|
|
175
|
+
|
|
176
|
+
Payment: `INSUFFICIENT_BALANCE`, `INVALID_TOKEN_ADDRESS`, `MINIMUM_AMOUNT_NOT_MET`, `MAXIMUM_AMOUNT_EXCEEDED`.
|
|
177
|
+
Network: `SLIPPAGE`, `NETWORK_ERROR`, `QUOTE_EXPIRED`, `CHAIN_NOT_SUPPORTED`.
|
|
178
|
+
Contract: `CONTRACT_CALL_FAILED`, `INSUFFICIENT_GAS`, `NONCE_TOO_LOW`, `TRANSACTION_REVERTED`.
|
|
179
|
+
|
|
180
|
+
## Links
|
|
181
|
+
|
|
182
|
+
- Docs: docs/installation.md, docs/components.md, docs/hooks.md, docs/examples.md, docs/checkout-sessions.md, docs/error-handling.md
|
|
183
|
+
- Live demo: https://anyspend.com
|
|
184
|
+
- Discord: https://discord.gg/b3dotfun
|
|
185
|
+
- Issues: https://github.com/b3-fun/b3/issues
|