"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = { a: "a", br: "br", code: "code", h1: "h1", h2: "h2", h3: "h3", input: "input", li: "li", ol: "ol", p: "p", pre: "pre", span: "span", strong: "strong", ul: "ul", ..._provideComponents(), ...props.components }; return _jsxs(_Fragment, { children: [_jsx(_components.h1, { id: "complete-guide-to-integrating-paypal-payments-in-nextjs-16---step-by-step-tutorial", children: _jsx(_components.a, { href: "#complete-guide-to-integrating-paypal-payments-in-nextjs-16---step-by-step-tutorial", children: "Complete Guide to Integrating PayPal Payments in Next.js 16 - Step-by-Step Tutorial" }) }), "\n", _jsx(_components.p, { children: "Master PayPal payment integration with Next.js 16 in this comprehensive guide. Learn how to set up PayPal API credentials, implement secure payment flows, handle webhooks, send email confirmations, and deploy to production. Includes solutions to common issues, proper TypeScript configuration, and production-ready patterns. Build complete donation and product sales systems with real-time payment status updates using modern Next.js App Router, Server Actions, and Prisma ORM." }), "\n", _jsx(_components.h2, { id: "what-youll-build", children: _jsx(_components.a, { href: "#what-youll-build", children: "What You'll Build" }) }), "\n", _jsx(_components.p, { children: "This guide covers two complete payment systems:" }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "Example 1: Donation System (Buy Me a Coffee)" }) }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Accept donations with preset and custom amounts" }), "\n", _jsx(_components.li, { children: "Collect optional supporter information" }), "\n", _jsx(_components.li, { children: "Beautiful, mobile-responsive donation page" }), "\n", _jsx(_components.li, { children: "Thank you emails with Resend" }), "\n"] }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "Example 2: Product Sales (Template Store)" }) }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Sell digital products like templates and courses" }), "\n", _jsx(_components.li, { children: "Product catalog with features and pricing" }), "\n", _jsx(_components.li, { children: "Instant access after payment" }), "\n", _jsx(_components.li, { children: "Order confirmation emails" }), "\n"] }), "\n", _jsx(_components.h2, { id: "prerequisites", children: _jsx(_components.a, { href: "#prerequisites", children: "Prerequisites" }) }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Next.js 16 project" }), "\n", _jsx(_components.li, { children: "PayPal Developer account" }), "\n", _jsx(_components.li, { children: "Basic understanding of Server Actions" }), "\n", _jsx(_components.li, { children: "Node.js 18+ installed" }), "\n"] }), "\n", _jsx(_components.h2, { id: "step-1-paypal-developer-setup", children: _jsx(_components.a, { href: "#step-1-paypal-developer-setup", children: "Step 1: PayPal Developer Setup" }) }), "\n", _jsx(_components.h3, { id: "create-paypal-application", children: _jsx(_components.a, { href: "#create-paypal-application", children: "Create PayPal Application" }) }), "\n", _jsxs(_components.ol, { children: ["\n", _jsxs(_components.li, { children: ["Visit ", _jsx(_components.a, { href: "https://developer.paypal.com", children: "PayPal Developer Dashboard" })] }), "\n", _jsx(_components.li, { children: "Log in or create a developer account" }), "\n", _jsx(_components.li, { children: "Navigate to \"My Apps & Credentials\"" }), "\n", _jsx(_components.li, { children: "Click \"Create App\"" }), "\n", _jsx(_components.li, { children: "Choose \"Default Application\" and select \"Sandbox\" for testing" }), "\n", _jsx(_components.li, { children: "Copy your Client ID and Client Secret" }), "\n"] }), "\n", _jsx(_components.h3, { id: "get-your-credentials", children: _jsx(_components.a, { href: "#get-your-credentials", children: "Get Your Credentials" }) }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-bash", children: [_jsx(_components.span, { className: "hljs-comment", children: "# Sandbox (Testing)" }), "\nPAYPAL_CLIENT_ID=", _jsx(_components.span, { className: "hljs-string", children: "\"AYqyDQyjOvXP5iyhl_4tXjI-BcM3gcuyqzTbQjZjlDa9urcfXzNkj783lqnVgPr7F8VPleCf7n-TglXO\"" }), "\nPAYPAL_CLIENT_SECRET=", _jsx(_components.span, { className: "hljs-string", children: "\"EOYRfWh3CWTsot6wBtfp5J6g2XTluUklbHdyLPzcOaYxhF-dOFRcHt_Zxd4glAlaWzo5V9DNV8GgsMUW\"" }), "\n\n", _jsx(_components.span, { className: "hljs-comment", children: "# Production (Live) - Get these when ready to go live" }), "\nPAYPAL_CLIENT_ID=", _jsx(_components.span, { className: "hljs-string", children: "\"your-production-client-id\"" }), "\nPAYPAL_CLIENT_SECRET=", _jsx(_components.span, { className: "hljs-string", children: "\"your-production-client-secret\"" }), "\n"] }) }), "\n", _jsx(_components.h2, { id: "step-2-environment-configuration", children: _jsx(_components.a, { href: "#step-2-environment-configuration", children: "Step 2: Environment Configuration" }) }), "\n", _jsxs(_components.p, { children: ["Create ", _jsx(_components.code, { children: ".env.local" }), " in your project root:"] }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-bash", children: [_jsx(_components.span, { className: "hljs-comment", children: "# PayPal Configuration" }), "\nPAYPAL_CLIENT_ID=", _jsx(_components.span, { className: "hljs-string", children: "\"AYqyDQyjOvXP5iyhl_4tXjI-BcM3gcuyqzTbQjZjlDa9urcfXzNkj783lqnVgPr7F8VPleCf7n-TglXO\"" }), "\nPAYPAL_CLIENT_SECRET=", _jsx(_components.span, { className: "hljs-string", children: "\"EOYRfWh3CWTsot6wBtfp5J6g2XTluUklbHdyLPzcOaYxhF-dOFRcHt_Zxd4glAlaWzo5V9DNV8GgsMUW\"" }), "\nPAYPAL_ENVIRONMENT=", _jsx(_components.span, { className: "hljs-string", children: "\"sandbox\"" }), " ", _jsx(_components.span, { className: "hljs-comment", children: "# Change to \"production\" for live" }), "\nNEXT_PUBLIC_BASE_URL=", _jsx(_components.span, { className: "hljs-string", children: "\"http://localhost:3000\"" }), "\n\n", _jsx(_components.span, { className: "hljs-comment", children: "# Database (Prisma)" }), "\nDATABASE_URL=", _jsx(_components.span, { className: "hljs-string", children: "\"postgresql://username:password@localhost:5432/paypal_app\"" }), "\n\n", _jsx(_components.span, { className: "hljs-comment", children: "# Email Service (Resend)" }), "\nRESEND_API_KEY=", _jsx(_components.span, { className: "hljs-string", children: "\"re_your_resend_api_key_here\"" }), "\nFROM_EMAIL=", _jsx(_components.span, { className: "hljs-string", children: "\"noreply@yourdomain.com\"" }), "\n\n", _jsx(_components.span, { className: "hljs-comment", children: "# App Configuration" }), "\nAPP_NAME=", _jsx(_components.span, { className: "hljs-string", children: "\"Your App Name\"" }), "\nSUPPORT_EMAIL=", _jsx(_components.span, { className: "hljs-string", children: "\"support@yourdomain.com\"" }), "\n"] }) }), "\n", _jsx(_components.h2, { id: "step-3-database-setup-with-prisma", children: _jsx(_components.a, { href: "#step-3-database-setup-with-prisma", children: "Step 3: Database Setup with Prisma" }) }), "\n", _jsx(_components.h3, { id: "install-dependencies", children: _jsx(_components.a, { href: "#install-dependencies", children: "Install Dependencies" }) }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "hljs language-bash", children: "npm install prisma @prisma/client\nnpm install resend\nnpm install @types/node typescript ts-node --save-dev\n" }) }), "\n", _jsx(_components.h3, { id: "initialize-prisma", children: _jsx(_components.a, { href: "#initialize-prisma", children: "Initialize Prisma" }) }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "hljs language-bash", children: "npx prisma init\n" }) }), "\n", _jsx(_components.h3, { id: "create-database-schema", children: _jsx(_components.a, { href: "#create-database-schema", children: "Create Database Schema" }) }), "\n", _jsxs(_components.p, { children: ["Update ", _jsx(_components.code, { children: "prisma/schema.prisma" }), ":"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "hljs language-prisma", children: "// This is your Prisma schema file,\n// learn more about it in the docs: https://pris.ly/d/prisma-schema\n\ngenerator client {\n provider = \"prisma-client-js\"\n}\n\ndatasource db {\n provider = \"postgresql\"\n url = env(\"DATABASE_URL\")\n}\n\nmodel User {\n id String @id @default(cuid())\n email String? @unique\n name String?\n createdAt DateTime @default(now())\n updatedAt DateTime @updatedAt\n\n // Relations\n donations Donation[]\n orders Order[]\n\n @@map(\"users\")\n}\n\nmodel Donation {\n id String @id @default(cuid())\n amount Float\n currency String @default(\"USD\")\n message String?\n paypalOrderId String @unique\n status PaymentStatus @default(PENDING)\n \n // PayPal capture details\n captureId String?\n payerEmail String?\n payerName String?\n \n // Timestamps\n createdAt DateTime @default(now())\n updatedAt DateTime @updatedAt\n \n // Relations\n userId String?\n user User? @relation(fields: [userId], references: [id])\n\n @@map(\"donations\")\n}\n\nmodel Product {\n id String @id @default(cuid())\n name String\n description String\n price Float\n currency String @default(\"USD\")\n category String\n features String[] // Array of features\n image String?\n downloadUrl String?\n discount Int? // Percentage discount\n active Boolean @default(true)\n \n // Timestamps\n createdAt DateTime @default(now())\n updatedAt DateTime @updatedAt\n \n // Relations\n orderItems OrderItem[]\n\n @@map(\"products\")\n}\n\nmodel Order {\n id String @id @default(cuid())\n paypalOrderId String @unique\n status PaymentStatus @default(PENDING)\n total Float\n currency String @default(\"USD\")\n \n // PayPal capture details\n captureId String?\n payerEmail String?\n payerName String?\n \n // Customer info\n customerEmail String?\n customerName String?\n \n // Timestamps\n createdAt DateTime @default(now())\n updatedAt DateTime @updatedAt\n \n // Relations\n userId String?\n user User? @relation(fields: [userId], references: [id])\n items OrderItem[]\n\n @@map(\"orders\")\n}\n\nmodel OrderItem {\n id String @id @default(cuid())\n quantity Int @default(1)\n price Float // Price at time of purchase\n \n // Relations\n orderId String\n order Order @relation(fields: [orderId], references: [id], onDelete: Cascade)\n productId String\n product Product @relation(fields: [productId], references: [id])\n\n @@map(\"order_items\")\n}\n\nenum PaymentStatus {\n PENDING\n COMPLETED\n FAILED\n CANCELLED\n REFUNDED\n}\n" }) }), "\n", _jsx(_components.h3, { id: "generate-prisma-client", children: _jsx(_components.a, { href: "#generate-prisma-client", children: "Generate Prisma Client" }) }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "hljs language-bash", children: "npx prisma generate\nnpx prisma db push\n" }) }), "\n", _jsx(_components.h3, { id: "create-prisma-client-instance", children: _jsx(_components.a, { href: "#create-prisma-client-instance", children: "Create Prisma Client Instance" }) }), "\n", _jsxs(_components.p, { children: ["Create ", _jsx(_components.code, { children: "lib/prisma.ts" }), ":"] }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-typescript", children: [_jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { ", _jsx(_components.span, { className: "hljs-title class_", children: "PrismaClient" }), " } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'@prisma/client'" }), "\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " globalForPrisma = globalThis ", _jsx(_components.span, { className: "hljs-keyword", children: "as" }), " ", _jsx(_components.span, { className: "hljs-built_in", children: "unknown" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "as" }), " {\n ", _jsx(_components.span, { className: "hljs-attr", children: "prisma" }), ": ", _jsx(_components.span, { className: "hljs-title class_", children: "PrismaClient" }), " | ", _jsx(_components.span, { className: "hljs-literal", children: "undefined" }), "\n}\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "export" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " prisma = globalForPrisma.", _jsx(_components.span, { className: "hljs-property", children: "prisma" }), " ?? ", _jsx(_components.span, { className: "hljs-keyword", children: "new" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "PrismaClient" }), "()\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "if" }), " (process.", _jsx(_components.span, { className: "hljs-property", children: "env" }), ".", _jsx(_components.span, { className: "hljs-property", children: "NODE_ENV" }), " !== ", _jsx(_components.span, { className: "hljs-string", children: "'production'" }), ") globalForPrisma.", _jsx(_components.span, { className: "hljs-property", children: "prisma" }), " = prisma\n"] }) }), "\n", _jsx(_components.h2, { id: "step-4-email-service-setup-with-resend", children: _jsx(_components.a, { href: "#step-4-email-service-setup-with-resend", children: "Step 4: Email Service Setup with Resend" }) }), "\n", _jsxs(_components.p, { children: ["Create ", _jsx(_components.code, { children: "lib/email.ts" }), ":"] }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-typescript", children: [_jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { ", _jsx(_components.span, { className: "hljs-title class_", children: "Resend" }), " } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "'resend'" }), "\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " resend = ", _jsx(_components.span, { className: "hljs-keyword", children: "new" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "Resend" }), "(process.", _jsx(_components.span, { className: "hljs-property", children: "env" }), ".", _jsx(_components.span, { className: "hljs-property", children: "RESEND_API_KEY" }), ")\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "interface" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "DonationEmailData" }), " {\n ", _jsx(_components.span, { className: "hljs-attr", children: "donorName" }), "?: ", _jsx(_components.span, { className: "hljs-built_in", children: "string" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "donorEmail" }), ": ", _jsx(_components.span, { className: "hljs-built_in", children: "string" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "amount" }), ": ", _jsx(_components.span, { className: "hljs-built_in", children: "number" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "message" }), "?: ", _jsx(_components.span, { className: "hljs-built_in", children: "string" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "donationId" }), ": ", _jsx(_components.span, { className: "hljs-built_in", children: "string" }), "\n}\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "interface" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "OrderEmailData" }), " {\n ", _jsx(_components.span, { className: "hljs-attr", children: "customerName" }), "?: ", _jsx(_components.span, { className: "hljs-built_in", children: "string" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "customerEmail" }), ": ", _jsx(_components.span, { className: "hljs-built_in", children: "string" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "orderTotal" }), ": ", _jsx(_components.span, { className: "hljs-built_in", children: "number" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "items" }), ": ", _jsx(_components.span, { className: "hljs-title class_", children: "Array" }), "<{\n ", _jsx(_components.span, { className: "hljs-attr", children: "name" }), ": ", _jsx(_components.span, { className: "hljs-built_in", children: "string" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "price" }), ": ", _jsx(_components.span, { className: "hljs-built_in", children: "number" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "quantity" }), ": ", _jsx(_components.span, { className: "hljs-built_in", children: "number" }), "\n }>\n ", _jsx(_components.span, { className: "hljs-attr", children: "orderId" }), ": ", _jsx(_components.span, { className: "hljs-built_in", children: "string" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "downloadLinks" }), "?: ", _jsx(_components.span, { className: "hljs-built_in", children: "string" }), "[]\n}\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "export" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "async" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "function" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "sendDonationThankYou" }), "(", _jsxs(_components.span, { className: "hljs-params", children: [_jsx(_components.span, { className: "hljs-attr", children: "data" }), ": ", _jsx(_components.span, { className: "hljs-title class_", children: "DonationEmailData" })] }), ") {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "try" }), " {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " { ", _jsx(_components.span, { className: "hljs-attr", children: "data" }), ": emailData, error } = ", _jsx(_components.span, { className: "hljs-keyword", children: "await" }), " resend.", _jsx(_components.span, { className: "hljs-property", children: "emails" }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "send" }), "({\n ", _jsx(_components.span, { className: "hljs-attr", children: "from" }), ": process.", _jsx(_components.span, { className: "hljs-property", children: "env" }), ".", _jsx(_components.span, { className: "hljs-property", children: "FROM_EMAIL" }), " || ", _jsx(_components.span, { className: "hljs-string", children: "'noreply@yourdomain.com'" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "to" }), ": [data.", _jsx(_components.span, { className: "hljs-property", children: "donorEmail" }), "],\n ", _jsx(_components.span, { className: "hljs-attr", children: "subject" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "`Thank you for your support! ☕`" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "html" }), ": ", _jsxs(_components.span, { className: "hljs-string", children: ["`\n

Thank You! ☕

\n \n

\n ", _jsxs(_components.span, { className: "hljs-subst", children: ["${data.donorName ? ", _jsxs(_components.span, { className: "hljs-string", children: ["`Hi ", _jsx(_components.span, { className: "hljs-subst", children: "${data.donorName}" }), "`"] }), " : ", _jsx(_components.span, { className: "hljs-string", children: "'Hello'" }), "}"] }), "!\n

\n \n

\n Thank you so much for your generous donation of $", _jsx(_components.span, { className: "hljs-subst", children: "${data.amount}" }), "! \n Your support means the world to me and helps me continue creating valuable content \n and resources for the developer community.\n

\n \n ", _jsxs(_components.span, { className: "hljs-subst", children: ["${data.message ? ", _jsxs(_components.span, { className: "hljs-string", children: ["`\n

Your Message:

\"", _jsx(_components.span, { className: "hljs-subst", children: "${data.message}" }), "\"

\n `"] }), " : ", _jsx(_components.span, { className: "hljs-string", children: "''" }), "}"] }), "\n \n

\n Every contribution, no matter the size, makes a real difference. You're helping me:\n

\n \n

Create more free tutorials and resources
Develop open-source projects
Improve existing content and tools
Explore new technologies and share learnings

\n \n

\n \n Visit My Website\n \n

\n \n

\n Donation ID: ", _jsx(_components.span, { className: "hljs-subst", children: "${data.donationId}" }), "
\n Questions? Reply to this email or contact ", _jsx(_components.span, { className: "hljs-subst", children: "${process.env.SUPPORT_EMAIL}" }), "\n

Order Confirmed! 📦

\n \n

\n ", _jsxs(_components.span, { className: "hljs-subst", children: ["${data.customerName ? ", _jsxs(_components.span, { className: "hljs-string", children: ["`Hi ", _jsx(_components.span, { className: "hljs-subst", children: "${data.customerName}" }), "`"] }), " : ", _jsx(_components.span, { className: "hljs-string", children: "'Hello'" }), "}"] }), "!\n

\n \n

\n Thank you for your purchase! Your order has been confirmed and is ready for download.\n

\n \n

Order Summary

\n \n \n \n \n \n \n \n \n ", _jsxs(_components.span, { className: "hljs-subst", children: ["${data.items.map(item => ", _jsxs(_components.span, { className: "hljs-string", children: ["`\n \n \n \n \n `"] }), ").join(", _jsx(_components.span, { className: "hljs-string", children: "''" }), ")}"] }), "\n \n \n \n \n \n

Item	Price
\n ", _jsx(_components.span, { className: "hljs-subst", children: "${item.name}" }), " ", _jsxs(_components.span, { className: "hljs-subst", children: ["${item.quantity > ", _jsx(_components.span, { className: "hljs-number", children: "1" }), " ? ", _jsxs(_components.span, { className: "hljs-string", children: ["`(x", _jsx(_components.span, { className: "hljs-subst", children: "${item.quantity}" }), ")`"] }), " : ", _jsx(_components.span, { className: "hljs-string", children: "''" }), "}"] }), "\n	\n $", _jsxs(_components.span, { className: "hljs-subst", children: ["${(item.price * item.quantity).toFixed(", _jsx(_components.span, { className: "hljs-number", children: "2" }), ")}"] }), "\n
Total	\n $", _jsxs(_components.span, { className: "hljs-subst", children: ["${data.orderTotal.toFixed(", _jsx(_components.span, { className: "hljs-number", children: "2" }), ")}"] }), "\n

Item

Price

\n ", _jsx(_components.span, { className: "hljs-subst", children: "${item.name}" }), " ", _jsxs(_components.span, { className: "hljs-subst", children: ["${item.quantity > ", _jsx(_components.span, { className: "hljs-number", children: "1" }), " ? ", _jsxs(_components.span, { className: "hljs-string", children: ["`(x", _jsx(_components.span, { className: "hljs-subst", children: "${item.quantity}" }), ")`"] }), " : ", _jsx(_components.span, { className: "hljs-string", children: "''" }), "}"] }), "\n

\n $", _jsxs(_components.span, { className: "hljs-subst", children: ["${(item.price * item.quantity).toFixed(", _jsx(_components.span, { className: "hljs-number", children: "2" }), ")}"] }), "\n

Total

\n $", _jsxs(_components.span, { className: "hljs-subst", children: ["${data.orderTotal.toFixed(", _jsx(_components.span, { className: "hljs-number", children: "2" }), ")}"] }), "\n

\n \n ", _jsxs(_components.span, { className: "hljs-subst", children: ["${data.downloadLinks && data.downloadLinks.length > ", _jsx(_components.span, { className: "hljs-number", children: "0" }), " ? ", _jsxs(_components.span, { className: "hljs-string", children: ["`\n

📥 Download Your Files

\n ", _jsxs(_components.span, { className: "hljs-subst", children: ["${data.downloadLinks.map(link => ", _jsxs(_components.span, { className: "hljs-string", children: ["`\n \n Download Template\n \n `"] }), ").join(", _jsx(_components.span, { className: "hljs-string", children: "''" }), ")}"] }), "\n

\n Download links are valid for 30 days. Save your files locally.\n

\n `"] }), " : ", _jsx(_components.span, { className: "hljs-string", children: "''" }), "}"] }), "\n \n

🛠️ Need Help?

\n If you have any questions about your purchase or need help with setup, \n don't hesitate to reach out to our support team at ", _jsx(_components.span, { className: "hljs-subst", children: "${process.env.SUPPORT_EMAIL}" }), "\n

\n \n

\n Order ID: ", _jsx(_components.span, { className: "hljs-subst", children: "${data.orderId}" }), "
\n Questions? Reply to this email or contact ", _jsx(_components.span, { className: "hljs-subst", children: "${process.env.SUPPORT_EMAIL}" }), "\n

\n `"] }), "\n })\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "if" }), " (error) {\n ", _jsx(_components.span, { className: "hljs-variable language_", children: "console" }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "error" }), "(", _jsx(_components.span, { className: "hljs-string", children: "'Failed to send order confirmation email:'" }), ", error)\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " { ", _jsx(_components.span, { className: "hljs-attr", children: "success" }), ": ", _jsx(_components.span, { className: "hljs-literal", children: "false" }), ", error }\n }\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " { ", _jsx(_components.span, { className: "hljs-attr", children: "success" }), ": ", _jsx(_components.span, { className: "hljs-literal", children: "true" }), ", ", _jsx(_components.span, { className: "hljs-attr", children: "data" }), ": emailData }\n } ", _jsx(_components.span, { className: "hljs-keyword", children: "catch" }), " (error) {\n ", _jsx(_components.span, { className: "hljs-variable language_", children: "console" }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "error" }), "(", _jsx(_components.span, { className: "hljs-string", children: "'Email service error:'" }), ", error)\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " { ", _jsx(_components.span, { className: "hljs-attr", children: "success" }), ": ", _jsx(_components.span, { className: "hljs-literal", children: "false" }), ", error }\n }\n}\n"] }) }), "\n", _jsx(_components.h2, { id: "example-1-donation-system-buy-me-a-coffee", children: _jsx(_components.a, { href: "#example-1-donation-system-buy-me-a-coffee", children: "Example 1: Donation System (Buy Me a Coffee)" }) }), "\n", _jsx(_components.h3, { id: "create-donation-server-action", children: _jsx(_components.a, { href: "#create-donation-server-action", children: "Create Donation Server Action" }) }), "\n", _jsxs(_components.p, { children: ["Create ", _jsx(_components.code, { children: "actions/donations.ts" }), ":"] }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-typescript", children: [_jsx(_components.span, { className: "hljs-string", children: "\"use server\"" }), "\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { prisma } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "\"@/lib/prisma\"" }), "\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { sendDonationThankYou } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "\"@/lib/email\"" }), "\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "interface" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "DonationData" }), " {\n ", _jsx(_components.span, { className: "hljs-attr", children: "amount" }), ": ", _jsx(_components.span, { className: "hljs-built_in", children: "number" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "name" }), "?: ", _jsx(_components.span, { className: "hljs-built_in", children: "string" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "email" }), "?: ", _jsx(_components.span, { className: "hljs-built_in", children: "string" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "message" }), "?: ", _jsx(_components.span, { className: "hljs-built_in", children: "string" }), "\n}\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "interface" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "DonationResponse" }), " {\n ", _jsx(_components.span, { className: "hljs-attr", children: "success" }), ": ", _jsx(_components.span, { className: "hljs-built_in", children: "boolean" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "url" }), "?: ", _jsx(_components.span, { className: "hljs-built_in", children: "string" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "error" }), "?: ", _jsx(_components.span, { className: "hljs-built_in", children: "string" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "orderId" }), "?: ", _jsx(_components.span, { className: "hljs-built_in", children: "string" }), "\n}\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "export" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "async" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "function" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "createDonation" }), "(", _jsxs(_components.span, { className: "hljs-params", children: [_jsx(_components.span, { className: "hljs-attr", children: "data" }), ": ", _jsx(_components.span, { className: "hljs-title class_", children: "DonationData" })] }), "): ", _jsx(_components.span, { className: "hljs-title class_", children: "Promise" }), "<", _jsx(_components.span, { className: "hljs-title class_", children: "DonationResponse" }), "> {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "try" }), " {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " clientId = process.", _jsx(_components.span, { className: "hljs-property", children: "env" }), ".", _jsx(_components.span, { className: "hljs-property", children: "PAYPAL_CLIENT_ID" }), "\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " clientSecret = process.", _jsx(_components.span, { className: "hljs-property", children: "env" }), ".", _jsx(_components.span, { className: "hljs-property", children: "PAYPAL_CLIENT_SECRET" }), "\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " baseUrl = process.", _jsx(_components.span, { className: "hljs-property", children: "env" }), ".", _jsx(_components.span, { className: "hljs-property", children: "NEXT_PUBLIC_BASE_URL" }), " || ", _jsx(_components.span, { className: "hljs-string", children: "\"http://localhost:3000\"" }), "\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " environment = process.", _jsx(_components.span, { className: "hljs-property", children: "env" }), ".", _jsx(_components.span, { className: "hljs-property", children: "PAYPAL_ENVIRONMENT" }), " || ", _jsx(_components.span, { className: "hljs-string", children: "\"sandbox\"" }), "\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "if" }), " (!clientId || !clientSecret) {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " { ", _jsx(_components.span, { className: "hljs-attr", children: "success" }), ": ", _jsx(_components.span, { className: "hljs-literal", children: "false" }), ", ", _jsx(_components.span, { className: "hljs-attr", children: "error" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "\"PayPal configuration missing\"" }), " }\n }\n\n ", _jsx(_components.span, { className: "hljs-comment", children: "// Validate amount" }), "\n ", _jsx(_components.span, { className: "hljs-keyword", children: "if" }), " (data.", _jsx(_components.span, { className: "hljs-property", children: "amount" }), " < ", _jsx(_components.span, { className: "hljs-number", children: "1" }), ") {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " { ", _jsx(_components.span, { className: "hljs-attr", children: "success" }), ": ", _jsx(_components.span, { className: "hljs-literal", children: "false" }), ", ", _jsx(_components.span, { className: "hljs-attr", children: "error" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "\"Minimum donation amount is $1\"" }), " }\n }\n\n ", _jsx(_components.span, { className: "hljs-comment", children: "// Create user if email provided" }), "\n ", _jsx(_components.span, { className: "hljs-keyword", children: "let" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "userId" }), ": ", _jsx(_components.span, { className: "hljs-built_in", children: "string" }), " | ", _jsx(_components.span, { className: "hljs-literal", children: "undefined" }), "\n ", _jsx(_components.span, { className: "hljs-keyword", children: "if" }), " (data.", _jsx(_components.span, { className: "hljs-property", children: "email" }), ") {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " user = ", _jsx(_components.span, { className: "hljs-keyword", children: "await" }), " prisma.", _jsx(_components.span, { className: "hljs-property", children: "user" }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "upsert" }), "({\n ", _jsx(_components.span, { className: "hljs-attr", children: "where" }), ": { ", _jsx(_components.span, { className: "hljs-attr", children: "email" }), ": data.", _jsx(_components.span, { className: "hljs-property", children: "email" }), " },\n ", _jsx(_components.span, { className: "hljs-attr", children: "update" }), ": { ", _jsx(_components.span, { className: "hljs-attr", children: "name" }), ": data.", _jsx(_components.span, { className: "hljs-property", children: "name" }), " },\n ", _jsx(_components.span, { className: "hljs-attr", children: "create" }), ": { ", _jsx(_components.span, { className: "hljs-attr", children: "email" }), ": data.", _jsx(_components.span, { className: "hljs-property", children: "email" }), ", ", _jsx(_components.span, { className: "hljs-attr", children: "name" }), ": data.", _jsx(_components.span, { className: "hljs-property", children: "name" }), " }\n })\n userId = user.", _jsx(_components.span, { className: "hljs-property", children: "id" }), "\n }\n\n ", _jsx(_components.span, { className: "hljs-comment", children: "// PayPal API URL based on environment" }), "\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " paypalApiUrl = environment === ", _jsx(_components.span, { className: "hljs-string", children: "\"production\"" }), " \n ? ", _jsx(_components.span, { className: "hljs-string", children: "\"https://api-m.paypal.com\"" }), " \n : ", _jsx(_components.span, { className: "hljs-string", children: "\"https://api-m.sandbox.paypal.com\"" }), "\n\n ", _jsx(_components.span, { className: "hljs-comment", children: "// Create PayPal order" }), "\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " response = ", _jsx(_components.span, { className: "hljs-keyword", children: "await" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "fetch" }), "(", _jsxs(_components.span, { className: "hljs-string", children: ["`", _jsx(_components.span, { className: "hljs-subst", children: "${paypalApiUrl}" }), "/v2/checkout/orders`"] }), ", {\n ", _jsx(_components.span, { className: "hljs-attr", children: "method" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "\"POST\"" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "headers" }), ": {\n ", _jsx(_components.span, { className: "hljs-string", children: "\"Content-Type\"" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "\"application/json\"" }), ",\n ", _jsx(_components.span, { className: "hljs-title class_", children: "Authorization" }), ": ", _jsxs(_components.span, { className: "hljs-string", children: ["`Basic ", _jsxs(_components.span, { className: "hljs-subst", children: ["${Buffer.", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), "(", _jsxs(_components.span, { className: "hljs-string", children: ["`", _jsx(_components.span, { className: "hljs-subst", children: "${clientId}" }), ":", _jsx(_components.span, { className: "hljs-subst", children: "${clientSecret}" }), "`"] }), ").toString(", _jsx(_components.span, { className: "hljs-string", children: "\"base64\"" }), ")}"] }), "`"] }), ",\n },\n ", _jsx(_components.span, { className: "hljs-attr", children: "body" }), ": ", _jsx(_components.span, { className: "hljs-title class_", children: "JSON" }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "stringify" }), "({\n ", _jsx(_components.span, { className: "hljs-attr", children: "intent" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "\"CAPTURE\"" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "purchase_units" }), ": [{\n ", _jsx(_components.span, { className: "hljs-attr", children: "amount" }), ": {\n ", _jsx(_components.span, { className: "hljs-attr", children: "currency_code" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "\"USD\"" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "value" }), ": data.", _jsx(_components.span, { className: "hljs-property", children: "amount" }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "toFixed" }), "(", _jsx(_components.span, { className: "hljs-number", children: "2" }), "),\n },\n ", _jsx(_components.span, { className: "hljs-attr", children: "description" }), ": ", _jsxs(_components.span, { className: "hljs-string", children: ["`Donation", _jsxs(_components.span, { className: "hljs-subst", children: ["${data.name ? ", _jsxs(_components.span, { className: "hljs-string", children: ["` from ", _jsx(_components.span, { className: "hljs-subst", children: "${data.name}" }), "`"] }), " : ", _jsx(_components.span, { className: "hljs-string", children: "''" }), "}"] }), _jsxs(_components.span, { className: "hljs-subst", children: ["${data.message ? ", _jsxs(_components.span, { className: "hljs-string", children: ["` - ", _jsx(_components.span, { className: "hljs-subst", children: "${data.message}" }), "`"] }), " : ", _jsx(_components.span, { className: "hljs-string", children: "''" }), "}"] }), "`"] }), ",\n }],\n ", _jsx(_components.span, { className: "hljs-attr", children: "application_context" }), ": {\n ", _jsx(_components.span, { className: "hljs-attr", children: "brand_name" }), ": process.", _jsx(_components.span, { className: "hljs-property", children: "env" }), ".", _jsx(_components.span, { className: "hljs-property", children: "APP_NAME" }), " || ", _jsx(_components.span, { className: "hljs-string", children: "\"Support My Work\"" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "landing_page" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "\"NO_PREFERENCE\"" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "user_action" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "\"PAY_NOW\"" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "return_url" }), ": ", _jsxs(_components.span, { className: "hljs-string", children: ["`", _jsx(_components.span, { className: "hljs-subst", children: "${baseUrl}" }), "/support/success`"] }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "cancel_url" }), ": ", _jsxs(_components.span, { className: "hljs-string", children: ["`", _jsx(_components.span, { className: "hljs-subst", children: "${baseUrl}" }), "/support/cancelled`"] }), ",\n },\n }),\n })\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "if" }), " (!response.", _jsx(_components.span, { className: "hljs-property", children: "ok" }), ") {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " errorData = ", _jsx(_components.span, { className: "hljs-keyword", children: "await" }), " response.", _jsx(_components.span, { className: "hljs-title function_", children: "json" }), "()\n ", _jsx(_components.span, { className: "hljs-variable language_", children: "console" }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "error" }), "(", _jsx(_components.span, { className: "hljs-string", children: "\"PayPal API error:\"" }), ", errorData)\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " { ", _jsx(_components.span, { className: "hljs-attr", children: "success" }), ": ", _jsx(_components.span, { className: "hljs-literal", children: "false" }), ", ", _jsx(_components.span, { className: "hljs-attr", children: "error" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "\"Failed to create donation\"" }), " }\n }\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " paypalData = ", _jsx(_components.span, { className: "hljs-keyword", children: "await" }), " response.", _jsx(_components.span, { className: "hljs-title function_", children: "json" }), "()\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " approveLink = paypalData.", _jsx(_components.span, { className: "hljs-property", children: "links" }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "find" }), "(", _jsxs(_components.span, { className: "hljs-function", children: ["(", _jsxs(_components.span, { className: "hljs-params", children: [_jsx(_components.span, { className: "hljs-attr", children: "link" }), ": ", _jsx(_components.span, { className: "hljs-built_in", children: "any" })] }), ") =>"] }), " link.", _jsx(_components.span, { className: "hljs-property", children: "rel" }), " === ", _jsx(_components.span, { className: "hljs-string", children: "\"approve\"" }), ")\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "if" }), " (!approveLink) {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " { ", _jsx(_components.span, { className: "hljs-attr", children: "success" }), ": ", _jsx(_components.span, { className: "hljs-literal", children: "false" }), ", ", _jsx(_components.span, { className: "hljs-attr", children: "error" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "\"Invalid PayPal response\"" }), " }\n }\n\n ", _jsx(_components.span, { className: "hljs-comment", children: "// Save donation to database" }), "\n ", _jsx(_components.span, { className: "hljs-keyword", children: "await" }), " prisma.", _jsx(_components.span, { className: "hljs-property", children: "donation" }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "create" }), "({\n ", _jsx(_components.span, { className: "hljs-attr", children: "data" }), ": {\n ", _jsx(_components.span, { className: "hljs-attr", children: "amount" }), ": data.", _jsx(_components.span, { className: "hljs-property", children: "amount" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "message" }), ": data.", _jsx(_components.span, { className: "hljs-property", children: "message" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "paypalOrderId" }), ": paypalData.", _jsx(_components.span, { className: "hljs-property", children: "id" }), ",\n userId,\n ", _jsx(_components.span, { className: "hljs-attr", children: "payerEmail" }), ": data.", _jsx(_components.span, { className: "hljs-property", children: "email" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "payerName" }), ": data.", _jsx(_components.span, { className: "hljs-property", children: "name" }), ",\n }\n })\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " {\n ", _jsx(_components.span, { className: "hljs-attr", children: "success" }), ": ", _jsx(_components.span, { className: "hljs-literal", children: "true" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "url" }), ": approveLink.", _jsx(_components.span, { className: "hljs-property", children: "href" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "orderId" }), ": paypalData.", _jsx(_components.span, { className: "hljs-property", children: "id" }), ",\n }\n } ", _jsx(_components.span, { className: "hljs-keyword", children: "catch" }), " (error) {\n ", _jsx(_components.span, { className: "hljs-variable language_", children: "console" }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "error" }), "(", _jsx(_components.span, { className: "hljs-string", children: "\"Donation creation error:\"" }), ", error)\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " { ", _jsx(_components.span, { className: "hljs-attr", children: "success" }), ": ", _jsx(_components.span, { className: "hljs-literal", children: "false" }), ", ", _jsx(_components.span, { className: "hljs-attr", children: "error" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "\"Failed to process donation request\"" }), " }\n }\n}\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "export" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "async" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "function" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "captureDonation" }), "(", _jsxs(_components.span, { className: "hljs-params", children: [_jsx(_components.span, { className: "hljs-attr", children: "orderId" }), ": ", _jsx(_components.span, { className: "hljs-built_in", children: "string" })] }), ") {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "try" }), " {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " clientId = process.", _jsx(_components.span, { className: "hljs-property", children: "env" }), ".", _jsx(_components.span, { className: "hljs-property", children: "PAYPAL_CLIENT_ID" }), "\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " clientSecret = process.", _jsx(_components.span, { className: "hljs-property", children: "env" }), ".", _jsx(_components.span, { className: "hljs-property", children: "PAYPAL_CLIENT_SECRET" }), "\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " environment = process.", _jsx(_components.span, { className: "hljs-property", children: "env" }), ".", _jsx(_components.span, { className: "hljs-property", children: "PAYPAL_ENVIRONMENT" }), " || ", _jsx(_components.span, { className: "hljs-string", children: "\"sandbox\"" }), "\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "if" }), " (!clientId || !clientSecret) {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "throw" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "new" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "Error" }), "(", _jsx(_components.span, { className: "hljs-string", children: "\"PayPal configuration missing\"" }), ")\n }\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " paypalApiUrl = environment === ", _jsx(_components.span, { className: "hljs-string", children: "\"production\"" }), " \n ? ", _jsx(_components.span, { className: "hljs-string", children: "\"https://api-m.paypal.com\"" }), " \n : ", _jsx(_components.span, { className: "hljs-string", children: "\"https://api-m.sandbox.paypal.com\"" }), "\n\n ", _jsx(_components.span, { className: "hljs-comment", children: "// Capture PayPal payment" }), "\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " response = ", _jsx(_components.span, { className: "hljs-keyword", children: "await" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "fetch" }), "(", _jsxs(_components.span, { className: "hljs-string", children: ["`", _jsx(_components.span, { className: "hljs-subst", children: "${paypalApiUrl}" }), "/v2/checkout/orders/", _jsx(_components.span, { className: "hljs-subst", children: "${orderId}" }), "/capture`"] }), ", {\n ", _jsx(_components.span, { className: "hljs-attr", children: "method" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "\"POST\"" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "headers" }), ": {\n ", _jsx(_components.span, { className: "hljs-string", children: "\"Content-Type\"" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "\"application/json\"" }), ",\n ", _jsx(_components.span, { className: "hljs-title class_", children: "Authorization" }), ": ", _jsxs(_components.span, { className: "hljs-string", children: ["`Basic ", _jsxs(_components.span, { className: "hljs-subst", children: ["${Buffer.", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), "(", _jsxs(_components.span, { className: "hljs-string", children: ["`", _jsx(_components.span, { className: "hljs-subst", children: "${clientId}" }), ":", _jsx(_components.span, { className: "hljs-subst", children: "${clientSecret}" }), "`"] }), ").toString(", _jsx(_components.span, { className: "hljs-string", children: "\"base64\"" }), ")}"] }), "`"] }), ",\n },\n })\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " data = ", _jsx(_components.span, { className: "hljs-keyword", children: "await" }), " response.", _jsx(_components.span, { className: "hljs-title function_", children: "json" }), "()\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "if" }), " (!response.", _jsx(_components.span, { className: "hljs-property", children: "ok" }), ") {\n ", _jsx(_components.span, { className: "hljs-variable language_", children: "console" }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "error" }), "(", _jsx(_components.span, { className: "hljs-string", children: "\"PayPal capture error:\"" }), ", data)\n ", _jsx(_components.span, { className: "hljs-keyword", children: "throw" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "new" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "Error" }), "(", _jsx(_components.span, { className: "hljs-string", children: "\"Failed to capture payment\"" }), ")\n }\n\n ", _jsx(_components.span, { className: "hljs-comment", children: "// Update donation in database" }), "\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " captureId = data.", _jsx(_components.span, { className: "hljs-property", children: "purchase_units" }), "?.[", _jsx(_components.span, { className: "hljs-number", children: "0" }), "]?.", _jsx(_components.span, { className: "hljs-property", children: "payments" }), "?.", _jsx(_components.span, { className: "hljs-property", children: "captures" }), "?.[", _jsx(_components.span, { className: "hljs-number", children: "0" }), "]?.", _jsx(_components.span, { className: "hljs-property", children: "id" }), "\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " donation = ", _jsx(_components.span, { className: "hljs-keyword", children: "await" }), " prisma.", _jsx(_components.span, { className: "hljs-property", children: "donation" }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "update" }), "({\n ", _jsx(_components.span, { className: "hljs-attr", children: "where" }), ": { ", _jsx(_components.span, { className: "hljs-attr", children: "paypalOrderId" }), ": orderId },\n ", _jsx(_components.span, { className: "hljs-attr", children: "data" }), ": {\n ", _jsx(_components.span, { className: "hljs-attr", children: "status" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "\"COMPLETED\"" }), ",\n captureId,\n }\n })\n\n ", _jsx(_components.span, { className: "hljs-comment", children: "// Send thank you email" }), "\n ", _jsx(_components.span, { className: "hljs-keyword", children: "if" }), " (donation.", _jsx(_components.span, { className: "hljs-property", children: "payerEmail" }), ") {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "await" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "sendDonationThankYou" }), "({\n ", _jsx(_components.span, { className: "hljs-attr", children: "donorName" }), ": donation.", _jsx(_components.span, { className: "hljs-property", children: "payerName" }), " || ", _jsx(_components.span, { className: "hljs-literal", children: "undefined" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "donorEmail" }), ": donation.", _jsx(_components.span, { className: "hljs-property", children: "payerEmail" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "amount" }), ": donation.", _jsx(_components.span, { className: "hljs-property", children: "amount" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "message" }), ": donation.", _jsx(_components.span, { className: "hljs-property", children: "message" }), " || ", _jsx(_components.span, { className: "hljs-literal", children: "undefined" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "donationId" }), ": donation.", _jsx(_components.span, { className: "hljs-property", children: "id" }), ",\n })\n }\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " { ", _jsx(_components.span, { className: "hljs-attr", children: "success" }), ": ", _jsx(_components.span, { className: "hljs-literal", children: "true" }), ", donation }\n } ", _jsx(_components.span, { className: "hljs-keyword", children: "catch" }), " (error) {\n ", _jsx(_components.span, { className: "hljs-variable language_", children: "console" }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "error" }), "(", _jsx(_components.span, { className: "hljs-string", children: "\"Donation capture error:\"" }), ", error)\n ", _jsx(_components.span, { className: "hljs-keyword", children: "throw" }), " error\n }\n}\n"] }) }), "\n", _jsx(_components.h3, { id: "create-donation-page", children: _jsx(_components.a, { href: "#create-donation-page", children: "Create Donation Page" }) }), "\n", _jsxs(_components.p, { children: ["Create ", _jsx(_components.code, { children: "app/support/page.tsx" }), ":"] }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-typescript", children: [_jsx(_components.span, { className: "hljs-string", children: "\"use client\"" }), "\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { useState } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "\"react\"" }), "\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { createDonation } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "\"@/actions/donations\"" }), "\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "export" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "default" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "function" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "SupportPage" }), "(", _jsx(_components.span, { className: "hljs-params" }), ") {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " [amount, setAmount] = ", _jsx(_components.span, { className: "hljs-title function_", children: "useState" }), "(", _jsx(_components.span, { className: "hljs-string", children: "\"5\"" }), ")\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " [customAmount, setCustomAmount] = ", _jsx(_components.span, { className: "hljs-title function_", children: "useState" }), "(", _jsx(_components.span, { className: "hljs-string", children: "\"\"" }), ")\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " [name, setName] = ", _jsx(_components.span, { className: "hljs-title function_", children: "useState" }), "(", _jsx(_components.span, { className: "hljs-string", children: "\"\"" }), ")\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " [email, setEmail] = ", _jsx(_components.span, { className: "hljs-title function_", children: "useState" }), "(", _jsx(_components.span, { className: "hljs-string", children: "\"\"" }), ")\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " [message, setMessage] = ", _jsx(_components.span, { className: "hljs-title function_", children: "useState" }), "(", _jsx(_components.span, { className: "hljs-string", children: "\"\"" }), ")\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " [isLoading, setIsLoading] = ", _jsx(_components.span, { className: "hljs-title function_", children: "useState" }), "(", _jsx(_components.span, { className: "hljs-literal", children: "false" }), ")\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " presetAmounts = [\n { ", _jsx(_components.span, { className: "hljs-attr", children: "value" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "\"3\"" }), ", ", _jsx(_components.span, { className: "hljs-attr", children: "label" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "\"$3\"" }), ", ", _jsx(_components.span, { className: "hljs-attr", children: "description" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "\"Small Coffee\"" }), " },\n { ", _jsx(_components.span, { className: "hljs-attr", children: "value" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "\"5\"" }), ", ", _jsx(_components.span, { className: "hljs-attr", children: "label" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "\"$5\"" }), ", ", _jsx(_components.span, { className: "hljs-attr", children: "description" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "\"Regular Coffee\"" }), " },\n { ", _jsx(_components.span, { className: "hljs-attr", children: "value" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "\"10\"" }), ", ", _jsx(_components.span, { className: "hljs-attr", children: "label" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "\"$10\"" }), ", ", _jsx(_components.span, { className: "hljs-attr", children: "description" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "\"Double Coffee\"" }), " },\n { ", _jsx(_components.span, { className: "hljs-attr", children: "value" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "\"25\"" }), ", ", _jsx(_components.span, { className: "hljs-attr", children: "label" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "\"$25\"" }), ", ", _jsx(_components.span, { className: "hljs-attr", children: "description" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "\"Coffee Pack\"" }), " },\n { ", _jsx(_components.span, { className: "hljs-attr", children: "value" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "\"50\"" }), ", ", _jsx(_components.span, { className: "hljs-attr", children: "label" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "\"$50\"" }), ", ", _jsx(_components.span, { className: "hljs-attr", children: "description" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "\"Super Support\"" }), " },\n ]\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "handleSupport" }), " = ", _jsx(_components.span, { className: "hljs-keyword", children: "async" }), " (", _jsx(_components.span, { className: "hljs-params" }), ") => {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "let" }), " finalAmount = amount\n \n ", _jsx(_components.span, { className: "hljs-keyword", children: "if" }), " (amount === ", _jsx(_components.span, { className: "hljs-string", children: "\"custom\"" }), ") {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "if" }), " (!customAmount || ", _jsx(_components.span, { className: "hljs-built_in", children: "isNaN" }), "(", _jsx(_components.span, { className: "hljs-title class_", children: "Number" }), "(customAmount)) || ", _jsx(_components.span, { className: "hljs-title class_", children: "Number" }), "(customAmount) < ", _jsx(_components.span, { className: "hljs-number", children: "1" }), ") {\n ", _jsx(_components.span, { className: "hljs-title function_", children: "alert" }), "(", _jsx(_components.span, { className: "hljs-string", children: "\"Please enter a valid amount (minimum $1)\"" }), ")\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), "\n }\n finalAmount = customAmount\n }\n\n ", _jsx(_components.span, { className: "hljs-title function_", children: "setIsLoading" }), "(", _jsx(_components.span, { className: "hljs-literal", children: "true" }), ")\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "try" }), " {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " result = ", _jsx(_components.span, { className: "hljs-keyword", children: "await" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "createDonation" }), "({\n ", _jsx(_components.span, { className: "hljs-attr", children: "amount" }), ": ", _jsx(_components.span, { className: "hljs-title class_", children: "Number" }), "(finalAmount),\n ", _jsx(_components.span, { className: "hljs-attr", children: "name" }), ": name || ", _jsx(_components.span, { className: "hljs-literal", children: "undefined" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "email" }), ": email || ", _jsx(_components.span, { className: "hljs-literal", children: "undefined" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "message" }), ": message || ", _jsx(_components.span, { className: "hljs-literal", children: "undefined" }), ",\n })\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "if" }), " (result.", _jsx(_components.span, { className: "hljs-property", children: "success" }), " && result.", _jsx(_components.span, { className: "hljs-property", children: "url" }), ") {\n ", _jsx(_components.span, { className: "hljs-variable language_", children: "window" }), ".", _jsx(_components.span, { className: "hljs-property", children: "location" }), ".", _jsx(_components.span, { className: "hljs-property", children: "href" }), " = result.", _jsx(_components.span, { className: "hljs-property", children: "url" }), "\n } ", _jsx(_components.span, { className: "hljs-keyword", children: "else" }), " {\n ", _jsx(_components.span, { className: "hljs-title function_", children: "alert" }), "(result.", _jsx(_components.span, { className: "hljs-property", children: "error" }), " || ", _jsx(_components.span, { className: "hljs-string", children: "\"Failed to process donation\"" }), ")\n }\n } ", _jsx(_components.span, { className: "hljs-keyword", children: "catch" }), " (error) {\n ", _jsx(_components.span, { className: "hljs-title function_", children: "alert" }), "(", _jsx(_components.span, { className: "hljs-string", children: "\"An error occurred. Please try again.\"" }), ")\n } ", _jsx(_components.span, { className: "hljs-keyword", children: "finally" }), " {\n ", _jsx(_components.span, { className: "hljs-title function_", children: "setIsLoading" }), "(", _jsx(_components.span, { className: "hljs-literal", children: "false" }), ")\n }\n }\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " (\n ", _jsxs(_components.span, { className: "xml", children: [_jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "div" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"min-h-screen bg-gradient-to-br from-rose-50 to-purple-50 py-12\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "div" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"max-w-4xl mx-auto px-4\"" }), ">"] }), "\n {/* Header */}\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "div" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"text-center mb-12\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "div" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"inline-flex items-center justify-center p-3 bg-gradient-to-r from-rose-500 to-purple-600 rounded-full mb-6 shadow-lg\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "svg" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"h-8 w-8 text-white\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "fill" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"none\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "stroke" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"currentColor\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "viewBox" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"0 0 24 24\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "path" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "strokeLinecap" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"round\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "strokeLinejoin" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"round\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "strokeWidth" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{2}" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "d" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z\"" }), " />"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "h1" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"text-4xl md:text-6xl font-bold mb-6 bg-gradient-to-r from-rose-600 to-purple-600 bg-clip-text text-transparent\"" }), ">"] }), "\n Support My Work\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "p" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"text-xl text-gray-600 max-w-3xl mx-auto leading-relaxed\"" }), ">"] }), "\n Your support helps me create high-quality projects, tutorials, and resources for developers worldwide.\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "div" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"grid md:grid-cols-2 gap-12 items-start\"" }), ">"] }), "\n {/* Left Column - Support Form */}\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "div" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"bg-white rounded-2xl p-8 shadow-xl border border-gray-100\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "div" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"mb-8\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "h2" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"text-2xl font-bold mb-2 flex items-center\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "svg" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"h-6 w-6 mr-2 text-rose-500\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "fill" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"none\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "stroke" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"currentColor\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "viewBox" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"0 0 24 24\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "path" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "strokeLinecap" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"round\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "strokeLinejoin" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"round\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "strokeWidth" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{2}" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "d" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1\"" }), " />"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n Buy Me a Coffee\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "p" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"text-gray-600\"" }), ">"] }), "Every coffee counts! Choose an amount that feels right for you.", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "div" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"space-y-6\"" }), ">"] }), "\n {/* Amount Selection */}\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "div" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "label" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"block text-sm font-medium mb-3\"" }), ">"] }), "Choose Amount (USD)", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "div" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"grid grid-cols-3 gap-3\"" }), ">"] }), "\n {presetAmounts.map((preset) => (\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "button" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "key" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{preset.value}" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "onClick" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{()" }), " =>"] }), " {\n setAmount(preset.value)\n setCustomAmount(\"\")\n }}\n className={`p-4 border-2 rounded-xl text-center transition-all ${\n amount === preset.value\n ? \"border-rose-500 bg-rose-50 text-rose-700\"\n : \"border-gray-200 hover:border-gray-300\"\n }`}\n >\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "div" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"font-semibold text-lg\"" }), ">"] }), "{preset.label}", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "div" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"text-xs text-gray-500\"" }), ">"] }), "{preset.description}", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ))}\n \n {/* Custom Amount Button */}\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "button" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "onClick" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{()" }), " =>"] }), " setAmount(\"custom\")}\n className={`p-4 border-2 rounded-xl text-center transition-all ${\n amount === \"custom\"\n ? \"border-rose-500 bg-rose-50 text-rose-700\"\n : \"border-gray-200 hover:border-gray-300\"\n }`}\n >\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "div" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"font-semibold text-lg\"" }), ">"] }), "Custom", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "div" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"text-xs text-gray-500\"" }), ">"] }), "Your Amount", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n\n {/* Custom Amount Input */}\n {amount === \"custom\" && (\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "div" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"animate-in slide-in-from-top-2 duration-200\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "label" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"block text-sm font-medium mb-2\"" }), ">"] }), "Enter Amount (USD)", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "div" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"relative\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "span" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"absolute left-3 top-1/2 -translate-y-1/2 text-gray-500\"" }), ">"] }), "$", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "input" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "type" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"number\"" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "min" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"1\"" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "step" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"1\"" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "placeholder" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"Enter amount\"" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"w-full pl-8 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-rose-500 focus:border-rose-500\"" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "value" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{customAmount}" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "onChange" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{(e)" }), " =>"] }), " setCustomAmount(e.target.value)}\n />\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n )}\n\n {/* Optional Fields */}\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "div" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"space-y-4 pt-6 border-t border-gray-200\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "div" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "label" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"block text-sm font-medium mb-2\"" }), ">"] }), "Your Name (Optional)", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "input" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "type" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"text\"" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "placeholder" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"John Doe\"" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "value" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{name}" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "onChange" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{(e)" }), " =>"] }), " setName(e.target.value)}\n className=\"w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-rose-500 focus:border-rose-500\"\n />\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "div" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "label" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"block text-sm font-medium mb-2\"" }), ">"] }), "Your Email (Optional)", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "input" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "type" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"email\"" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "placeholder" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"john@example.com\"" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "value" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{email}" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "onChange" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{(e)" }), " =>"] }), " setEmail(e.target.value)}\n className=\"w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-rose-500 focus:border-rose-500\"\n />\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "p" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"text-xs text-gray-500 mt-1\"" }), ">"] }), "I'll send you a thank you note if you provide your email.", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "div" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "label" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"block text-sm font-medium mb-2\"" }), ">"] }), "Message (Optional)", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "textarea" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "placeholder" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"Leave a message...\"" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-rose-500 focus:border-rose-500 resize-none\"" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "rows" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{3}" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "value" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{message}" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "onChange" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{(e)" }), " =>"] }), " setMessage(e.target.value)}\n />\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n\n {/* Support Button */}\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "button" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "onClick" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{handleSupport}" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "disabled" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{isLoading}" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"w-full bg-gradient-to-r from-rose-500 to-purple-600 hover:from-rose-600 hover:to-purple-700 text-white py-4 px-6 rounded-lg font-semibold text-lg shadow-lg transition-all disabled:opacity-50 disabled:cursor-not-allowed\"" }), "\n >"] }), "\n {isLoading ? (\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "span" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"flex items-center justify-center\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "svg" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"animate-spin -ml-1 mr-3 h-5 w-5 text-white\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "xmlns" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"http://www.w3.org/2000/svg\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "fill" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"none\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "viewBox" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"0 0 24 24\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "circle" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"opacity-25\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "cx" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"12\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "cy" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"12\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "r" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"10\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "stroke" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"currentColor\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "strokeWidth" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"4\"" }), ">"] }), _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "path" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"opacity-75\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "fill" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"currentColor\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "d" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"" }), ">"] }), _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n Processing...\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ) : (\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "span" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"flex items-center justify-center\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "svg" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"mr-2 h-5 w-5\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "fill" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"none\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "stroke" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"currentColor\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "viewBox" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"0 0 24 24\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "path" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "strokeLinecap" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"round\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "strokeLinejoin" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"round\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "strokeWidth" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{2}" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "d" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1\"" }), " />"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n Support with ${amount === \"custom\" ? customAmount || \"...\" : amount}\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n )}\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "p" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"text-xs text-gray-500 text-center flex items-center justify-center\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "svg" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"h-4 w-4 mr-1\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "viewBox" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"0 0 24 24\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "fill" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"none\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "xmlns" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"http://www.w3.org/2000/svg\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "path" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "d" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"M19 11H5C3.89543 11 3 11.8954 3 13V20C3 21.1046 3.89543 22 5 22H19C20.1046 22 21 21.1046 21 20V13C21 11.8954 20.1046 11 19 11Z\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "stroke" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"currentColor\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "strokeWidth" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"2\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "strokeLinecap" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"round\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "strokeLinejoin" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"round\"" }), "/>"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "path" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "d" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"M7 11V7C7 5.93913 7.42143 4.92172 8.17157 4.17157C8.92172 3.42143 9.93913 3 11 3C12.0609 3 13.0783 3.42143 13.8284 4.17157C14.5786 4.92172 15 5.93913 15 7V11\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "stroke" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"currentColor\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "strokeWidth" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"2\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "strokeLinecap" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"round\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "strokeLinejoin" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"round\"" }), "/>"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n Secure payment powered by PayPal. No account required.\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n\n {/* Right Column - Why Support */}\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "div" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"space-y-6\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "div" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"bg-white rounded-2xl p-8 shadow-xl border border-gray-100\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "h2" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"text-2xl font-bold mb-4 bg-gradient-to-r from-rose-500 to-purple-600 bg-clip-text text-transparent\"" }), ">"] }), "\n Why Your Support Matters\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "p" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"text-gray-600 mb-6\"" }), ">"] }), "\n Behind every line of code and tutorial is countless hours of work. Your support helps me:\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n \n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "ul" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"space-y-4\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "li" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"flex items-start\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "div" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"flex-shrink-0 h-10 w-10 rounded-full bg-gradient-to-br from-rose-400 to-rose-600 flex items-center justify-center mr-4\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "svg" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"h-5 w-5 text-white\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "fill" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"none\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "stroke" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"currentColor\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "viewBox" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"0 0 24 24\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "path" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "strokeLinecap" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"round\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "strokeLinejoin" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"round\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "strokeWidth" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{2}" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "d" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4\"" }), " />"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "div" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "h3" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"font-semibold text-lg\"" }), ">"] }), "Create Free Resources", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "p" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"text-gray-600\"" }), ">"] }), "Develop open-source projects and templates that help developers worldwide.", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n \n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "li" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"flex items-start\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "div" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"flex-shrink-0 h-10 w-10 rounded-full bg-gradient-to-br from-purple-400 to-purple-600 flex items-center justify-center mr-4\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "svg" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"h-5 w-5 text-white\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "fill" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"none\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "stroke" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"currentColor\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "viewBox" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"0 0 24 24\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "path" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "strokeLinecap" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"round\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "strokeLinejoin" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"round\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "strokeWidth" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{2}" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "d" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"M13 10V3L4 14h7v7l9-11h-7z\"" }), " />"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "div" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "h3" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"font-semibold text-lg\"" }), ">"] }), "Improve Quality", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "p" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"text-gray-600\"" }), ">"] }), "Invest in better tools and resources to enhance everything I create.", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n \n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "li" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"flex items-start\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "div" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"flex-shrink-0 h-10 w-10 rounded-full bg-gradient-to-br from-amber-400 to-amber-600 flex items-center justify-center mr-4\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "svg" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"h-5 w-5 text-white\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "fill" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"none\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "stroke" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"currentColor\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "viewBox" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"0 0 24 24\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "path" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "strokeLinecap" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"round\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "strokeLinejoin" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"round\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "strokeWidth" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{2}" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "d" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z\"" }), " />"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "div" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "h3" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"font-semibold text-lg\"" }), ">"] }), "Explore New Ideas", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "p" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"text-gray-600\"" }), ">"] }), "Experiment with innovative concepts and technologies.", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] })] }), "\n )\n}\n"] }) }), "\n", _jsx(_components.h2, { id: "example-2-product-sales-template-store", children: _jsx(_components.a, { href: "#example-2-product-sales-template-store", children: "Example 2: Product Sales (Template Store)" }) }), "\n", _jsx(_components.h3, { id: "create-product-types-and-data", children: _jsx(_components.a, { href: "#create-product-types-and-data", children: "Create Product Types and Data" }) }), "\n", _jsxs(_components.p, { children: ["Create ", _jsx(_components.code, { children: "types/product.ts" }), ":"] }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-typescript", children: [_jsx(_components.span, { className: "hljs-keyword", children: "export" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "interface" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "Product" }), " {\n ", _jsx(_components.span, { className: "hljs-attr", children: "id" }), ": ", _jsx(_components.span, { className: "hljs-built_in", children: "string" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "name" }), ": ", _jsx(_components.span, { className: "hljs-built_in", children: "string" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "description" }), ": ", _jsx(_components.span, { className: "hljs-built_in", children: "string" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "price" }), ": ", _jsx(_components.span, { className: "hljs-built_in", children: "number" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "image" }), ": ", _jsx(_components.span, { className: "hljs-built_in", children: "string" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "downloadUrl" }), "?: ", _jsx(_components.span, { className: "hljs-built_in", children: "string" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "features" }), ": ", _jsx(_components.span, { className: "hljs-built_in", children: "string" }), "[]\n ", _jsx(_components.span, { className: "hljs-attr", children: "category" }), ": ", _jsx(_components.span, { className: "hljs-built_in", children: "string" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "discount" }), "?: ", _jsx(_components.span, { className: "hljs-built_in", children: "number" }), "\n}\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "export" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "interface" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "PaymentDetails" }), " {\n ", _jsx(_components.span, { className: "hljs-attr", children: "productId" }), ": ", _jsx(_components.span, { className: "hljs-built_in", children: "string" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "productName" }), ": ", _jsx(_components.span, { className: "hljs-built_in", children: "string" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "price" }), ": ", _jsx(_components.span, { className: "hljs-built_in", children: "number" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "quantity" }), ": ", _jsx(_components.span, { className: "hljs-built_in", children: "number" }), "\n}\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "export" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "interface" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "PaymentResponse" }), " {\n ", _jsx(_components.span, { className: "hljs-attr", children: "success" }), ": ", _jsx(_components.span, { className: "hljs-built_in", children: "boolean" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "url" }), "?: ", _jsx(_components.span, { className: "hljs-built_in", children: "string" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "error" }), "?: ", _jsx(_components.span, { className: "hljs-built_in", children: "string" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "orderId" }), "?: ", _jsx(_components.span, { className: "hljs-built_in", children: "string" }), "\n}\n"] }) }), "\n", _jsxs(_components.p, { children: ["Create ", _jsx(_components.code, { children: "data/products.ts" }), ":"] }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-typescript", children: [_jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { ", _jsx(_components.span, { className: "hljs-title class_", children: "Product" }), " } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "\"@/types/product\"" }), "\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "export" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "products" }), ": ", _jsx(_components.span, { className: "hljs-title class_", children: "Product" }), "[] = [\n {\n ", _jsx(_components.span, { className: "hljs-attr", children: "id" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "\"nextjs-dashboard-pro\"" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "name" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "\"Next.js Dashboard Pro\"" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "description" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "\"Complete admin dashboard with charts, tables, and user management\"" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "price" }), ": ", _jsx(_components.span, { className: "hljs-number", children: "79" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "image" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "\"/images/dashboard-pro.jpg\"" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "downloadUrl" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "\"/downloads/nextjs-dashboard-pro.zip\"" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "features" }), ": [\n ", _jsx(_components.span, { className: "hljs-string", children: "\"Next.js 16 + TypeScript\"" }), ",\n ", _jsx(_components.span, { className: "hljs-string", children: "\"50+ Dashboard Components\"" }), ",\n ", _jsx(_components.span, { className: "hljs-string", children: "\"Authentication System\"" }), ",\n ", _jsx(_components.span, { className: "hljs-string", children: "\"Charts & Analytics\"" }), ",\n ", _jsx(_components.span, { className: "hljs-string", children: "\"User Management\"" }), ",\n ", _jsx(_components.span, { className: "hljs-string", children: "\"Dark/Light Mode\"" }), ",\n ", _jsx(_components.span, { className: "hljs-string", children: "\"Mobile Responsive\"" }), ",\n ", _jsx(_components.span, { className: "hljs-string", children: "\"6 Months Support\"" }), "\n ],\n ", _jsx(_components.span, { className: "hljs-attr", children: "category" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "\"dashboard\"" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "discount" }), ": ", _jsx(_components.span, { className: "hljs-number", children: "20" }), "\n },\n {\n ", _jsx(_components.span, { className: "hljs-attr", children: "id" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "\"react-ecommerce-starter\"" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "name" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "\"React E-commerce Starter\"" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "description" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "\"Modern e-commerce template with cart, checkout, and admin panel\"" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "price" }), ": ", _jsx(_components.span, { className: "hljs-number", children: "59" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "image" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "\"/images/ecommerce-starter.jpg\"" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "downloadUrl" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "\"/downloads/react-ecommerce-starter.zip\"" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "features" }), ": [\n ", _jsx(_components.span, { className: "hljs-string", children: "\"React 18 + TypeScript\"" }), ",\n ", _jsx(_components.span, { className: "hljs-string", children: "\"Shopping Cart\"" }), ",\n ", _jsx(_components.span, { className: "hljs-string", children: "\"Payment Integration\"" }), ",\n ", _jsx(_components.span, { className: "hljs-string", children: "\"Admin Dashboard\"" }), ",\n ", _jsx(_components.span, { className: "hljs-string", children: "\"Product Management\"" }), ",\n ", _jsx(_components.span, { className: "hljs-string", children: "\"Order Tracking\"" }), ",\n ", _jsx(_components.span, { className: "hljs-string", children: "\"SEO Optimized\"" }), ",\n ", _jsx(_components.span, { className: "hljs-string", children: "\"3 Months Support\"" }), "\n ],\n ", _jsx(_components.span, { className: "hljs-attr", children: "category" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "\"ecommerce\"" }), "\n },\n {\n ", _jsx(_components.span, { className: "hljs-attr", children: "id" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "\"saas-landing-template\"" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "name" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "\"SaaS Landing Template\"" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "description" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "\"High-converting landing page template for SaaS products\"" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "price" }), ": ", _jsx(_components.span, { className: "hljs-number", children: "39" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "image" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "\"/images/saas-landing.jpg\"" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "downloadUrl" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "\"/downloads/saas-landing-template.zip\"" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "features" }), ": [\n ", _jsx(_components.span, { className: "hljs-string", children: "\"Next.js 16\"" }), ",\n ", _jsx(_components.span, { className: "hljs-string", children: "\"Tailwind CSS\"" }), ",\n ", _jsx(_components.span, { className: "hljs-string", children: "\"Conversion Optimized\"" }), ",\n ", _jsx(_components.span, { className: "hljs-string", children: "\"Contact Forms\"" }), ",\n ", _jsx(_components.span, { className: "hljs-string", children: "\"Testimonials Section\"" }), ",\n ", _jsx(_components.span, { className: "hljs-string", children: "\"Pricing Tables\"" }), ",\n ", _jsx(_components.span, { className: "hljs-string", children: "\"Blog Ready\"" }), ",\n ", _jsx(_components.span, { className: "hljs-string", children: "\"1 Month Support\"" }), "\n ],\n ", _jsx(_components.span, { className: "hljs-attr", children: "category" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "\"landing\"" }), "\n }\n]\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "export" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "function" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "getProductById" }), "(", _jsxs(_components.span, { className: "hljs-params", children: [_jsx(_components.span, { className: "hljs-attr", children: "id" }), ": ", _jsx(_components.span, { className: "hljs-built_in", children: "string" })] }), "): ", _jsx(_components.span, { className: "hljs-title class_", children: "Product" }), " | ", _jsx(_components.span, { className: "hljs-literal", children: "undefined" }), " {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " products.", _jsx(_components.span, { className: "hljs-title function_", children: "find" }), "(", _jsxs(_components.span, { className: "hljs-function", children: [_jsx(_components.span, { className: "hljs-params", children: "product" }), " =>"] }), " product.", _jsx(_components.span, { className: "hljs-property", children: "id" }), " === id)\n}\n"] }) }), "\n", _jsx(_components.h3, { id: "create-product-sales-action", children: _jsx(_components.a, { href: "#create-product-sales-action", children: "Create Product Sales Action" }) }), "\n", _jsxs(_components.p, { children: ["Create ", _jsx(_components.code, { children: "actions/products.ts" }), ":"] }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-typescript", children: [_jsx(_components.span, { className: "hljs-string", children: "\"use server\"" }), "\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { prisma } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "\"@/lib/prisma\"" }), "\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { getProductById } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "\"@/data/products\"" }), "\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { sendOrderConfirmation } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "\"@/lib/email\"" }), "\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { ", _jsx(_components.span, { className: "hljs-title class_", children: "PaymentDetails" }), ", ", _jsx(_components.span, { className: "hljs-title class_", children: "PaymentResponse" }), " } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "\"@/types/product\"" }), "\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "export" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "async" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "function" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "createProductOrder" }), "(", _jsxs(_components.span, { className: "hljs-params", children: [_jsx(_components.span, { className: "hljs-attr", children: "details" }), ": ", _jsx(_components.span, { className: "hljs-title class_", children: "PaymentDetails" })] }), "): ", _jsx(_components.span, { className: "hljs-title class_", children: "Promise" }), "<", _jsx(_components.span, { className: "hljs-title class_", children: "PaymentResponse" }), "> {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "try" }), " {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " clientId = process.", _jsx(_components.span, { className: "hljs-property", children: "env" }), ".", _jsx(_components.span, { className: "hljs-property", children: "PAYPAL_CLIENT_ID" }), "\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " clientSecret = process.", _jsx(_components.span, { className: "hljs-property", children: "env" }), ".", _jsx(_components.span, { className: "hljs-property", children: "PAYPAL_CLIENT_SECRET" }), "\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " baseUrl = process.", _jsx(_components.span, { className: "hljs-property", children: "env" }), ".", _jsx(_components.span, { className: "hljs-property", children: "NEXT_PUBLIC_BASE_URL" }), " || ", _jsx(_components.span, { className: "hljs-string", children: "\"http://localhost:3000\"" }), "\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " environment = process.", _jsx(_components.span, { className: "hljs-property", children: "env" }), ".", _jsx(_components.span, { className: "hljs-property", children: "PAYPAL_ENVIRONMENT" }), " || ", _jsx(_components.span, { className: "hljs-string", children: "\"sandbox\"" }), "\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "if" }), " (!clientId || !clientSecret) {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " { ", _jsx(_components.span, { className: "hljs-attr", children: "success" }), ": ", _jsx(_components.span, { className: "hljs-literal", children: "false" }), ", ", _jsx(_components.span, { className: "hljs-attr", children: "error" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "\"PayPal configuration missing\"" }), " }\n }\n\n ", _jsx(_components.span, { className: "hljs-comment", children: "// Verify product exists and price matches" }), "\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " product = ", _jsx(_components.span, { className: "hljs-title function_", children: "getProductById" }), "(details.", _jsx(_components.span, { className: "hljs-property", children: "productId" }), ")\n ", _jsx(_components.span, { className: "hljs-keyword", children: "if" }), " (!product) {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " { ", _jsx(_components.span, { className: "hljs-attr", children: "success" }), ": ", _jsx(_components.span, { className: "hljs-literal", children: "false" }), ", ", _jsx(_components.span, { className: "hljs-attr", children: "error" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "\"Product not found\"" }), " }\n }\n\n ", _jsx(_components.span, { className: "hljs-comment", children: "// Calculate final price with discount" }), "\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " finalPrice = product.", _jsx(_components.span, { className: "hljs-property", children: "discount" }), " \n ? product.", _jsx(_components.span, { className: "hljs-property", children: "price" }), " - (product.", _jsx(_components.span, { className: "hljs-property", children: "price" }), " * product.", _jsx(_components.span, { className: "hljs-property", children: "discount" }), " / ", _jsx(_components.span, { className: "hljs-number", children: "100" }), ")\n : product.", _jsx(_components.span, { className: "hljs-property", children: "price" }), "\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "if" }), " (", _jsx(_components.span, { className: "hljs-title class_", children: "Math" }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "abs" }), "(finalPrice - details.", _jsx(_components.span, { className: "hljs-property", children: "price" }), ") > ", _jsx(_components.span, { className: "hljs-number", children: "0.01" }), ") {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " { ", _jsx(_components.span, { className: "hljs-attr", children: "success" }), ": ", _jsx(_components.span, { className: "hljs-literal", children: "false" }), ", ", _jsx(_components.span, { className: "hljs-attr", children: "error" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "\"Price mismatch\"" }), " }\n }\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " paypalApiUrl = environment === ", _jsx(_components.span, { className: "hljs-string", children: "\"production\"" }), " \n ? ", _jsx(_components.span, { className: "hljs-string", children: "\"https://api-m.paypal.com\"" }), " \n : ", _jsx(_components.span, { className: "hljs-string", children: "\"https://api-m.sandbox.paypal.com\"" }), "\n\n ", _jsx(_components.span, { className: "hljs-comment", children: "// Create PayPal order" }), "\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " response = ", _jsx(_components.span, { className: "hljs-keyword", children: "await" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "fetch" }), "(", _jsxs(_components.span, { className: "hljs-string", children: ["`", _jsx(_components.span, { className: "hljs-subst", children: "${paypalApiUrl}" }), "/v2/checkout/orders`"] }), ", {\n ", _jsx(_components.span, { className: "hljs-attr", children: "method" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "\"POST\"" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "headers" }), ": {\n ", _jsx(_components.span, { className: "hljs-string", children: "\"Content-Type\"" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "\"application/json\"" }), ",\n ", _jsx(_components.span, { className: "hljs-title class_", children: "Authorization" }), ": ", _jsxs(_components.span, { className: "hljs-string", children: ["`Basic ", _jsxs(_components.span, { className: "hljs-subst", children: ["${Buffer.", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), "(", _jsxs(_components.span, { className: "hljs-string", children: ["`", _jsx(_components.span, { className: "hljs-subst", children: "${clientId}" }), ":", _jsx(_components.span, { className: "hljs-subst", children: "${clientSecret}" }), "`"] }), ").toString(", _jsx(_components.span, { className: "hljs-string", children: "\"base64\"" }), ")}"] }), "`"] }), ",\n },\n ", _jsx(_components.span, { className: "hljs-attr", children: "body" }), ": ", _jsx(_components.span, { className: "hljs-title class_", children: "JSON" }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "stringify" }), "({\n ", _jsx(_components.span, { className: "hljs-attr", children: "intent" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "\"CAPTURE\"" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "purchase_units" }), ": [{\n ", _jsx(_components.span, { className: "hljs-attr", children: "items" }), ": [{\n ", _jsx(_components.span, { className: "hljs-attr", children: "name" }), ": details.", _jsx(_components.span, { className: "hljs-property", children: "productName" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "quantity" }), ": details.", _jsx(_components.span, { className: "hljs-property", children: "quantity" }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "toString" }), "(),\n ", _jsx(_components.span, { className: "hljs-attr", children: "unit_amount" }), ": {\n ", _jsx(_components.span, { className: "hljs-attr", children: "currency_code" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "\"USD\"" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "value" }), ": finalPrice.", _jsx(_components.span, { className: "hljs-title function_", children: "toFixed" }), "(", _jsx(_components.span, { className: "hljs-number", children: "2" }), "),\n },\n }],\n ", _jsx(_components.span, { className: "hljs-attr", children: "amount" }), ": {\n ", _jsx(_components.span, { className: "hljs-attr", children: "currency_code" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "\"USD\"" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "value" }), ": (finalPrice * details.", _jsx(_components.span, { className: "hljs-property", children: "quantity" }), ").", _jsx(_components.span, { className: "hljs-title function_", children: "toFixed" }), "(", _jsx(_components.span, { className: "hljs-number", children: "2" }), "),\n ", _jsx(_components.span, { className: "hljs-attr", children: "breakdown" }), ": {\n ", _jsx(_components.span, { className: "hljs-attr", children: "item_total" }), ": {\n ", _jsx(_components.span, { className: "hljs-attr", children: "currency_code" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "\"USD\"" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "value" }), ": (finalPrice * details.", _jsx(_components.span, { className: "hljs-property", children: "quantity" }), ").", _jsx(_components.span, { className: "hljs-title function_", children: "toFixed" }), "(", _jsx(_components.span, { className: "hljs-number", children: "2" }), "),\n },\n },\n },\n }],\n ", _jsx(_components.span, { className: "hljs-attr", children: "application_context" }), ": {\n ", _jsx(_components.span, { className: "hljs-attr", children: "return_url" }), ": ", _jsxs(_components.span, { className: "hljs-string", children: ["`", _jsx(_components.span, { className: "hljs-subst", children: "${baseUrl}" }), "/store/success?product=", _jsx(_components.span, { className: "hljs-subst", children: "${details.productId}" }), "`"] }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "cancel_url" }), ": ", _jsxs(_components.span, { className: "hljs-string", children: ["`", _jsx(_components.span, { className: "hljs-subst", children: "${baseUrl}" }), "/store/cancelled`"] }), ",\n },\n }),\n })\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "if" }), " (!response.", _jsx(_components.span, { className: "hljs-property", children: "ok" }), ") {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " errorData = ", _jsx(_components.span, { className: "hljs-keyword", children: "await" }), " response.", _jsx(_components.span, { className: "hljs-title function_", children: "json" }), "()\n ", _jsx(_components.span, { className: "hljs-variable language_", children: "console" }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "error" }), "(", _jsx(_components.span, { className: "hljs-string", children: "\"PayPal API error:\"" }), ", errorData)\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " { ", _jsx(_components.span, { className: "hljs-attr", children: "success" }), ": ", _jsx(_components.span, { className: "hljs-literal", children: "false" }), ", ", _jsx(_components.span, { className: "hljs-attr", children: "error" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "\"Failed to create payment\"" }), " }\n }\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " paypalData = ", _jsx(_components.span, { className: "hljs-keyword", children: "await" }), " response.", _jsx(_components.span, { className: "hljs-title function_", children: "json" }), "()\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " approveLink = paypalData.", _jsx(_components.span, { className: "hljs-property", children: "links" }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "find" }), "(", _jsxs(_components.span, { className: "hljs-function", children: ["(", _jsxs(_components.span, { className: "hljs-params", children: [_jsx(_components.span, { className: "hljs-attr", children: "link" }), ": ", _jsx(_components.span, { className: "hljs-built_in", children: "any" })] }), ") =>"] }), " link.", _jsx(_components.span, { className: "hljs-property", children: "rel" }), " === ", _jsx(_components.span, { className: "hljs-string", children: "\"approve\"" }), ")\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "if" }), " (!approveLink) {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " { ", _jsx(_components.span, { className: "hljs-attr", children: "success" }), ": ", _jsx(_components.span, { className: "hljs-literal", children: "false" }), ", ", _jsx(_components.span, { className: "hljs-attr", children: "error" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "\"Invalid PayPal response\"" }), " }\n }\n\n ", _jsx(_components.span, { className: "hljs-comment", children: "// Save order to database" }), "\n ", _jsx(_components.span, { className: "hljs-keyword", children: "await" }), " prisma.", _jsx(_components.span, { className: "hljs-property", children: "order" }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "create" }), "({\n ", _jsx(_components.span, { className: "hljs-attr", children: "data" }), ": {\n ", _jsx(_components.span, { className: "hljs-attr", children: "paypalOrderId" }), ": paypalData.", _jsx(_components.span, { className: "hljs-property", children: "id" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "total" }), ": finalPrice * details.", _jsx(_components.span, { className: "hljs-property", children: "quantity" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "items" }), ": {\n ", _jsx(_components.span, { className: "hljs-attr", children: "create" }), ": {\n ", _jsx(_components.span, { className: "hljs-attr", children: "productId" }), ": details.", _jsx(_components.span, { className: "hljs-property", children: "productId" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "quantity" }), ": details.", _jsx(_components.span, { className: "hljs-property", children: "quantity" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "price" }), ": finalPrice,\n }\n }\n }\n })\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " {\n ", _jsx(_components.span, { className: "hljs-attr", children: "success" }), ": ", _jsx(_components.span, { className: "hljs-literal", children: "true" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "url" }), ": approveLink.", _jsx(_components.span, { className: "hljs-property", children: "href" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "orderId" }), ": paypalData.", _jsx(_components.span, { className: "hljs-property", children: "id" }), ",\n }\n } ", _jsx(_components.span, { className: "hljs-keyword", children: "catch" }), " (error) {\n ", _jsx(_components.span, { className: "hljs-variable language_", children: "console" }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "error" }), "(", _jsx(_components.span, { className: "hljs-string", children: "\"Product order creation error:\"" }), ", error)\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " { ", _jsx(_components.span, { className: "hljs-attr", children: "success" }), ": ", _jsx(_components.span, { className: "hljs-literal", children: "false" }), ", ", _jsx(_components.span, { className: "hljs-attr", children: "error" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "\"Failed to process order request\"" }), " }\n }\n}\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "export" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "async" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "function" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "captureProductOrder" }), "(", _jsxs(_components.span, { className: "hljs-params", children: [_jsx(_components.span, { className: "hljs-attr", children: "orderId" }), ": ", _jsx(_components.span, { className: "hljs-built_in", children: "string" })] }), ") {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "try" }), " {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " clientId = process.", _jsx(_components.span, { className: "hljs-property", children: "env" }), ".", _jsx(_components.span, { className: "hljs-property", children: "PAYPAL_CLIENT_ID" }), "\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " clientSecret = process.", _jsx(_components.span, { className: "hljs-property", children: "env" }), ".", _jsx(_components.span, { className: "hljs-property", children: "PAYPAL_CLIENT_SECRET" }), "\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " environment = process.", _jsx(_components.span, { className: "hljs-property", children: "env" }), ".", _jsx(_components.span, { className: "hljs-property", children: "PAYPAL_ENVIRONMENT" }), " || ", _jsx(_components.span, { className: "hljs-string", children: "\"sandbox\"" }), "\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "if" }), " (!clientId || !clientSecret) {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "throw" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "new" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "Error" }), "(", _jsx(_components.span, { className: "hljs-string", children: "\"PayPal configuration missing\"" }), ")\n }\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " paypalApiUrl = environment === ", _jsx(_components.span, { className: "hljs-string", children: "\"production\"" }), " \n ? ", _jsx(_components.span, { className: "hljs-string", children: "\"https://api-m.paypal.com\"" }), " \n : ", _jsx(_components.span, { className: "hljs-string", children: "\"https://api-m.sandbox.paypal.com\"" }), "\n\n ", _jsx(_components.span, { className: "hljs-comment", children: "// Capture PayPal payment" }), "\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " response = ", _jsx(_components.span, { className: "hljs-keyword", children: "await" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "fetch" }), "(", _jsxs(_components.span, { className: "hljs-string", children: ["`", _jsx(_components.span, { className: "hljs-subst", children: "${paypalApiUrl}" }), "/v2/checkout/orders/", _jsx(_components.span, { className: "hljs-subst", children: "${orderId}" }), "/capture`"] }), ", {\n ", _jsx(_components.span, { className: "hljs-attr", children: "method" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "\"POST\"" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "headers" }), ": {\n ", _jsx(_components.span, { className: "hljs-string", children: "\"Content-Type\"" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "\"application/json\"" }), ",\n ", _jsx(_components.span, { className: "hljs-title class_", children: "Authorization" }), ": ", _jsxs(_components.span, { className: "hljs-string", children: ["`Basic ", _jsxs(_components.span, { className: "hljs-subst", children: ["${Buffer.", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), "(", _jsxs(_components.span, { className: "hljs-string", children: ["`", _jsx(_components.span, { className: "hljs-subst", children: "${clientId}" }), ":", _jsx(_components.span, { className: "hljs-subst", children: "${clientSecret}" }), "`"] }), ").toString(", _jsx(_components.span, { className: "hljs-string", children: "\"base64\"" }), ")}"] }), "`"] }), ",\n },\n })\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " data = ", _jsx(_components.span, { className: "hljs-keyword", children: "await" }), " response.", _jsx(_components.span, { className: "hljs-title function_", children: "json" }), "()\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "if" }), " (!response.", _jsx(_components.span, { className: "hljs-property", children: "ok" }), ") {\n ", _jsx(_components.span, { className: "hljs-variable language_", children: "console" }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "error" }), "(", _jsx(_components.span, { className: "hljs-string", children: "\"PayPal capture error:\"" }), ", data)\n ", _jsx(_components.span, { className: "hljs-keyword", children: "throw" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "new" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "Error" }), "(", _jsx(_components.span, { className: "hljs-string", children: "\"Failed to capture payment\"" }), ")\n }\n\n ", _jsx(_components.span, { className: "hljs-comment", children: "// Update order in database" }), "\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " captureId = data.", _jsx(_components.span, { className: "hljs-property", children: "purchase_units" }), "?.[", _jsx(_components.span, { className: "hljs-number", children: "0" }), "]?.", _jsx(_components.span, { className: "hljs-property", children: "payments" }), "?.", _jsx(_components.span, { className: "hljs-property", children: "captures" }), "?.[", _jsx(_components.span, { className: "hljs-number", children: "0" }), "]?.", _jsx(_components.span, { className: "hljs-property", children: "id" }), "\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " payerEmail = data.", _jsx(_components.span, { className: "hljs-property", children: "payer" }), "?.", _jsx(_components.span, { className: "hljs-property", children: "email_address" }), "\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " payerName = ", _jsxs(_components.span, { className: "hljs-string", children: ["`", _jsxs(_components.span, { className: "hljs-subst", children: ["${data.payer?.name?.given_name || ", _jsx(_components.span, { className: "hljs-string", children: "''" }), "}"] }), " ", _jsxs(_components.span, { className: "hljs-subst", children: ["${data.payer?.name?.surname || ", _jsx(_components.span, { className: "hljs-string", children: "''" }), "}"] }), "`"] }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "trim" }), "()\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " order = ", _jsx(_components.span, { className: "hljs-keyword", children: "await" }), " prisma.", _jsx(_components.span, { className: "hljs-property", children: "order" }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "update" }), "({\n ", _jsx(_components.span, { className: "hljs-attr", children: "where" }), ": { ", _jsx(_components.span, { className: "hljs-attr", children: "paypalOrderId" }), ": orderId },\n ", _jsx(_components.span, { className: "hljs-attr", children: "data" }), ": {\n ", _jsx(_components.span, { className: "hljs-attr", children: "status" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "\"COMPLETED\"" }), ",\n captureId,\n payerEmail,\n ", _jsx(_components.span, { className: "hljs-attr", children: "payerName" }), ": payerName || ", _jsx(_components.span, { className: "hljs-literal", children: "undefined" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "customerEmail" }), ": payerEmail,\n ", _jsx(_components.span, { className: "hljs-attr", children: "customerName" }), ": payerName || ", _jsx(_components.span, { className: "hljs-literal", children: "undefined" }), ",\n },\n ", _jsx(_components.span, { className: "hljs-attr", children: "include" }), ": {\n ", _jsx(_components.span, { className: "hljs-attr", children: "items" }), ": {\n ", _jsx(_components.span, { className: "hljs-attr", children: "include" }), ": {\n ", _jsx(_components.span, { className: "hljs-attr", children: "product" }), ": ", _jsx(_components.span, { className: "hljs-literal", children: "true" }), "\n }\n }\n }\n })\n\n ", _jsx(_components.span, { className: "hljs-comment", children: "// Send order confirmation email" }), "\n ", _jsx(_components.span, { className: "hljs-keyword", children: "if" }), " (order.", _jsx(_components.span, { className: "hljs-property", children: "customerEmail" }), ") {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " downloadLinks = order.", _jsx(_components.span, { className: "hljs-property", children: "items" }), "\n .", _jsx(_components.span, { className: "hljs-title function_", children: "map" }), "(", _jsxs(_components.span, { className: "hljs-function", children: [_jsx(_components.span, { className: "hljs-params", children: "item" }), " =>"] }), " item.", _jsx(_components.span, { className: "hljs-property", children: "product" }), ".", _jsx(_components.span, { className: "hljs-property", children: "downloadUrl" }), ")\n .", _jsx(_components.span, { className: "hljs-title function_", children: "filter" }), "(", _jsx(_components.span, { className: "hljs-title class_", children: "Boolean" }), ") ", _jsx(_components.span, { className: "hljs-keyword", children: "as" }), " ", _jsx(_components.span, { className: "hljs-built_in", children: "string" }), "[]\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "await" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "sendOrderConfirmation" }), "({\n ", _jsx(_components.span, { className: "hljs-attr", children: "customerName" }), ": order.", _jsx(_components.span, { className: "hljs-property", children: "customerName" }), " || ", _jsx(_components.span, { className: "hljs-literal", children: "undefined" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "customerEmail" }), ": order.", _jsx(_components.span, { className: "hljs-property", children: "customerEmail" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "orderTotal" }), ": order.", _jsx(_components.span, { className: "hljs-property", children: "total" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "items" }), ": order.", _jsx(_components.span, { className: "hljs-property", children: "items" }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "map" }), "(", _jsxs(_components.span, { className: "hljs-function", children: [_jsx(_components.span, { className: "hljs-params", children: "item" }), " =>"] }), " ({\n ", _jsx(_components.span, { className: "hljs-attr", children: "name" }), ": item.", _jsx(_components.span, { className: "hljs-property", children: "product" }), ".", _jsx(_components.span, { className: "hljs-property", children: "name" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "price" }), ": item.", _jsx(_components.span, { className: "hljs-property", children: "price" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "quantity" }), ": item.", _jsx(_components.span, { className: "hljs-property", children: "quantity" }), ",\n })),\n ", _jsx(_components.span, { className: "hljs-attr", children: "orderId" }), ": order.", _jsx(_components.span, { className: "hljs-property", children: "id" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "downloadLinks" }), ": downloadLinks.", _jsx(_components.span, { className: "hljs-property", children: "length" }), " > ", _jsx(_components.span, { className: "hljs-number", children: "0" }), " ? downloadLinks : ", _jsx(_components.span, { className: "hljs-literal", children: "undefined" }), ",\n })\n }\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " { ", _jsx(_components.span, { className: "hljs-attr", children: "success" }), ": ", _jsx(_components.span, { className: "hljs-literal", children: "true" }), ", order }\n } ", _jsx(_components.span, { className: "hljs-keyword", children: "catch" }), " (error) {\n ", _jsx(_components.span, { className: "hljs-variable language_", children: "console" }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "error" }), "(", _jsx(_components.span, { className: "hljs-string", children: "\"Product order capture error:\"" }), ", error)\n ", _jsx(_components.span, { className: "hljs-keyword", children: "throw" }), " error\n }\n}\n"] }) }), "\n", _jsx(_components.h3, { id: "create-product-card-component", children: _jsx(_components.a, { href: "#create-product-card-component", children: "Create Product Card Component" }) }), "\n", _jsxs(_components.p, { children: ["Create ", _jsx(_components.code, { children: "components/ProductCard.tsx" }), ":"] }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-typescript", children: [_jsx(_components.span, { className: "hljs-string", children: "\"use client\"" }), "\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { useState } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "\"react\"" }), "\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { ", _jsx(_components.span, { className: "hljs-title class_", children: "Product" }), " } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "\"@/types/product\"" }), "\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { createProductOrder } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "\"@/actions/products\"" }), "\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "interface" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "ProductCardProps" }), " {\n ", _jsx(_components.span, { className: "hljs-attr", children: "product" }), ": ", _jsx(_components.span, { className: "hljs-title class_", children: "Product" }), "\n}\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "export" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "default" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "function" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "ProductCard" }), "(", _jsxs(_components.span, { className: "hljs-params", children: ["{ product }: ", _jsx(_components.span, { className: "hljs-title class_", children: "ProductCardProps" })] }), ") {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " [isLoading, setIsLoading] = ", _jsx(_components.span, { className: "hljs-title function_", children: "useState" }), "(", _jsx(_components.span, { className: "hljs-literal", children: "false" }), ")\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " finalPrice = product.", _jsx(_components.span, { className: "hljs-property", children: "discount" }), " \n ? product.", _jsx(_components.span, { className: "hljs-property", children: "price" }), " - (product.", _jsx(_components.span, { className: "hljs-property", children: "price" }), " * product.", _jsx(_components.span, { className: "hljs-property", children: "discount" }), " / ", _jsx(_components.span, { className: "hljs-number", children: "100" }), ")\n : product.", _jsx(_components.span, { className: "hljs-property", children: "price" }), "\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "handlePurchase" }), " = ", _jsx(_components.span, { className: "hljs-keyword", children: "async" }), " (", _jsx(_components.span, { className: "hljs-params" }), ") => {\n ", _jsx(_components.span, { className: "hljs-title function_", children: "setIsLoading" }), "(", _jsx(_components.span, { className: "hljs-literal", children: "true" }), ")\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "try" }), " {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " result = ", _jsx(_components.span, { className: "hljs-keyword", children: "await" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "createProductOrder" }), "({\n ", _jsx(_components.span, { className: "hljs-attr", children: "productId" }), ": product.", _jsx(_components.span, { className: "hljs-property", children: "id" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "productName" }), ": product.", _jsx(_components.span, { className: "hljs-property", children: "name" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "price" }), ": finalPrice,\n ", _jsx(_components.span, { className: "hljs-attr", children: "quantity" }), ": ", _jsx(_components.span, { className: "hljs-number", children: "1" }), ",\n })\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "if" }), " (result.", _jsx(_components.span, { className: "hljs-property", children: "success" }), " && result.", _jsx(_components.span, { className: "hljs-property", children: "url" }), ") {\n ", _jsx(_components.span, { className: "hljs-variable language_", children: "window" }), ".", _jsx(_components.span, { className: "hljs-property", children: "location" }), ".", _jsx(_components.span, { className: "hljs-property", children: "href" }), " = result.", _jsx(_components.span, { className: "hljs-property", children: "url" }), "\n } ", _jsx(_components.span, { className: "hljs-keyword", children: "else" }), " {\n ", _jsx(_components.span, { className: "hljs-title function_", children: "alert" }), "(result.", _jsx(_components.span, { className: "hljs-property", children: "error" }), " || ", _jsx(_components.span, { className: "hljs-string", children: "\"Failed to process payment\"" }), ")\n }\n } ", _jsx(_components.span, { className: "hljs-keyword", children: "catch" }), " (error) {\n ", _jsx(_components.span, { className: "hljs-title function_", children: "alert" }), "(", _jsx(_components.span, { className: "hljs-string", children: "\"An error occurred. Please try again.\"" }), ")\n } ", _jsx(_components.span, { className: "hljs-keyword", children: "finally" }), " {\n ", _jsx(_components.span, { className: "hljs-title function_", children: "setIsLoading" }), "(", _jsx(_components.span, { className: "hljs-literal", children: "false" }), ")\n }\n }\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " (\n ", _jsxs(_components.span, { className: "xml", children: [_jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "div" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition-shadow\"" }), ">"] }), "\n {/* Product Image */}\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "div" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"h-48 bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "span" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"text-white text-lg font-semibold\"" }), ">"] }), "{product.name}", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n\n {/* Product Info */}\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "div" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"p-6\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "div" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"flex items-start justify-between mb-3\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "h3" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"text-xl font-bold\"" }), ">"] }), "{product.name}", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n {product.discount && (\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "span" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"bg-red-100 text-red-800 text-xs font-semibold px-2 py-1 rounded-full\"" }), ">"] }), "\n -{product.discount}%\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n )}\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n \n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "p" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"text-gray-600 mb-4\"" }), ">"] }), "{product.description}", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n \n {/* Features */}\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "div" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"mb-6\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "h4" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"font-semibold mb-3\"" }), ">"] }), "What's Included:", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "ul" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"space-y-2\"" }), ">"] }), "\n {product.features.slice(0, 4).map((feature, index) => (\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "li" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "key" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{index}" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"flex items-center text-sm\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "svg" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"w-4 h-4 text-green-500 mr-2\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "fill" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"none\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "stroke" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"currentColor\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "viewBox" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"0 0 24 24\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "path" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "strokeLinecap" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"round\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "strokeLinejoin" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"round\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "strokeWidth" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{2}" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "d" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"M5 13l4 4L19 7\"" }), " />"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n {feature}\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ))}\n {product.features.length > 4 && (\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "li" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"text-sm text-gray-500 ml-6\"" }), ">"] }), "\n + {product.features.length - 4} more features\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n )}\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n\n {/* Pricing */}\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "div" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"flex items-center justify-between mb-6\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "div" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"flex items-center space-x-2\"" }), ">"] }), "\n {product.discount ? (\n ", _jsx(_components.span, { className: "hljs-tag", children: "<>" }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "span" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"text-2xl font-bold text-blue-600\"" }), ">"] }), "${finalPrice}", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "span" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"text-lg text-gray-500 line-through\"" }), ">"] }), "${product.price}", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsx(_components.span, { className: "hljs-tag", children: "" }), "\n ) : (\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "span" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"text-2xl font-bold text-blue-600\"" }), ">"] }), "${product.price}", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n )}\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "span" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"text-sm text-gray-500\"" }), ">"] }), "One-time payment", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n\n {/* Purchase Button */}\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "button" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "onClick" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{handlePurchase}" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "disabled" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{isLoading}" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"w-full bg-blue-600 text-white py-3 px-4 rounded-lg font-semibold hover:bg-blue-700 disabled:bg-gray-400 disabled:cursor-not-allowed transition-colors\"" }), "\n >"] }), "\n {isLoading ? (\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "span" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"flex items-center justify-center\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "svg" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"animate-spin -ml-1 mr-3 h-5 w-5 text-white\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "xmlns" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"http://www.w3.org/2000/svg\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "fill" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"none\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "viewBox" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"0 0 24 24\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "circle" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"opacity-25\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "cx" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"12\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "cy" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"12\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "r" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"10\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "stroke" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"currentColor\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "strokeWidth" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"4\"" }), ">"] }), _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "path" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"opacity-75\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "fill" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"currentColor\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "d" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z\"" }), ">"] }), _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n Processing...\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ) : (\n `Buy Now - $${finalPrice}`\n )}\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "p" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"text-xs text-gray-500 text-center mt-3\"" }), ">"] }), "\n 🔒 Secure payment powered by PayPal\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] })] }), "\n \n )\n}\n"] }) }), "\n", _jsx(_components.h3, { id: "create-store-page", children: _jsx(_components.a, { href: "#create-store-page", children: "Create Store Page" }) }), "\n", _jsxs(_components.p, { children: ["Create ", _jsx(_components.code, { children: "app/store/page.tsx" }), ":"] }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-typescript", children: [_jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { products } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "\"@/data/products\"" }), "\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "ProductCard" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "\"@/components/ProductCard\"" }), "\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "export" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "default" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "function" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "StorePage" }), "(", _jsx(_components.span, { className: "hljs-params" }), ") {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " (\n ", _jsxs(_components.span, { className: "xml", children: [_jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "div" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"max-w-7xl mx-auto p-6\"" }), ">"] }), "\n {/* Header */}\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "div" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"text-center mb-12\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "h1" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"text-4xl font-bold mb-4\"" }), ">"] }), "Premium Templates Store", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "p" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"text-xl text-gray-600 max-w-3xl mx-auto\"" }), ">"] }), "\n Professional, production-ready templates to accelerate your development. \n Built with modern technologies and best practices.\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n\n {/* Products Grid */}\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "div" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"grid md:grid-cols-2 lg:grid-cols-3 gap-8 mb-16\"" }), ">"] }), "\n {products.map((product) => (\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "ProductCard" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "key" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{product.id}" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "product" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{product}" }), " />"] }), "\n ))}\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n\n {/* Features Section */}\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "div" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"bg-gray-50 rounded-2xl p-8\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "h2" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"text-3xl font-bold text-center mb-12\"" }), ">"] }), "Why Choose Our Templates?", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "div" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"grid md:grid-cols-3 gap-8\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "div" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"text-center\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "div" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "svg" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"w-8 h-8 text-blue-600\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "fill" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"none\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "stroke" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"currentColor\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "viewBox" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"0 0 24 24\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "path" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "strokeLinecap" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"round\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "strokeLinejoin" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"round\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "strokeWidth" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{2}" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "d" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"M13 10V3L4 14h7v7l9-11h-7z\"" }), " />"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "h3" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"text-xl font-semibold mb-3\"" }), ">"] }), "Production Ready", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "p" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"text-gray-600\"" }), ">"] }), "\n All templates are thoroughly tested and optimized for production deployment\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n \n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "div" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"text-center\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "div" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "svg" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"w-8 h-8 text-green-600\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "fill" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"none\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "stroke" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"currentColor\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "viewBox" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"0 0 24 24\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "path" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "strokeLinecap" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"round\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "strokeLinejoin" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"round\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "strokeWidth" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{2}" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "d" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z\"" }), " />"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "path" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "strokeLinecap" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"round\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "strokeLinejoin" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"round\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "strokeWidth" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{2}" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "d" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"M15 12a3 3 0 11-6 0 3 3 0 016 0z\"" }), " />"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "h3" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"text-xl font-semibold mb-3\"" }), ">"] }), "Premium Quality", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "p" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"text-gray-600\"" }), ">"] }), "\n Clean, maintainable code following industry best practices and standards\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n \n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "div" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"text-center\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "div" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "svg" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"w-8 h-8 text-purple-600\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "fill" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"none\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "stroke" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"currentColor\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "viewBox" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"0 0 24 24\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "path" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "strokeLinecap" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"round\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "strokeLinejoin" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"round\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "strokeWidth" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{2}" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "d" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"M18.364 5.636l-3.536 3.536m0 5.656l3.536 3.536M9.172 9.172L5.636 5.636m3.536 9.192L5.636 18.364M12 2.25a9.75 9.75 0 100 19.5 9.75 9.75 0 000-19.5z\"" }), " />"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "h3" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"text-xl font-semibold mb-3\"" }), ">"] }), "Full Support", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "p" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"text-gray-600\"" }), ">"] }), "\n Get dedicated support and updates to keep your templates current\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] })] }), "\n )\n}\n"] }) }), "\n", _jsx(_components.h2, { id: "step-5-paypal-capture-api-route", children: _jsx(_components.a, { href: "#step-5-paypal-capture-api-route", children: "Step 5: PayPal Capture API Route" }) }), "\n", _jsxs(_components.p, { children: ["Update ", _jsx(_components.code, { children: "app/api/paypal/capture-order/route.ts" }), ":"] }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-typescript", children: [_jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { ", _jsx(_components.span, { className: "hljs-title class_", children: "NextRequest" }), ", ", _jsx(_components.span, { className: "hljs-title class_", children: "NextResponse" }), " } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "\"next/server\"" }), "\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { captureDonation } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "\"@/actions/donations\"" }), "\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { captureProductOrder } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "\"@/actions/products\"" }), "\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "export" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "async" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "function" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "POST" }), "(", _jsxs(_components.span, { className: "hljs-params", children: [_jsx(_components.span, { className: "hljs-attr", children: "request" }), ": ", _jsx(_components.span, { className: "hljs-title class_", children: "NextRequest" })] }), ") {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "try" }), " {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " { orderId, ", _jsx(_components.span, { className: "hljs-keyword", children: "type" }), " } = ", _jsx(_components.span, { className: "hljs-keyword", children: "await" }), " request.", _jsx(_components.span, { className: "hljs-title function_", children: "json" }), "()\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "if" }), " (!orderId) {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "NextResponse" }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "json" }), "(\n { ", _jsx(_components.span, { className: "hljs-attr", children: "error" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "\"Order ID is required\"" }), " },\n { ", _jsx(_components.span, { className: "hljs-attr", children: "status" }), ": ", _jsx(_components.span, { className: "hljs-number", children: "400" }), " }\n )\n }\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "let" }), " result\n ", _jsx(_components.span, { className: "hljs-keyword", children: "if" }), " (", _jsx(_components.span, { className: "hljs-keyword", children: "type" }), " === ", _jsx(_components.span, { className: "hljs-string", children: "\"donation\"" }), ") {\n result = ", _jsx(_components.span, { className: "hljs-keyword", children: "await" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "captureDonation" }), "(orderId)\n } ", _jsx(_components.span, { className: "hljs-keyword", children: "else" }), " {\n result = ", _jsx(_components.span, { className: "hljs-keyword", children: "await" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "captureProductOrder" }), "(orderId)\n }\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "NextResponse" }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "json" }), "({\n ", _jsx(_components.span, { className: "hljs-attr", children: "success" }), ": ", _jsx(_components.span, { className: "hljs-literal", children: "true" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "data" }), ": result,\n })\n } ", _jsx(_components.span, { className: "hljs-keyword", children: "catch" }), " (error) {\n ", _jsx(_components.span, { className: "hljs-variable language_", children: "console" }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "error" }), "(", _jsx(_components.span, { className: "hljs-string", children: "\"Error in PayPal capture route:\"" }), ", error)\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " ", _jsx(_components.span, { className: "hljs-title class_", children: "NextResponse" }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "json" }), "(\n { ", _jsx(_components.span, { className: "hljs-attr", children: "error" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "\"Internal server error\"" }), " },\n { ", _jsx(_components.span, { className: "hljs-attr", children: "status" }), ": ", _jsx(_components.span, { className: "hljs-number", children: "500" }), " }\n )\n }\n}\n"] }) }), "\n", _jsx(_components.h2, { id: "step-6-success-and-cancel-pages", children: _jsx(_components.a, { href: "#step-6-success-and-cancel-pages", children: "Step 6: Success and Cancel Pages" }) }), "\n", _jsx(_components.h3, { id: "donation-success-page", children: _jsx(_components.a, { href: "#donation-success-page", children: "Donation Success Page" }) }), "\n", _jsxs(_components.p, { children: ["Create ", _jsx(_components.code, { children: "app/support/success/page.tsx" }), ":"] }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-typescript", children: [_jsx(_components.span, { className: "hljs-string", children: "\"use client\"" }), "\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { useEffect, useState } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "\"react\"" }), "\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { useSearchParams } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "\"next/navigation\"" }), "\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "export" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "default" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "function" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "DonationSuccessPage" }), "(", _jsx(_components.span, { className: "hljs-params" }), ") {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " [isProcessing, setIsProcessing] = ", _jsx(_components.span, { className: "hljs-title function_", children: "useState" }), "(", _jsx(_components.span, { className: "hljs-literal", children: "true" }), ")\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " searchParams = ", _jsx(_components.span, { className: "hljs-title function_", children: "useSearchParams" }), "()\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " token = searchParams.", _jsx(_components.span, { className: "hljs-title function_", children: "get" }), "(", _jsx(_components.span, { className: "hljs-string", children: "\"token\"" }), ")\n\n ", _jsx(_components.span, { className: "hljs-title function_", children: "useEffect" }), "(", _jsx(_components.span, { className: "hljs-function", children: "() =>" }), " {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "if" }), " (token) {\n ", _jsx(_components.span, { className: "hljs-comment", children: "// Capture the payment" }), "\n ", _jsx(_components.span, { className: "hljs-title function_", children: "fetch" }), "(", _jsx(_components.span, { className: "hljs-string", children: "\"/api/paypal/capture-order\"" }), ", {\n ", _jsx(_components.span, { className: "hljs-attr", children: "method" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "\"POST\"" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "headers" }), ": { ", _jsx(_components.span, { className: "hljs-string", children: "\"Content-Type\"" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "\"application/json\"" }), " },\n ", _jsx(_components.span, { className: "hljs-attr", children: "body" }), ": ", _jsx(_components.span, { className: "hljs-title class_", children: "JSON" }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "stringify" }), "({ ", _jsx(_components.span, { className: "hljs-attr", children: "orderId" }), ": token, ", _jsx(_components.span, { className: "hljs-attr", children: "type" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "\"donation\"" }), " }),\n })\n .", _jsx(_components.span, { className: "hljs-title function_", children: "then" }), "(", _jsx(_components.span, { className: "hljs-function", children: "() =>" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "setIsProcessing" }), "(", _jsx(_components.span, { className: "hljs-literal", children: "false" }), "))\n .", _jsx(_components.span, { className: "hljs-title function_", children: "catch" }), "(", _jsx(_components.span, { className: "hljs-function", children: "() =>" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "setIsProcessing" }), "(", _jsx(_components.span, { className: "hljs-literal", children: "false" }), "))\n } ", _jsx(_components.span, { className: "hljs-keyword", children: "else" }), " {\n ", _jsx(_components.span, { className: "hljs-title function_", children: "setIsProcessing" }), "(", _jsx(_components.span, { className: "hljs-literal", children: "false" }), ")\n }\n }, [token])\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "if" }), " (isProcessing) {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " (\n ", _jsxs(_components.span, { className: "xml", children: [_jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "div" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"min-h-screen bg-gradient-to-br from-green-50 to-blue-50 flex items-center justify-center\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "div" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"text-center\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "div" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"animate-spin rounded-full h-12 w-12 border-b-2 border-green-600 mx-auto mb-4\"" }), ">"] }), _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "p" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"text-gray-600\"" }), ">"] }), "Processing your donation...", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] })] }), "\n )\n }\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " (\n ", _jsxs(_components.span, { className: "xml", children: [_jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "div" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"min-h-screen bg-gradient-to-br from-green-50 to-blue-50 flex items-center justify-center py-12\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "div" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"max-w-md mx-auto p-6\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "div" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"bg-white rounded-2xl shadow-xl p-8 text-center\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "div" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-6 animate-bounce\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "svg" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"w-10 h-10 text-green-600\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "fill" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"none\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "stroke" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"currentColor\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "viewBox" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"0 0 24 24\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "path" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "strokeLinecap" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"round\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "strokeLinejoin" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"round\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "strokeWidth" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{2}" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "d" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"M5 13l4 4L19 7\"" }), " />"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n \n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "h1" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"text-3xl font-bold text-green-700 mb-4\"" }), ">"] }), "Thank You! ☕", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "p" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"text-gray-600 mb-6\"" }), ">"] }), "\n Your support means the world to me! Your contribution helps me continue creating \n valuable content and resources for the developer community.\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n \n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "div" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"bg-blue-50 border border-blue-200 rounded-lg p-4 mb-6\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "p" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"text-sm text-blue-700\"" }), ">"] }), "\n 🎉 Your payment has been processed successfully. You'll receive a confirmation email shortly.\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "div" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"space-y-3\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "a" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "href" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"/support\"" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"block w-full bg-gradient-to-r from-rose-500 to-purple-600 text-white py-3 px-6 rounded-lg hover:from-rose-600 hover:to-purple-700 transition-all\"" }), "\n >"] }), "\n Support Again\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "a" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "href" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"/\"" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"block text-gray-600 hover:text-gray-700\"" }), "\n >"] }), "\n Return Home\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] })] }), "\n )\n}\n"] }) }), "\n", _jsx(_components.h3, { id: "product-success-page", children: _jsx(_components.a, { href: "#product-success-page", children: "Product Success Page" }) }), "\n", _jsxs(_components.p, { children: ["Create ", _jsx(_components.code, { children: "app/store/success/page.tsx" }), ":"] }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-typescript", children: [_jsx(_components.span, { className: "hljs-string", children: "\"use client\"" }), "\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { useEffect, useState } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "\"react\"" }), "\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { useSearchParams } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "\"next/navigation\"" }), "\n", _jsx(_components.span, { className: "hljs-keyword", children: "import" }), " { getProductById } ", _jsx(_components.span, { className: "hljs-keyword", children: "from" }), " ", _jsx(_components.span, { className: "hljs-string", children: "\"@/data/products\"" }), "\n\n", _jsx(_components.span, { className: "hljs-keyword", children: "export" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "default" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "function" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "ProductSuccessPage" }), "(", _jsx(_components.span, { className: "hljs-params" }), ") {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " [isProcessing, setIsProcessing] = ", _jsx(_components.span, { className: "hljs-title function_", children: "useState" }), "(", _jsx(_components.span, { className: "hljs-literal", children: "true" }), ")\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " searchParams = ", _jsx(_components.span, { className: "hljs-title function_", children: "useSearchParams" }), "()\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " token = searchParams.", _jsx(_components.span, { className: "hljs-title function_", children: "get" }), "(", _jsx(_components.span, { className: "hljs-string", children: "\"token\"" }), ")\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " productId = searchParams.", _jsx(_components.span, { className: "hljs-title function_", children: "get" }), "(", _jsx(_components.span, { className: "hljs-string", children: "\"product\"" }), ")\n ", _jsx(_components.span, { className: "hljs-keyword", children: "const" }), " product = productId ? ", _jsx(_components.span, { className: "hljs-title function_", children: "getProductById" }), "(productId) : ", _jsx(_components.span, { className: "hljs-literal", children: "null" }), "\n\n ", _jsx(_components.span, { className: "hljs-title function_", children: "useEffect" }), "(", _jsx(_components.span, { className: "hljs-function", children: "() =>" }), " {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "if" }), " (token) {\n ", _jsx(_components.span, { className: "hljs-comment", children: "// Capture the payment" }), "\n ", _jsx(_components.span, { className: "hljs-title function_", children: "fetch" }), "(", _jsx(_components.span, { className: "hljs-string", children: "\"/api/paypal/capture-order\"" }), ", {\n ", _jsx(_components.span, { className: "hljs-attr", children: "method" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "\"POST\"" }), ",\n ", _jsx(_components.span, { className: "hljs-attr", children: "headers" }), ": { ", _jsx(_components.span, { className: "hljs-string", children: "\"Content-Type\"" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "\"application/json\"" }), " },\n ", _jsx(_components.span, { className: "hljs-attr", children: "body" }), ": ", _jsx(_components.span, { className: "hljs-title class_", children: "JSON" }), ".", _jsx(_components.span, { className: "hljs-title function_", children: "stringify" }), "({ ", _jsx(_components.span, { className: "hljs-attr", children: "orderId" }), ": token, ", _jsx(_components.span, { className: "hljs-attr", children: "type" }), ": ", _jsx(_components.span, { className: "hljs-string", children: "\"product\"" }), " }),\n })\n .", _jsx(_components.span, { className: "hljs-title function_", children: "then" }), "(", _jsx(_components.span, { className: "hljs-function", children: "() =>" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "setIsProcessing" }), "(", _jsx(_components.span, { className: "hljs-literal", children: "false" }), "))\n .", _jsx(_components.span, { className: "hljs-title function_", children: "catch" }), "(", _jsx(_components.span, { className: "hljs-function", children: "() =>" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "setIsProcessing" }), "(", _jsx(_components.span, { className: "hljs-literal", children: "false" }), "))\n } ", _jsx(_components.span, { className: "hljs-keyword", children: "else" }), " {\n ", _jsx(_components.span, { className: "hljs-title function_", children: "setIsProcessing" }), "(", _jsx(_components.span, { className: "hljs-literal", children: "false" }), ")\n }\n }, [token])\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "if" }), " (isProcessing) {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " (\n ", _jsxs(_components.span, { className: "xml", children: [_jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "div" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"min-h-screen bg-gradient-to-br from-green-50 to-blue-50 flex items-center justify-center\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "div" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"text-center\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "div" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"animate-spin rounded-full h-12 w-12 border-b-2 border-green-600 mx-auto mb-4\"" }), ">"] }), _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "p" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"text-gray-600\"" }), ">"] }), "Processing your order...", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] })] }), "\n )\n }\n\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " (\n ", _jsxs(_components.span, { className: "xml", children: [_jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "div" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"max-w-lg mx-auto p-6\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "div" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"bg-white rounded-xl shadow-lg p-8 text-center\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "div" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-6\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "svg" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"w-10 h-10 text-green-600\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "fill" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"none\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "stroke" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"currentColor\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "viewBox" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"0 0 24 24\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "path" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "strokeLinecap" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"round\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "strokeLinejoin" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"round\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "strokeWidth" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{2}" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "d" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"M5 13l4 4L19 7\"" }), " />"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n \n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "h1" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"text-3xl font-bold text-green-700 mb-4\"" }), ">"] }), "Purchase Successful!", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n \n {product && (\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "div" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"mb-6\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "h2" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"text-xl font-semibold mb-2\"" }), ">"] }), "{product.name}", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "p" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"text-gray-600\"" }), ">"] }), "Thank you for your purchase!", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n )}\n\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "div" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"bg-blue-50 border border-blue-200 rounded-lg p-6 mb-6\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "h3" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"font-semibold text-blue-900 mb-2\"" }), ">"] }), "📦 Your Download is Ready", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "p" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"text-sm text-blue-700 mb-4\"" }), ">"] }), "\n Download instructions have been sent to your email address.\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n \n {product?.downloadUrl && (\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "a" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "href" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{product.downloadUrl}" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"inline-block bg-blue-600 text-white py-2 px-6 rounded-lg hover:bg-blue-700 transition-colors\"" }), "\n >"] }), "\n Download Template\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n )}\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "div" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"bg-gray-50 rounded-lg p-4 mb-6\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "p" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"text-sm text-gray-600\"" }), ">"] }), "\n Need help? Contact our support team at{\" \"}\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "a" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "href" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{" }), "`", _jsx(_components.span, { className: "hljs-attr", children: "mailto:" }), "${", _jsx(_components.span, { className: "hljs-attr", children: "process.env.SUPPORT_EMAIL" }), "}`} ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"text-blue-600 hover:text-blue-700\"" }), ">"] }), "\n {process.env.SUPPORT_EMAIL}\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "div" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"space-y-3\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "a" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "href" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"/store\"" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"block w-full bg-gray-100 text-gray-700 py-2 px-4 rounded-lg hover:bg-gray-200 transition-colors\"" }), "\n >"] }), "\n Browse More Templates\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "a" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "href" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"/\"" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"block text-gray-600 hover:text-gray-700\"" }), "\n >"] }), "\n Return Home\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] })] }), "\n )\n}\n"] }) }), "\n", _jsx(_components.h3, { id: "cancel-pages", children: _jsx(_components.a, { href: "#cancel-pages", children: "Cancel Pages" }) }), "\n", _jsxs(_components.p, { children: ["Create ", _jsx(_components.code, { children: "app/support/cancelled/page.tsx" }), " and ", _jsx(_components.code, { children: "app/store/cancelled/page.tsx" }), ":"] }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-typescript", children: [_jsx(_components.span, { className: "hljs-comment", children: "// Both pages can use similar structure" }), "\n", _jsx(_components.span, { className: "hljs-keyword", children: "export" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "default" }), " ", _jsx(_components.span, { className: "hljs-keyword", children: "function" }), " ", _jsx(_components.span, { className: "hljs-title function_", children: "CancelledPage" }), "(", _jsx(_components.span, { className: "hljs-params" }), ") {\n ", _jsx(_components.span, { className: "hljs-keyword", children: "return" }), " (\n ", _jsxs(_components.span, { className: "xml", children: [_jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "div" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"min-h-screen bg-gradient-to-br from-yellow-50 to-orange-50 flex items-center justify-center py-12\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "div" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"max-w-md mx-auto p-6\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "div" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"bg-white rounded-2xl shadow-xl p-8 text-center\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "div" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"w-20 h-20 bg-yellow-100 rounded-full flex items-center justify-center mx-auto mb-6\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "svg" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"w-10 h-10 text-yellow-600\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "fill" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"none\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "stroke" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"currentColor\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "viewBox" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"0 0 24 24\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "path" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "strokeLinecap" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"round\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "strokeLinejoin" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"round\"" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "strokeWidth" }), "=", _jsx(_components.span, { className: "hljs-string", children: "{2}" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "d" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z\"" }), " />"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n \n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "h1" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"text-3xl font-bold text-yellow-700 mb-4\"" }), ">"] }), "Payment Cancelled", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "p" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"text-gray-600 mb-6\"" }), ">"] }), "\n No worries! Your payment was cancelled and no charges were made. \n You can try again anytime if you change your mind.\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n \n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "div" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"space-y-3\"" }), ">"] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "a" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "href" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"/support\"" }), " // ", _jsx(_components.span, { className: "hljs-attr", children: "or" }), " \"/", _jsx(_components.span, { className: "hljs-attr", children: "store" }), "\" ", _jsx(_components.span, { className: "hljs-attr", children: "for" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "product" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "cancel" }), " ", _jsx(_components.span, { className: "hljs-attr", children: "page" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"block w-full bg-gradient-to-r from-rose-500 to-purple-600 text-white py-3 px-6 rounded-lg hover:from-rose-600 hover:to-purple-700 transition-all\"" }), "\n >"] }), "\n Try Again\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: ["<", _jsx(_components.span, { className: "hljs-name", children: "a" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "href" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"/\"" }), "\n ", _jsx(_components.span, { className: "hljs-attr", children: "className" }), "=", _jsx(_components.span, { className: "hljs-string", children: "\"block text-gray-600 hover:text-gray-700\"" }), "\n >"] }), "\n Return Home\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] }), "\n ", _jsxs(_components.span, { className: "hljs-tag", children: [""] })] }), "\n )\n}\n"] }) }), "\n", _jsx(_components.h2, { id: "step-7-testing-your-integration", children: _jsx(_components.a, { href: "#step-7-testing-your-integration", children: "Step 7: Testing Your Integration" }) }), "\n", _jsx(_components.h3, { id: "development-testing", children: _jsx(_components.a, { href: "#development-testing", children: "Development Testing" }) }), "\n", _jsxs(_components.ol, { children: ["\n", _jsxs(_components.li, { children: ["\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "Start your development server:" }) }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "hljs language-bash", children: "npm run dev\n" }) }), "\n"] }), "\n", _jsxs(_components.li, { children: ["\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "Test donation flow:" }) }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["Navigate to ", _jsx(_components.code, { children: "/support" })] }), "\n", _jsx(_components.li, { children: "Select an amount or enter custom amount" }), "\n", _jsx(_components.li, { children: "Fill optional fields" }), "\n", _jsx(_components.li, { children: "Complete PayPal sandbox payment" }), "\n", _jsx(_components.li, { children: "Verify success page and email" }), "\n"] }), "\n"] }), "\n", _jsxs(_components.li, { children: ["\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "Test product flow:" }) }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["Navigate to ", _jsx(_components.code, { children: "/store" })] }), "\n", _jsx(_components.li, { children: "Click \"Buy Now\" on any template" }), "\n", _jsx(_components.li, { children: "Complete PayPal sandbox payment" }), "\n", _jsx(_components.li, { children: "Verify success page and download access" }), "\n"] }), "\n"] }), "\n"] }), "\n", _jsx(_components.h3, { id: "paypal-sandbox-testing", children: _jsx(_components.a, { href: "#paypal-sandbox-testing", children: "PayPal Sandbox Testing" }) }), "\n", _jsx(_components.p, { children: "Use these test accounts in PayPal sandbox:" }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "Buyer Account:" }) }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["Email: ", _jsx(_components.code, { children: "buyer@example.com" })] }), "\n", _jsxs(_components.li, { children: ["Password: ", _jsx(_components.code, { children: "password123" })] }), "\n"] }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "Credit Card Testing:" }) }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["Card: ", _jsx(_components.code, { children: "4111111111111111" }), " (Visa)"] }), "\n", _jsx(_components.li, { children: "Expiry: Any future date" }), "\n", _jsxs(_components.li, { children: ["CVV: ", _jsx(_components.code, { children: "123" })] }), "\n"] }), "\n", _jsx(_components.h2, { id: "step-8-production-deployment", children: _jsx(_components.a, { href: "#step-8-production-deployment", children: "Step 8: Production Deployment" }) }), "\n", _jsx(_components.h3, { id: "environment-variables-for-production", children: _jsx(_components.a, { href: "#environment-variables-for-production", children: "Environment Variables for Production" }) }), "\n", _jsx(_components.pre, { children: _jsxs(_components.code, { className: "hljs language-bash", children: [_jsx(_components.span, { className: "hljs-comment", children: "# Production PayPal" }), "\nPAYPAL_CLIENT_ID=", _jsx(_components.span, { className: "hljs-string", children: "\"your-production-client-id\"" }), "\nPAYPAL_CLIENT_SECRET=", _jsx(_components.span, { className: "hljs-string", children: "\"your-production-client-secret\"" }), "\nPAYPAL_ENVIRONMENT=", _jsx(_components.span, { className: "hljs-string", children: "\"production\"" }), "\nNEXT_PUBLIC_BASE_URL=", _jsx(_components.span, { className: "hljs-string", children: "\"https://yourdomain.com\"" }), "\n\n", _jsx(_components.span, { className: "hljs-comment", children: "# Production Database" }), "\nDATABASE_URL=", _jsx(_components.span, { className: "hljs-string", children: "\"your-production-database-url\"" }), "\n\n", _jsx(_components.span, { className: "hljs-comment", children: "# Production Email" }), "\nRESEND_API_KEY=", _jsx(_components.span, { className: "hljs-string", children: "\"your-production-resend-key\"" }), "\nFROM_EMAIL=", _jsx(_components.span, { className: "hljs-string", children: "\"noreply@yourdomain.com\"" }), "\n\n", _jsx(_components.span, { className: "hljs-comment", children: "# App Configuration" }), "\nAPP_NAME=", _jsx(_components.span, { className: "hljs-string", children: "\"Your App Name\"" }), "\nSUPPORT_EMAIL=", _jsx(_components.span, { className: "hljs-string", children: "\"support@yourdomain.com\"" }), "\n"] }) }), "\n", _jsx(_components.h3, { id: "production-checklist", children: _jsx(_components.a, { href: "#production-checklist", children: "Production Checklist" }) }), "\n", _jsxs(_components.ul, { className: "contains-task-list", children: ["\n", _jsxs(_components.li, { className: "task-list-item", children: [_jsx(_components.input, { type: "checkbox", disabled: true }), " ", "Update PayPal credentials to production"] }), "\n", _jsxs(_components.li, { className: "task-list-item", children: [_jsx(_components.input, { type: "checkbox", disabled: true }), " ", "Set ", _jsx(_components.code, { children: "PAYPAL_ENVIRONMENT=\"production\"" })] }), "\n", _jsxs(_components.li, { className: "task-list-item", children: [_jsx(_components.input, { type: "checkbox", disabled: true }), " ", "Update ", _jsx(_components.code, { children: "NEXT_PUBLIC_BASE_URL" }), " to your domain"] }), "\n", _jsxs(_components.li, { className: "task-list-item", children: [_jsx(_components.input, { type: "checkbox", disabled: true }), " ", "Set up production database"] }), "\n", _jsxs(_components.li, { className: "task-list-item", children: [_jsx(_components.input, { type: "checkbox", disabled: true }), " ", "Configure production email service"] }), "\n", _jsxs(_components.li, { className: "task-list-item", children: [_jsx(_components.input, { type: "checkbox", disabled: true }), " ", "Test all payment flows thoroughly"] }), "\n", _jsxs(_components.li, { className: "task-list-item", children: [_jsx(_components.input, { type: "checkbox", disabled: true }), " ", "Set up monitoring and error tracking"] }), "\n", _jsxs(_components.li, { className: "task-list-item", children: [_jsx(_components.input, { type: "checkbox", disabled: true }), " ", "Configure webhook endpoints (optional)"] }), "\n", _jsxs(_components.li, { className: "task-list-item", children: [_jsx(_components.input, { type: "checkbox", disabled: true }), " ", "Add proper error handling and logging"] }), "\n", _jsxs(_components.li, { className: "task-list-item", children: [_jsx(_components.input, { type: "checkbox", disabled: true }), " ", "Implement rate limiting"] }), "\n", _jsxs(_components.li, { className: "task-list-item", children: [_jsx(_components.input, { type: "checkbox", disabled: true }), " ", "Add CSRF protection"] }), "\n"] }), "\n", _jsx(_components.h2, { id: "key-features-included", children: _jsx(_components.a, { href: "#key-features-included", children: "Key Features Included" }) }), "\n", _jsxs(_components.p, { children: ["✅ ", _jsx(_components.strong, { children: "Complete Payment Flows" }), " - Both donations and product sales", _jsx(_components.br, {}), "\n", "✅ ", _jsx(_components.strong, { children: "Database Integration" }), " - Prisma ORM with PostgreSQL", _jsx(_components.br, {}), "\n", "✅ ", _jsx(_components.strong, { children: "Email Notifications" }), " - Resend integration for confirmations", _jsx(_components.br, {}), "\n", "✅ ", _jsx(_components.strong, { children: "Global Payments" }), " - PayPal works in 200+ countries", _jsx(_components.br, {}), "\n", "✅ ", _jsx(_components.strong, { children: "Multiple Payment Methods" }), " - Cards, PayPal balance, bank transfers", _jsx(_components.br, {}), "\n", "✅ ", _jsx(_components.strong, { children: "Secure Processing" }), " - PayPal handles all payment security", _jsx(_components.br, {}), "\n", "✅ ", _jsx(_components.strong, { children: "Mobile Optimized" }), " - Perfect on all devices", _jsx(_components.br, {}), "\n", "✅ ", _jsx(_components.strong, { children: "Production Ready" }), " - Environment-based configuration", _jsx(_components.br, {}), "\n", "✅ ", _jsx(_components.strong, { children: "Error Handling" }), " - Comprehensive error management", _jsx(_components.br, {}), "\n", "✅ ", _jsx(_components.strong, { children: "TypeScript Support" }), " - Full type safety"] }), "\n", _jsx(_components.h2, { id: "advanced-features-to-add", children: _jsx(_components.a, { href: "#advanced-features-to-add", children: "Advanced Features to Add" }) }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Webhooks" }), " - Real-time payment notifications"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Subscription Payments" }), " - Recurring billing"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Multi-currency Support" }), " - Accept payments in different currencies"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Analytics Dashboard" }), " - Track sales and donations"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Customer Accounts" }), " - User registration and order history"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Affiliate Program" }), " - Commission-based referrals"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Discount Codes" }), " - Promotional pricing"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Inventory Management" }), " - Stock tracking for products"] }), "\n"] }), "\n", _jsx(_components.h2, { id: "need-help", children: _jsx(_components.a, { href: "#need-help", children: "Need Help?" }) }), "\n", _jsx(_components.p, { children: "If you need assistance implementing this PayPal integration or want personalized help with your specific use case, feel free to reach out. I offer one-on-one consultation sessions where we can work through your implementation together, troubleshoot issues, and customize the solution for your needs." }), "\n", _jsx(_components.p, { children: _jsx(_components.strong, { children: "Contact for personalized help:" }) }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["Email: [", _jsx(_components.a, { href: "mailto:custor00@gmail.com", children: "custor00@gmail.com" }), "]"] }), "\n"] }), "\n", _jsx(_components.p, { children: "This comprehensive guide provides everything you need to accept PayPal payments in your Next.js 16 application, from simple donations to complex product sales with full email automation and database tracking." })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { default: MDXContent };

Ian Sebugenyi

Ian Sebugenyi