suioutkit 1.0.1 → 1.0.3

package/dist/types/index.d.ts

@@ -55,3 +55,14 @@ export interface CheckoutStatusResponse {
     walrusBlobId?: string;
     error?: string;
 }
+export interface PaymentResult {
+    nonce: string;
+    txDigest: string;
+    walrusBlobId: string;
+}
+export interface SuiOutKitModalOptions {
+    onClose?: () => void;
+    onPaymentComplete?: (result: PaymentResult) => void;
+    redirectUrl?: string;
+    autoCloseOnSuccess?: boolean;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "suioutkit",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "Premium Universal Payment Gateway SDK for instant settlement on Sui",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -25,10 +25,12 @@
     "@mysten/sui": "^2.17.0",
     "@stripe/stripe-js": "^9.7.0",
     "lucide-react": "^1.17.0",
+    "qrcode": "^1.5.4",
     "react": "^19.2.7",
     "react-dom": "^19.2.7"
   },
   "devDependencies": {
+    "@types/qrcode": "^1.5.6",
     "@types/react": "^19.2.16",
     "@types/react-dom": "^19.2.3",
     "esbuild": "^0.28.0",

package/src/components/modal.ts

@@ -10,8 +10,9 @@ import { createPaymentTransactionUri } from "@mysten/payment-kit";
 import { paymentKit } from "@mysten/payment-kit";
 import { createDAppKit } from "@mysten/dapp-kit-core";
 import "@mysten/dapp-kit-core/web";
+import QRCode from "qrcode";
 import { loadStripe, StripeElements, Stripe } from "@stripe/stripe-js";
-import { CheckoutSession, ChargeResponse, CheckoutStatusResponse, CryptoIntentResponse } from "../types/index.js";
+import { CheckoutSession, ChargeResponse, CheckoutStatusResponse, CryptoIntentResponse, SuiOutKitModalOptions, PaymentResult } from "../types/index.js";
 import PaymentStatusUI from "./PaymentStatusUI";
 import { joinApiPath } from "../config/api.js";
 
@@ -33,17 +34,23 @@ export class SuiOutKitModal {
   private backendUrl: string;
   private pollInterval: any = null;
   private walletConnectionUnsubscribe: (() => void) | null = null;
-  private onCloseCallback: () => void;
+  private onCloseCallback?: () => void;
+  private onPaymentCompleteCallback?: (result: PaymentResult) => void;
+  private redirectUrl?: string;
+  private autoCloseOnSuccess?: boolean;
   private cryptoIntent: CryptoIntentResponse | null = null;
   private dAppKit: any | null = null;
   private paymentClient: any | null = null;
   private stripeInstance: Stripe | null = null;
   private stripeElements: StripeElements | null = null;
 
-  constructor(session: CheckoutSession, backendUrl: string, onClose: () => void) {
+  constructor(session: CheckoutSession, backendUrl: string, options?: SuiOutKitModalOptions) {
     this.session = session;
     this.backendUrl = backendUrl;
-    this.onCloseCallback = onClose;
+    this.onCloseCallback = options?.onClose;
+    this.onPaymentCompleteCallback = options?.onPaymentComplete;
+    this.redirectUrl = options?.redirectUrl;
+    this.autoCloseOnSuccess = options?.autoCloseOnSuccess;
     this.ensureDAppKit(); // Initialize early so wallets have time to inject
     this.injectStyles();
     this.createModal();
@@ -271,8 +278,8 @@ export class SuiOutKitModal {
         <h2 class="suioutkit-title">OPay Direct</h2>
         <p class="suioutkit-subtitle">Enter your OPay registered phone number</p>
       </div>
-      <div class="sok-panel">
-        <form class="sok-form" id="sok-opay-form">
+      <div class="suioutkit-panel">
+        <form class="sok-form" id="sok-opay-form" style="width: 100%;">
           <input type="tel" class="sok-input" placeholder="e.g. 08012345678" id="sok-phone-input" required />
           <button type="submit" class="sok-btn">Send Prompt</button>
         </form>
@@ -348,12 +355,12 @@ export class SuiOutKitModal {
         <h2 class="suioutkit-title">Global Checkout</h2>
         <p class="suioutkit-subtitle">Secured by Stripe</p>
       </div>
-      <div class="suioutkit-panel" style="gap: 16px; display: flex; flex-direction: column; width: 100%;">
+      <div class="suioutkit-panel">
         <form id="payment-form" style="width: 100%;">
           <div id="payment-element" style="min-height: 200px; margin-bottom: 16px;">
             <div class="sok-spinner" style="margin: 0 auto;"></div>
           </div>
-          <button class="sok-btn" id="submit-stripe-btn" style="background: linear-gradient(135deg, #6366f1 0%, #4338ca 100%); width: 100%;">
+          <button class="sok-btn sok-btn-indigo" id="submit-stripe-btn">
             Pay Now
           </button>
           <div id="payment-message" style="color: #ef4444; font-size: 13px; margin-top: 8px; text-align: center; display: none;"></div>
@@ -413,29 +420,20 @@ export class SuiOutKitModal {
     const container = this.overlay?.querySelector("#sok-content-panel");
     if (!container) return;
 
-    this.renderLoadingPanel("Preparing crypto payment...");
-
-    try {
-      this.cryptoIntent = await this.loadCryptoIntent("sui_wallet");
-    } catch (err: any) {
-      this.renderErrorPanel(err.message || "Failed to prepare crypto payment.");
-      return;
-    }
-
     container.innerHTML = `
       <button class="suioutkit-back" id="sok-back-btn">← Back to methods</button>
       <div class="suioutkit-header">
         <h2 class="suioutkit-title">Pay with Sui Wallet</h2>
         <p class="suioutkit-subtitle">Choose SUI payment channel</p>
       </div>
-      <div class="suioutkit-panel" style="gap: 12px; display: flex; flex-direction: column; width: 100%;">
+      <div class="suioutkit-panel">
         <p class="sok-status-text" style="margin-bottom: 12px;">
           Choose whether to pay via a desktop extension wallet or scan a dynamic QR Code with your mobile wallet.
         </p>
-        <button class="sok-btn" id="sok-connect-extension-btn" style="background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); margin-bottom: 4px;">
+        <button class="sok-btn sok-btn-blue" id="sok-connect-extension-btn" style="margin-bottom: 4px;">
           Standard Connect Wallet
         </button>
-        <button class="sok-btn" id="sok-outpay-qr-btn" style="background: linear-gradient(135deg, #10b981 0%, #047857 100%);">
+        <button class="sok-btn sok-btn-green" id="sok-outpay-qr-btn">
           outPay (Scan QR Code)
         </button>
       </div>
@@ -443,9 +441,12 @@ export class SuiOutKitModal {
 
     container.querySelector("#sok-back-btn")?.addEventListener("click", () => this.renderSelectionPanel());
 
-    container.querySelector("#sok-connect-extension-btn")?.addEventListener("click", () => {
-      if (!this.cryptoIntent) {
-        this.renderErrorPanel("Crypto intent not ready.");
+    container.querySelector("#sok-connect-extension-btn")?.addEventListener("click", async () => {
+      this.renderLoadingPanel("Preparing crypto payment...");
+      try {
+        this.cryptoIntent = await this.loadCryptoIntent("sui_wallet");
+      } catch (err: any) {
+        this.renderErrorPanel(err.message || "Failed to prepare crypto payment.");
         return;
       }
       void this.openStandardConnectWallet();
@@ -517,10 +518,10 @@ export class SuiOutKitModal {
         <h2 class="suioutkit-title">Connect Wallet</h2>
         <p class="suioutkit-subtitle">Choose the extension you want to use</p>
       </div>
-      <div style="display: grid; grid-template-columns: 1fr; gap: 12px; width: 100%;">
+      <div class="suioutkit-wallet-list">
         ${walletCardsHtml}
       </div>
-      <p class="sok-status-text" style="font-size: 12px; opacity: 0.75; margin-top: 14px; text-align: center;">
+      <p class="sok-status-text sok-text-sm sok-op-75" style="margin-top: 14px; text-align: center;">
         Wallets are filtered from the browser extensions detected by dApp Kit.
       </p>
     `;
@@ -598,15 +599,15 @@ export class SuiOutKitModal {
 
     container.innerHTML = `
       <button class="suioutkit-back" id="sok-back-btn">← Back to Sui options</button>
-      <div class="suioutkit-panel" style="gap: 12px; display: flex; flex-direction: column; align-items: center; text-align: center;">
-        <div class="sok-success-icon" style="color: #f59e0b; display: flex; align-items: center; justify-content: center; margin-bottom: 8px;">
+      <div class="suioutkit-panel">
+        <div class="sok-icon-wrap sok-text-amber">
           <i data-lucide="alert-circle" style="width: 48px; height: 48px;"></i>
         </div>
         <h2 class="sok-success-title">Open this demo from localhost</h2>
         <p class="sok-status-text" style="max-width: 320px;">
           This page is running from a local file URL. Browser extension wallets like Slush and Phantom do not reliably inject into file:// pages, so dApp Kit cannot list them here.
         </p>
-        <p class="sok-status-text" style="max-width: 320px; font-size: 12px; opacity: 0.78;">
+        <p class="sok-status-text sok-text-sm sok-op-75" style="max-width: 320px;">
           Open the demo over http://localhost or another web server, then reload. That is the supported origin for wallet detection and connection.
         </p>
       </div>
@@ -624,14 +625,13 @@ export class SuiOutKitModal {
       <button
         class="sok-wallet-card"
         data-wallet-index="${index}"
-        style="display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; border-radius: 18px; border: 1px solid rgba(255,255,255,0.08); background: linear-gradient(135deg, rgba(17,24,39,0.88), rgba(15,23,42,0.96)); color: #fff; text-align: left; box-shadow: 0 18px 40px rgba(0,0,0,0.22);"
       >
-        <img src="${icon}" alt="${walletName}" class="sok-wallet-icon" style="width: 44px; height: 44px; border-radius: 14px; flex: none; background: rgba(255,255,255,0.08); padding: 4px;" />
-        <span style="display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0;">
-          <span class="sok-wallet-name" style="font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">${walletName}</span>
-          <span style="font-size: 12px; opacity: 0.74;">Detected browser wallet</span>
+        <img src="${icon}" alt="${walletName}" class="sok-wallet-icon" />
+        <span class="sok-wallet-info">
+          <span class="sok-wallet-name">${walletName}</span>
+          <span class="sok-wallet-desc">Detected browser wallet</span>
         </span>
-        <span style="font-size: 12px; font-weight: 700; color: #93c5fd;">Connect</span>
+        <span class="sok-wallet-connect">Connect</span>
       </button>
     `;
   }
@@ -643,14 +643,14 @@ export class SuiOutKitModal {
     container.innerHTML = `
       <button class="suioutkit-back" id="sok-back-btn">← Back to Sui options</button>
       <div class="suioutkit-panel">
-        <div class="sok-success-icon" style="color: #f59e0b; display: flex; align-items: center; justify-content: center; margin-bottom: 16px;">
+        <div class="sok-icon-wrap sok-text-amber">
           <i data-lucide="alert-circle" style="width: 48px; height: 48px;"></i>
         </div>
         <h2 class="sok-success-title">No Wallets Detected</h2>
-        <p class="sok-status-text" style="margin-top: 16px;">
+        <p class="sok-status-text sok-mt-16">
           We couldn't find any installed Sui wallets. Please install a wallet extension like Phantom, Slush, or others from the app store and refresh the page.
         </p>
-        <p class="sok-status-text" style="font-size: 12px; opacity: 0.7; margin-top: 12px;">
+        <p class="sok-status-text sok-text-sm sok-op-75 sok-mt-12">
           Alternatively, you can use the outPay QR option to pay from a mobile wallet.
         </p>
       </div>
@@ -676,7 +676,7 @@ export class SuiOutKitModal {
         <h2 class="suioutkit-title">Confirm Payment</h2>
         <p class="suioutkit-subtitle">Review and approve this transaction</p>
       </div>
-      <div class="suioutkit-panel" style="gap: 12px; display: flex; flex-direction: column; width: 100%;">
+      <div class="suioutkit-panel">
         <div class="sok-va-card">
           <div class="sok-va-row">
             <div class="sok-va-lbl">Amount</div>
@@ -691,7 +691,7 @@ export class SuiOutKitModal {
             <div class="sok-va-val">${network}</div>
           </div>
         </div>
-        <button class="sok-btn" id="sok-confirm-pay-btn" style="background: linear-gradient(135deg, #10b981 0%, #047857 100%);">
+        <button class="sok-btn sok-btn-green" id="sok-confirm-pay-btn">
           Confirm & Pay
         </button>
       </div>
@@ -809,7 +809,7 @@ export class SuiOutKitModal {
     }
 
     const paymentUri = this.buildPaymentUri(this.cryptoIntent);
-    const qrCodeUrl = `https://api.qrserver.com/v1/create-qr-code/?size=180x180&data=${encodeURIComponent(paymentUri)}`;
+    const qrCodeUrl = await QRCode.toDataURL(paymentUri, { width: 180, margin: 1 });
 
     container.innerHTML = `
       <button class="suioutkit-back" id="sok-back-btn">← Back to Sui options</button>
@@ -823,7 +823,7 @@ export class SuiOutKitModal {
           <div class="sok-qr-frame">
             <img src="${qrCodeUrl}" alt="outPay QR Code" class="sok-qr-img" />
             <div class="sok-qr-logo-badge">
-              <i data-lucide="droplet" style="width: 16px; height: 16px; color: white;"></i>
+              <img src="${this.backendUrl}/assets/slush.jpeg" alt="Slush" style="width: 35px; height: 35px; border-radius: 16px;" />
             </div>
             <div class="sok-qr-scan-pulse"></div>
           </div>
@@ -899,8 +899,9 @@ export class SuiOutKitModal {
     const walrusNetworkPath = getExplorerNetworkPath();
 
     container.innerHTML = `
+      <button class="suioutkit-back" id="sok-back-btn">← Back to methods</button>
       <div class="suioutkit-panel">
-        <div class="sok-success-icon" style="color: #10b981; display: flex; align-items: center; justify-content: center; margin-bottom: 16px;">
+        <div class="sok-icon-wrap sok-text-green">
           <i data-lucide="check-circle" style="width: 48px; height: 48px;"></i>
         </div>
         <h2 class="sok-success-title">Payment Successful!</h2>
@@ -909,7 +910,7 @@ export class SuiOutKitModal {
         <div class="sok-success-details">
           <div class="sok-receipt-row">
             <span class="sok-receipt-lbl">Amount Paid</span>
-            <span class="sok-receipt-val" style="color: #10b981; font-weight:700;">
+            <span class="sok-receipt-val sok-text-green" style="font-weight:700;">
               ${this.session.currency === "NGN" ? "₦" : ""}${this.session.amount.toLocaleString()}
             </span>
           </div>
@@ -932,6 +933,15 @@ export class SuiOutKitModal {
     `;
 
     this.renderIcons();
+    container.querySelector("#sok-back-btn")?.addEventListener("click", () => this.renderSelectionPanel());
+
+    const result: PaymentResult = { nonce: this.session.nonce, txDigest, walrusBlobId };
+    this.onPaymentCompleteCallback?.(result);
+    if (this.redirectUrl) {
+      window.location.href = this.redirectUrl;
+    } else if (this.autoCloseOnSuccess) {
+      this.destroy();
+    }
   }
 
   private renderErrorPanel(message: string) {
@@ -941,11 +951,11 @@ export class SuiOutKitModal {
     container.innerHTML = `
       <button class="suioutkit-back" id="sok-back-btn">← Back to methods</button>
       <div class="suioutkit-panel">
-        <div class="sok-success-icon" style="color: #ef4444; display: flex; align-items: center; justify-content: center; margin-bottom: 16px;">
+        <div class="sok-icon-wrap sok-text-red">
           <i data-lucide="x-circle" style="width: 48px; height: 48px;"></i>
         </div>
         <h2 class="sok-success-title">Payment Failed</h2>
-        <p class="sok-status-text" style="color: #ef4444; margin-bottom: 20px;">${message}</p>
+        <p class="sok-status-text sok-mb-20 sok-text-red">${message}</p>
       </div>
     `;
 
@@ -986,7 +996,7 @@ export class SuiOutKitModal {
     this.overlay?.classList.remove("active");
     setTimeout(() => {
       this.overlay?.remove();
-      this.onCloseCallback();
+      this.onCloseCallback?.();
     }, 300);
   }
 }