94:I[903690,["/chat-static/_next/static/immutable/chunks/10wpt-vzxn5i1.js","/chat-static/_next/static/immutable/chunks/0lyxw0nk-7-p_.js","/chat-static/_next/static/immutable/chunks/0s13a2j9-r_7z.js","/chat-static/_next/static/immutable/chunks/05z0jc31ylkrk.js","/chat-static/_next/static/immutable/chunks/2836u6jwf9bgv.js","/chat-static/_next/static/immutable/chunks/3ktygcwrvju41.js","/chat-static/_next/static/immutable/chunks/3npdfuq6kuky8.js","/chat-static/_next/static/immutable/chunks/3xgcz543a20n9.js","/chat-static/_next/static/immutable/chunks/2ks2dvr47nqsg.js","/chat-static/_next/static/immutable/chunks/0wp9iyt7gqj9c.js","/chat-static/_next/static/immutable/chunks/03w_e6mqufrhn.js","/chat-static/_next/static/immutable/chunks/3su8b9kn4mbaa.js","/chat-static/_next/static/immutable/chunks/2sp-yda0t06bm.js","/chat-static/_next/static/immutable/chunks/06-mpaxkl_qww.js","/chat-static/_next/static/immutable/chunks/2v1ytxhjawdqw.js","/chat-static/_next/static/immutable/chunks/3vhx3fg583u19.js","/chat-static/_next/static/immutable/chunks/3bon2sery8l35.js","/chat-static/_next/static/immutable/chunks/022gnoebsh94r.js","/chat-static/_next/static/immutable/chunks/179p_vj82jpro.js","/chat-static/_next/static/immutable/chunks/2d_83taslaz9s.js","/chat-static/_next/static/immutable/chunks/1r_xlti2nupgd.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/0ggiln07qpg3x.js","/chat-static/_next/static/immutable/chunks/0v6za4mu6mmch.js","/chat-static/_next/static/immutable/chunks/362eoze68z3tj.js","/chat-static/_next/static/immutable/chunks/30xbirk075f9u.js","/chat-static/_next/static/immutable/chunks/2s3rmbgvk5alc.js","/chat-static/_next/static/immutable/chunks/2ihe2cde8-h-m.js","/chat-static/_next/static/immutable/chunks/34pqinj9axzi3.js","/chat-static/_next/static/immutable/chunks/24oxen36r-7_-.js","/chat-static/_next/static/immutable/chunks/21nzp1fdul4xe.js","/chat-static/_next/static/immutable/chunks/2r3778mxx4zx3.js","/chat-static/_next/static/immutable/chunks/2aqaq-qj4jd04.js","/chat-static/_next/static/immutable/chunks/27kqtemkm6wc0.js","/chat-static/_next/static/immutable/chunks/1gwh2_shftvhf.js","/chat-static/_next/static/immutable/chunks/2wi4f19gpmjmu.js","/chat-static/_next/static/immutable/chunks/3f0qksrmwbx5_.js","/chat-static/_next/static/immutable/chunks/2p_xpxyq5ao8y.js","/chat-static/_next/static/immutable/chunks/1etiboqt-76vo.js","/chat-static/_next/static/immutable/chunks/30c9gel_8-oba.js","/chat-static/_next/static/immutable/chunks/1elbuzr4anjh-.js","/chat-static/_next/static/immutable/chunks/2i-ulz8g4wtdk.js"],"ExplicitChatIdProvider"] 95:I[838238,["/chat-static/_next/static/immutable/chunks/10wpt-vzxn5i1.js","/chat-static/_next/static/immutable/chunks/0lyxw0nk-7-p_.js","/chat-static/_next/static/immutable/chunks/0s13a2j9-r_7z.js","/chat-static/_next/static/immutable/chunks/05z0jc31ylkrk.js","/chat-static/_next/static/immutable/chunks/2836u6jwf9bgv.js","/chat-static/_next/static/immutable/chunks/3ktygcwrvju41.js","/chat-static/_next/static/immutable/chunks/3npdfuq6kuky8.js","/chat-static/_next/static/immutable/chunks/3xgcz543a20n9.js","/chat-static/_next/static/immutable/chunks/2ks2dvr47nqsg.js","/chat-static/_next/static/immutable/chunks/0wp9iyt7gqj9c.js","/chat-static/_next/static/immutable/chunks/03w_e6mqufrhn.js","/chat-static/_next/static/immutable/chunks/3su8b9kn4mbaa.js","/chat-static/_next/static/immutable/chunks/2sp-yda0t06bm.js","/chat-static/_next/static/immutable/chunks/06-mpaxkl_qww.js","/chat-static/_next/static/immutable/chunks/2v1ytxhjawdqw.js","/chat-static/_next/static/immutable/chunks/3vhx3fg583u19.js","/chat-static/_next/static/immutable/chunks/3bon2sery8l35.js","/chat-static/_next/static/immutable/chunks/022gnoebsh94r.js","/chat-static/_next/static/immutable/chunks/179p_vj82jpro.js","/chat-static/_next/static/immutable/chunks/2d_83taslaz9s.js","/chat-static/_next/static/immutable/chunks/1r_xlti2nupgd.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/0ggiln07qpg3x.js","/chat-static/_next/static/immutable/chunks/0v6za4mu6mmch.js","/chat-static/_next/static/immutable/chunks/362eoze68z3tj.js","/chat-static/_next/static/immutable/chunks/30xbirk075f9u.js","/chat-static/_next/static/immutable/chunks/2s3rmbgvk5alc.js","/chat-static/_next/static/immutable/chunks/2ihe2cde8-h-m.js","/chat-static/_next/static/immutable/chunks/34pqinj9axzi3.js","/chat-static/_next/static/immutable/chunks/24oxen36r-7_-.js","/chat-static/_next/static/immutable/chunks/21nzp1fdul4xe.js","/chat-static/_next/static/immutable/chunks/2r3778mxx4zx3.js","/chat-static/_next/static/immutable/chunks/2aqaq-qj4jd04.js","/chat-static/_next/static/immutable/chunks/27kqtemkm6wc0.js","/chat-static/_next/static/immutable/chunks/1gwh2_shftvhf.js","/chat-static/_next/static/immutable/chunks/2wi4f19gpmjmu.js","/chat-static/_next/static/immutable/chunks/3f0qksrmwbx5_.js","/chat-static/_next/static/immutable/chunks/2p_xpxyq5ao8y.js","/chat-static/_next/static/immutable/chunks/1etiboqt-76vo.js","/chat-static/_next/static/immutable/chunks/30c9gel_8-oba.js","/chat-static/_next/static/immutable/chunks/1elbuzr4anjh-.js","/chat-static/_next/static/immutable/chunks/2i-ulz8g4wtdk.js"],"SWRDataProvider"] 96:T21a8,[V0_FILE]typescriptreact:file="next.config.ts" isEdit="true" isQuickEdit="true" isMerged="true" /** @type {import('next').NextConfig} */ const nextConfig = { reactStrictMode: true, experimental: { appDir: true, }, eslint: { ignoreDuringBuilds: true, }, typescript: { ignoreBuildErrors: true, }, images: { unoptimized: true, }, } export default nextConfig [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isMerged="true" import "./globals.css" import type { ReactNode } from "react" export const metadata = { title: "x402 Starter", description: "Minimal example with custom paywall", } export default function RootLayout({ children }: { children: ReactNode }) { return ( {children} ) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" export default function HomePage() { return (

🎉 Payment Successful!

Now you can view this premium content.

@estebansuarez What is x402? Open in v0

) } [V0_FILE]css:file="app/globals.css" isEdit="true" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; html, body { margin: 0; padding: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; height: 100%; } a { text-decoration: none; color: #6b7280; transition: color 0.2s; } a:hover { color: #1f2937; } main { padding: 2rem; text-align: center; max-width: 400px; background-color: white; border-radius: 8px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } [V0_FILE]typescriptreact:file="middleware.ts" isEdit="true" import { paymentMiddleware, type Resource, type Network } from "x402-next" import type { Address } from "viem" import { customPaywallHtml } from "./lib/customPaywall" const payTo = process.env.RESOURCE_WALLET_ADDRESS as Address const network = process.env.NETWORK as Network const facilitatorUrl = process.env.NEXT_PUBLIC_FACILITATOR_URL as Resource const price = process.env.PRICE || "$0.01" // Usar la variable de entorno PRICE con fallback export const middleware = paymentMiddleware( payTo, { "/": { price, // Usar la variable price que viene de la variable de entorno network, config: { description: "Unlock premium content with a small payment", customPaywallHtml: customPaywallHtml, }, }, }, { url: facilitatorUrl, }, ) export const config = { matcher: ["/"], } [V0_FILE]typescriptreact:file="lib/customPaywall.ts" isFixed="true" isEdit="true" import { getPaywallHtml, toJsonSafe, processPriceToAtomicAmount } from "x402/shared" import type { PaymentRequirements } from "x402/types" /** * Generates the custom paywall by injecting style overrides to the buttons. * * Note: We use environment variables for price and network configuration. */ export const customPaywallHtml: string = (() => { const price = process.env.PRICE || "$0.01" // Usar la variable de entorno PRICE con fallback const network = (process.env.NETWORK || "base") as PaymentRequirements["network"] const payTo = process.env.RESOURCE_WALLET_ADDRESS || "0x0000000000000000000000000000000000000000" const testnet = network === "base-sepolia" const atomic = processPriceToAtomicAmount(price, network) if ("error" in atomic) { throw new Error(atomic.error) } const { maxAmountRequired, asset } = atomic const paymentRequirements: PaymentRequirements[] = [ { scheme: "exact", network, maxAmountRequired, resource: "", // Will be updated in the browser with window.location.href description: "Unlock premium content with a small payment", mimeType: "application/json", payTo, maxTimeoutSeconds: 300, asset: asset?.address ?? "", outputSchema: undefined, extra: asset?.eip712, }, ] // Parse the price for display (remove the $ and convert to number) const priceValue = Number.parseFloat(price.replace("$", "")) // Base HTML generated by the library let html = getPaywallHtml({ amount: priceValue, paymentRequirements: toJsonSafe(paymentRequirements) as any, currentUrl: "", // Will be set in the client testnet, }) // Inject our own button styles and center everything const styleOverride = ` ` // Add footer HTML with links const footerHtml = ` ` html = html.replace("", `${styleOverride}`) // Replace the original content text with new wording that includes the dynamic price html = html.replace( /Access to protected content\. To access this content, please pay [^<]*/g, `Unlock Premium Content! Just a tiny payment of ${price} Base Sepolia USDC gives you instant access.`, ) // Add the network notice after the "Need Base Sepolia USDC? Get some here." text html = html.replace( /Need Base Sepolia USDC\? ]*>Get some here<\/a>\./g, 'Need Base Sepolia USDC? Get some here.

Important: Make sure you\'re connected to the Base Sepolia network in your wallet.

', ) // Add footer after the container html = html.replace("", `${footerHtml}`) return html })()8a:["$","$L94",null,{"chatId":"aRiIPV4yyOh","children":["$","$L95",null,{"data":{"@\"active-block\",\"aRiIPV4yyOh\",":{"id":"b_zOQn6TsRm39","messageId":"WLucMqQygzkX5R7v6j3fQo8vlbs8xOKL","source":"$96","language":"typescriptreact","type":"code-project","closed":true,"meta":{"id":"starter","type":"code-project","project":"starter"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"aRiIPV4yyOh\",":false,"":null},"children":"$L97"}]}]

About

Tags

Share

About

Tags

Share

About

Tags

Share

More from estebansuarez

More Templates Like This