@settlr/sdk 0.1.0 → 0.3.0

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
 });
@@ -62,8 +64,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;
@@ -188,6 +190,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
    * 
@@ -221,8 +254,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);
@@ -466,49 +499,34 @@ var Settlr = class {
 
 // src/react.tsx
 var import_react = require("react");
-var import_wallet_adapter_react = require("@solana/wallet-adapter-react");
 var import_jsx_runtime = require("react/jsx-runtime");
 var SettlrContext = (0, import_react.createContext)(null);
-function SettlrProvider({ children, config }) {
-  const { connection } = (0, import_wallet_adapter_react.useConnection)();
-  const wallet = (0, import_wallet_adapter_react.useWallet)();
+function SettlrProvider({
+  children,
+  config,
+  authenticated = false
+}) {
   const settlr = (0, import_react.useMemo)(() => {
     return new Settlr({
       ...config,
-      rpcEndpoint: connection.rpcEndpoint
+      rpcEndpoint: config.rpcEndpoint ?? "https://api.devnet.solana.com"
     });
-  }, [config, connection.rpcEndpoint]);
+  }, [config]);
   const value = (0, import_react.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__ */ (0, import_jsx_runtime.jsx)(SettlrContext.Provider, { value, children });
 }
@@ -578,7 +596,8 @@ function BuyButton({
   onSuccess,
   onError,
   onProcessing,
-  useRedirect = false,
+  useRedirect = true,
+  // Default to redirect flow (works with Privy)
   successUrl,
   cancelUrl,
   className,
@@ -587,7 +606,7 @@ function BuyButton({
   variant = "primary",
   size = "md"
 }) {
-  const { pay, createPayment, connected } = useSettlr();
+  const { getCheckoutUrl, createPayment } = useSettlr();
   const [loading, setLoading] = (0, import_react2.useState)(false);
   const [status, setStatus] = (0, import_react2.useState)("idle");
   const handleClick = (0, import_react2.useCallback)(async () => {
@@ -596,32 +615,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);
     }
   }, [
@@ -630,12 +634,9 @@ function BuyButton({
     orderId,
     disabled,
     loading,
-    useRedirect,
     successUrl,
     cancelUrl,
-    pay,
-    createPayment,
-    onSuccess,
+    getCheckoutUrl,
     onError,
     onProcessing
   ]);
@@ -655,11 +656,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
     }
   );
 }
@@ -783,7 +784,7 @@ function CheckoutWidget({
   theme = "dark",
   showBranding = true
 }) {
-  const { connected } = useSettlr();
+  const { getCheckoutUrl } = useSettlr();
   const [status, setStatus] = (0, import_react2.useState)("idle");
   const containerStyle = {
     ...widgetStyles.container,
@@ -894,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"));
@@ -957,6 +1145,7 @@ function createWebhookHandler(options) {
 0 && (module.exports = {
   BuyButton,
   CheckoutWidget,
+  PaymentModal,
   SETTLR_CHECKOUT_URL,
   SUPPORTED_NETWORKS,
   Settlr,
@@ -969,6 +1158,7 @@ function createWebhookHandler(options) {
   parseWebhookPayload,
   shortenAddress,
   usePaymentLink,
+  usePaymentModal,
   useSettlr,
   verifyWebhookSignature
 });