@seaverse/payment-sdk 0.7.0 → 0.8.0
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.en.md +842 -0
- package/README.md +725 -291
- package/dist/index.browser.js +4064 -2
- package/dist/index.browser.js.map +1 -1
- package/dist/index.cjs +4097 -1
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.ts +1381 -8
- package/dist/index.js +4064 -2
- package/dist/index.js.map +1 -1
- package/package.json +3 -2
package/README.en.md
ADDED
|
@@ -0,0 +1,842 @@
|
|
|
1
|
+
# @seaverse/payment-sdk
|
|
2
|
+
|
|
3
|
+
SeaVerse Payment SDK - All-in-one payment solution providing credit management, payment modals, subscription management, and order tracking.
|
|
4
|
+
|
|
5
|
+
> **Latest Version**: v0.8.0 | **Documentation**: English
|
|
6
|
+
|
|
7
|
+
## 📦 Installation
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
npm install @seaverse/payment-sdk
|
|
11
|
+
# or
|
|
12
|
+
pnpm add @seaverse/payment-sdk
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
## 🚀 Quick Start
|
|
16
|
+
|
|
17
|
+
### 1. Credit Package Purchase Modal (Recommended)
|
|
18
|
+
|
|
19
|
+
Simplest integration - complete payment flow in 3 lines of code:
|
|
20
|
+
|
|
21
|
+
```typescript
|
|
22
|
+
import { CreditPackageModal } from '@seaverse/payment-sdk';
|
|
23
|
+
|
|
24
|
+
// Create modal
|
|
25
|
+
const modal = new CreditPackageModal({
|
|
26
|
+
sdkConfig: {
|
|
27
|
+
environment: 'development', // Environment: 'development' | 'production'
|
|
28
|
+
countryCode: 'SG', // Country code
|
|
29
|
+
accountToken: 'user-token', // User auth token (optional)
|
|
30
|
+
},
|
|
31
|
+
onPaymentSuccess: (orderId, transactionId) => {
|
|
32
|
+
console.log('Payment successful!', { orderId, transactionId });
|
|
33
|
+
},
|
|
34
|
+
});
|
|
35
|
+
|
|
36
|
+
// Open modal
|
|
37
|
+
modal.open();
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
**Features**:
|
|
41
|
+
- ✅ Auto-display preset credit packages (120/240/520/1200 credits)
|
|
42
|
+
- ✅ Auto-initialize payment SDK
|
|
43
|
+
- ✅ Auto-create orders
|
|
44
|
+
- ✅ Show purchase success modal (with animations)
|
|
45
|
+
- ✅ Auto-refresh credit balance
|
|
46
|
+
|
|
47
|
+
### 2. Generic Package Modal (Custom Packages)
|
|
48
|
+
|
|
49
|
+
For special promotions, ice breaker packs, first charge bonuses:
|
|
50
|
+
|
|
51
|
+
```typescript
|
|
52
|
+
import { GenericPackageModal, type GenericPackage } from '@seaverse/payment-sdk';
|
|
53
|
+
|
|
54
|
+
// Define custom packages
|
|
55
|
+
const packages: GenericPackage[] = [
|
|
56
|
+
{
|
|
57
|
+
id: 'pkg_value',
|
|
58
|
+
name: 'Ice Breaker Pack',
|
|
59
|
+
price: '0.49',
|
|
60
|
+
currency: 'USD',
|
|
61
|
+
credits: '120',
|
|
62
|
+
bonus_percentage: 20,
|
|
63
|
+
day_limit: 1, // Daily purchase limit
|
|
64
|
+
package_type: 'iceBreaker',
|
|
65
|
+
},
|
|
66
|
+
{
|
|
67
|
+
id: 'pkg_pro',
|
|
68
|
+
name: 'Emergency Pack',
|
|
69
|
+
price: '0.99',
|
|
70
|
+
currency: 'USD',
|
|
71
|
+
credits: '240',
|
|
72
|
+
day_limit: 3, // Daily purchase limit
|
|
73
|
+
package_type: 'emergency',
|
|
74
|
+
},
|
|
75
|
+
];
|
|
76
|
+
|
|
77
|
+
// Create modal
|
|
78
|
+
const modal = new GenericPackageModal({
|
|
79
|
+
packages: packages,
|
|
80
|
+
sdkConfig: {
|
|
81
|
+
environment: 'development',
|
|
82
|
+
countryCode: 'SG',
|
|
83
|
+
accountToken: 'user-token',
|
|
84
|
+
},
|
|
85
|
+
onPaymentSuccess: (orderId, transactionId, pkg) => {
|
|
86
|
+
console.log(`${pkg.name} purchased successfully!`, orderId);
|
|
87
|
+
},
|
|
88
|
+
onPaymentFailed: (error, pkg) => {
|
|
89
|
+
if (error.message.includes('limit')) {
|
|
90
|
+
alert(`${pkg.name} purchase limit reached`);
|
|
91
|
+
}
|
|
92
|
+
},
|
|
93
|
+
});
|
|
94
|
+
|
|
95
|
+
modal.open();
|
|
96
|
+
```
|
|
97
|
+
|
|
98
|
+
## 📖 Core Features
|
|
99
|
+
|
|
100
|
+
### ⭐️ Recommended Features (For New Users)
|
|
101
|
+
|
|
102
|
+
| Feature | Component | Use Case | Documentation |
|
|
103
|
+
|---------|-----------|----------|---------------|
|
|
104
|
+
| **Credit Package Purchase** | `CreditPackageModal` | Standard credit purchase (simplest) | [👉 View](#creditpackagemodal---standard-credit-purchase) |
|
|
105
|
+
| **Custom Package Purchase** | `GenericPackageModal` | Promotions, special packages | [👉 View](#genericpackagemodal---custom-package-purchase) |
|
|
106
|
+
| **Purchase Success Modal** | `PurchaseSuccessModal` | Auto-integrated, no manual call needed | [👉 View](#purchasesuccessmodal---purchase-success-modal) |
|
|
107
|
+
|
|
108
|
+
### 🔧 Advanced Features (For Advanced Users)
|
|
109
|
+
|
|
110
|
+
| Feature | API | Use Case |
|
|
111
|
+
|---------|-----|----------|
|
|
112
|
+
| **Credit Query** | `PaymentClient` | Query user credit balance, transaction history |
|
|
113
|
+
| **Subscription Management** | `getCurrentSubscription`, `changeSubscription` | Subscription status query, upgrade/downgrade |
|
|
114
|
+
| **Order Management** | `checkOrderStatus`, `pollOrderStatus` | Order status query, polling |
|
|
115
|
+
| **SeaartPayment SDK** | `SeaartPaymentSDK` | Fully customized payment flow |
|
|
116
|
+
|
|
117
|
+
---
|
|
118
|
+
|
|
119
|
+
## 📚 Detailed Documentation
|
|
120
|
+
|
|
121
|
+
### CreditPackageModal - Standard Credit Purchase
|
|
122
|
+
|
|
123
|
+
**Use Cases**:
|
|
124
|
+
- ✅ Standard credit package purchase (120/240/520/1200 credits)
|
|
125
|
+
- ✅ Display creative power types (text-to-image, image-to-image, etc.)
|
|
126
|
+
- ✅ Simplest integration method
|
|
127
|
+
|
|
128
|
+
#### Basic Usage
|
|
129
|
+
|
|
130
|
+
```typescript
|
|
131
|
+
import { CreditPackageModal } from '@seaverse/payment-sdk';
|
|
132
|
+
|
|
133
|
+
const modal = new CreditPackageModal({
|
|
134
|
+
// Language setting (optional, default 'en')
|
|
135
|
+
language: 'en', // 'en' | 'zh-CN'
|
|
136
|
+
|
|
137
|
+
// SDK configuration (required)
|
|
138
|
+
sdkConfig: {
|
|
139
|
+
environment: 'development', // 'development' | 'production'
|
|
140
|
+
countryCode: 'SG', // ISO 3166-1 country code
|
|
141
|
+
accountToken: 'user-token', // User auth token (optional)
|
|
142
|
+
businessType: 1, // 1=one-time purchase, 2=subscription (optional, default 1)
|
|
143
|
+
},
|
|
144
|
+
|
|
145
|
+
// Callbacks
|
|
146
|
+
onPaymentSuccess: (orderId: string, transactionId: string) => {
|
|
147
|
+
console.log('Payment successful!', { orderId, transactionId });
|
|
148
|
+
// Refresh user credits, update UI, etc.
|
|
149
|
+
},
|
|
150
|
+
|
|
151
|
+
onPaymentFailed: (error: Error) => {
|
|
152
|
+
console.error('Payment failed:', error.message);
|
|
153
|
+
// Show error message
|
|
154
|
+
},
|
|
155
|
+
|
|
156
|
+
onClose: () => {
|
|
157
|
+
console.log('Modal closed');
|
|
158
|
+
},
|
|
159
|
+
});
|
|
160
|
+
|
|
161
|
+
// Open modal
|
|
162
|
+
modal.open();
|
|
163
|
+
|
|
164
|
+
// Close modal (optional)
|
|
165
|
+
modal.close();
|
|
166
|
+
|
|
167
|
+
// Check modal state
|
|
168
|
+
console.log('Is modal open:', modal.isOpen());
|
|
169
|
+
```
|
|
170
|
+
|
|
171
|
+
#### Preset Credit Packages
|
|
172
|
+
|
|
173
|
+
SDK includes the following credit packages:
|
|
174
|
+
|
|
175
|
+
| Package | Credits | Price | Description |
|
|
176
|
+
|---------|---------|-------|-------------|
|
|
177
|
+
| Starter | 120 | $0.49 | Entry package |
|
|
178
|
+
| Value | 240 | $0.99 | Value package |
|
|
179
|
+
| Pro | 520 | $1.99 | Professional package |
|
|
180
|
+
| Ultra | 1200 | $4.99 | Premium package |
|
|
181
|
+
|
|
182
|
+
#### Environment Configuration
|
|
183
|
+
|
|
184
|
+
SDK automatically configures the following parameters based on `environment`:
|
|
185
|
+
|
|
186
|
+
**Development Environment**:
|
|
187
|
+
```typescript
|
|
188
|
+
{
|
|
189
|
+
scriptUrl: 'https://seaart-publish.sc-api-release.saconsole.com/payment-component/client.js',
|
|
190
|
+
clientId: 'XF49NOfyZ54O16GujB0ptio2',
|
|
191
|
+
orderApiUrl: 'https://payment.sg.seaverse.dev',
|
|
192
|
+
walletApiUrl: 'https://wallet.sg.seaverse.dev',
|
|
193
|
+
}
|
|
194
|
+
```
|
|
195
|
+
|
|
196
|
+
**Production Environment**:
|
|
197
|
+
```typescript
|
|
198
|
+
{
|
|
199
|
+
scriptUrl: 'https://payment-static.seaverse.com/sdk/seaart-payment-component.js',
|
|
200
|
+
clientId: 'prod_client_id',
|
|
201
|
+
orderApiUrl: 'https://payment.seaverse.com',
|
|
202
|
+
walletApiUrl: 'https://wallet.seaverse.com',
|
|
203
|
+
}
|
|
204
|
+
```
|
|
205
|
+
|
|
206
|
+
#### Advanced Configuration (Optional)
|
|
207
|
+
|
|
208
|
+
To override environment configuration:
|
|
209
|
+
|
|
210
|
+
```typescript
|
|
211
|
+
const modal = new CreditPackageModal({
|
|
212
|
+
sdkConfig: {
|
|
213
|
+
environment: 'production',
|
|
214
|
+
countryCode: 'US',
|
|
215
|
+
|
|
216
|
+
// Override default configuration
|
|
217
|
+
scriptUrl: 'https://custom-cdn.com/payment.js',
|
|
218
|
+
clientId: 'custom-client-id',
|
|
219
|
+
orderApiUrl: 'https://custom-api.com',
|
|
220
|
+
},
|
|
221
|
+
});
|
|
222
|
+
```
|
|
223
|
+
|
|
224
|
+
---
|
|
225
|
+
|
|
226
|
+
### GenericPackageModal - Custom Package Purchase
|
|
227
|
+
|
|
228
|
+
**Use Cases**:
|
|
229
|
+
- ✅ Special promotion packages (ice breaker, emergency, first charge)
|
|
230
|
+
- ✅ Limited-time promotional activities
|
|
231
|
+
- ✅ Custom package data and styles
|
|
232
|
+
|
|
233
|
+
#### Basic Usage
|
|
234
|
+
|
|
235
|
+
```typescript
|
|
236
|
+
import { GenericPackageModal, type GenericPackage } from '@seaverse/payment-sdk';
|
|
237
|
+
|
|
238
|
+
// Define package data
|
|
239
|
+
const packages: GenericPackage[] = [
|
|
240
|
+
{
|
|
241
|
+
id: 'pkg_ice_breaker',
|
|
242
|
+
name: 'Ice Breaker Pack',
|
|
243
|
+
price: '0.49',
|
|
244
|
+
currency: 'USD',
|
|
245
|
+
credits: '120',
|
|
246
|
+
base_credits: '100',
|
|
247
|
+
bonus_credits: '20',
|
|
248
|
+
bonus_percentage: 20,
|
|
249
|
+
day_limit: 1,
|
|
250
|
+
package_type: 'iceBreaker',
|
|
251
|
+
},
|
|
252
|
+
];
|
|
253
|
+
|
|
254
|
+
// Create modal
|
|
255
|
+
const modal = new GenericPackageModal({
|
|
256
|
+
language: 'en',
|
|
257
|
+
packages: packages,
|
|
258
|
+
|
|
259
|
+
sdkConfig: {
|
|
260
|
+
environment: 'development',
|
|
261
|
+
countryCode: 'SG',
|
|
262
|
+
accountToken: 'user-token',
|
|
263
|
+
},
|
|
264
|
+
|
|
265
|
+
onPaymentSuccess: (orderId, transactionId, pkg) => {
|
|
266
|
+
console.log(`${pkg.name} purchased successfully!`, { orderId, transactionId });
|
|
267
|
+
},
|
|
268
|
+
|
|
269
|
+
onPaymentFailed: (error, pkg) => {
|
|
270
|
+
console.error(`${pkg.name} purchase failed:`, error.message);
|
|
271
|
+
},
|
|
272
|
+
});
|
|
273
|
+
|
|
274
|
+
modal.open();
|
|
275
|
+
```
|
|
276
|
+
|
|
277
|
+
#### GenericPackage Interface
|
|
278
|
+
|
|
279
|
+
```typescript
|
|
280
|
+
interface GenericPackage {
|
|
281
|
+
// Basic information (required)
|
|
282
|
+
id: string; // Unique package ID
|
|
283
|
+
name: string; // Package name
|
|
284
|
+
price: string; // Price (string for decimal precision)
|
|
285
|
+
currency: string; // Currency code (e.g., 'USD')
|
|
286
|
+
credits: string; // Total credits
|
|
287
|
+
|
|
288
|
+
// Bonus information (optional)
|
|
289
|
+
base_credits?: string; // Base credits
|
|
290
|
+
bonus_credits?: string; // Bonus credits
|
|
291
|
+
bonus_percentage?: number; // Bonus percentage (e.g., 20 for +20%)
|
|
292
|
+
|
|
293
|
+
// Purchase limits (optional, display only, validated by backend)
|
|
294
|
+
day_limit?: number; // Daily purchase limit (0 = unlimited)
|
|
295
|
+
lifetime_limit?: number; // Lifetime purchase limit (0 = unlimited)
|
|
296
|
+
|
|
297
|
+
// Category (optional)
|
|
298
|
+
package_type?: 'iceBreaker' | 'emergency' | 'firstCharge' | 'custom';
|
|
299
|
+
}
|
|
300
|
+
```
|
|
301
|
+
|
|
302
|
+
#### Predefined Package Examples
|
|
303
|
+
|
|
304
|
+
SDK provides the following predefined packages for reference:
|
|
305
|
+
|
|
306
|
+
```typescript
|
|
307
|
+
import {
|
|
308
|
+
EXAMPLE_ICE_BREAKER, // Ice breaker pack
|
|
309
|
+
EXAMPLE_EMERGENCY, // Emergency pack
|
|
310
|
+
EXAMPLE_FIRST_CHARGE, // First charge pack
|
|
311
|
+
EXAMPLE_PACKAGES, // All example packages array
|
|
312
|
+
} from '@seaverse/payment-sdk';
|
|
313
|
+
|
|
314
|
+
// Use predefined packages
|
|
315
|
+
const modal = new GenericPackageModal({
|
|
316
|
+
packages: [EXAMPLE_ICE_BREAKER, EXAMPLE_EMERGENCY],
|
|
317
|
+
sdkConfig: { /* ... */ },
|
|
318
|
+
});
|
|
319
|
+
```
|
|
320
|
+
|
|
321
|
+
**Predefined Package Details**:
|
|
322
|
+
|
|
323
|
+
| Package | Price | Credits | Limit | Description |
|
|
324
|
+
|---------|-------|---------|-------|-------------|
|
|
325
|
+
| `EXAMPLE_ICE_BREAKER` | $0.49 | 120 | 1/day | Ice breaker - super value first purchase |
|
|
326
|
+
| `EXAMPLE_EMERGENCY` | $0.99 | 240 | 3/day | Emergency - daily conversion driver |
|
|
327
|
+
| `EXAMPLE_FIRST_CHARGE` | $1.99 | 620 | 1/lifetime | First charge - boost user LTV |
|
|
328
|
+
|
|
329
|
+
---
|
|
330
|
+
|
|
331
|
+
### PurchaseSuccessModal - Purchase Success Modal
|
|
332
|
+
|
|
333
|
+
**✨ Auto-integrated** - No manual call needed, automatically displays after successful payment in `CreditPackageModal` and `GenericPackageModal`.
|
|
334
|
+
|
|
335
|
+
#### Features
|
|
336
|
+
|
|
337
|
+
- ✅ Email confirmation card style design
|
|
338
|
+
- ✅ Beautiful animations (fade in/out, scale, staggered animations)
|
|
339
|
+
- ✅ Display purchase details (package name, credits, payment amount)
|
|
340
|
+
- ✅ Support ESC key, click overlay, close button to dismiss
|
|
341
|
+
- ✅ Auto-prevent body scrolling
|
|
342
|
+
- ✅ Support English and Chinese
|
|
343
|
+
|
|
344
|
+
#### Auto-trigger Flow
|
|
345
|
+
|
|
346
|
+
```
|
|
347
|
+
User clicks purchase button
|
|
348
|
+
↓
|
|
349
|
+
Payment successful
|
|
350
|
+
↓
|
|
351
|
+
CreditPackageModal/GenericPackageModal closes
|
|
352
|
+
↓
|
|
353
|
+
PurchaseSuccessModal auto-displays (with animations)
|
|
354
|
+
↓
|
|
355
|
+
User closes success modal
|
|
356
|
+
↓
|
|
357
|
+
Auto-refresh credit balance
|
|
358
|
+
↓
|
|
359
|
+
Trigger onPaymentSuccess callback
|
|
360
|
+
```
|
|
361
|
+
|
|
362
|
+
#### Manual Usage (Optional)
|
|
363
|
+
|
|
364
|
+
For manual invocation in other scenarios:
|
|
365
|
+
|
|
366
|
+
```typescript
|
|
367
|
+
import { PurchaseSuccessModal } from '@seaverse/payment-sdk';
|
|
368
|
+
|
|
369
|
+
const successModal = new PurchaseSuccessModal({
|
|
370
|
+
data: {
|
|
371
|
+
packName: 'Ice Breaker Pack',
|
|
372
|
+
credits: 120,
|
|
373
|
+
amount: '0.49',
|
|
374
|
+
currency: '$',
|
|
375
|
+
orderId: 'order_123',
|
|
376
|
+
transactionId: 'txn_456',
|
|
377
|
+
},
|
|
378
|
+
language: 'en',
|
|
379
|
+
onClose: () => {
|
|
380
|
+
console.log('Success modal closed');
|
|
381
|
+
},
|
|
382
|
+
});
|
|
383
|
+
|
|
384
|
+
successModal.open();
|
|
385
|
+
```
|
|
386
|
+
|
|
387
|
+
---
|
|
388
|
+
|
|
389
|
+
## 🔍 Advanced Features
|
|
390
|
+
|
|
391
|
+
### Credit Query (PaymentClient)
|
|
392
|
+
|
|
393
|
+
Query user credit balance and transaction history:
|
|
394
|
+
|
|
395
|
+
```typescript
|
|
396
|
+
import { PaymentClient } from '@seaverse/payment-sdk';
|
|
397
|
+
|
|
398
|
+
const client = new PaymentClient({
|
|
399
|
+
appId: 'seaverse',
|
|
400
|
+
token: 'your-bearer-token',
|
|
401
|
+
baseURL: 'https://payment.sg.seaverse.dev', // Optional
|
|
402
|
+
});
|
|
403
|
+
|
|
404
|
+
// Query credit details (4-pool structure)
|
|
405
|
+
const detail = await client.getCreditDetail();
|
|
406
|
+
console.log('Total balance:', detail.total_balance);
|
|
407
|
+
|
|
408
|
+
detail.pools.forEach(pool => {
|
|
409
|
+
console.log(`${pool.type} pool: ${pool.balance} credits`);
|
|
410
|
+
});
|
|
411
|
+
|
|
412
|
+
// Query transaction history
|
|
413
|
+
const transactions = await client.listTransactions({
|
|
414
|
+
page: 1,
|
|
415
|
+
page_size: 20,
|
|
416
|
+
start_time: '2024-01-01T00:00:00Z',
|
|
417
|
+
end_time: '2024-12-31T23:59:59Z',
|
|
418
|
+
});
|
|
419
|
+
|
|
420
|
+
transactions.transactions.forEach(txn => {
|
|
421
|
+
console.log(`${txn.type}: ${txn.amount} credits`);
|
|
422
|
+
});
|
|
423
|
+
```
|
|
424
|
+
|
|
425
|
+
#### 4-Pool Credit System
|
|
426
|
+
|
|
427
|
+
| Pool Type | Description | Expiration |
|
|
428
|
+
|-----------|-------------|------------|
|
|
429
|
+
| `daily` | Daily credits | Next day 00:00 UTC |
|
|
430
|
+
| `event` | Event credits | Event deadline |
|
|
431
|
+
| `monthly` | Monthly credits | 30 days after grant |
|
|
432
|
+
| `permanent` | Permanent credits | Never expires |
|
|
433
|
+
|
|
434
|
+
**Consumption Priority**: Daily → Event → Monthly → Permanent
|
|
435
|
+
|
|
436
|
+
---
|
|
437
|
+
|
|
438
|
+
### Subscription Management
|
|
439
|
+
|
|
440
|
+
Query and manage user subscriptions:
|
|
441
|
+
|
|
442
|
+
```typescript
|
|
443
|
+
import {
|
|
444
|
+
getCurrentSubscription,
|
|
445
|
+
getActiveSubscription,
|
|
446
|
+
changeSubscription,
|
|
447
|
+
restartSubscription,
|
|
448
|
+
} from '@seaverse/payment-sdk';
|
|
449
|
+
|
|
450
|
+
const apiUrl = 'https://payment.sg.seaverse.dev';
|
|
451
|
+
const token = 'user-token';
|
|
452
|
+
|
|
453
|
+
// Query current subscription status
|
|
454
|
+
const current = await getCurrentSubscription(apiUrl, token);
|
|
455
|
+
console.log('Subscription status:', current.subscription_status);
|
|
456
|
+
|
|
457
|
+
// Query active subscription details
|
|
458
|
+
const active = await getActiveSubscription(apiUrl, token);
|
|
459
|
+
console.log('Current plan:', active.product_name);
|
|
460
|
+
|
|
461
|
+
// Upgrade/downgrade subscription
|
|
462
|
+
const changeResult = await changeSubscription(apiUrl, token, {
|
|
463
|
+
productId: 'pro_plan',
|
|
464
|
+
billingPeriod: 'year',
|
|
465
|
+
redirectUrl: window.location.href,
|
|
466
|
+
});
|
|
467
|
+
|
|
468
|
+
// Restart cancelled subscription
|
|
469
|
+
const restartResult = await restartSubscription(apiUrl, token, {
|
|
470
|
+
subscriptionId: 'sub_123',
|
|
471
|
+
});
|
|
472
|
+
```
|
|
473
|
+
|
|
474
|
+
---
|
|
475
|
+
|
|
476
|
+
### Order Management
|
|
477
|
+
|
|
478
|
+
Check order status and poll payment results:
|
|
479
|
+
|
|
480
|
+
```typescript
|
|
481
|
+
import { checkOrderStatus, pollOrderStatus } from '@seaverse/payment-sdk';
|
|
482
|
+
|
|
483
|
+
const apiUrl = 'https://payment.sg.seaverse.dev';
|
|
484
|
+
const token = 'user-token';
|
|
485
|
+
|
|
486
|
+
// Single order status check
|
|
487
|
+
const status = await checkOrderStatus('transaction_id', apiUrl, token);
|
|
488
|
+
console.log('Order status:', status.order_status);
|
|
489
|
+
|
|
490
|
+
// Poll order status until final state
|
|
491
|
+
const finalStatus = await pollOrderStatus('transaction_id', apiUrl, token, {
|
|
492
|
+
interval: 2000, // Polling interval (ms)
|
|
493
|
+
maxAttempts: 30, // Max attempts
|
|
494
|
+
onPoll: (status, attempt) => {
|
|
495
|
+
console.log(`Attempt ${attempt}: ${status}`);
|
|
496
|
+
},
|
|
497
|
+
});
|
|
498
|
+
|
|
499
|
+
console.log('Final status:', finalStatus.order_status);
|
|
500
|
+
```
|
|
501
|
+
|
|
502
|
+
---
|
|
503
|
+
|
|
504
|
+
### SeaartPayment SDK (Fully Customized)
|
|
505
|
+
|
|
506
|
+
For advanced scenarios requiring complete payment flow control:
|
|
507
|
+
|
|
508
|
+
```typescript
|
|
509
|
+
import { SeaartPaymentSDK } from '@seaverse/payment-sdk';
|
|
510
|
+
|
|
511
|
+
// 1. Initialize SDK (on app startup)
|
|
512
|
+
const sdk = SeaartPaymentSDK.getInstance();
|
|
513
|
+
await sdk.init({
|
|
514
|
+
scriptUrl: 'https://your-cdn.com/seaart-payment.js',
|
|
515
|
+
clientId: 'your-client-id',
|
|
516
|
+
language: 'en',
|
|
517
|
+
cssUrl: 'https://your-cdn.com/seaart-payment.css', // Optional
|
|
518
|
+
});
|
|
519
|
+
|
|
520
|
+
// 2. Get payment methods
|
|
521
|
+
const methods = await sdk.getPaymentMethods({
|
|
522
|
+
country_code: 'US',
|
|
523
|
+
business_type: 2, // 1=one-time, 2=subscription
|
|
524
|
+
});
|
|
525
|
+
|
|
526
|
+
// 3. Create order payment instance
|
|
527
|
+
const orderPayment = sdk.createOrderPayment({
|
|
528
|
+
orderId: 'order-123',
|
|
529
|
+
accountToken: 'user-token',
|
|
530
|
+
});
|
|
531
|
+
|
|
532
|
+
// 4a. Redirect payment (Link Payment)
|
|
533
|
+
const linkMethod = methods.find(m => m.payment_type === 1);
|
|
534
|
+
const linkPayment = orderPayment.createLinkPayment(linkMethod, {
|
|
535
|
+
callback_url: `${window.location.origin}/payment-callback`,
|
|
536
|
+
});
|
|
537
|
+
await linkPayment.redirectToPayment();
|
|
538
|
+
|
|
539
|
+
// 4b. Embedded payment (Dropin Payment)
|
|
540
|
+
const dropinMethod = methods.find(m => m.payment_type === 2);
|
|
541
|
+
const dropinPayment = orderPayment.createDropinPayment(dropinMethod, {
|
|
542
|
+
containerId: '#payment-container',
|
|
543
|
+
onCompleted: (payload) => {
|
|
544
|
+
console.log('Payment successful:', payload);
|
|
545
|
+
},
|
|
546
|
+
onFailed: (payload) => {
|
|
547
|
+
console.error('Payment failed:', payload);
|
|
548
|
+
},
|
|
549
|
+
});
|
|
550
|
+
await dropinPayment.render();
|
|
551
|
+
|
|
552
|
+
// 5. Handle payment callback (on callback page)
|
|
553
|
+
const result = await sdk.handleCallback(
|
|
554
|
+
{ type: 'subscription' },
|
|
555
|
+
'https://payment-api.com',
|
|
556
|
+
'auth-token'
|
|
557
|
+
);
|
|
558
|
+
if (result.success) {
|
|
559
|
+
console.log('Payment verified:', result.data);
|
|
560
|
+
}
|
|
561
|
+
```
|
|
562
|
+
|
|
563
|
+
---
|
|
564
|
+
|
|
565
|
+
## ⚙️ Configuration Options
|
|
566
|
+
|
|
567
|
+
### Environment Configuration
|
|
568
|
+
|
|
569
|
+
| Environment | Value | Description |
|
|
570
|
+
|-------------|-------|-------------|
|
|
571
|
+
| Development | `'development'` | Development and testing |
|
|
572
|
+
| Production | `'production'` | Production environment |
|
|
573
|
+
|
|
574
|
+
### SDK Configuration (sdkConfig)
|
|
575
|
+
|
|
576
|
+
```typescript
|
|
577
|
+
interface PaymentSDKConfig {
|
|
578
|
+
// Required parameters
|
|
579
|
+
environment: 'development' | 'production'; // Environment
|
|
580
|
+
countryCode: string; // Country code (ISO 3166-1)
|
|
581
|
+
|
|
582
|
+
// Optional parameters
|
|
583
|
+
accountToken?: string; // User auth token
|
|
584
|
+
businessType?: 1 | 2; // 1=one-time purchase, 2=subscription (default 1)
|
|
585
|
+
|
|
586
|
+
// Advanced options (override environment config)
|
|
587
|
+
scriptUrl?: string; // Custom script URL
|
|
588
|
+
clientId?: string; // Custom client ID
|
|
589
|
+
orderApiUrl?: string; // Custom order API URL
|
|
590
|
+
cssUrl?: string; // Custom CSS URL
|
|
591
|
+
scriptTimeout?: number; // Script load timeout (default 10000ms)
|
|
592
|
+
paymentMethodType?: string; // Payment method type filter (default 'dropin')
|
|
593
|
+
}
|
|
594
|
+
```
|
|
595
|
+
|
|
596
|
+
---
|
|
597
|
+
|
|
598
|
+
## 🎨 UI Feedback Tools
|
|
599
|
+
|
|
600
|
+
SDK provides unified UI feedback tools to replace native browser `alert()`:
|
|
601
|
+
|
|
602
|
+
```typescript
|
|
603
|
+
import {
|
|
604
|
+
showErrorMessage,
|
|
605
|
+
showSuccessMessage,
|
|
606
|
+
showInfoMessage,
|
|
607
|
+
showLoadingIndicator,
|
|
608
|
+
hideLoadingIndicator,
|
|
609
|
+
} from '@seaverse/payment-sdk';
|
|
610
|
+
|
|
611
|
+
// Error message (red gradient background)
|
|
612
|
+
showErrorMessage('Payment failed, please retry', 3000);
|
|
613
|
+
|
|
614
|
+
// Success message (green gradient background)
|
|
615
|
+
showSuccessMessage('Payment successful!', 3000);
|
|
616
|
+
|
|
617
|
+
// Info message (blue gradient background)
|
|
618
|
+
showInfoMessage('Processing your request...', 3000);
|
|
619
|
+
|
|
620
|
+
// Loading indicator
|
|
621
|
+
const loader = showLoadingIndicator('Initializing payment system...');
|
|
622
|
+
// ... async operation
|
|
623
|
+
hideLoadingIndicator(loader);
|
|
624
|
+
```
|
|
625
|
+
|
|
626
|
+
**Features**:
|
|
627
|
+
- ✅ Beautiful gradient backgrounds + icons
|
|
628
|
+
- ✅ Auto fade in/out animations
|
|
629
|
+
- ✅ Auto-remove (configurable duration)
|
|
630
|
+
- ✅ Prevent duplicate displays
|
|
631
|
+
- ✅ XSS protection
|
|
632
|
+
|
|
633
|
+
---
|
|
634
|
+
|
|
635
|
+
## 🛡️ Error Handling
|
|
636
|
+
|
|
637
|
+
### Business Error Codes (BIZ_CODE)
|
|
638
|
+
|
|
639
|
+
| Code | Constant | Description |
|
|
640
|
+
|------|----------|-------------|
|
|
641
|
+
| `0` | `SUCCESS` | Operation successful |
|
|
642
|
+
| `400` | `BAD_REQUEST` | Request parameter error |
|
|
643
|
+
| `401` | `UNAUTHORIZED` | Unauthorized |
|
|
644
|
+
| `500` | `SERVER_ERROR` | Server error |
|
|
645
|
+
| `4001` | `DAILY_LIMIT_EXCEEDED` | Daily limit exceeded |
|
|
646
|
+
| `4002` | `PRODUCT_NOT_FOUND` | Product not found |
|
|
647
|
+
| `4004` | `INSUFFICIENT_BALANCE` | Insufficient balance |
|
|
648
|
+
| `4005` | `ORDER_NOT_FOUND` | Order not found |
|
|
649
|
+
|
|
650
|
+
### Error Handling Example
|
|
651
|
+
|
|
652
|
+
```typescript
|
|
653
|
+
const modal = new GenericPackageModal({
|
|
654
|
+
packages: packages,
|
|
655
|
+
sdkConfig: { /* ... */ },
|
|
656
|
+
|
|
657
|
+
onPaymentFailed: (error, pkg) => {
|
|
658
|
+
// Handle limit errors
|
|
659
|
+
if (error.message.includes('Daily limit')) {
|
|
660
|
+
showErrorMessage(`Daily purchase limit reached for ${pkg.name}`);
|
|
661
|
+
} else if (error.message.includes('Lifetime limit')) {
|
|
662
|
+
showErrorMessage('This package can only be purchased once');
|
|
663
|
+
} else {
|
|
664
|
+
showErrorMessage(`Payment failed: ${error.message}`);
|
|
665
|
+
}
|
|
666
|
+
},
|
|
667
|
+
});
|
|
668
|
+
```
|
|
669
|
+
|
|
670
|
+
---
|
|
671
|
+
|
|
672
|
+
## 🧪 Test Card (Development)
|
|
673
|
+
|
|
674
|
+
Test payment functionality in development environment:
|
|
675
|
+
|
|
676
|
+
| Field | Value |
|
|
677
|
+
|-------|-------|
|
|
678
|
+
| Card Number | `4212345678910006` |
|
|
679
|
+
| Expiry | `03/30` |
|
|
680
|
+
| CVC | `737` |
|
|
681
|
+
| 3DS Password | `password` |
|
|
682
|
+
|
|
683
|
+
---
|
|
684
|
+
|
|
685
|
+
## 📊 API Comparison
|
|
686
|
+
|
|
687
|
+
### CreditPackageModal vs GenericPackageModal
|
|
688
|
+
|
|
689
|
+
| Feature | CreditPackageModal | GenericPackageModal |
|
|
690
|
+
|---------|-------------------|---------------------|
|
|
691
|
+
| **Package Data** | Built-in presets | External config (flexible) |
|
|
692
|
+
| **Package Types** | Standard credit packages | Any type (ice breaker/emergency/first charge/custom) |
|
|
693
|
+
| **Purchase Limits** | None | Support daily/lifetime limits |
|
|
694
|
+
| **Bonus Display** | None | Support bonus percentage |
|
|
695
|
+
| **Configuration Complexity** | ⭐️ Simple | ⭐️⭐️ Moderate |
|
|
696
|
+
| **Use Case** | Standard credit purchase | Special promotions, limited-time events |
|
|
697
|
+
|
|
698
|
+
**Selection Guide**:
|
|
699
|
+
- 🎯 **Standard Credit Purchase** → Use `CreditPackageModal` (recommended for beginners)
|
|
700
|
+
- 🎁 **Special Promotions** → Use `GenericPackageModal`
|
|
701
|
+
|
|
702
|
+
---
|
|
703
|
+
|
|
704
|
+
## 🔄 Migration Guide
|
|
705
|
+
|
|
706
|
+
### From v0.8.x to v0.9.x
|
|
707
|
+
|
|
708
|
+
**Main Changes**: Introduced environment configuration, simplified parameters
|
|
709
|
+
|
|
710
|
+
```typescript
|
|
711
|
+
// ✅ New version (v0.8.x)
|
|
712
|
+
const modal = new GenericPackageModal({
|
|
713
|
+
packages: packages,
|
|
714
|
+
sdkConfig: {
|
|
715
|
+
environment: 'development', // Just specify environment
|
|
716
|
+
countryCode: 'SG', // Flattened parameter
|
|
717
|
+
businessType: 1, // Optional, default 1
|
|
718
|
+
},
|
|
719
|
+
});
|
|
720
|
+
```
|
|
721
|
+
|
|
722
|
+
**Parameter Changes**:
|
|
723
|
+
- ✅ Added: `environment` - auto-configure all URLs
|
|
724
|
+
- ✅ Simplified: `countryCode` - flattened from `paymentMethodsParams.country_code`
|
|
725
|
+
- ✅ Simplified: `businessType` - flattened from `paymentMethodsParams.business_type`
|
|
726
|
+
|
|
727
|
+
---
|
|
728
|
+
|
|
729
|
+
## 🌐 Framework Integration
|
|
730
|
+
|
|
731
|
+
### Vue 3
|
|
732
|
+
|
|
733
|
+
```vue
|
|
734
|
+
<script setup lang="ts">
|
|
735
|
+
import { ref } from 'vue';
|
|
736
|
+
import { CreditPackageModal } from '@seaverse/payment-sdk';
|
|
737
|
+
|
|
738
|
+
const showModal = () => {
|
|
739
|
+
const modal = new CreditPackageModal({
|
|
740
|
+
sdkConfig: {
|
|
741
|
+
environment: import.meta.env.DEV ? 'development' : 'production',
|
|
742
|
+
countryCode: 'SG',
|
|
743
|
+
accountToken: userToken.value,
|
|
744
|
+
},
|
|
745
|
+
onPaymentSuccess: (orderId, transactionId) => {
|
|
746
|
+
console.log('Payment successful', { orderId, transactionId });
|
|
747
|
+
// Refresh user data
|
|
748
|
+
},
|
|
749
|
+
});
|
|
750
|
+
modal.open();
|
|
751
|
+
};
|
|
752
|
+
</script>
|
|
753
|
+
|
|
754
|
+
<template>
|
|
755
|
+
<button @click="showModal">Purchase Credits</button>
|
|
756
|
+
</template>
|
|
757
|
+
```
|
|
758
|
+
|
|
759
|
+
### React
|
|
760
|
+
|
|
761
|
+
```tsx
|
|
762
|
+
import { CreditPackageModal } from '@seaverse/payment-sdk';
|
|
763
|
+
|
|
764
|
+
function PurchaseButton() {
|
|
765
|
+
const handlePurchase = () => {
|
|
766
|
+
const modal = new CreditPackageModal({
|
|
767
|
+
sdkConfig: {
|
|
768
|
+
environment: process.env.NODE_ENV === 'development' ? 'development' : 'production',
|
|
769
|
+
countryCode: 'SG',
|
|
770
|
+
accountToken: getUserToken(),
|
|
771
|
+
},
|
|
772
|
+
onPaymentSuccess: (orderId, transactionId) => {
|
|
773
|
+
console.log('Payment successful', { orderId, transactionId });
|
|
774
|
+
// Refresh user data
|
|
775
|
+
},
|
|
776
|
+
});
|
|
777
|
+
modal.open();
|
|
778
|
+
};
|
|
779
|
+
|
|
780
|
+
return <button onClick={handlePurchase}>Purchase Credits</button>;
|
|
781
|
+
}
|
|
782
|
+
```
|
|
783
|
+
|
|
784
|
+
---
|
|
785
|
+
|
|
786
|
+
## 📝 TypeScript Support
|
|
787
|
+
|
|
788
|
+
SDK includes complete TypeScript type definitions:
|
|
789
|
+
|
|
790
|
+
```typescript
|
|
791
|
+
import type {
|
|
792
|
+
// Modal related
|
|
793
|
+
CreditPackageModalOptions,
|
|
794
|
+
GenericPackageModalOptions,
|
|
795
|
+
GenericPackage,
|
|
796
|
+
PurchaseSuccessData,
|
|
797
|
+
|
|
798
|
+
// Configuration related
|
|
799
|
+
PaymentSDKConfig,
|
|
800
|
+
Environment,
|
|
801
|
+
EnvironmentConfig,
|
|
802
|
+
|
|
803
|
+
// Credit related
|
|
804
|
+
CreditDetailResponse,
|
|
805
|
+
CreditTransaction,
|
|
806
|
+
CreditPoolType,
|
|
807
|
+
|
|
808
|
+
// Subscription related
|
|
809
|
+
CurrentSubscription,
|
|
810
|
+
ActiveSubscription,
|
|
811
|
+
|
|
812
|
+
// Order related
|
|
813
|
+
OrderStatus,
|
|
814
|
+
OrderStatusResponse,
|
|
815
|
+
} from '@seaverse/payment-sdk';
|
|
816
|
+
```
|
|
817
|
+
|
|
818
|
+
---
|
|
819
|
+
|
|
820
|
+
## 🔗 Related Links
|
|
821
|
+
|
|
822
|
+
- 📦 [NPM Package](https://www.npmjs.com/package/@seaverse/payment-sdk)
|
|
823
|
+
- 🐙 [GitHub Repository](https://github.com/SeaVerseAI/sv-sdk)
|
|
824
|
+
- 📖 [API Documentation](https://github.com/SeaVerseAI/sv-sdk/tree/main/packages/payment-sdk)
|
|
825
|
+
- 🐛 [Issue Tracker](https://github.com/SeaVerseAI/sv-sdk/issues)
|
|
826
|
+
|
|
827
|
+
---
|
|
828
|
+
|
|
829
|
+
## 📄 License
|
|
830
|
+
|
|
831
|
+
MIT License
|
|
832
|
+
|
|
833
|
+
---
|
|
834
|
+
|
|
835
|
+
## 🤝 Contributing
|
|
836
|
+
|
|
837
|
+
Issues and Pull Requests are welcome!
|
|
838
|
+
|
|
839
|
+
---
|
|
840
|
+
|
|
841
|
+
**Last Updated**: 2026-01-31
|
|
842
|
+
**SDK Version**: v0.8.0
|