92:I[903690,["/chat-static/_next/static/immutable/chunks/1m0r1037wq98k.js","/chat-static/_next/static/immutable/chunks/13zdzqwus9umo.js","/chat-static/_next/static/immutable/chunks/1iev77wu-3vp1.js","/chat-static/_next/static/immutable/chunks/1ahdf609w04k2.js","/chat-static/_next/static/immutable/chunks/0txvwiui0hemn.js","/chat-static/_next/static/immutable/chunks/03u2jmu4jy3d7.js","/chat-static/_next/static/immutable/chunks/3kwwr0j-u86g_.js","/chat-static/_next/static/immutable/chunks/1ijhokb2v0d74.js","/chat-static/_next/static/immutable/chunks/4484t2g2wpft0.js","/chat-static/_next/static/immutable/chunks/3vry8986kzla3.js","/chat-static/_next/static/immutable/chunks/1bj9qwnsgeuib.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/3fas7hkw8i4rc.js","/chat-static/_next/static/immutable/chunks/0zosk-qr7dt38.js","/chat-static/_next/static/immutable/chunks/0-lamd0oomsmg.js","/chat-static/_next/static/immutable/chunks/2qw49u6pjx6z-.js","/chat-static/_next/static/immutable/chunks/3fv1_3qe-b0fe.js","/chat-static/_next/static/immutable/chunks/1kggp_hh1wtg-.js","/chat-static/_next/static/immutable/chunks/2v4ca2ca54exm.js","/chat-static/_next/static/immutable/chunks/2sr86dn27j-z2.js","/chat-static/_next/static/immutable/chunks/3ec-g0nfe85s4.js","/chat-static/_next/static/immutable/chunks/02wgyksxmqdo9.js","/chat-static/_next/static/immutable/chunks/0jn2zliwqegp6.js","/chat-static/_next/static/immutable/chunks/0ps1qzh1nk6d-.js","/chat-static/_next/static/immutable/chunks/3968nzrjvd6wq.js","/chat-static/_next/static/immutable/chunks/1i2vjdx8kghud.js","/chat-static/_next/static/immutable/chunks/1k-jhipmqjyex.js","/chat-static/_next/static/immutable/chunks/1qm45i0y1ksq_.js","/chat-static/_next/static/immutable/chunks/1eik28lj_d79q.js","/chat-static/_next/static/immutable/chunks/0batqcj2db5tx.js","/chat-static/_next/static/immutable/chunks/22q80h5vljxme.js","/chat-static/_next/static/immutable/chunks/32f_xa0asusa0.js","/chat-static/_next/static/immutable/chunks/17-b0dujr-h8t.js","/chat-static/_next/static/immutable/chunks/0ttugpgpljuh_.js","/chat-static/_next/static/immutable/chunks/2bwf0nopjvnf1.js","/chat-static/_next/static/immutable/chunks/2mz9q5bdln3xq.js","/chat-static/_next/static/immutable/chunks/069x4vtgu4fpq.js","/chat-static/_next/static/immutable/chunks/0_h5jt2xwz8a-.js","/chat-static/_next/static/immutable/chunks/34q85al3g00t2.js"],"ExplicitChatIdProvider"] 93:I[838238,["/chat-static/_next/static/immutable/chunks/1m0r1037wq98k.js","/chat-static/_next/static/immutable/chunks/13zdzqwus9umo.js","/chat-static/_next/static/immutable/chunks/1iev77wu-3vp1.js","/chat-static/_next/static/immutable/chunks/1ahdf609w04k2.js","/chat-static/_next/static/immutable/chunks/0txvwiui0hemn.js","/chat-static/_next/static/immutable/chunks/03u2jmu4jy3d7.js","/chat-static/_next/static/immutable/chunks/3kwwr0j-u86g_.js","/chat-static/_next/static/immutable/chunks/1ijhokb2v0d74.js","/chat-static/_next/static/immutable/chunks/4484t2g2wpft0.js","/chat-static/_next/static/immutable/chunks/3vry8986kzla3.js","/chat-static/_next/static/immutable/chunks/1bj9qwnsgeuib.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/3fas7hkw8i4rc.js","/chat-static/_next/static/immutable/chunks/0zosk-qr7dt38.js","/chat-static/_next/static/immutable/chunks/0-lamd0oomsmg.js","/chat-static/_next/static/immutable/chunks/2qw49u6pjx6z-.js","/chat-static/_next/static/immutable/chunks/3fv1_3qe-b0fe.js","/chat-static/_next/static/immutable/chunks/1kggp_hh1wtg-.js","/chat-static/_next/static/immutable/chunks/2v4ca2ca54exm.js","/chat-static/_next/static/immutable/chunks/2sr86dn27j-z2.js","/chat-static/_next/static/immutable/chunks/3ec-g0nfe85s4.js","/chat-static/_next/static/immutable/chunks/02wgyksxmqdo9.js","/chat-static/_next/static/immutable/chunks/0jn2zliwqegp6.js","/chat-static/_next/static/immutable/chunks/0ps1qzh1nk6d-.js","/chat-static/_next/static/immutable/chunks/3968nzrjvd6wq.js","/chat-static/_next/static/immutable/chunks/1i2vjdx8kghud.js","/chat-static/_next/static/immutable/chunks/1k-jhipmqjyex.js","/chat-static/_next/static/immutable/chunks/1qm45i0y1ksq_.js","/chat-static/_next/static/immutable/chunks/1eik28lj_d79q.js","/chat-static/_next/static/immutable/chunks/0batqcj2db5tx.js","/chat-static/_next/static/immutable/chunks/22q80h5vljxme.js","/chat-static/_next/static/immutable/chunks/32f_xa0asusa0.js","/chat-static/_next/static/immutable/chunks/17-b0dujr-h8t.js","/chat-static/_next/static/immutable/chunks/0ttugpgpljuh_.js","/chat-static/_next/static/immutable/chunks/2bwf0nopjvnf1.js","/chat-static/_next/static/immutable/chunks/2mz9q5bdln3xq.js","/chat-static/_next/static/immutable/chunks/069x4vtgu4fpq.js","/chat-static/_next/static/immutable/chunks/0_h5jt2xwz8a-.js","/chat-static/_next/static/immutable/chunks/34q85al3g00t2.js"],"SWRDataProvider"] 94: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 })()88:["$","$L92",null,{"chatId":"aRiIPV4yyOh","children":["$","$L93",null,{"data":{"@\"active-block\",\"aRiIPV4yyOh\",":{"id":"b_zOQn6TsRm39","messageId":"WLucMqQygzkX5R7v6j3fQo8vlbs8xOKL","source":"$94","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":"$L95"}]}]

About

Tags

Share

About

Tags

Share

More from estebansuarez

More Templates Like This