@three-ws/x402-payment-modal 1.1.0 → 1.2.0

package/types/index.d.ts

@@ -58,12 +58,17 @@ export interface PayResult {
 	};
 }
 
-/** Branding shown in the modal footer. */
+/** Branding shown in the modal header/footer. */
 export interface BrandConfig {
 	name?: string;
 	url?: string;
+	/** Logo shown in the modal header (URL). */
+	logo?: string;
 }
 
+/** Forced color scheme. `auto` (default) follows the OS preference. */
+export type X402Theme = 'auto' | 'light' | 'dark';
+
 /** ERC-8021 builder-code self-attribution echoed when the 402 challenge declares one. */
 export interface BuilderCodeConfig {
 	wallet?: string;
@@ -84,6 +89,10 @@ export interface X402Config {
 	footerNote?: string;
 	builderCode?: BuilderCodeConfig;
 	esm?: EsmConfig;
+	/** Force the modal's color scheme. Default `auto` (follow the OS). */
+	theme?: X402Theme;
+	/** Flat map of `--x402-*` design tokens to brand-match at runtime, e.g. `{ '--x402-accent': '#ff5c00' }`. */
+	cssVars?: Record<string, string> | null;
 }
 
 /**
@@ -107,8 +116,10 @@ export const version: string;
 
 /** Solana USDC mint (mainnet). */
 export const USDC_MINT_SOLANA: string;
-/** $THREE — the three.ws utility token mint. Recognized by the modal so a 402
- *  `accept` using it renders as THREE without merchant-supplied metadata. */
+/** THREE — an optional opt-in SPL token mint recognized by the modal so a 402
+ *  `accept` using it renders as THREE without merchant-supplied metadata. USDC
+ *  remains the always-on default; this token is used only when an endpoint
+ *  chooses to accept it. */
 export const THREE_MINT: string;
 
 export interface KnownSolanaToken {

package/types/server.d.ts

@@ -47,7 +47,8 @@ export const NETWORK_SOLANA_DEVNET: string;
 
 /** Solana USDC mint (mainnet). */
 export const USDC_MINT_SOLANA: string;
-/** $THREE — the three.ws utility token mint. */
+/** THREE — an optional opt-in SPL token mint (used only when an endpoint
+ *  chooses to accept it alongside USDC). */
 export const THREE_MINT: string;
 
 export interface WellKnownToken {

package/examples/react/X402Button.jsx

@@ -1,84 +0,0 @@
-/**
- * <X402Button> — a thin React wrapper around @three-ws/x402-payment-modal.
- *
- * The package is a browser-only ES module (it renders a modal and talks to a
- * wallet), so we dynamically import it INSIDE the click handler. That keeps the
- * component SSR-safe: nothing from the package is touched during render or on
- * the server.
- *
- * Usage:
- *
- *   import X402Button from './X402Button';
- *
- *   <X402Button
- *     endpoint="https://api.example.com/paid/summarize"
- *     method="POST"
- *     body={{ url: 'https://en.wikipedia.org/wiki/x402' }}
- *     merchant="Acme Summaries"
- *     action="Summarize article"
- *     label="Summarize for 0.01 USDC"
- *     onResult={(r) => console.log('paid', r)}
- *     onError={(e) => console.error(e)}
- *   />
- *
- * For Solana payments your app must also run the server checkout endpoint
- * (see ../../docs/server-setup.md and examples/server-express). EVM payments
- * sign in-browser and need no server.
- */
-
-import { useCallback, useState } from 'react';
-
-export default function X402Button({
-  endpoint,
-  method = 'GET',
-  body,
-  merchant,
-  action,
-  label = 'Pay',
-  onResult,
-  onError,
-  children,
-  ...rest
-}) {
-  const [processing, setProcessing] = useState(false);
-
-  const handleClick = useCallback(async () => {
-    if (processing) return;
-    setProcessing(true);
-
-    try {
-      // Dynamic import keeps the browser-only module out of the SSR bundle.
-      const { pay } = await import('@three-ws/x402-payment-modal');
-
-      const result = await pay({
-        endpoint,
-        method,
-        body,
-        merchant,
-        action,
-      });
-
-      // result = { ok, result, payment?, siwx?, response }
-      onResult?.(result);
-    } catch (err) {
-      // The modal rejects with err.code === 'cancelled' when the user dismisses
-      // it. That is not an error — stay silent so we don't flash a failure.
-      if (err && err.code === 'cancelled') return;
-      onError?.(err);
-    } finally {
-      setProcessing(false);
-    }
-  }, [processing, endpoint, method, body, merchant, action, onResult, onError]);
-
-  return (
-    <button
-      type="button"
-      onClick={handleClick}
-      disabled={processing}
-      aria-busy={processing}
-      {...rest}
-    >
-      {processing ? 'Processing…' : children ?? label}
-    </button>
-  );
-}