stellar · marcelosalloum · Mar 5, 2026 · Mar 5, 2026 · Mar 5, 2026 · Mar 5, 2026
diff --git a/README.md b/README.md
@@ -113,6 +113,7 @@ The Dockerfile is a multi-target build with targets for `facilitator`, `server`,
 | `FACILITATOR_STELLAR_PRIVATE_KEY`     | —                       | Facilitator wallet private key               |
 | `FACILITATOR_STELLAR_FEE_BUMP_SECRET` | —                       | Fee-bump signer secret (high-throughput)     |
 | `FACILITATOR_STELLAR_CHANNEL_SECRETS` | —                       | Channel account secrets, comma-separated     |
+| `CLIENT_HOME_URL`                     | —                       | Client home page URL for paywall brand link  |
 | `VITE_SERVER_URL`                     | `http://localhost:3001` | Server URL for the client SPA (build time)   |
 | `VITE_APP_NAME`                       | `x402 on Stellar`       | App name for the client SPA (build time)     |
 

diff --git a/examples/simple-paywall/client/index.html b/examples/simple-paywall/client/index.html
@@ -4,6 +4,41 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>x402 on Stellar</title>
+    <link
+      rel="icon"
+      href="https://cdn.sanity.io/images/e2r40yh6/production-i18n/d4809d7123ca78f57b05601982932f5cfa62c3ac-32x32.png?w=32&h=32&fm=png"
+      sizes="32x32"
+    />
+    <link
+      rel="icon"
+      href="https://cdn.sanity.io/images/e2r40yh6/production-i18n/d4809d7123ca78f57b05601982932f5cfa62c3ac-32x32.png?w=57&h=57&fm=png"
+      sizes="57x57"
+    />
+    <link
+      rel="icon"
+      href="https://cdn.sanity.io/images/e2r40yh6/production-i18n/d4809d7123ca78f57b05601982932f5cfa62c3ac-32x32.png?w=76&h=76&fm=png"
+      sizes="76x76"
+    />
+    <link
+      rel="icon"
+      href="https://cdn.sanity.io/images/e2r40yh6/production-i18n/d4809d7123ca78f57b05601982932f5cfa62c3ac-32x32.png?w=96&h=96&fm=png"
+      sizes="96x96"
+    />
+    <link
+      rel="icon"
+      href="https://cdn.sanity.io/images/e2r40yh6/production-i18n/d4809d7123ca78f57b05601982932f5cfa62c3ac-32x32.png?w=128&h=128&fm=png"
+      sizes="128x128"
+    />
+    <link
+      rel="icon"
+      href="https://cdn.sanity.io/images/e2r40yh6/production-i18n/d4809d7123ca78f57b05601982932f5cfa62c3ac-32x32.png?w=192&h=192&fm=png"
+      sizes="192x192"
+    />
+    <link
+      rel="icon"
+      href="https://cdn.sanity.io/images/e2r40yh6/production-i18n/d4809d7123ca78f57b05601982932f5cfa62c3ac-32x32.png?w=228&h=228&fm=png"
+      sizes="228x228"
+    />
   </head>
   <body>
     <div id="root"></div>

diff --git a/examples/simple-paywall/client/src/components/Layout.tsx b/examples/simple-paywall/client/src/components/Layout.tsx
@@ -1,41 +1,47 @@
 import { useEffect } from "react";
-import { Link, Outlet } from "react-router";
+import { Link, Outlet, useLocation } from "react-router";
 import { APP_NAME } from "../constants.ts";
 
 export function Layout() {
+  const location = useLocation();
+  const isTryPage = location.pathname.startsWith("/try");
+
   useEffect(() => {
     document.title = APP_NAME;
   }, []);
 
   return (
-    <div className="min-h-screen bg-slate-950 text-slate-200 flex flex-col">
-      <header className="border-b border-slate-800">
-        <nav className="max-w-5xl mx-auto px-6 py-4 flex items-center justify-between">
-          <Link to="/" className="text-lg font-semibold text-sky-400 hover:text-sky-300">
-            {APP_NAME}
+    <div className="min-h-screen bg-[#f8f8f8] text-[#171717] flex flex-col">
+      <header className="border-b border-[#e2e2e2] bg-[#fcfcfc]">
+        <nav className="w-full px-[32px] py-[8px] flex items-center justify-between">
+          <Link to="/" className="flex items-center gap-2">
+            <span className="text-[16px] leading-[24px] font-semibold tracking-tight">Stellar</span>
+            <span className="font-[Inconsolata] font-bold text-[16px] leading-[24px] tracking-[-0.32px] rounded-full px-[8px] py-[2px] bg-[#fbfaff] border border-[#d7cff9] text-[#5746af]">
+              x402
+            </span>
           </Link>
-          <div className="flex gap-6 text-sm">
-            <Link to="/" className="text-slate-400 hover:text-slate-200">
-              Home
-            </Link>
-            <Link to="/try" className="text-slate-400 hover:text-slate-200">
-              Try It
+          {!isTryPage && (
+            <Link
+              to="/try"
+              className="bg-[#171717] text-white text-[14px] leading-[20px] font-semibold rounded-[8px] px-[12px] py-[6px]"
+            >
+              Try the demo
             </Link>
-          </div>
+          )}
         </nav>
       </header>
 
       <main className="flex-1">
         <Outlet />
       </main>
 
-      <footer className="border-t border-slate-800 py-6 text-center text-sm text-slate-500">
+      <footer className="w-full border-t border-[#e2e2e2] px-[32px] py-[24px] text-center text-[14px] leading-[20px] text-[#6f6f6f]">
         Powered by{" "}
         <a
           href="https://www.x402.org/"
           target="_blank"
           rel="noopener noreferrer"
-          className="text-slate-400 hover:text-slate-300 underline"
+          className="text-[#5746af] hover:underline"
         >
           x402
         </a>{" "}
@@ -44,7 +50,7 @@ export function Layout() {
           href="https://stellar.org/"
           target="_blank"
           rel="noopener noreferrer"
-          className="text-slate-400 hover:text-slate-300 underline"
+          className="text-[#5746af] hover:underline"
         >
           Stellar
         </a>

diff --git a/examples/simple-paywall/client/src/config/env.ts b/examples/simple-paywall/client/src/config/env.ts
@@ -3,6 +3,7 @@ declare global {
     __CONFIG__?: {
       SERVER_URL?: string;
       APP_NAME?: string;
+      PAYMENT_PRICE?: string;
     };
   }
 }
@@ -22,4 +23,8 @@ export class Env {
   static get appName(): string {
     return window.__CONFIG__?.APP_NAME || import.meta.env.VITE_APP_NAME || "x402 on Stellar";
   }
+
+  static get paymentPrice(): string {
+    return window.__CONFIG__?.PAYMENT_PRICE || import.meta.env.VITE_PAYMENT_PRICE || "0.01";
+  }
 }
diff --git a/examples/simple-paywall/client/src/constants.ts b/examples/simple-paywall/client/src/constants.ts
@@ -2,3 +2,4 @@ import { Env } from "./config/env.ts";
 
 export const SERVER_URL = Env.serverUrl;
 export const APP_NAME = Env.appName;
+export const PAYMENT_PRICE = Env.paymentPrice;
diff --git a/examples/simple-paywall/client/src/index.css b/examples/simple-paywall/client/src/index.css
@@ -1 +1,12 @@
+@import url("https://fonts.googleapis.com/css2?family=Inconsolata:wght@600;700&family=Inter:wght@400;500;600;700&display=swap");
 @import "tailwindcss";
+
+:root {
+  font-family:
+    "Inter",
+    system-ui,
+    -apple-system,
+    sans-serif;
+  color: #171717;
+  background-color: #f8f8f8;
+}
Original file line number	Diff line number	Diff line change
Expand Up		@@ -2,3 +2,4 @@ import { Env } from "./config/env.ts";

		export const SERVER_URL = Env.serverUrl;
		export const APP_NAME = Env.appName;
		export const PAYMENT_PRICE = Env.paymentPrice;