suioutkit 1.0.4 → 1.1.1

package/README.md

@@ -123,17 +123,29 @@ Throws if the backend returns a non-OK response.
 
 ---
 
-### `openModal(session, onClose?)`
+### `openModal(session, options?)`
 Opens the built-in checkout modal (bank transfer, OPay, Stripe, Sui wallet, outPay).
 
 ```ts
-const modal = sdk.openModal(session, () => {
-  // Called when the user closes the overlay
+const modal = sdk.openModal(session, {
+  onClose: () => console.log("closed"),
+  onPaymentComplete: (result) => console.log(result.txDigest, result.walrusBlobId),
+  redirectUrl: "/thank-you",
+  autoCloseOnSuccess: true,
 });
 ```
 
 **Returns** `SuiOutKitModal` (internal handle). The modal loads styles from `{backendUrl}/style.css` automatically.
 
+Options (`SuiOutKitModalOptions`):
+
+| Option | Type | Description |
+|--------|------|-------------|
+| `onClose` | `() => void` | Called when the user dismisses the overlay |
+| `onPaymentComplete` | `(result: PaymentResult) => void` | Called after on-chain settlement with `{ nonce, txDigest, walrusBlobId }` |
+| `redirectUrl` | `string` | Redirect browser here after successful payment |
+| `autoCloseOnSuccess` | `boolean` | Auto-close the modal after settlement instead of showing success panel |
+
 > **Note:** Theme, logo, and `allowedMethods` customization are not exposed on `openModal` today. Use [custom UI](#custom-ui-no-modal) or extend the modal in source if you need that.
 
 ---

package/dist/index.d.ts

@@ -27,6 +27,7 @@ export declare class SuiOutKit {
     wrapButton(selector: string, options: {
         amount: number;
         currency: "NGN" | "SUI" | string;
+        coinType?: string;
         metadata?: Record<string, any>;
     }): void;
 }

package/dist/index.js

@@ -52401,13 +52401,20 @@ var SuiOutKitModal = class {
   async handleCryptoPaymentPanel() {
     const container = this.overlay?.querySelector("#sok-content-panel");
     if (!container) return;
+    const coins = this.session.supportedCoins || [];
+    const currentCoin = this.session.coinType || "0x2::sui::SUI";
+    const currentSymbol = coins.find((c4) => c4.type === currentCoin)?.symbol || "SUI";
+    const coinChips = coins.length > 1 ? `<div class="sok-coin-selector">${coins.map(
+      (c4) => `<button class="sok-coin-chip${c4.type === currentCoin ? " active" : ""}" data-coin-type="${c4.type}">${c4.symbol}</button>`
+    ).join("")}</div>` : `<div class="sok-coin-badge">${currentSymbol}</div>`;
     container.innerHTML = `
       <button class="suioutkit-back" id="sok-back-btn">\u2190 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>
+        <p class="suioutkit-subtitle">Choose settlement token and payment channel</p>
       </div>
       <div class="suioutkit-panel">
+        ${coinChips}
         <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>
@@ -52419,6 +52426,17 @@ var SuiOutKitModal = class {
         </button>
       </div>
     `;
+    if (coins.length > 1) {
+      container.querySelectorAll(".sok-coin-chip").forEach((chip) => {
+        chip.addEventListener("click", () => {
+          const coinType = chip.dataset.coinType || "";
+          if (coinType && coinType !== this.session.coinType) {
+            this.session.coinType = coinType;
+            void this.handleCryptoPaymentPanel();
+          }
+        });
+      });
+    }
     container.querySelector("#sok-back-btn")?.addEventListener("click", () => this.renderSelectionPanel());
     container.querySelector("#sok-connect-extension-btn")?.addEventListener("click", async () => {
       this.renderLoadingPanel("Preparing crypto payment...");
@@ -52766,13 +52784,17 @@ var SuiOutKitModal = class {
     });
   }
   async loadCryptoIntent(method) {
+    const body = {
+      token: this.session.token,
+      method
+    };
+    if (this.session.coinType) {
+      body.coinType = this.session.coinType;
+    }
     const response = await fetch(joinApiPath(this.backendUrl, "checkout", "crypto", "intent"), {
       method: "POST",
       headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({
-        token: this.session.token,
-        method
-      })
+      body: JSON.stringify(body)
     });
     const result = await response.json();
     if (!response.ok) {
@@ -53005,6 +53027,7 @@ var SuiOutKit = class {
           amount: options.amount,
           currency: options.currency,
           merchantAddress: this.merchantAddress,
+          coinType: options.coinType,
           metadata: options.metadata || {}
         })
       });

package/dist/types/index.d.ts

@@ -1,8 +1,14 @@
 export type SomeType = any;
+export interface SupportedCoin {
+    symbol: string;
+    type: string;
+    decimals: number;
+}
 export interface CheckoutSessionOptions {
     amount: number;
     currency: "NGN" | "SUI" | string;
     merchantAddress: string;
+    coinType?: string;
     metadata?: Record<string, any>;
 }
 export interface CheckoutSession {
@@ -17,6 +23,7 @@ export interface CheckoutSession {
     cryptoRegistryName?: string;
     coinType?: string;
     estimatedRate?: number;
+    supportedCoins?: SupportedCoin[];
 }
 export type ChargeMethod = "bank_transfer" | "opay" | "crypto" | "sui_wallet" | "outpay" | "stripe";
 export interface VirtualAccount {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "suioutkit",
-  "version": "1.0.4",
+  "version": "1.1.1",
   "description": "Premium Universal Payment Gateway SDK for instant settlement on Sui",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/components/modal.ts

@@ -420,13 +420,27 @@ export class SuiOutKitModal {
     const container = this.overlay?.querySelector("#sok-content-panel");
     if (!container) return;
 
+    const coins = this.session.supportedCoins || [];
+    const currentCoin = this.session.coinType || "0x2::sui::SUI";
+    const currentSymbol = coins.find((c) => c.type === currentCoin)?.symbol || "SUI";
+
+    const coinChips = coins.length > 1
+      ? `<div class="sok-coin-selector">${coins
+          .map(
+            (c) =>
+              `<button class="sok-coin-chip${c.type === currentCoin ? " active" : ""}" data-coin-type="${c.type}">${c.symbol}</button>`
+          )
+          .join("")}</div>`
+      : `<div class="sok-coin-badge">${currentSymbol}</div>`;
+
     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>
+        <p class="suioutkit-subtitle">Choose settlement token and payment channel</p>
       </div>
       <div class="suioutkit-panel">
+        ${coinChips}
         <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>
@@ -439,6 +453,18 @@ export class SuiOutKitModal {
       </div>
     `;
 
+    if (coins.length > 1) {
+      container.querySelectorAll(".sok-coin-chip").forEach((chip) => {
+        chip.addEventListener("click", () => {
+          const coinType = (chip as HTMLElement).dataset.coinType || "";
+          if (coinType && coinType !== this.session.coinType) {
+            this.session.coinType = coinType;
+            void this.handleCryptoPaymentPanel();
+          }
+        });
+      });
+    }
+
     container.querySelector("#sok-back-btn")?.addEventListener("click", () => this.renderSelectionPanel());
 
     container.querySelector("#sok-connect-extension-btn")?.addEventListener("click", async () => {
@@ -858,13 +884,17 @@ export class SuiOutKitModal {
   }
 
   private async loadCryptoIntent(method: "sui_wallet" | "outpay"): Promise<CryptoIntentResponse> {
+    const body: Record<string, any> = {
+      token: this.session.token,
+      method
+    };
+    if (this.session.coinType) {
+      body.coinType = this.session.coinType;
+    }
     const response = await fetch(joinApiPath(this.backendUrl, "checkout", "crypto", "intent"), {
       method: "POST",
       headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({
-        token: this.session.token,
-        method
-      })
+      body: JSON.stringify(body)
     });
 
     const result: any = await response.json();

package/src/components/style.css

@@ -478,6 +478,48 @@
   100% { top: 0; }
 }
 
+.sok-coin-selector {
+  display: flex;
+  gap: 8px;
+  justify-content: center;
+  margin-bottom: 14px;
+  flex-wrap: wrap;
+}
+
+.sok-coin-chip {
+  background: var(--sok-card-bg);
+  border: 2px solid var(--sok-border);
+  border-radius: 20px;
+  padding: 6px 18px;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  color: var(--sok-text);
+}
+
+.sok-coin-chip:hover {
+  border-color: var(--sok-accent);
+  color: var(--sok-accent);
+}
+
+.sok-coin-chip.active {
+  border-color: var(--sok-accent);
+  background: var(--sok-accent);
+  color: #ffffff;
+}
+
+.sok-coin-badge {
+  display: inline-block;
+  background: var(--sok-accent);
+  color: #ffffff;
+  border-radius: 20px;
+  padding: 4px 16px;
+  font-size: 13px;
+  font-weight: 600;
+  margin-bottom: 14px;
+}
+
 .suioutkit-wallet-list {
   display: flex;
   flex-direction: column;

package/src/index.ts

@@ -33,6 +33,7 @@ export class SuiOutKit {
           amount: options.amount,
           currency: options.currency,
           merchantAddress: this.merchantAddress,
+          coinType: options.coinType,
           metadata: options.metadata || {}
         })
       });
@@ -86,7 +87,7 @@ export class SuiOutKit {
    */
   public wrapButton(
     selector: string,
-    options: { amount: number; currency: "NGN" | "SUI" | string; metadata?: Record<string, any> }
+    options: { amount: number; currency: "NGN" | "SUI" | string; coinType?: string; metadata?: Record<string, any> }
   ): void {
     const btn = document.querySelector(selector) as HTMLButtonElement;
     if (!btn) {

package/src/types/index.ts

@@ -4,10 +4,17 @@
 
 export type SomeType = any;
 
+export interface SupportedCoin {
+  symbol: string;
+  type: string;
+  decimals: number;
+}
+
 export interface CheckoutSessionOptions {
   amount: number;
   currency: "NGN" | "SUI" | string;
   merchantAddress: string;
+  coinType?: string;
   metadata?: Record<string, any>;
 }
 
@@ -23,6 +30,7 @@ export interface CheckoutSession {
   cryptoRegistryName?: string;
   coinType?: string;
   estimatedRate?: number;
+  supportedCoins?: SupportedCoin[];
 }
 
 export type ChargeMethod = "bank_transfer" | "opay" | "crypto" | "sui_wallet" | "outpay" | "stripe";