97:I[903690,["/chat-static/_next/static/immutable/chunks/0_kdkc823otwv.js","/chat-static/_next/static/immutable/chunks/17kl369b79nmd.js","/chat-static/_next/static/immutable/chunks/0pa2o-879tgyz.js","/chat-static/_next/static/immutable/chunks/0vmwjdmzo33vb.js","/chat-static/_next/static/immutable/chunks/1di_td8luy3gw.js","/chat-static/_next/static/immutable/chunks/0i48amtc28pqy.js","/chat-static/_next/static/immutable/chunks/25oa2-cd4babd.js","/chat-static/_next/static/immutable/chunks/33addp8wpisll.js","/chat-static/_next/static/immutable/chunks/1ibakxw9lycsv.js","/chat-static/_next/static/immutable/chunks/0kpqqt3b70onu.js","/chat-static/_next/static/immutable/chunks/3r-izlig-97d3.js","/chat-static/_next/static/immutable/chunks/1-yirsd6_l__x.js","/chat-static/_next/static/immutable/chunks/3b6rwng7jzw37.js","/chat-static/_next/static/immutable/chunks/0nc47r7g497qp.js","/chat-static/_next/static/immutable/chunks/08ftfj_ae3jl_.js","/chat-static/_next/static/immutable/chunks/16p-wd29zwtcb.js","/chat-static/_next/static/immutable/chunks/1o9d1-74u-xr7.js","/chat-static/_next/static/immutable/chunks/17xddrdopbp9_.js","/chat-static/_next/static/immutable/chunks/17bw078wkmokk.js","/chat-static/_next/static/immutable/chunks/2lsankmaxuiz4.js","/chat-static/_next/static/immutable/chunks/1ybo6yzdrs8bw.js","/chat-static/_next/static/immutable/chunks/25hm_hdm1gsd0.js","/chat-static/_next/static/immutable/chunks/2iyogqj39terz.js","/chat-static/_next/static/immutable/chunks/2v488urps6yag.js","/chat-static/_next/static/immutable/chunks/0ex210m2m3jd_.js","/chat-static/_next/static/immutable/chunks/0avdeadirr7ac.js","/chat-static/_next/static/immutable/chunks/3yu169rnx-6bz.js","/chat-static/_next/static/immutable/chunks/0dt5xmjm5355d.js","/chat-static/_next/static/immutable/chunks/0w0diht866kq4.js","/chat-static/_next/static/immutable/chunks/36at-fgxccn6g.js","/chat-static/_next/static/immutable/chunks/04gkop25t1q10.js","/chat-static/_next/static/immutable/chunks/2mjr-ow9jt224.js","/chat-static/_next/static/immutable/chunks/0f4z2mjqjzpbe.js","/chat-static/_next/static/immutable/chunks/1g-ogsg-tifvg.js","/chat-static/_next/static/immutable/chunks/16pppxvb6m7dw.js","/chat-static/_next/static/immutable/chunks/2x0m84hlfqnp9.js","/chat-static/_next/static/immutable/chunks/3j5pbs0p975ta.js"],"ExplicitChatIdProvider"] 98:I[838238,["/chat-static/_next/static/immutable/chunks/0_kdkc823otwv.js","/chat-static/_next/static/immutable/chunks/17kl369b79nmd.js","/chat-static/_next/static/immutable/chunks/0pa2o-879tgyz.js","/chat-static/_next/static/immutable/chunks/0vmwjdmzo33vb.js","/chat-static/_next/static/immutable/chunks/1di_td8luy3gw.js","/chat-static/_next/static/immutable/chunks/0i48amtc28pqy.js","/chat-static/_next/static/immutable/chunks/25oa2-cd4babd.js","/chat-static/_next/static/immutable/chunks/33addp8wpisll.js","/chat-static/_next/static/immutable/chunks/1ibakxw9lycsv.js","/chat-static/_next/static/immutable/chunks/0kpqqt3b70onu.js","/chat-static/_next/static/immutable/chunks/3r-izlig-97d3.js","/chat-static/_next/static/immutable/chunks/1-yirsd6_l__x.js","/chat-static/_next/static/immutable/chunks/3b6rwng7jzw37.js","/chat-static/_next/static/immutable/chunks/0nc47r7g497qp.js","/chat-static/_next/static/immutable/chunks/08ftfj_ae3jl_.js","/chat-static/_next/static/immutable/chunks/16p-wd29zwtcb.js","/chat-static/_next/static/immutable/chunks/1o9d1-74u-xr7.js","/chat-static/_next/static/immutable/chunks/17xddrdopbp9_.js","/chat-static/_next/static/immutable/chunks/17bw078wkmokk.js","/chat-static/_next/static/immutable/chunks/2lsankmaxuiz4.js","/chat-static/_next/static/immutable/chunks/1ybo6yzdrs8bw.js","/chat-static/_next/static/immutable/chunks/25hm_hdm1gsd0.js","/chat-static/_next/static/immutable/chunks/2iyogqj39terz.js","/chat-static/_next/static/immutable/chunks/2v488urps6yag.js","/chat-static/_next/static/immutable/chunks/0ex210m2m3jd_.js","/chat-static/_next/static/immutable/chunks/0avdeadirr7ac.js","/chat-static/_next/static/immutable/chunks/3yu169rnx-6bz.js","/chat-static/_next/static/immutable/chunks/0dt5xmjm5355d.js","/chat-static/_next/static/immutable/chunks/0w0diht866kq4.js","/chat-static/_next/static/immutable/chunks/36at-fgxccn6g.js","/chat-static/_next/static/immutable/chunks/04gkop25t1q10.js","/chat-static/_next/static/immutable/chunks/2mjr-ow9jt224.js","/chat-static/_next/static/immutable/chunks/0f4z2mjqjzpbe.js","/chat-static/_next/static/immutable/chunks/1g-ogsg-tifvg.js","/chat-static/_next/static/immutable/chunks/16pppxvb6m7dw.js","/chat-static/_next/static/immutable/chunks/2x0m84hlfqnp9.js","/chat-static/_next/static/immutable/chunks/3j5pbs0p975ta.js"],"SWRDataProvider"] 99: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 })()8d:["$","$L97",null,{"chatId":"aRiIPV4yyOh","children":["$","$L98",null,{"data":{"@\"active-block\",\"aRiIPV4yyOh\",":{"id":"b_zOQn6TsRm39","messageId":"WLucMqQygzkX5R7v6j3fQo8vlbs8xOKL","source":"$99","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":"$L9a"}]}]

About

Tags

Share

About

Tags

Share

More from estebansuarez

More Templates Like This