93:I[903690,["/chat-static/_next/static/immutable/chunks/1w618an_vdrmm.js","/chat-static/_next/static/immutable/chunks/29ydngev9m3fy.js","/chat-static/_next/static/immutable/chunks/0aicokz-_c6hw.js","/chat-static/_next/static/immutable/chunks/06l8mr_zo_pdk.js","/chat-static/_next/static/immutable/chunks/02d62qecapvyp.js","/chat-static/_next/static/immutable/chunks/3siudrckqpsjx.js","/chat-static/_next/static/immutable/chunks/2nboxcmsh_5q6.js","/chat-static/_next/static/immutable/chunks/3p3trwcegfkeh.js","/chat-static/_next/static/immutable/chunks/19iyd8wey_a5u.js","/chat-static/_next/static/immutable/chunks/14j4bgae4zayv.js","/chat-static/_next/static/immutable/chunks/05ziczzmpg4l8.js","/chat-static/_next/static/immutable/chunks/1k4mzxl_vkpeo.js","/chat-static/_next/static/immutable/chunks/1ca1eagukd03f.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/3i0ofkmfv-4g2.js","/chat-static/_next/static/immutable/chunks/0ompgpevdvxsn.js","/chat-static/_next/static/immutable/chunks/0o0qvt0encnhv.js","/chat-static/_next/static/immutable/chunks/3hh4bpnihie8y.js","/chat-static/_next/static/immutable/chunks/3_y066xfe1cmo.js","/chat-static/_next/static/immutable/chunks/3w1zcr9c32026.js","/chat-static/_next/static/immutable/chunks/1te_-knuy9ss-.js","/chat-static/_next/static/immutable/chunks/0vmwm1j0c62ij.js","/chat-static/_next/static/immutable/chunks/120lp9kxd910m.js","/chat-static/_next/static/immutable/chunks/2k1iz3tquaf-h.js","/chat-static/_next/static/immutable/chunks/2x3mu3fgb5m94.js","/chat-static/_next/static/immutable/chunks/3mlb4bu1798-_.js","/chat-static/_next/static/immutable/chunks/1o3uedpb5nwwe.js","/chat-static/_next/static/immutable/chunks/0spguaj-i7-94.js","/chat-static/_next/static/immutable/chunks/3_-w_ojx3ellg.js","/chat-static/_next/static/immutable/chunks/1t-sssavjo13y.js","/chat-static/_next/static/immutable/chunks/2up2gjdyg5h_y.js","/chat-static/_next/static/immutable/chunks/2wjyldnvra4-5.js","/chat-static/_next/static/immutable/chunks/2ikegn6lkshq2.js","/chat-static/_next/static/immutable/chunks/0ea-o8jcr8uny.js","/chat-static/_next/static/immutable/chunks/01a5ye0bvehhg.js","/chat-static/_next/static/immutable/chunks/1gfz329mrtd08.js","/chat-static/_next/static/immutable/chunks/37vtvti040ftg.js"],"ExplicitChatIdProvider"] 94:I[838238,["/chat-static/_next/static/immutable/chunks/1w618an_vdrmm.js","/chat-static/_next/static/immutable/chunks/29ydngev9m3fy.js","/chat-static/_next/static/immutable/chunks/0aicokz-_c6hw.js","/chat-static/_next/static/immutable/chunks/06l8mr_zo_pdk.js","/chat-static/_next/static/immutable/chunks/02d62qecapvyp.js","/chat-static/_next/static/immutable/chunks/3siudrckqpsjx.js","/chat-static/_next/static/immutable/chunks/2nboxcmsh_5q6.js","/chat-static/_next/static/immutable/chunks/3p3trwcegfkeh.js","/chat-static/_next/static/immutable/chunks/19iyd8wey_a5u.js","/chat-static/_next/static/immutable/chunks/14j4bgae4zayv.js","/chat-static/_next/static/immutable/chunks/05ziczzmpg4l8.js","/chat-static/_next/static/immutable/chunks/1k4mzxl_vkpeo.js","/chat-static/_next/static/immutable/chunks/1ca1eagukd03f.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/3i0ofkmfv-4g2.js","/chat-static/_next/static/immutable/chunks/0ompgpevdvxsn.js","/chat-static/_next/static/immutable/chunks/0o0qvt0encnhv.js","/chat-static/_next/static/immutable/chunks/3hh4bpnihie8y.js","/chat-static/_next/static/immutable/chunks/3_y066xfe1cmo.js","/chat-static/_next/static/immutable/chunks/3w1zcr9c32026.js","/chat-static/_next/static/immutable/chunks/1te_-knuy9ss-.js","/chat-static/_next/static/immutable/chunks/0vmwm1j0c62ij.js","/chat-static/_next/static/immutable/chunks/120lp9kxd910m.js","/chat-static/_next/static/immutable/chunks/2k1iz3tquaf-h.js","/chat-static/_next/static/immutable/chunks/2x3mu3fgb5m94.js","/chat-static/_next/static/immutable/chunks/3mlb4bu1798-_.js","/chat-static/_next/static/immutable/chunks/1o3uedpb5nwwe.js","/chat-static/_next/static/immutable/chunks/0spguaj-i7-94.js","/chat-static/_next/static/immutable/chunks/3_-w_ojx3ellg.js","/chat-static/_next/static/immutable/chunks/1t-sssavjo13y.js","/chat-static/_next/static/immutable/chunks/2up2gjdyg5h_y.js","/chat-static/_next/static/immutable/chunks/2wjyldnvra4-5.js","/chat-static/_next/static/immutable/chunks/2ikegn6lkshq2.js","/chat-static/_next/static/immutable/chunks/0ea-o8jcr8uny.js","/chat-static/_next/static/immutable/chunks/01a5ye0bvehhg.js","/chat-static/_next/static/immutable/chunks/1gfz329mrtd08.js","/chat-static/_next/static/immutable/chunks/37vtvti040ftg.js"],"SWRDataProvider"] 95: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 })()89:["$","$L93",null,{"chatId":"aRiIPV4yyOh","children":["$","$L94",null,{"data":{"@\"active-block\",\"aRiIPV4yyOh\",":{"id":"b_zOQn6TsRm39","messageId":"WLucMqQygzkX5R7v6j3fQo8vlbs8xOKL","source":"$95","language":"typescriptreact","type":"code-project","closed":true,"meta":{"id":"starter","type":"code-project","project":"starter"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"aRiIPV4yyOh\",":false},"children":"$L96"}]}]

About

Tags

Share

About

Tags

Share

More from estebansuarez

More Templates Like This