@seaverse/payment-sdk 0.1.0 → 0.2.0

package/README.md

@@ -8,15 +8,18 @@ SeaVerse Payment SDK - Credit management and payment checkout for SeaVerse appli
 - **Payment Checkout** - Show payment modal for one-time purchases and subscriptions
 - **Multi-tenant Support** - Isolated credit accounts per application
 - **TypeScript** - Full type definitions included
+- **Web Component** - Uses `@seaart/payment-component` for payment UI
 
 ## Installation
 
 ```bash
-npm install @seaverse/payment-sdk
+npm install @seaverse/payment-sdk @seaart/payment-component
 # or
-pnpm add @seaverse/payment-sdk
+pnpm add @seaverse/payment-sdk @seaart/payment-component
 ```
 
+> **Important**: You must also install `@seaart/payment-component` as it's a peer dependency.
+
 ## Quick Start
 
 ### Credit Query
@@ -49,15 +52,17 @@ Show payment modal for purchases:
 
 ```typescript
 import { PaymentCheckoutClient } from '@seaverse/payment-sdk';
+// Import the Web Component styles
+import '@seaart/payment-component/style.css';
 
 const checkoutClient = new PaymentCheckoutClient({
   apiHost: 'https://payment.sg.seaverse.dev',
   authToken: 'your-jwt-token',
-  environment: 'develop',
+  environment: 'development', // or 'production'
   debug: true,
 });
 
-// Initialize (loads SeaArtPay SDK)
+// Initialize (loads Web Component)
 await checkoutClient.init();
 
 // One-time purchase
@@ -93,7 +98,7 @@ await checkoutClient.subscribe({
 
 | Method | Description |
 |--------|-------------|
-| `init()` | Initialize and load SeaArtPay SDK |
+| `init()` | Initialize and load Web Component |
 | `checkout(options)` | One-time purchase with payment modal |
 | `subscribe(options)` | Subscription purchase with payment modal |
 | `showPayment(options)` | Show payment modal with existing transactionId |
@@ -131,16 +136,129 @@ interface PaymentClientOptions {
 
 ```typescript
 interface CheckoutClientConfig {
-  apiHost: string;               // Payment gateway API URL
-  authToken?: string;            // Static JWT token
-  getAuthToken?: () => string;   // Dynamic token getter
-  environment?: 'develop' | 'release';
-  debug?: boolean;
-  sdkCdnUrl?: string;            // Custom SDK CDN URL
-  sdkTimeout?: number;           // SDK load timeout in ms
+  apiHost: string;                    // Payment gateway API URL
+  authToken?: string;                 // Static JWT token
+  getAuthToken?: () => string;        // Dynamic token getter
+  environment?: 'development' | 'production';  // Environment
+  debug?: boolean;                    // Debug mode
+  componentTimeout?: number;          // Web Component load timeout in ms
 }
 ```
 
+### Environment Configuration
+
+| Environment | API Host |
+|-------------|----------|
+| `development` | `https://aiart-openresty.dev.seaart.dev` |
+| `production` | `https://www.seaart.ai` |
+
+## Usage with Frameworks
+
+### Vue 3
+
+```vue
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { PaymentCheckoutClient } from '@seaverse/payment-sdk';
+import '@seaart/payment-component/style.css';
+
+const checkoutClient = ref<PaymentCheckoutClient | null>(null);
+
+onMounted(async () => {
+  checkoutClient.value = new PaymentCheckoutClient({
+    apiHost: 'https://payment.sg.seaverse.dev',
+    authToken: 'your-token',
+    environment: import.meta.env.DEV ? 'development' : 'production',
+  });
+  await checkoutClient.value.init();
+});
+
+async function handlePurchase() {
+  await checkoutClient.value?.checkout({
+    productId: 'pkg_starter',
+    onSuccess: (res) => console.log('Success:', res),
+  });
+}
+</script>
+```
+
+### React
+
+```tsx
+import { useEffect, useRef } from 'react';
+import { PaymentCheckoutClient } from '@seaverse/payment-sdk';
+import '@seaart/payment-component/style.css';
+
+function PaymentPage() {
+  const clientRef = useRef<PaymentCheckoutClient | null>(null);
+
+  useEffect(() => {
+    const init = async () => {
+      clientRef.current = new PaymentCheckoutClient({
+        apiHost: 'https://payment.sg.seaverse.dev',
+        authToken: 'your-token',
+        environment: process.env.NODE_ENV === 'development' ? 'development' : 'production',
+      });
+      await clientRef.current.init();
+    };
+    init();
+  }, []);
+
+  const handlePurchase = async () => {
+    await clientRef.current?.checkout({
+      productId: 'pkg_starter',
+      onSuccess: (res) => console.log('Success:', res),
+    });
+  };
+
+  return <button onClick={handlePurchase}>Purchase</button>;
+}
+```
+
+## Migration from v0.1.x
+
+### Breaking Changes
+
+1. **Environment naming changed:**
+   - `'develop'` → `'development'`
+   - `'release'` → `'production'`
+
+2. **New peer dependency required:**
+   ```bash
+   npm install @seaart/payment-component
+   ```
+
+3. **Import CSS file:**
+   ```typescript
+   import '@seaart/payment-component/style.css';
+   ```
+
+4. **Configuration options renamed:**
+   - `sdkCdnUrl` removed (no longer uses CDN)
+   - `sdkTimeout` → `componentTimeout`
+
+### Before (v0.1.x)
+
+```typescript
+const client = new PaymentCheckoutClient({
+  apiHost: 'https://payment.sg.seaverse.dev',
+  authToken: 'token',
+  environment: 'develop', // Old naming
+});
+```
+
+### After (v0.2.x)
+
+```typescript
+import '@seaart/payment-component/style.css'; // Required!
+
+const client = new PaymentCheckoutClient({
+  apiHost: 'https://payment.sg.seaverse.dev',
+  authToken: 'token',
+  environment: 'development', // New naming
+});
+```
+
 ## Test Cards (Development)
 
 | Field | Value |
@@ -153,4 +271,3 @@ interface CheckoutClientConfig {
 ## License
 
 MIT
-