@settlr/sdk 0.2.0 → 0.3.1

package/README.md

@@ -1,6 +1,22 @@
 # @settlr/sdk
 
-> Solana USDC payments for games - email checkout, no wallet required
+[![npm version](https://img.shields.io/npm/v/@settlr/sdk.svg)](https://www.npmjs.com/package/@settlr/sdk)
+[![npm downloads](https://img.shields.io/npm/dm/@settlr/sdk.svg)](https://www.npmjs.com/package/@settlr/sdk)
+[![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
+
+> **Settlr** - Accept Solana USDC payments in games and apps. Email checkout, gasless transactions, no wallet required.
+
+🌐 **Website:** [settlr.dev](https://settlr.dev)  
+📖 **Docs:** [settlr.dev/docs](https://settlr.dev/docs)  
+🎮 **Demo:** [settlr.dev/demo](https://settlr.dev/demo)
+
+## Why Settlr?
+
+- ✅ **No wallet required** - Users pay with just an email
+- ✅ **Gasless transactions** - No SOL needed for fees
+- ✅ **USDC on Solana** - Fast, cheap, stable payments
+- ✅ **Drop-in components** - React components ready to use
+- ✅ **Gaming focused** - Built for in-game purchases
 
 ## Installation
 

package/dist/index.d.mts

@@ -584,6 +584,111 @@ declare function usePaymentLink(config: {
         cancelUrl?: string;
     }) => string>[0]) => Promise<string>;
 };
+/**
+ * Payment Modal - Iframe-based checkout that keeps users on your site
+ *
+ * @example
+ * ```tsx
+ * import { PaymentModal } from '@settlr/sdk';
+ *
+ * function ProductPage() {
+ *   const [showPayment, setShowPayment] = useState(false);
+ *
+ *   return (
+ *     <>
+ *       <button onClick={() => setShowPayment(true)}>
+ *         Buy Now - $49.99
+ *       </button>
+ *
+ *       {showPayment && (
+ *         <PaymentModal
+ *           amount={49.99}
+ *           merchantName="Arena GG"
+ *           merchantWallet="YOUR_WALLET_ADDRESS"
+ *           memo="Tournament Entry"
+ *           onSuccess={(result) => {
+ *             console.log('Paid!', result.signature);
+ *             setShowPayment(false);
+ *           }}
+ *           onClose={() => setShowPayment(false)}
+ *         />
+ *       )}
+ *     </>
+ *   );
+ * }
+ * ```
+ */
+interface PaymentModalProps {
+    /** Payment amount in USDC */
+    amount: number;
+    /** Merchant display name */
+    merchantName: string;
+    /** Merchant wallet address */
+    merchantWallet: string;
+    /** Optional memo/description */
+    memo?: string;
+    /** Optional order ID */
+    orderId?: string;
+    /** Called when payment succeeds */
+    onSuccess?: (result: {
+        signature: string;
+        amount: number;
+    }) => void;
+    /** Called when modal is closed */
+    onClose?: () => void;
+    /** Called on error */
+    onError?: (error: Error) => void;
+    /** Checkout base URL (default: https://settlr.dev/checkout) */
+    checkoutUrl?: string;
+}
+declare function PaymentModal({ amount, merchantName, merchantWallet, memo, orderId, onSuccess, onClose, onError, checkoutUrl, }: PaymentModalProps): react_jsx_runtime.JSX.Element;
+/**
+ * Hook to open payment modal programmatically
+ *
+ * @example
+ * ```tsx
+ * import { usePaymentModal } from '@settlr/sdk';
+ *
+ * function ProductPage() {
+ *   const { openPayment, PaymentModalComponent } = usePaymentModal({
+ *     merchantName: "Arena GG",
+ *     merchantWallet: "YOUR_WALLET",
+ *   });
+ *
+ *   return (
+ *     <>
+ *       <button onClick={() => openPayment({
+ *         amount: 49.99,
+ *         memo: "Tournament Entry",
+ *         onSuccess: (result) => console.log("Paid!", result),
+ *       })}>
+ *         Buy Now
+ *       </button>
+ *       <PaymentModalComponent />
+ *     </>
+ *   );
+ * }
+ * ```
+ */
+declare function usePaymentModal(config: {
+    merchantName: string;
+    merchantWallet: string;
+    checkoutUrl?: string;
+}): {
+    openPayment: (options: {
+        amount: number;
+        memo?: string;
+        orderId?: string;
+        onSuccess?: (result: {
+            signature: string;
+            amount: number;
+        }) => void;
+        onError?: (error: Error) => void;
+    }) => void;
+    closePayment: () => void;
+    isOpen: boolean;
+    PaymentModalComponent: () => react_jsx_runtime.JSX.Element | null;
+};
 
 /**
  * Verify a webhook signature
@@ -667,4 +772,4 @@ declare function createWebhookHandler(options: {
     onError?: (error: Error) => void;
 }): (req: any, res: any) => Promise<void>;
 
-export { BuyButton, type BuyButtonProps, CheckoutWidget, type CheckoutWidgetProps, type CreatePaymentOptions, type MerchantConfig, type Payment, type PaymentResult, type PaymentStatus, SETTLR_CHECKOUT_URL, SUPPORTED_NETWORKS, Settlr, type SettlrConfig, SettlrProvider, type TransactionOptions, USDC_MINT_DEVNET, USDC_MINT_MAINNET, type WebhookEventType, type WebhookHandler, type WebhookHandlers, type WebhookPayload, createWebhookHandler, formatUSDC, parseUSDC, parseWebhookPayload, shortenAddress, usePaymentLink, useSettlr, verifyWebhookSignature };
+export { BuyButton, type BuyButtonProps, CheckoutWidget, type CheckoutWidgetProps, type CreatePaymentOptions, type MerchantConfig, type Payment, PaymentModal, type PaymentModalProps, type PaymentResult, type PaymentStatus, SETTLR_CHECKOUT_URL, SUPPORTED_NETWORKS, Settlr, type SettlrConfig, SettlrProvider, type TransactionOptions, USDC_MINT_DEVNET, USDC_MINT_MAINNET, type WebhookEventType, type WebhookHandler, type WebhookHandlers, type WebhookPayload, createWebhookHandler, formatUSDC, parseUSDC, parseWebhookPayload, shortenAddress, usePaymentLink, usePaymentModal, useSettlr, verifyWebhookSignature };

package/dist/index.d.ts

@@ -584,6 +584,111 @@ declare function usePaymentLink(config: {
         cancelUrl?: string;
     }) => string>[0]) => Promise<string>;
 };
+/**
+ * Payment Modal - Iframe-based checkout that keeps users on your site
+ *
+ * @example
+ * ```tsx
+ * import { PaymentModal } from '@settlr/sdk';
+ *
+ * function ProductPage() {
+ *   const [showPayment, setShowPayment] = useState(false);
+ *
+ *   return (
+ *     <>
+ *       <button onClick={() => setShowPayment(true)}>
+ *         Buy Now - $49.99
+ *       </button>
+ *
+ *       {showPayment && (
+ *         <PaymentModal
+ *           amount={49.99}
+ *           merchantName="Arena GG"
+ *           merchantWallet="YOUR_WALLET_ADDRESS"
+ *           memo="Tournament Entry"
+ *           onSuccess={(result) => {
+ *             console.log('Paid!', result.signature);
+ *             setShowPayment(false);
+ *           }}
+ *           onClose={() => setShowPayment(false)}
+ *         />
+ *       )}
+ *     </>
+ *   );
+ * }
+ * ```
+ */
+interface PaymentModalProps {
+    /** Payment amount in USDC */
+    amount: number;
+    /** Merchant display name */
+    merchantName: string;
+    /** Merchant wallet address */
+    merchantWallet: string;
+    /** Optional memo/description */
+    memo?: string;
+    /** Optional order ID */
+    orderId?: string;
+    /** Called when payment succeeds */
+    onSuccess?: (result: {
+        signature: string;
+        amount: number;
+    }) => void;
+    /** Called when modal is closed */
+    onClose?: () => void;
+    /** Called on error */
+    onError?: (error: Error) => void;
+    /** Checkout base URL (default: https://settlr.dev/checkout) */
+    checkoutUrl?: string;
+}
+declare function PaymentModal({ amount, merchantName, merchantWallet, memo, orderId, onSuccess, onClose, onError, checkoutUrl, }: PaymentModalProps): react_jsx_runtime.JSX.Element;
+/**
+ * Hook to open payment modal programmatically
+ *
+ * @example
+ * ```tsx
+ * import { usePaymentModal } from '@settlr/sdk';
+ *
+ * function ProductPage() {
+ *   const { openPayment, PaymentModalComponent } = usePaymentModal({
+ *     merchantName: "Arena GG",
+ *     merchantWallet: "YOUR_WALLET",
+ *   });
+ *
+ *   return (
+ *     <>
+ *       <button onClick={() => openPayment({
+ *         amount: 49.99,
+ *         memo: "Tournament Entry",
+ *         onSuccess: (result) => console.log("Paid!", result),
+ *       })}>
+ *         Buy Now
+ *       </button>
+ *       <PaymentModalComponent />
+ *     </>
+ *   );
+ * }
+ * ```
+ */
+declare function usePaymentModal(config: {
+    merchantName: string;
+    merchantWallet: string;
+    checkoutUrl?: string;
+}): {
+    openPayment: (options: {
+        amount: number;
+        memo?: string;
+        orderId?: string;
+        onSuccess?: (result: {
+            signature: string;
+            amount: number;
+        }) => void;
+        onError?: (error: Error) => void;
+    }) => void;
+    closePayment: () => void;
+    isOpen: boolean;
+    PaymentModalComponent: () => react_jsx_runtime.JSX.Element | null;
+};
 
 /**
  * Verify a webhook signature
@@ -667,4 +772,4 @@ declare function createWebhookHandler(options: {
     onError?: (error: Error) => void;
 }): (req: any, res: any) => Promise<void>;
 
-export { BuyButton, type BuyButtonProps, CheckoutWidget, type CheckoutWidgetProps, type CreatePaymentOptions, type MerchantConfig, type Payment, type PaymentResult, type PaymentStatus, SETTLR_CHECKOUT_URL, SUPPORTED_NETWORKS, Settlr, type SettlrConfig, SettlrProvider, type TransactionOptions, USDC_MINT_DEVNET, USDC_MINT_MAINNET, type WebhookEventType, type WebhookHandler, type WebhookHandlers, type WebhookPayload, createWebhookHandler, formatUSDC, parseUSDC, parseWebhookPayload, shortenAddress, usePaymentLink, useSettlr, verifyWebhookSignature };
+export { BuyButton, type BuyButtonProps, CheckoutWidget, type CheckoutWidgetProps, type CreatePaymentOptions, type MerchantConfig, type Payment, PaymentModal, type PaymentModalProps, type PaymentResult, type PaymentStatus, SETTLR_CHECKOUT_URL, SUPPORTED_NETWORKS, Settlr, type SettlrConfig, SettlrProvider, type TransactionOptions, USDC_MINT_DEVNET, USDC_MINT_MAINNET, type WebhookEventType, type WebhookHandler, type WebhookHandlers, type WebhookPayload, createWebhookHandler, formatUSDC, parseUSDC, parseWebhookPayload, shortenAddress, usePaymentLink, usePaymentModal, useSettlr, verifyWebhookSignature };

package/dist/index.js

@@ -32,6 +32,7 @@ var index_exports = {};
 __export(index_exports, {
   BuyButton: () => BuyButton,
   CheckoutWidget: () => CheckoutWidget,
+  PaymentModal: () => PaymentModal,
   SETTLR_CHECKOUT_URL: () => SETTLR_CHECKOUT_URL,
   SUPPORTED_NETWORKS: () => SUPPORTED_NETWORKS,
   Settlr: () => Settlr,
@@ -44,6 +45,7 @@ __export(index_exports, {
   parseWebhookPayload: () => parseWebhookPayload,
   shortenAddress: () => shortenAddress,
   usePaymentLink: () => usePaymentLink,
+  usePaymentModal: () => usePaymentModal,
   useSettlr: () => useSettlr,
   verifyWebhookSignature: () => verifyWebhookSignature
 });
@@ -893,6 +895,193 @@ function usePaymentLink(config) {
     generateQRCode
   };
 }
+var modalStyles = {
+  overlay: {
+    position: "fixed",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: "rgba(0, 0, 0, 0.8)",
+    backdropFilter: "blur(4px)",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    zIndex: 9999,
+    padding: "16px"
+  },
+  container: {
+    position: "relative",
+    width: "100%",
+    maxWidth: "480px",
+    height: "90vh",
+    maxHeight: "700px",
+    backgroundColor: "#12121a",
+    borderRadius: "16px",
+    overflow: "hidden",
+    boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.5)"
+  },
+  closeButton: {
+    position: "absolute",
+    top: "12px",
+    right: "12px",
+    width: "32px",
+    height: "32px",
+    borderRadius: "50%",
+    backgroundColor: "rgba(255, 255, 255, 0.1)",
+    border: "none",
+    cursor: "pointer",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    zIndex: 10,
+    color: "white",
+    fontSize: "18px",
+    transition: "background-color 0.2s"
+  },
+  iframe: {
+    width: "100%",
+    height: "100%",
+    border: "none"
+  },
+  loading: {
+    position: "absolute",
+    top: "50%",
+    left: "50%",
+    transform: "translate(-50%, -50%)",
+    color: "white",
+    fontSize: "14px",
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    gap: "12px"
+  }
+};
+function PaymentModal({
+  amount,
+  merchantName,
+  merchantWallet,
+  memo,
+  orderId,
+  onSuccess,
+  onClose,
+  onError,
+  checkoutUrl = "https://settlr.dev/checkout"
+}) {
+  const [loading, setLoading] = (0, import_react2.useState)(true);
+  const params = new URLSearchParams({
+    amount: amount.toString(),
+    merchant: merchantName,
+    to: merchantWallet,
+    embed: "true"
+  });
+  if (memo) params.set("memo", memo);
+  if (orderId) params.set("orderId", orderId);
+  const iframeSrc = `${checkoutUrl}?${params.toString()}`;
+  (0, import_react2.useEffect)(() => {
+    const handleMessage = (event) => {
+      if (!event.origin.includes("settlr.dev") && !event.origin.includes("localhost")) {
+        return;
+      }
+      const { type, data } = event.data || {};
+      switch (type) {
+        case "settlr:success":
+          onSuccess?.({
+            signature: data.signature,
+            amount: data.amount || amount
+          });
+          break;
+        case "settlr:error":
+          onError?.(new Error(data.message || "Payment failed"));
+          break;
+        case "settlr:close":
+          onClose?.();
+          break;
+      }
+    };
+    window.addEventListener("message", handleMessage);
+    return () => window.removeEventListener("message", handleMessage);
+  }, [amount, onSuccess, onError, onClose]);
+  (0, import_react2.useEffect)(() => {
+    const handleEscape = (e) => {
+      if (e.key === "Escape") onClose?.();
+    };
+    window.addEventListener("keydown", handleEscape);
+    return () => window.removeEventListener("keydown", handleEscape);
+  }, [onClose]);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { style: modalStyles.overlay, onClick: onClose, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: modalStyles.container, onClick: (e) => e.stopPropagation(), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "button",
+      {
+        style: modalStyles.closeButton,
+        onClick: onClose,
+        onMouseOver: (e) => e.currentTarget.style.backgroundColor = "rgba(255, 255, 255, 0.2)",
+        onMouseOut: (e) => e.currentTarget.style.backgroundColor = "rgba(255, 255, 255, 0.1)",
+        children: "\u2715"
+      }
+    ),
+    loading && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { style: modalStyles.loading, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Spinner, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "Loading checkout..." })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "iframe",
+      {
+        src: iframeSrc,
+        style: {
+          ...modalStyles.iframe,
+          opacity: loading ? 0 : 1
+        },
+        onLoad: () => setLoading(false),
+        allow: "payment"
+      }
+    )
+  ] }) });
+}
+function usePaymentModal(config) {
+  const [modalState, setModalState] = (0, import_react2.useState)({
+    isOpen: false,
+    amount: 0
+  });
+  const openPayment = (0, import_react2.useCallback)(
+    (options) => {
+      setModalState({
+        isOpen: true,
+        ...options
+      });
+    },
+    []
+  );
+  const closePayment = (0, import_react2.useCallback)(() => {
+    setModalState((prev) => ({ ...prev, isOpen: false }));
+  }, []);
+  const PaymentModalComponent = (0, import_react2.useCallback)(() => {
+    if (!modalState.isOpen) return null;
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      PaymentModal,
+      {
+        amount: modalState.amount,
+        merchantName: config.merchantName,
+        merchantWallet: config.merchantWallet,
+        memo: modalState.memo,
+        orderId: modalState.orderId,
+        checkoutUrl: config.checkoutUrl,
+        onSuccess: (result) => {
+          modalState.onSuccess?.(result);
+          closePayment();
+        },
+        onError: modalState.onError,
+        onClose: closePayment
+      }
+    );
+  }, [modalState, config, closePayment]);
+  return {
+    openPayment,
+    closePayment,
+    isOpen: modalState.isOpen,
+    PaymentModalComponent
+  };
+}
 
 // src/webhooks.ts
 var import_crypto = __toESM(require("crypto"));
@@ -956,6 +1145,7 @@ function createWebhookHandler(options) {
 0 && (module.exports = {
   BuyButton,
   CheckoutWidget,
+  PaymentModal,
   SETTLR_CHECKOUT_URL,
   SUPPORTED_NETWORKS,
   Settlr,
@@ -968,6 +1158,7 @@ function createWebhookHandler(options) {
   parseWebhookPayload,
   shortenAddress,
   usePaymentLink,
+  usePaymentModal,
   useSettlr,
   verifyWebhookSignature
 });

package/dist/index.mjs

@@ -499,7 +499,8 @@ function useSettlr() {
 // src/components.tsx
 import {
   useState,
-  useCallback
+  useCallback,
+  useEffect
 } from "react";
 import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
 var defaultStyles = {
@@ -856,6 +857,193 @@ function usePaymentLink(config) {
     generateQRCode
   };
 }
+var modalStyles = {
+  overlay: {
+    position: "fixed",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: "rgba(0, 0, 0, 0.8)",
+    backdropFilter: "blur(4px)",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    zIndex: 9999,
+    padding: "16px"
+  },
+  container: {
+    position: "relative",
+    width: "100%",
+    maxWidth: "480px",
+    height: "90vh",
+    maxHeight: "700px",
+    backgroundColor: "#12121a",
+    borderRadius: "16px",
+    overflow: "hidden",
+    boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.5)"
+  },
+  closeButton: {
+    position: "absolute",
+    top: "12px",
+    right: "12px",
+    width: "32px",
+    height: "32px",
+    borderRadius: "50%",
+    backgroundColor: "rgba(255, 255, 255, 0.1)",
+    border: "none",
+    cursor: "pointer",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    zIndex: 10,
+    color: "white",
+    fontSize: "18px",
+    transition: "background-color 0.2s"
+  },
+  iframe: {
+    width: "100%",
+    height: "100%",
+    border: "none"
+  },
+  loading: {
+    position: "absolute",
+    top: "50%",
+    left: "50%",
+    transform: "translate(-50%, -50%)",
+    color: "white",
+    fontSize: "14px",
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    gap: "12px"
+  }
+};
+function PaymentModal({
+  amount,
+  merchantName,
+  merchantWallet,
+  memo,
+  orderId,
+  onSuccess,
+  onClose,
+  onError,
+  checkoutUrl = "https://settlr.dev/checkout"
+}) {
+  const [loading, setLoading] = useState(true);
+  const params = new URLSearchParams({
+    amount: amount.toString(),
+    merchant: merchantName,
+    to: merchantWallet,
+    embed: "true"
+  });
+  if (memo) params.set("memo", memo);
+  if (orderId) params.set("orderId", orderId);
+  const iframeSrc = `${checkoutUrl}?${params.toString()}`;
+  useEffect(() => {
+    const handleMessage = (event) => {
+      if (!event.origin.includes("settlr.dev") && !event.origin.includes("localhost")) {
+        return;
+      }
+      const { type, data } = event.data || {};
+      switch (type) {
+        case "settlr:success":
+          onSuccess?.({
+            signature: data.signature,
+            amount: data.amount || amount
+          });
+          break;
+        case "settlr:error":
+          onError?.(new Error(data.message || "Payment failed"));
+          break;
+        case "settlr:close":
+          onClose?.();
+          break;
+      }
+    };
+    window.addEventListener("message", handleMessage);
+    return () => window.removeEventListener("message", handleMessage);
+  }, [amount, onSuccess, onError, onClose]);
+  useEffect(() => {
+    const handleEscape = (e) => {
+      if (e.key === "Escape") onClose?.();
+    };
+    window.addEventListener("keydown", handleEscape);
+    return () => window.removeEventListener("keydown", handleEscape);
+  }, [onClose]);
+  return /* @__PURE__ */ jsx2("div", { style: modalStyles.overlay, onClick: onClose, children: /* @__PURE__ */ jsxs("div", { style: modalStyles.container, onClick: (e) => e.stopPropagation(), children: [
+    /* @__PURE__ */ jsx2(
+      "button",
+      {
+        style: modalStyles.closeButton,
+        onClick: onClose,
+        onMouseOver: (e) => e.currentTarget.style.backgroundColor = "rgba(255, 255, 255, 0.2)",
+        onMouseOut: (e) => e.currentTarget.style.backgroundColor = "rgba(255, 255, 255, 0.1)",
+        children: "\u2715"
+      }
+    ),
+    loading && /* @__PURE__ */ jsxs("div", { style: modalStyles.loading, children: [
+      /* @__PURE__ */ jsx2(Spinner, {}),
+      /* @__PURE__ */ jsx2("span", { children: "Loading checkout..." })
+    ] }),
+    /* @__PURE__ */ jsx2(
+      "iframe",
+      {
+        src: iframeSrc,
+        style: {
+          ...modalStyles.iframe,
+          opacity: loading ? 0 : 1
+        },
+        onLoad: () => setLoading(false),
+        allow: "payment"
+      }
+    )
+  ] }) });
+}
+function usePaymentModal(config) {
+  const [modalState, setModalState] = useState({
+    isOpen: false,
+    amount: 0
+  });
+  const openPayment = useCallback(
+    (options) => {
+      setModalState({
+        isOpen: true,
+        ...options
+      });
+    },
+    []
+  );
+  const closePayment = useCallback(() => {
+    setModalState((prev) => ({ ...prev, isOpen: false }));
+  }, []);
+  const PaymentModalComponent = useCallback(() => {
+    if (!modalState.isOpen) return null;
+    return /* @__PURE__ */ jsx2(
+      PaymentModal,
+      {
+        amount: modalState.amount,
+        merchantName: config.merchantName,
+        merchantWallet: config.merchantWallet,
+        memo: modalState.memo,
+        orderId: modalState.orderId,
+        checkoutUrl: config.checkoutUrl,
+        onSuccess: (result) => {
+          modalState.onSuccess?.(result);
+          closePayment();
+        },
+        onError: modalState.onError,
+        onClose: closePayment
+      }
+    );
+  }, [modalState, config, closePayment]);
+  return {
+    openPayment,
+    closePayment,
+    isOpen: modalState.isOpen,
+    PaymentModalComponent
+  };
+}
 
 // src/webhooks.ts
 import crypto from "crypto";
@@ -918,6 +1106,7 @@ function createWebhookHandler(options) {
 export {
   BuyButton,
   CheckoutWidget,
+  PaymentModal,
   SETTLR_CHECKOUT_URL,
   SUPPORTED_NETWORKS,
   Settlr,
@@ -930,6 +1119,7 @@ export {
   parseWebhookPayload,
   shortenAddress,
   usePaymentLink,
+  usePaymentModal,
   useSettlr,
   verifyWebhookSignature
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@settlr/sdk",
-  "version": "0.2.0",
-  "description": "Solana USDC payments for games - email checkout, no wallet required",
+  "version": "0.3.1",
+  "description": "Settlr SDK - Accept Solana USDC payments in games and apps. Email checkout, gasless transactions, no wallet required. The easiest way to add crypto payments.",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
@@ -24,21 +24,45 @@
     "prepublishOnly": "npm run build"
   },
   "keywords": [
+    "settlr",
+    "settlr-sdk",
+    "settlr.dev",
     "solana",
-    "payments",
+    "solana-payments",
     "usdc",
-    "crypto",
+    "usdc-payments",
+    "crypto-payments",
     "web3",
+    "web3-payments",
     "stablecoin",
-    "gasless"
+    "gasless",
+    "gasless-transactions",
+    "payment-gateway",
+    "checkout",
+    "gaming-payments",
+    "game-monetization",
+    "in-app-purchases",
+    "react",
+    "typescript",
+    "email-checkout",
+    "no-wallet",
+    "privy"
   ],
-  "author": "Settlr",
+  "author": "Settlr <hello@settlr.dev> (https://settlr.dev)",
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/ABFX15/x402-hack-payment.git"
+    "url": "git+https://github.com/ABFX15/x402-hack-payment.git",
+    "directory": "packages/sdk"
+  },
+  "bugs": {
+    "url": "https://github.com/ABFX15/x402-hack-payment/issues"
   },
   "homepage": "https://settlr.dev",
+  "funding": {
+    "type": "github",
+    "url": "https://github.com/sponsors/ABFX15"
+  },
   "dependencies": {
     "@solana/spl-token": "^0.4.13",
     "@solana/web3.js": "^1.98.0"