From c856c61579c7665f267a321423f79d6e5c18a472 Mon Sep 17 00:00:00 2001 From: bender Date: Sat, 7 Mar 2026 06:33:33 +0000 Subject: [PATCH 1/3] Update src/app/layout.tsx --- src/app/layout.tsx | 38 ++++++++++---------------------------- 1 file changed, 10 insertions(+), 28 deletions(-) diff --git a/src/app/layout.tsx b/src/app/layout.tsx index eec7181..3f066a6 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -7,49 +7,31 @@ import { ServiceWrapper } from "@/components/ServiceWrapper"; import Tag from "@/tag/Tag"; const halant = Halant({ - variable: "--font-halant", - subsets: ["latin"], + variable: "--font-halant", subsets: ["latin"], weight: ["300", "400", "500", "600", "700"], }); const dmSans = DM_Sans({ - variable: "--font-dm-sans", - subsets: ["latin"], + variable: "--font-dm-sans", subsets: ["latin"], }); const inter = Inter({ - variable: "--font-inter", - subsets: ["latin"], + variable: "--font-inter", subsets: ["latin"], }); export const metadata: Metadata = { - title: "DigitalPro - Premium Digital Products & Templates", - description: "Premium digital templates and tools designed to accelerate your success. Instant access, secure payments, 24/7 support.", - keywords: "digital products, templates, Notion templates, AI tools, productivity, business templates, digital assets", - metadataBase: new URL("https://digitalpro.com"), + title: "DigitalPro - Premium Digital Products & Templates", description: "Premium digital templates and tools designed to accelerate your success. Instant access, secure payments, 24/7 support.", keywords: "digital products, templates, Notion templates, AI tools, productivity, business templates, digital assets", metadataBase: new URL("https://digitalpro.com"), alternates: { - canonical: "https://digitalpro.com", - }, + canonical: "https://digitalpro.com"}, openGraph: { - title: "DigitalPro - Premium Digital Products", - description: "Premium digital templates and tools to transform your business", - url: "https://digitalpro.com", - siteName: "DigitalPro", - type: "website", - images: [ + title: "DigitalPro - Premium Digital Products", description: "Premium digital templates and tools to transform your business", url: "https://digitalpro.com", siteName: "DigitalPro", type: "website", images: [ { - url: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaqWADaE26HPuu9McAi5WY1Ok3/modern-digital-product-showcase-with-abs-1772864653378-8b3bdb2c.png", - alt: "DigitalPro Premium Templates", - }, + url: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaqWADaE26HPuu9McAi5WY1Ok3/modern-digital-product-showcase-with-abs-1772864653378-8b3bdb2c.png", alt: "DigitalPro Premium Templates"}, ], }, twitter: { - card: "summary_large_image", - title: "DigitalPro - Premium Digital Products", - description: "Premium templates and tools to accelerate your success", - images: [ - "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaqWADaE26HPuu9McAi5WY1Ok3/modern-digital-product-showcase-with-abs-1772864653378-8b3bdb2c.png", - ], + card: "summary_large_image", title: "DigitalPro - Premium Digital Products", description: "Premium templates and tools to accelerate your success", images: [ + "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AaqWADaE26HPuu9McAi5WY1Ok3/modern-digital-product-showcase-with-abs-1772864653378-8b3bdb2c.png"], }, robots: { index: true, @@ -1441,4 +1423,4 @@ export default function RootLayout({ ); -} \ No newline at end of file +} -- 2.49.1 From ed774ff833082feea8117ee36dd931306f94f7da Mon Sep 17 00:00:00 2001 From: bender Date: Sat, 7 Mar 2026 06:33:33 +0000 Subject: [PATCH 2/3] Update src/app/page.tsx --- src/app/page.tsx | 465 ++++++++++++++++++++++++++++------------------- 1 file changed, 281 insertions(+), 184 deletions(-) diff --git a/src/app/page.tsx b/src/app/page.tsx index aea2c5e..afdbeaa 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -21,6 +21,10 @@ import { Sparkles, Star, Crown, + Lock, + CheckCircle, + AlertCircle, + Eye, } from "lucide-react"; const navItems = [ @@ -33,8 +37,7 @@ const navItems = [ const footerColumns = [ { - title: "Product", - items: [ + title: "Product", items: [ { label: "Templates", href: "/products" }, { label: "Pricing", href: "/pricing" }, { label: "Features", href: "#features" }, @@ -42,8 +45,7 @@ const footerColumns = [ ], }, { - title: "Company", - items: [ + title: "Company", items: [ { label: "About", href: "#" }, { label: "Blog", href: "#" }, { label: "Careers", href: "#" }, @@ -51,8 +53,7 @@ const footerColumns = [ ], }, { - title: "Legal", - items: [ + title: "Legal", items: [ { label: "Privacy", href: "#" }, { label: "Terms", href: "#" }, { label: "Cookies", href: "#" }, @@ -62,6 +63,223 @@ const footerColumns = [ ]; export default function HomePage() { + // Payment Verification and Tokenization Handler + const handlePaymentVerification = async (paymentData: any) => { + try { + // Tokenize sensitive payment data - never store raw card numbers + const tokenizedData = await tokenizePaymentData(paymentData); + + // Verify tokenized payment + const verificationResult = await verifyPayment(tokenizedData); + + if (verificationResult.success) { + // Process verified payment + await processVerifiedPayment(verificationResult); + return { status: "success", message: "Payment processed successfully" }; + } else { + // Handle verification failure + return handlePaymentError(verificationResult.error); + } + } catch (error) { + // Comprehensive error handling + return handlePaymentException(error); + } + }; + + // Tokenization: Convert raw payment data to secure tokens + // PCI-DSS Compliance: Reduces PCI compliance burden by not handling raw card data + const tokenizePaymentData = async (paymentData: any) => { + const { cardNumber, cvv, expiryDate, holderName } = paymentData; + + try { + // Call tokenization service (e.g., Stripe, Square, PayPal API) + const response = await fetch("/api/tokenize", { + method: "POST", headers: { + "Content-Type": "application/json", "Authorization": `Bearer ${process.env.NEXT_PUBLIC_PAYMENT_API_KEY}`, + }, + body: JSON.stringify({ + cardNumber: cardNumber.replace(/\s/g, ""), // Remove formatting + cvv: cvv, // CVV should be transmitted only once for tokenization + expiryDate: expiryDate, + holderName: holderName, + // Add timestamp to prevent replay attacks + timestamp: new Date().toISOString(), + // Include nonce for CSRF protection + nonce: generateNonce(), + }), + }); + + if (!response.ok) { + throw new Error(`Tokenization failed: ${response.statusText}`); + } + + const tokenizedResult = await response.json(); + + // Ensure token is secure and time-limited + if (!tokenizedResult.token || !tokenizedResult.expiresAt) { + throw new Error("Invalid tokenization response"); + } + + return { + token: tokenizedResult.token, + expiresAt: tokenizedResult.expiresAt, + tokenType: "payment_token"}; + } catch (error) { + throw new Error(`Tokenization error: ${error}`); + } + }; + + // Payment Verification: Validate tokenized payment against fraud checks + const verifyPayment = async (tokenizedData: any) => { + const { token, expiresAt } = tokenizedData; + + try { + // Check token expiration + if (new Date(expiresAt) < new Date()) { + throw new Error("Payment token has expired"); + } + + // Call payment verification service + const response = await fetch("/api/verify-payment", { + method: "POST", headers: { + "Content-Type": "application/json", "Authorization": `Bearer ${process.env.NEXT_PUBLIC_PAYMENT_API_KEY}`, + }, + body: JSON.stringify({ + token: token, + amount: 0, // Amount should be validated separately + currency: "USD", // Include verification details for fraud prevention + verification: { + cvvCheck: true, + avsCheck: true, + threeDSecure: true, + }, + // Metadata for audit trail + metadata: { + userId: "user_id_here", orderId: "order_id_here", timestamp: new Date().toISOString(), + }, + }), + }); + + if (!response.ok) { + throw new Error(`Payment verification failed: ${response.statusText}`); + } + + const verificationResult = await response.json(); + + // Validate verification response structure + if (!verificationResult.verified && !verificationResult.error) { + throw new Error("Invalid verification response structure"); + } + + return { + success: verificationResult.verified, + transactionId: verificationResult.transactionId || null, + error: verificationResult.error || null, + fraudScore: verificationResult.fraudScore || 0, + }; + } catch (error) { + throw new Error(`Verification error: ${error}`); + } + }; + + // Process Verified Payment: Execute transaction with verified token + const processVerifiedPayment = async (verificationResult: any) => { + const { transactionId, fraudScore } = verificationResult; + + try { + // Check fraud score threshold (0-100, higher = more suspicious) + if (fraudScore > 75) { + throw new Error("Payment flagged as high fraud risk"); + } + + // Process the verified payment + const response = await fetch("/api/process-payment", { + method: "POST", headers: { + "Content-Type": "application/json", "Authorization": `Bearer ${process.env.NEXT_PUBLIC_PAYMENT_API_KEY}`, + }, + body: JSON.stringify({ + transactionId: transactionId, + fraudScore: fraudScore, + // PCI-DSS: Include settlement strategy + settlement: { + method: "direct", schedule: "immediate"}, + // Include receipt and audit information + receipt: { + sendTo: "customer_email", includeInvoice: true, + }, + }), + }); + + if (!response.ok) { + throw new Error(`Payment processing failed: ${response.statusText}`); + } + + const processResult = await response.json(); + + // Log transaction for audit and compliance + await logTransactionAudit({ + transactionId: processResult.transactionId, + status: "completed", timestamp: new Date().toISOString(), + }); + + return processResult; + } catch (error) { + throw new Error(`Processing error: ${error}`); + } + }; + + // Error Handling: Specific error responses for different scenarios + const handlePaymentError = (error: any) => { + const errorMap: { [key: string]: string } = { + "insufficient_funds": "Your account has insufficient funds. Please check your balance.", "card_declined": "Your card was declined. Please verify your card details.", "expired_card": "Your card has expired. Please use a valid card.", "invalid_cvv": "The CVV provided is invalid. Please check and try again.", "fraud_detected": "This transaction was flagged for fraud prevention. Please contact support.", "duplicate_transaction": "A similar transaction was recently processed. Please try again later.", "network_error": "Network error occurred. Please try again."}; + + const errorMessage = errorMap[error] || "Payment verification failed. Please try again."; + + return { + status: "error", message: errorMessage, + code: error, + // Include retry information + retry: { + allowed: !["card_declined", "expired_card", "insufficient_funds"].includes(error), + afterSeconds: 30, + }, + }; + }; + + // Exception Handling: Catch unexpected errors and provide user-friendly message + const handlePaymentException = (error: any) => { + console.error("Payment exception:", error); + + return { + status: "error", message: "An unexpected error occurred during payment processing. Please try again or contact support.", code: "PAYMENT_EXCEPTION", debug: process.env.NODE_ENV === "development" ? error.message : undefined, + retry: { + allowed: true, + afterSeconds: 60, + }, + }; + }; + + // Generate nonce for CSRF protection + const generateNonce = (): string => { + return Math.random().toString(36).substr(2) + Date.now().toString(36); + }; + + // Audit logging for PCI-DSS compliance + const logTransactionAudit = async (auditData: any) => { + try { + await fetch("/api/audit-log", { + method: "POST", headers: { + "Content-Type": "application/json"}, + body: JSON.stringify({ + ...auditData, + type: "payment_transaction", ipAddress: "ip_here", // Should be captured server-side + userAgent: typeof window !== "undefined" ? navigator.userAgent : ""}), + }); + } catch (error) { + console.error("Audit logging failed:", error); + } + }; + return ( ); -} \ No newline at end of file +} -- 2.49.1 From 72fd95c53c0e148be2566cf878888da410e90d93 Mon Sep 17 00:00:00 2001 From: bender Date: Sat, 7 Mar 2026 06:33:33 +0000 Subject: [PATCH 3/3] Add src/components/sections/payment/PaymentTerminal.tsx --- .../sections/payment/PaymentTerminal.tsx | 362 ++++++++++++++++++ 1 file changed, 362 insertions(+) create mode 100644 src/components/sections/payment/PaymentTerminal.tsx diff --git a/src/components/sections/payment/PaymentTerminal.tsx b/src/components/sections/payment/PaymentTerminal.tsx new file mode 100644 index 0000000..c6f5b04 --- /dev/null +++ b/src/components/sections/payment/PaymentTerminal.tsx @@ -0,0 +1,362 @@ +"use client"; + +import { useState } from "react"; +import { CreditCard, Lock, AlertCircle } from "lucide-react"; +import Input from "@/components/form/Input"; + +interface PaymentFormData { + cardNumber: string; + cardholderName: string; + expiryMonth: string; + expiryYear: string; + cvv: string; + billingAddress: string; + billingCity: string; + billingState: string; + billingZip: string; + billingCountry: string; +} + +export default function PaymentTerminal() { + const [formData, setFormData] = useState({ + cardNumber: "", cardholderName: "", expiryMonth: "", expiryYear: "", cvv: "", billingAddress: "", billingCity: "", billingState: "", billingZip: "", billingCountry: ""}); + + const [errors, setErrors] = useState>({}); + const [isProcessing, setIsProcessing] = useState(false); + const [successMessage, setSuccessMessage] = useState(""); + + const handleInputChange = (field: keyof PaymentFormData, value: string) => { + setFormData((prev) => ({ + ...prev, + [field]: value, + })); + // Clear error for this field when user starts typing + if (errors[field]) { + setErrors((prev) => ({ + ...prev, + [field]: ""})); + } + }; + + const formatCardNumber = (value: string) => { + const cleaned = value.replace(/\D/g, ""); + const formatted = cleaned + .slice(0, 16) + .replace(/\s/g, "") + .replace(/(\d{4})/g, "$1 ") + .trim(); + return formatted; + }; + + const formatCVV = (value: string) => { + return value.replace(/\D/g, "").slice(0, 4); + }; + + const validateForm = (): boolean => { + const newErrors: Record = {}; + + if (!formData.cardNumber || formData.cardNumber.replace(/\s/g, "").length !== 16) { + newErrors.cardNumber = "Valid card number required (16 digits)"; + } + + if (!formData.cardholderName.trim()) { + newErrors.cardholderName = "Cardholder name required"; + } + + if (!formData.expiryMonth || !formData.expiryYear) { + newErrors.expiry = "Expiry date required"; + } + + if (!formData.cvv || formData.cvv.length < 3) { + newErrors.cvv = "Valid CVV required (3-4 digits)"; + } + + if (!formData.billingAddress.trim()) { + newErrors.billingAddress = "Billing address required"; + } + + if (!formData.billingCity.trim()) { + newErrors.billingCity = "City required"; + } + + if (!formData.billingZip.trim()) { + newErrors.billingZip = "ZIP code required"; + } + + if (!formData.billingCountry.trim()) { + newErrors.billingCountry = "Country required"; + } + + setErrors(newErrors); + return Object.keys(newErrors).length === 0; + }; + + const handleSubmit = async (e: React.FormEvent) => { + e.preventDefault(); + + if (!validateForm()) { + return; + } + + setIsProcessing(true); + setSuccessMessage(""); + + // Simulate payment processing + try { + await new Promise((resolve) => setTimeout(resolve, 2000)); + setSuccessMessage("Payment processed successfully! Your transaction is complete."); + // Reset form + setFormData({ + cardNumber: "", cardholderName: "", expiryMonth: "", expiryYear: "", cvv: "", billingAddress: "", billingCity: "", billingState: "", billingZip: "", billingCountry: ""}); + } catch (error) { + setErrors({ submit: "Payment failed. Please try again." }); + } finally { + setIsProcessing(false); + } + }; + + return ( +
+
+ {/* Header */} +
+
+ +
+

Payment Terminal

+

Securely enter your payment information below

+
+ + {/* Payment Form */} +
+ {/* Security Badge */} +
+ + Your payment information is secure and encrypted +
+ + {successMessage && ( +
+
+ ✓ +
+

{successMessage}

+
+ )} + +
+ {/* Card Information */} +
+

Card Information

+
+ {/* Card Number */} +
+ + handleInputChange("cardNumber", formatCardNumber(value))} + placeholder="1234 5678 9012 3456" + type="text" + required + /> + {errors.cardNumber && ( +

+ + {errors.cardNumber} +

+ )} +
+ + {/* Cardholder Name */} +
+ + handleInputChange("cardholderName", value)} + placeholder="John Doe" + type="text" + required + /> + {errors.cardholderName && ( +

+ + {errors.cardholderName} +

+ )} +
+ + {/* Expiry and CVV */} +
+
+ + + handleInputChange( + "expiryMonth", value.replace(/\D/g, "").slice(0, 2) + ) + } + placeholder="MM" + type="text" + required + /> +
+
+ + + handleInputChange( + "expiryYear", value.replace(/\D/g, "").slice(0, 2) + ) + } + placeholder="YY" + type="text" + required + /> +
+
+ + handleInputChange("cvv", formatCVV(value))} + placeholder="123" + type="password" + required + /> +
+
+ {errors.expiry && ( +

+ + {errors.expiry} +

+ )} + {errors.cvv && ( +

+ + {errors.cvv} +

+ )} +
+
+ + {/* Billing Address */} +
+

Billing Address

+
+ {/* Address */} +
+ + handleInputChange("billingAddress", value)} + placeholder="123 Main Street" + type="text" + required + /> + {errors.billingAddress && ( +

+ + {errors.billingAddress} +

+ )} +
+ + {/* City, State, ZIP */} +
+
+ + handleInputChange("billingCity", value)} + placeholder="New York" + type="text" + required + /> + {errors.billingCity && ( +

+ + {errors.billingCity} +

+ )} +
+
+ + handleInputChange("billingState", value)} + placeholder="NY" + type="text" + /> +
+
+ + handleInputChange("billingZip", value)} + placeholder="10001" + type="text" + required + /> + {errors.billingZip && ( +

+ + {errors.billingZip} +

+ )} +
+
+ + {/* Country */} +
+ + handleInputChange("billingCountry", value)} + placeholder="United States" + type="text" + required + /> + {errors.billingCountry && ( +

+ + {errors.billingCountry} +

+ )} +
+
+
+ + {/* Submit Error */} + {errors.submit && ( +
+ +

{errors.submit}

+
+ )} + + {/* Submit Button */} + +
+
+
+
+ ); +} -- 2.49.1