@appboxo/web-sdk 1.0.2 → 1.0.3

package/README.md

@@ -41,6 +41,7 @@ const sdk = new AppboxoWebSDK({
   baseUrl?: string;      // Optional, default: "https://dashboard.appboxo.com/api/v1"
   debug?: boolean;        // Optional, default: false
   onGetAuthCode?: () => Promise<string>; // Optional, for automatic auth code retrieval
+  onPaymentRequest?: (params: PaymentRequest) => Promise<PaymentResponse>; // Optional, for handling payment requests
 });
 ```
 
@@ -73,6 +74,43 @@ The SDK will try these in order:
 2. Callback function
 3. Mock auth code (fallback)
 
+### Payment Processing
+
+When a miniapp calls `appboxo.pay()`, the SDK will call your `onPaymentRequest` callback. Process the payment and return the result.
+
+Payment status values: `'paid'`, `'failed'`, `'in_process'`, or `'cancelled'`.
+
+```typescript
+const sdk = new AppboxoWebSDK({
+  clientId: "your-client-id",
+  appId: "your-app-id",
+  onPaymentRequest: async (paymentData) => {
+    // Process payment with your backend
+    const response = await fetch('/api/payments/process', {
+      method: 'POST',
+      body: JSON.stringify(paymentData)
+    });
+    const result = await response.json();
+    
+    return {
+      ...paymentData,
+      status: result.status, // 'paid', 'failed', 'in_process', or 'cancelled'
+      hostappOrderId: result.orderId,
+      transactionId: result.transactionId, // optional
+    };
+  },
+});
+
+// Optional: listen for payment completion
+sdk.onPaymentComplete((success, data) => {
+  if (success) {
+    console.log('Payment succeeded:', data);
+  }
+});
+```
+
+Note: When `onPaymentRequest` is set, the SDK automatically tells the miniapp it supports `AppBoxoWebAppPay`, so it can call `appboxo.pay()`.
+
 ## Methods
 
 | Method | Description |
@@ -100,16 +138,41 @@ SDK handles these miniapp events:
 ### React Example
 
 ```tsx
+import { AppboxoWebSDK } from "@appboxo/web-sdk";
+import type { PaymentRequest, PaymentResponse } from "@appboxo/web-sdk";
+
 function App() {
   const iframeRef = useRef<HTMLIFrameElement>(null);
   const [sdk, setSdk] = useState<AppboxoWebSDK | null>(null);
 
   useEffect(() => {
-    const s = new AppboxoWebSDK({ clientId: "...", appId: "..." });
-    s.setAuthCode(authCode);
-    s.onLoginComplete((success) => {
-      console.log('Login:', success ? 'success' : 'failed');
+    const s = new AppboxoWebSDK({ 
+      clientId: "your-client-id", 
+      appId: "your-app-id",
+      onPaymentRequest: async (paymentData: PaymentRequest): Promise<PaymentResponse> => {
+        const response = await fetch('/api/payments/process', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(paymentData)
+        });
+        const result = await response.json();
+        
+        return {
+          ...paymentData,
+          status: result.status,
+          hostappOrderId: result.hostappOrderId,
+        };
+      },
+    });
+    
+    s.setAuthCode("your-auth-code");
+    s.onLoginComplete((success, data) => {
+      console.log('Login:', success ? 'success' : 'failed', data);
+    });
+    s.onPaymentComplete((success, data) => {
+      console.log('Payment:', success ? 'success' : 'failed', data);
     });
+    
     setSdk(s);
     return () => s.destroy();
   }, []);
@@ -121,7 +184,7 @@ function App() {
     }
   };
 
-  return <iframe ref={iframeRef} onLoad={handleLoad} src="..." />;
+  return <iframe ref={iframeRef} onLoad={handleLoad} src="https://your-miniapp.com" />;
 }
 ```
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appboxo/web-sdk",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "Boxo Desktop Host App SDK for handling miniapp events",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",