@settlr/sdk 0.1.0 → 0.3.0

package/dist/index.mjs

@@ -22,8 +22,8 @@ var SETTLR_API_URL = {
   development: "http://localhost:3000/api"
 };
 var SETTLR_CHECKOUT_URL = {
-  production: "https://settlr.dev/pay",
-  development: "http://localhost:3000/pay"
+  production: "https://settlr.dev/checkout",
+  development: "http://localhost:3000/checkout"
 };
 var SUPPORTED_NETWORKS = ["devnet", "mainnet-beta"];
 var USDC_DECIMALS = 6;
@@ -148,6 +148,37 @@ var Settlr = class {
   getTier() {
     return this.tier;
   }
+  /**
+   * Get a checkout URL for redirect-based payments
+   * 
+   * This is the simplest integration - just redirect users to this URL.
+   * Settlr handles auth (email or wallet) and payment processing.
+   * 
+   * @example
+   * ```typescript
+   * const url = settlr.getCheckoutUrl({
+   *   amount: 29.99,
+   *   memo: 'Premium Pack',
+   * });
+   * 
+   * // Redirect user to checkout
+   * window.location.href = url;
+   * ```
+   */
+  getCheckoutUrl(options) {
+    const { amount, memo, orderId, successUrl, cancelUrl } = options;
+    const baseUrl = this.config.testMode ? SETTLR_CHECKOUT_URL.development : SETTLR_CHECKOUT_URL.production;
+    const params = new URLSearchParams({
+      amount: amount.toString(),
+      merchant: this.config.merchant.name,
+      to: this.config.merchant.walletAddress
+    });
+    if (memo) params.set("memo", memo);
+    if (orderId) params.set("orderId", orderId);
+    if (successUrl) params.set("successUrl", successUrl);
+    if (cancelUrl) params.set("cancelUrl", cancelUrl);
+    return `${baseUrl}?${params.toString()}`;
+  }
   /**
    * Create a payment link
    * 
@@ -181,8 +212,8 @@ var Settlr = class {
     });
     if (memo) params.set("memo", memo);
     if (orderId) params.set("orderId", orderId);
-    if (successUrl) params.set("successUrl", successUrl);
-    if (cancelUrl) params.set("cancelUrl", cancelUrl);
+    if (successUrl) params.set("success", successUrl);
+    if (cancelUrl) params.set("cancel", cancelUrl);
     if (paymentId) params.set("paymentId", paymentId);
     const checkoutUrl = `${baseUrl}?${params.toString()}`;
     const qrCode = await this.generateQRCode(checkoutUrl);
@@ -426,49 +457,34 @@ var Settlr = class {
 
 // src/react.tsx
 import { createContext, useContext, useMemo } from "react";
-import { useConnection, useWallet } from "@solana/wallet-adapter-react";
 import { jsx } from "react/jsx-runtime";
 var SettlrContext = createContext(null);
-function SettlrProvider({ children, config }) {
-  const { connection } = useConnection();
-  const wallet = useWallet();
+function SettlrProvider({
+  children,
+  config,
+  authenticated = false
+}) {
   const settlr = useMemo(() => {
     return new Settlr({
       ...config,
-      rpcEndpoint: connection.rpcEndpoint
+      rpcEndpoint: config.rpcEndpoint ?? "https://api.devnet.solana.com"
     });
-  }, [config, connection.rpcEndpoint]);
+  }, [config]);
   const value = useMemo(
     () => ({
       settlr,
-      connected: wallet.connected,
+      authenticated,
       createPayment: (options) => {
         return settlr.createPayment(options);
       },
-      pay: async (options) => {
-        if (!wallet.publicKey || !wallet.signTransaction) {
-          return {
-            success: false,
-            signature: "",
-            amount: options.amount,
-            merchantAddress: settlr.getMerchantAddress().toBase58(),
-            error: "Wallet not connected"
-          };
-        }
-        return settlr.pay({
-          wallet: {
-            publicKey: wallet.publicKey,
-            signTransaction: wallet.signTransaction
-          },
-          amount: options.amount,
-          memo: options.memo
-        });
+      getCheckoutUrl: (options) => {
+        return settlr.getCheckoutUrl(options);
       },
       getBalance: () => {
         return settlr.getMerchantBalance();
       }
     }),
-    [settlr, wallet]
+    [settlr, authenticated]
   );
   return /* @__PURE__ */ jsx(SettlrContext.Provider, { value, children });
 }
@@ -483,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 = {
@@ -541,7 +558,8 @@ function BuyButton({
   onSuccess,
   onError,
   onProcessing,
-  useRedirect = false,
+  useRedirect = true,
+  // Default to redirect flow (works with Privy)
   successUrl,
   cancelUrl,
   className,
@@ -550,7 +568,7 @@ function BuyButton({
   variant = "primary",
   size = "md"
 }) {
-  const { pay, createPayment, connected } = useSettlr();
+  const { getCheckoutUrl, createPayment } = useSettlr();
   const [loading, setLoading] = useState(false);
   const [status, setStatus] = useState("idle");
   const handleClick = useCallback(async () => {
@@ -559,32 +577,17 @@ function BuyButton({
     setStatus("processing");
     onProcessing?.();
     try {
-      if (useRedirect) {
-        const payment = await createPayment({
-          amount,
-          memo,
-          orderId,
-          successUrl,
-          cancelUrl
-        });
-        window.location.href = payment.checkoutUrl;
-      } else {
-        const result = await pay({ amount, memo });
-        if (result.success) {
-          setStatus("success");
-          onSuccess?.({
-            signature: result.signature,
-            amount: result.amount,
-            merchantAddress: result.merchantAddress
-          });
-        } else {
-          throw new Error(result.error || "Payment failed");
-        }
-      }
+      const url = getCheckoutUrl({
+        amount,
+        memo,
+        orderId,
+        successUrl,
+        cancelUrl
+      });
+      window.location.href = url;
     } catch (error) {
       setStatus("error");
       onError?.(error instanceof Error ? error : new Error("Payment failed"));
-    } finally {
       setLoading(false);
     }
   }, [
@@ -593,12 +596,9 @@ function BuyButton({
     orderId,
     disabled,
     loading,
-    useRedirect,
     successUrl,
     cancelUrl,
-    pay,
-    createPayment,
-    onSuccess,
+    getCheckoutUrl,
     onError,
     onProcessing
   ]);
@@ -618,11 +618,11 @@ function BuyButton({
     "button",
     {
       onClick: handleClick,
-      disabled: disabled || loading || !connected,
+      disabled: disabled || loading,
       className,
       style: buttonStyle,
       type: "button",
-      children: !connected ? "Connect Wallet" : buttonContent
+      children: buttonContent
     }
   );
 }
@@ -746,7 +746,7 @@ function CheckoutWidget({
   theme = "dark",
   showBranding = true
 }) {
-  const { connected } = useSettlr();
+  const { getCheckoutUrl } = useSettlr();
   const [status, setStatus] = useState("idle");
   const containerStyle = {
     ...widgetStyles.container,
@@ -857,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";
@@ -919,6 +1106,7 @@ function createWebhookHandler(options) {
 export {
   BuyButton,
   CheckoutWidget,
+  PaymentModal,
   SETTLR_CHECKOUT_URL,
   SUPPORTED_NETWORKS,
   Settlr,
@@ -931,6 +1119,7 @@ export {
   parseWebhookPayload,
   shortenAddress,
   usePaymentLink,
+  usePaymentModal,
   useSettlr,
   verifyWebhookSignature
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@settlr/sdk",
-  "version": "0.1.0",
-  "description": "Solana USDC payments in 7 lines of code",
+  "version": "0.3.0",
+  "description": "Solana USDC payments for games - email checkout, no wallet required",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
@@ -36,7 +36,7 @@
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/ABFX15/x402-hack-payment"
+    "url": "git+https://github.com/ABFX15/x402-hack-payment.git"
   },
   "homepage": "https://settlr.dev",
   "dependencies": {
@@ -44,7 +44,6 @@
     "@solana/web3.js": "^1.98.0"
   },
   "devDependencies": {
-    "@solana/wallet-adapter-react": "^0.15.39",
     "@types/node": "^20.0.0",
     "@types/react": "^19.2.7",
     "react": "^19.2.3",
@@ -52,10 +51,10 @@
     "typescript": "^5.0.0"
   },
   "peerDependencies": {
-    "@solana/wallet-adapter-base": ">=0.9.0"
+    "react": ">=18.0.0"
   },
   "peerDependenciesMeta": {
-    "@solana/wallet-adapter-base": {
+    "react": {
       "optional": true
     }
   },