Initial commit

2025-09-26 17:34:37 +02:00
commit b96ccfd112
37 changed files with 23138 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,7 @@
+node_modules
+backend/.env
+backend/node_modules
+frontend/.env
+frontend/node_modules
+frontend/dist
+frontend/dist-ssr
--- a/.idea/.gitignore
+++ b/.idea/.gitignore
@@ -0,0 +1,8 @@
+# Default ignored files
+/shelf/
+/workspace.xml
+# Editor-based HTTP Client requests
+/httpRequests/
+# Datasource local storage ignored files
+/dataSources/
+/dataSources.local.xml
--- a/.idea/aluxpay.iml
+++ b/.idea/aluxpay.iml
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$">
+      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
+      <excludeFolder url="file://$MODULE_DIR$/temp" />
+      <excludeFolder url="file://$MODULE_DIR$/tmp" />
+    </content>
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>
--- a/.idea/inspectionProfiles/Project_Default.xml
+++ b/.idea/inspectionProfiles/Project_Default.xml
@@ -0,0 +1,6 @@
+<component name="InspectionProjectProfileManager">
+  <profile version="1.0">
+    <option name="myName" value="Project Default" />
+    <inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
+  </profile>
+</component>
--- a/.idea/modules.xml
+++ b/.idea/modules.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/aluxpay.iml" filepath="$PROJECT_DIR$/.idea/aluxpay.iml" />
+    </modules>
+  </component>
+</project>
--- a/.idea/vcs.xml
+++ b/.idea/vcs.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$" vcs="Git" />
+  </component>
+</project>
--- a/README.md
+++ b/README.md
--- a/backend/package-lock.json
+++ b/backend/package-lock.json
--- a/backend/package.json
+++ b/backend/package.json
@@ -0,0 +1,25 @@
+{
+  "name": "payment-backend",
+  "version": "1.0.0",
+  "description": "Express backend for payment processing",
+  "main": "server.js",
+  "scripts": {
+    "start": "node server.js",
+    "dev": "nodemon server.js"
+  },
+  "dependencies": {
+    "@paypal/checkout-server-sdk": "^1.0.3",
+    "axios": "^1.6.2",
+    "cors": "^2.8.5",
+    "dotenv": "^16.6.1",
+    "express": "^4.18.2",
+    "express-rate-limit": "^7.1.5",
+    "express-validator": "^7.0.1",
+    "helmet": "^7.1.0",
+    "jsonwebtoken": "^9.0.2",
+    "morgan": "^1.10.0"
+  },
+  "devDependencies": {
+    "nodemon": "^3.0.2"
+  }
+}
--- a/backend/routes/payment.js
+++ b/backend/routes/payment.js
@@ -0,0 +1,269 @@
+const express = require('express');
+const { body, validationResult } = require('express-validator');
+const paypalService = require('../services/paypal');
+const woocommerceService = require('../services/woocommerce');
+const { generateToken, verifyToken } = require('../utils/helpers');
+
+const router = express.Router();
+
+// Validation middleware
+const validateCreateOrder = [
+    body('wc_order_id').isNumeric().withMessage('WooCommerce order ID must be numeric'),
+    body('total').isDecimal({ decimal_digits: '0,2' }).withMessage('Total must be a valid amount'),
+    body('currency').optional().isAlpha().isLength({ min: 3, max: 3 }).withMessage('Currency must be 3 letter code'),
+];
+
+const validateCaptureOrder = [
+    body('paypal_order_id').notEmpty().withMessage('PayPal order ID is required'),
+    body('wc_order_id').isNumeric().withMessage('WooCommerce order ID must be numeric'),
+];
+
+// Create PayPal order
+router.post('/create-order', validateCreateOrder, async (req, res) => {
+    try {
+        // Check validation errors
+        const errors = validationResult(req);
+        if (!errors.isEmpty()) {
+            return res.status(400).json({
+                success: false,
+                error: 'Validation failed',
+                details: errors.array()
+            });
+        }
+
+        const { wc_order_id, total, currency, description, items } = req.body;
+
+        // In development, allow bypassing WooCommerce validation
+        let wcOrder = null;
+        const skipWooCommerce = process.env.SKIP_WOOCOMMERCE === 'true';
+
+        console.log('Skip WooCommerce:', skipWooCommerce, '| Env value:', process.env.SKIP_WOOCOMMERCE);
+
+        if (!skipWooCommerce) {
+            // Get WooCommerce order details for verification
+            wcOrder = await woocommerceService.getOrder(wc_order_id);
+            if (!wcOrder.success) {
+                return res.status(400).json({
+                    success: false,
+                    error: 'Invalid WooCommerce order',
+                    details: wcOrder.error,
+                    suggestion: 'For testing without WooCommerce, add SKIP_WOOCOMMERCE=true to your backend/.env file'
+                });
+            }
+
+            // Verify order total matches (security check)
+            if (parseFloat(wcOrder.order.total) !== parseFloat(total)) {
+                console.warn('Order total mismatch:', {
+                    wc_total: wcOrder.order.total,
+                    requested_total: total,
+                    order_id: wc_order_id
+                });
+
+                return res.status(400).json({
+                    success: false,
+                    error: 'Order total mismatch'
+                });
+            }
+        } else {
+            console.log('Skipping WooCommerce validation - TEST MODE');
+        }
+
+        // Prepare order data for PayPal
+        const orderData = {
+            wc_order_id,
+            reference_id: `WC-${wc_order_id}-${Date.now()}`,
+            total: total,
+            currency: currency || 'USD',
+            description: description || `Order #${wc_order_id} from ${wcOrder?.order?.billing?.first_name || 'Test Customer'}`,
+            items: items || [],
+            brand_name: 'Your Store Name' // Customize this
+        };
+
+        // Create PayPal order
+        const paypalResult = await paypalService.createOrder(orderData);
+
+        if (!paypalResult.success) {
+            return res.status(500).json({
+                success: false,
+                error: 'Failed to create PayPal order',
+                details: paypalResult.error
+            });
+        }
+
+        // Generate secure token for this transaction
+        const token = generateToken({
+            wc_order_id,
+            paypal_order_id: paypalResult.order_id,
+            total,
+            created_at: Date.now()
+        });
+
+        res.json({
+            success: true,
+            paypal_order_id: paypalResult.order_id,
+            token: token,
+            approval_url: paypalResult.links?.find(link => link.rel === 'approve')?.href
+        });
+
+    } catch (error) {
+        console.error('Create Order Error:', error);
+        res.status(500).json({
+            success: false,
+            error: 'Internal server error'
+        });
+    }
+});
+
+// Capture PayPal payment
+router.post('/capture-order', validateCaptureOrder, async (req, res) => {
+    try {
+        // Check validation errors
+        const errors = validationResult(req);
+        if (!errors.isEmpty()) {
+            return res.status(400).json({
+                success: false,
+                error: 'Validation failed',
+                details: errors.array()
+            });
+        }
+
+        const { paypal_order_id, wc_order_id, token } = req.body;
+
+        console.log('Capture request received:', {
+            paypal_order_id,
+            wc_order_id,
+            hasToken: !!token,
+            tokenLength: token?.length
+        });
+
+        // Verify token (optional in development)
+        const skipTokenValidation = process.env.NODE_ENV === 'development' && process.env.SKIP_TOKEN_VALIDATION === 'true';
+
+        if (token && !skipTokenValidation) {
+            const tokenData = verifyToken(token);
+            console.log('Token verification result:', {
+                isValid: !!tokenData,
+                tokenData: tokenData
+            });
+
+            if (!tokenData || tokenData.wc_order_id !== parseInt(wc_order_id)) {
+                console.error('Token validation failed:', {
+                    tokenData,
+                    expectedOrderId: wc_order_id,
+                    tokenOrderId: tokenData?.wc_order_id
+                });
+
+                return res.status(401).json({
+                    success: false,
+                    error: 'Invalid or expired token'
+                });
+            }
+        } else if (skipTokenValidation) {
+            console.warn('Skipping token validation - DEVELOPMENT MODE');
+        } else {
+            console.warn('No token provided in capture request');
+        }
+
+        // Capture the PayPal payment
+        const captureResult = await paypalService.captureOrder(paypal_order_id);
+
+        if (!captureResult.success) {
+            // Mark WooCommerce order as failed only if not skipping WooCommerce
+            if (process.env.SKIP_WOOCOMMERCE !== 'true') {
+                await woocommerceService.failPayment(wc_order_id, captureResult.error);
+            }
+
+            return res.status(400).json({
+                success: false,
+                error: 'Payment capture failed',
+                details: captureResult.error
+            });
+        }
+
+        // Update WooCommerce order (skip if in test mode)
+        let wcResult = { success: true, message: 'WooCommerce update skipped (test mode)' };
+
+        if (process.env.SKIP_WOOCOMMERCE !== 'true') {
+            wcResult = await woocommerceService.completePayment(wc_order_id, captureResult);
+
+            if (!wcResult.success) {
+                console.error('WooCommerce update failed after successful payment:', wcResult.error);
+                // Payment succeeded but WC update failed - this needs manual review
+            }
+        } else {
+            console.log('Skipping WooCommerce update - TEST MODE');
+        }
+
+        res.json({
+            success: true,
+            transaction_id: captureResult.transaction_id,
+            status: captureResult.status,
+            payer_email: captureResult.payer?.email_address,
+            woocommerce_updated: wcResult.success,
+            test_mode: process.env.SKIP_WOOCOMMERCE === 'true'
+        });
+
+    } catch (error) {
+        console.error('Capture Order Error:', error);
+        res.status(500).json({
+            success: false,
+            error: 'Internal server error'
+        });
+    }
+});
+
+// Get order status
+router.get('/order-status/:wc_order_id', async (req, res) => {
+    try {
+        const { wc_order_id } = req.params;
+
+        if (!wc_order_id || isNaN(wc_order_id)) {
+            return res.status(400).json({
+                success: false,
+                error: 'Invalid order ID'
+            });
+        }
+
+        // Skip WooCommerce check if in test mode
+        if (process.env.SKIP_WOOCOMMERCE === 'true') {
+            return res.json({
+                success: true,
+                order_id: wc_order_id,
+                status: 'completed',
+                total: '0.00',
+                currency: 'USD',
+                payment_method: 'paypal',
+                payment_method_title: 'PayPal (Test Mode)',
+                test_mode: true
+            });
+        }
+
+        const wcOrder = await woocommerceService.getOrder(wc_order_id);
+
+        if (!wcOrder.success) {
+            return res.status(404).json({
+                success: false,
+                error: 'Order not found'
+            });
+        }
+
+        res.json({
+            success: true,
+            order_id: wcOrder.order.id,
+            status: wcOrder.order.status,
+            total: wcOrder.order.total,
+            currency: wcOrder.order.currency,
+            payment_method: wcOrder.order.payment_method,
+            payment_method_title: wcOrder.order.payment_method_title
+        });
+
+    } catch (error) {
+        console.error('Get Order Status Error:', error);
+        res.status(500).json({
+            success: false,
+            error: 'Internal server error'
+        });
+    }
+});
+
+module.exports = router;
--- a/backend/routes/webhook.js
+++ b/backend/routes/webhook.js
@@ -0,0 +1,173 @@
+const express = require('express');
+const paypalService = require('../services/paypal');
+const woocommerceService = require('../services/woocommerce');
+
+const router = express.Router();
+
+// PayPal webhook handler
+router.post('/paypal', async (req, res) => {
+    try {
+        const webhookBody = req.body;
+        const headers = req.headers;
+
+        console.log('PayPal Webhook Received:', {
+            event_type: webhookBody.event_type,
+            resource_id: webhookBody.resource?.id,
+            timestamp: new Date().toISOString()
+        });
+
+        // Verify webhook signature (simplified for development)
+        const isValid = paypalService.verifyWebhookSignature(headers, webhookBody, process.env.PAYPAL_WEBHOOK_ID);
+
+        if (!isValid) {
+            console.warn('Invalid PayPal webhook signature');
+            return res.status(401).json({ error: 'Invalid signature' });
+        }
+
+        // Handle different webhook events
+        switch (webhookBody.event_type) {
+            case 'PAYMENT.CAPTURE.COMPLETED':
+                await handlePaymentCaptured(webhookBody.resource);
+                break;
+
+            case 'PAYMENT.CAPTURE.DENIED':
+                await handlePaymentDenied(webhookBody.resource);
+                break;
+
+            case 'PAYMENT.CAPTURE.REFUNDED':
+                await handlePaymentRefunded(webhookBody.resource);
+                break;
+
+            default:
+                console.log('Unhandled PayPal webhook event:', webhookBody.event_type);
+        }
+
+        res.status(200).json({ status: 'success' });
+
+    } catch (error) {
+        console.error('PayPal Webhook Error:', error);
+        res.status(500).json({ error: 'Webhook processing failed' });
+    }
+});
+
+// Handle payment captured
+async function handlePaymentCaptured(resource) {
+    try {
+        console.log('Processing payment capture webhook:', {
+            capture_id: resource.id,
+            amount: resource.amount?.value,
+            custom_id: resource.custom_id
+        });
+
+        const customId = resource.custom_id;
+        if (!customId) {
+            console.warn('No custom_id found in payment capture');
+            return;
+        }
+
+        // Extract WooCommerce order ID from custom_id
+        const wcOrderId = parseInt(customId);
+        if (isNaN(wcOrderId)) {
+            console.warn('Invalid WooCommerce order ID in custom_id:', customId);
+            return;
+        }
+
+        // Prepare payment data
+        const paymentData = {
+            transaction_id: resource.id,
+            payer: {
+                email_address: resource.payer?.email_address || 'N/A'
+            }
+        };
+
+        // Update WooCommerce order
+        const result = await woocommerceService.completePayment(wcOrderId, paymentData);
+
+        if (result.success) {
+            console.log('Payment capture webhook processed successfully');
+        } else {
+            console.error('Failed to update WooCommerce order from webhook:', result.error);
+        }
+
+    } catch (error) {
+        console.error('Handle Payment Captured Error:', error);
+    }
+}
+
+// Handle payment denied
+async function handlePaymentDenied(resource) {
+    try {
+        console.log('Processing payment denied webhook:', {
+            capture_id: resource.id,
+            custom_id: resource.custom_id
+        });
+
+        const customId = resource.custom_id;
+        if (!customId) {
+            console.warn('No custom_id found in payment denial');
+            return;
+        }
+
+        const wcOrderId = parseInt(customId);
+        if (isNaN(wcOrderId)) {
+            console.warn('Invalid WooCommerce order ID in custom_id:', customId);
+            return;
+        }
+
+        // Mark order as failed
+        const result = await woocommerceService.failPayment(wcOrderId, 'Payment was denied by PayPal');
+
+        if (result.success) {
+            console.log('Payment denial webhook processed successfully');
+        } else {
+            console.error('Failed to update WooCommerce order from denial webhook:', result.error);
+        }
+
+    } catch (error) {
+        console.error('Handle Payment Denied Error:', error);
+    }
+}
+
+// Handle payment refunded
+async function handlePaymentRefunded(resource) {
+    try {
+        console.log('Processing payment refund webhook:', {
+            refund_id: resource.id,
+            amount: resource.amount?.value,
+            custom_id: resource.custom_id
+        });
+
+        const customId = resource.custom_id;
+        if (!customId) {
+            console.warn('No custom_id found in payment refund');
+            return;
+        }
+
+        const wcOrderId = parseInt(customId);
+        if (isNaN(wcOrderId)) {
+            console.warn('Invalid WooCommerce order ID in custom_id:', customId);
+            return;
+        }
+
+        // Add refund note to WooCommerce order
+        const noteText = `Payment refunded via PayPal. Refund ID: ${resource.id}. Amount: ${resource.amount?.value} ${resource.amount?.currency_code}`;
+
+        await woocommerceService.addOrderNote(wcOrderId, noteText, true);
+
+        console.log('Payment refund webhook processed successfully');
+
+    } catch (error) {
+        console.error('Handle Payment Refunded Error:', error);
+    }
+}
+
+// Health check for webhooks
+router.get('/health', (req, res) => {
+    res.json({
+        status: 'OK',
+        service: 'webhooks',
+        timestamp: new Date().toISOString()
+    });
+});
+
+module.exports = router;
--- a/backend/server.js
+++ b/backend/server.js
@@ -0,0 +1,112 @@
+const express = require('express');
+const cors = require('cors');
+const helmet = require('helmet');
+const morgan = require('morgan');
+const rateLimit = require('express-rate-limit');
+require('dotenv').config();
+
+const paymentRoutes = require('./routes/payment');
+const webhookRoutes = require('./routes/webhook');
+
+const app = express();
+const PORT = process.env.PORT || 5000;
+
+// Rate limiting
+const limiter = rateLimit({
+    windowMs: 15 * 60 * 1000, // 15 minutes
+    max: 100 // limit each IP to 100 requests per windowMs
+});
+
+// Middleware
+app.use(helmet());
+app.use(limiter);
+app.use(morgan('combined'));
+
+// CORS configuration
+const corsOptions = {
+    origin: process.env.ALLOWED_ORIGINS?.split(',') || ['http://localhost:3000'],
+    credentials: true,
+    optionsSuccessStatus: 200
+};
+app.use(cors(corsOptions));
+
+// Body parsing middleware
+app.use('/webhook', express.raw({ type: 'application/json' })); // Raw body for webhooks
+app.use(express.json({ limit: '10mb' }));
+app.use(express.urlencoded({ extended: true }));
+
+// Routes
+app.use('/api/payment', paymentRoutes);
+app.use('/webhook', webhookRoutes);
+
+// Health check endpoint
+app.get('/api/health', (req, res) => {
+    res.json({
+        status: 'OK',
+        timestamp: new Date().toISOString(),
+        environment: process.env.NODE_ENV || 'development'
+    });
+});
+
+// Debug endpoint (only in development)
+app.get('/api/debug/env', (req, res) => {
+    if (process.env.NODE_ENV === 'production') {
+        return res.status(403).json({ error: 'Not available in production' });
+    }
+
+    res.json({
+        NODE_ENV: process.env.NODE_ENV,
+        PORT: process.env.PORT,
+        FRONTEND_URL: process.env.FRONTEND_URL,
+        SKIP_WOOCOMMERCE: process.env.SKIP_WOOCOMMERCE,
+        SKIP_TOKEN_VALIDATION: process.env.SKIP_TOKEN_VALIDATION,
+        PAYPAL_MODE: process.env.PAYPAL_MODE,
+        HAS_PAYPAL_CLIENT_ID: !!process.env.PAYPAL_CLIENT_ID,
+        HAS_PAYPAL_CLIENT_SECRET: !!process.env.PAYPAL_CLIENT_SECRET,
+        HAS_JWT_SECRET: !!process.env.JWT_SECRET,
+        JWT_SECRET_LENGTH: process.env.JWT_SECRET?.length || 0,
+        HAS_WEBHOOK_SECRET: !!process.env.WEBHOOK_SECRET,
+        HAS_WC_URL: !!process.env.WOOCOMMERCE_URL,
+        HAS_WC_CONSUMER_KEY: !!process.env.WOOCOMMERCE_CONSUMER_KEY,
+        HAS_WC_CONSUMER_SECRET: !!process.env.WOOCOMMERCE_CONSUMER_SECRET,
+        ALLOWED_ORIGINS: process.env.ALLOWED_ORIGINS
+    });
+});
+
+// Error handling middleware
+app.use((err, req, res, next) => {
+    console.error('Error:', err);
+
+    // Don't expose error details in production
+    if (process.env.NODE_ENV === 'production') {
+        res.status(500).json({
+            error: 'Internal server error',
+            timestamp: new Date().toISOString()
+        });
+    } else {
+        res.status(500).json({
+            error: err.message,
+            stack: err.stack,
+            timestamp: new Date().toISOString()
+        });
+    }
+});
+
+// 404 handler
+app.use('*', (req, res) => {
+    res.status(404).json({
+        error: 'Route not found',
+        path: req.originalUrl,
+        timestamp: new Date().toISOString()
+    });
+});
+
+// Start server
+app.listen(PORT, () => {
+    console.log(`🚀 Server running on port ${PORT}`);
+    console.log(`📊 Environment: ${process.env.NODE_ENV || 'development'}`);
+    console.log(`💳 PayPal Mode: ${process.env.PAYPAL_MODE || 'sandbox'}`);
+    console.log(`🌐 CORS Origins: ${process.env.ALLOWED_ORIGINS || 'http://localhost:3000'}`);
+});
+
+module.exports = app;
--- a/backend/services/paypal.js
+++ b/backend/services/paypal.js
@@ -0,0 +1,145 @@
+const paypal = require('@paypal/checkout-server-sdk');
+
+// PayPal environment setup
+function environment() {
+    const clientId = process.env.PAYPAL_CLIENT_ID;
+    const clientSecret = process.env.PAYPAL_CLIENT_SECRET;
+    const mode = process.env.PAYPAL_MODE || 'sandbox';
+
+    if (!clientId || !clientSecret) {
+        throw new Error('PayPal credentials not found in environment variables');
+    }
+
+    return mode === 'live'
+        ? new paypal.core.LiveEnvironment(clientId, clientSecret)
+        : new paypal.core.SandboxEnvironment(clientId, clientSecret);
+}
+
+// PayPal client
+function client() {
+    return new paypal.core.PayPalHttpClient(environment());
+}
+
+// Create PayPal order
+async function createOrder(orderData) {
+    try {
+        const request = new paypal.orders.OrdersCreateRequest();
+        request.prefer("return=representation");
+        request.requestBody({
+            intent: 'CAPTURE',
+            purchase_units: [{
+                reference_id: orderData.reference_id,
+                amount: {
+                    currency_code: orderData.currency || 'USD',
+                    value: orderData.total
+                },
+                description: orderData.description || 'Payment from WooCommerce',
+                custom_id: orderData.wc_order_id,
+                items: orderData.items || []
+            }],
+            application_context: {
+                brand_name: orderData.brand_name || 'Your Store',
+                landing_page: 'BILLING',
+                user_action: 'PAY_NOW',
+                return_url: `${process.env.FRONTEND_URL}/success`,
+                cancel_url: `${process.env.FRONTEND_URL}/cancel`
+            }
+        });
+
+        const order = await client().execute(request);
+
+        console.log('PayPal Order Created:', {
+            id: order.result.id,
+            status: order.result.status,
+            amount: orderData.total
+        });
+
+        return {
+            success: true,
+            order_id: order.result.id,
+            status: order.result.status,
+            links: order.result.links
+        };
+    } catch (error) {
+        console.error('PayPal Create Order Error:', error);
+        return {
+            success: false,
+            error: error.message,
+            details: error.details || []
+        };
+    }
+}
+
+// Capture PayPal payment
+async function captureOrder(orderId) {
+    try {
+        const request = new paypal.orders.OrdersCaptureRequest(orderId);
+        request.requestBody({});
+
+        const capture = await client().execute(request);
+
+        console.log('PayPal Order Captured:', {
+            id: capture.result.id,
+            status: capture.result.status,
+            payer_email: capture.result.payer?.email_address
+        });
+
+        return {
+            success: true,
+            capture_id: capture.result.id,
+            status: capture.result.status,
+            payer: capture.result.payer,
+            purchase_units: capture.result.purchase_units,
+            transaction_id: capture.result.purchase_units[0]?.payments?.captures[0]?.id
+        };
+    } catch (error) {
+        console.error('PayPal Capture Order Error:', error);
+        return {
+            success: false,
+            error: error.message,
+            details: error.details || []
+        };
+    }
+}
+
+// Get order details
+async function getOrderDetails(orderId) {
+    try {
+        const request = new paypal.orders.OrdersGetRequest(orderId);
+        const order = await client().execute(request);
+
+        return {
+            success: true,
+            order: order.result
+        };
+    } catch (error) {
+        console.error('PayPal Get Order Error:', error);
+        return {
+            success: false,
+            error: error.message
+        };
+    }
+}
+
+// Verify webhook signature
+function verifyWebhookSignature(headers, body, webhookId) {
+    // This is a simplified version - in production, use PayPal's webhook verification
+    // For now, we'll do basic validation
+    const webhookSecret = process.env.WEBHOOK_SECRET;
+
+    if (!webhookSecret) {
+        console.warn('WEBHOOK_SECRET not set - skipping signature verification');
+        return true;
+    }
+
+    // Add proper webhook signature verification here
+    // For development, we'll return true
+    return true;
+}
+
+module.exports = {
+    createOrder,
+    captureOrder,
+    getOrderDetails,
+    verifyWebhookSignature
+};
--- a/backend/services/woocommerce.js
+++ b/backend/services/woocommerce.js
@@ -0,0 +1,204 @@
+const axios = require('axios');
+const https = require('https');
+
+class WooCommerceService {
+    constructor() {
+        this.baseURL = process.env.WOOCOMMERCE_URL;
+        this.consumerKey = process.env.WOOCOMMERCE_CONSUMER_KEY;
+        this.consumerSecret = process.env.WOOCOMMERCE_CONSUMER_SECRET;
+
+        if (!this.baseURL || !this.consumerKey || !this.consumerSecret) {
+            console.warn('WooCommerce credentials not fully configured');
+        }
+
+        // Create HTTPS agent that ignores SSL errors in development
+        const httpsAgent = new https.Agent({
+            rejectUnauthorized: process.env.NODE_ENV === 'production'
+        });
+
+        this.client = axios.create({
+            baseURL: `${this.baseURL}/wp-json/wc/v3`,
+            auth: {
+                username: this.consumerKey,
+                password: this.consumerSecret
+            },
+            timeout: 10000,
+            httpsAgent: httpsAgent,
+            // Additional options for SSL issues
+            headers: {
+                'User-Agent': 'PaymentWebsite/1.0'
+            }
+        });
+    }
+
+    // Get order details from WooCommerce
+    async getOrder(orderId) {
+        try {
+            const response = await this.client.get(`/orders/${orderId}`);
+
+            console.log('WooCommerce Order Retrieved:', {
+                id: response.data.id,
+                status: response.data.status,
+                total: response.data.total
+            });
+
+            return {
+                success: true,
+                order: response.data
+            };
+        } catch (error) {
+            console.error('WooCommerce Get Order Error:', {
+                orderId,
+                error: error.response?.data || error.message
+            });
+
+            return {
+                success: false,
+                error: error.response?.data?.message || error.message
+            };
+        }
+    }
+
+    // Update order status in WooCommerce
+    async updateOrderStatus(orderId, status, transactionId = null) {
+        try {
+            const updateData = {
+                status: status
+            };
+
+            // Add transaction ID if payment was successful
+            if (transactionId) {
+                updateData.transaction_id = transactionId;
+                updateData.meta_data = [
+                    {
+                        key: '_paypal_transaction_id',
+                        value: transactionId
+                    }
+                ];
+            }
+
+            const response = await this.client.put(`/orders/${orderId}`, updateData);
+
+            console.log('WooCommerce Order Updated:', {
+                id: response.data.id,
+                status: response.data.status,
+                transaction_id: transactionId
+            });
+
+            return {
+                success: true,
+                order: response.data
+            };
+        } catch (error) {
+            console.error('WooCommerce Update Order Error:', {
+                orderId,
+                status,
+                error: error.response?.data || error.message
+            });
+
+            return {
+                success: false,
+                error: error.response?.data?.message || error.message
+            };
+        }
+    }
+
+    // Add order note
+    async addOrderNote(orderId, note, customerNote = false) {
+        try {
+            const response = await this.client.post(`/orders/${orderId}/notes`, {
+                note: note,
+                customer_note: customerNote
+            });
+
+            console.log('Order note added:', {
+                orderId,
+                noteId: response.data.id
+            });
+
+            return {
+                success: true,
+                note: response.data
+            };
+        } catch (error) {
+            console.error('Add Order Note Error:', {
+                orderId,
+                error: error.response?.data || error.message
+            });
+
+            return {
+                success: false,
+                error: error.response?.data?.message || error.message
+            };
+        }
+    }
+
+    // Process payment completion
+    async completePayment(orderId, paypalData) {
+        try {
+            // Update order to processing/completed
+            const updateResult = await this.updateOrderStatus(
+                orderId,
+                'processing', // or 'completed' based on your workflow
+                paypalData.transaction_id
+            );
+
+            if (!updateResult.success) {
+                throw new Error(updateResult.error);
+            }
+
+            // Add payment note
+            const noteText = `Payment completed via PayPal. Transaction ID: ${paypalData.transaction_id}. Payer Email: ${paypalData.payer?.email_address || 'N/A'}`;
+
+            await this.addOrderNote(orderId, noteText, false);
+
+            return {
+                success: true,
+                message: 'Payment completed and order updated'
+            };
+        } catch (error) {
+            console.error('Complete Payment Error:', {
+                orderId,
+                error: error.message
+            });
+
+            return {
+                success: false,
+                error: error.message
+            };
+        }
+    }
+
+    // Handle payment failure
+    async failPayment(orderId, reason) {
+        try {
+            // Update order to failed
+            const updateResult = await this.updateOrderStatus(orderId, 'failed');
+
+            if (!updateResult.success) {
+                throw new Error(updateResult.error);
+            }
+
+            // Add failure note
+            const noteText = `Payment failed: ${reason}`;
+            await this.addOrderNote(orderId, noteText, false);
+
+            return {
+                success: true,
+                message: 'Order marked as failed'
+            };
+        } catch (error) {
+            console.error('Fail Payment Error:', {
+                orderId,
+                error: error.message
+            });
+
+            return {
+                success: false,
+                error: error.message
+            };
+        }
+    }
+}
+
+module.exports = new WooCommerceService();
--- a/backend/utils/helpers.js
+++ b/backend/utils/helpers.js
@@ -0,0 +1,197 @@
+const jwt = require('jsonwebtoken');
+
+// Generate secure token for transactions
+function generateToken(data, expiresIn = '1h') {
+    try {
+        const secret = process.env.JWT_SECRET || 'your-fallback-secret-key';
+        return jwt.sign(data, secret, { expiresIn });
+    } catch (error) {
+        console.error('Token generation error:', error);
+        return null;
+    }
+}
+
+// Verify transaction token
+function verifyToken(token) {
+    try {
+        const secret = process.env.JWT_SECRET || 'your-fallback-secret-key';
+        return jwt.verify(token, secret);
+    } catch (error) {
+        console.error('Token verification error:', error);
+        return null;
+    }
+}
+
+// Format currency amount
+function formatCurrency(amount, currency = 'USD') {
+    try {
+        return new Intl.NumberFormat('en-US', {
+            style: 'currency',
+            currency: currency,
+            minimumFractionDigits: 2,
+            maximumFractionDigits: 2
+        }).format(parseFloat(amount));
+    } catch (error) {
+        return `${currency} ${parseFloat(amount).toFixed(2)}`;
+    }
+}
+
+// Validate email format
+function isValidEmail(email) {
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    return emailRegex.test(email);
+}
+
+// Sanitize order data for logging
+function sanitizeOrderData(orderData) {
+    const sanitized = { ...orderData };
+
+    // Remove sensitive data
+    delete sanitized.billing?.email;
+    delete sanitized.billing?.phone;
+    delete sanitized.customer_id;
+
+    return {
+        id: sanitized.id,
+        status: sanitized.status,
+        total: sanitized.total,
+        currency: sanitized.currency,
+        payment_method: sanitized.payment_method,
+        date_created: sanitized.date_created
+    };
+}
+
+// Generate reference ID
+function generateReferenceId(prefix = 'REF') {
+    const timestamp = Date.now();
+    const random = Math.random().toString(36).substring(2, 8).toUpperCase();
+    return `${prefix}-${timestamp}-${random}`;
+}
+
+// Validate PayPal amount format
+function validateAmount(amount) {
+    if (!amount) return false;
+
+    const numAmount = parseFloat(amount);
+    if (isNaN(numAmount)) return false;
+    if (numAmount <= 0) return false;
+    if (numAmount > 10000) return false; // Max amount check
+
+    // Check decimal places (max 2)
+    const decimalPlaces = (amount.toString().split('.')[1] || '').length;
+    if (decimalPlaces > 2) return false;
+
+    return true;
+}
+
+// Parse query parameters safely
+function parseQueryParams(req) {
+    const {
+        wc_order_id,
+        total,
+        currency,
+        customer_email,
+        return_url,
+        cancel_url
+    } = req.query;
+
+    return {
+        wc_order_id: wc_order_id ? parseInt(wc_order_id) : null,
+        total: total ? parseFloat(total) : null,
+        currency: currency || 'USD',
+        customer_email: customer_email || null,
+        return_url: return_url || `${process.env.FRONTEND_URL}/success`,
+        cancel_url: cancel_url || `${process.env.FRONTEND_URL}/cancel`
+    };
+}
+
+// Log API request/response
+function logApiCall(type, endpoint, data, response) {
+    console.log(`${type.toUpperCase()} API Call:`, {
+        endpoint,
+        timestamp: new Date().toISOString(),
+        data: sanitizeLogData(data),
+        response: sanitizeLogData(response),
+        success: response?.success || false
+    });
+}
+
+// Sanitize data for logging (remove sensitive info)
+function sanitizeLogData(data) {
+    if (!data || typeof data !== 'object') return data;
+
+    const sanitized = { ...data };
+    const sensitiveFields = [
+        'password', 'secret', 'token', 'key', 'auth',
+        'email', 'phone', 'address', 'credit_card'
+    ];
+
+    sensitiveFields.forEach(field => {
+        if (sanitized[field]) {
+            sanitized[field] = '[REDACTED]';
+        }
+    });
+
+    return sanitized;
+}
+
+// Error response helper
+function createErrorResponse(message, details = null, statusCode = 500) {
+    const response = {
+        success: false,
+        error: message,
+        timestamp: new Date().toISOString()
+    };
+
+    if (details && process.env.NODE_ENV !== 'production') {
+        response.details = details;
+    }
+
+    return { response, statusCode };
+}
+
+// Success response helper
+function createSuccessResponse(data, message = null) {
+    return {
+        success: true,
+        data: data,
+        message: message,
+        timestamp: new Date().toISOString()
+    };
+}
+
+// Retry mechanism for API calls
+async function retryOperation(operation, maxRetries = 3, delayMs = 1000) {
+    let lastError;
+
+    for (let attempt = 1; attempt <= maxRetries; attempt++) {
+        try {
+            return await operation();
+        } catch (error) {
+            lastError = error;
+            console.warn(`Operation failed (attempt ${attempt}/${maxRetries}):`, error.message);
+
+            if (attempt < maxRetries) {
+                await new Promise(resolve => setTimeout(resolve, delayMs * attempt));
+            }
+        }
+    }
+
+    throw lastError;
+}
+
+module.exports = {
+    generateToken,
+    verifyToken,
+    formatCurrency,
+    isValidEmail,
+    sanitizeOrderData,
+    generateReferenceId,
+    validateAmount,
+    parseQueryParams,
+    logApiCall,
+    sanitizeLogData,
+    createErrorResponse,
+    createSuccessResponse,
+    retryOperation
+};
--- a/frontend/.gitignore
+++ b/frontend/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/frontend/README.md
+++ b/frontend/README.md
@@ -0,0 +1,16 @@
+# React + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## React Compiler
+
+The React Compiler is not enabled on this template. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.
--- a/frontend/eslint.config.js
+++ b/frontend/eslint.config.js
@@ -0,0 +1,29 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{js,jsx}'],
+    extends: [
+      js.configs.recommended,
+      reactHooks.configs['recommended-latest'],
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        ecmaFeatures: { jsx: true },
+        sourceType: 'module',
+      },
+    },
+    rules: {
+      'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
+    },
+  },
+])
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>my-app</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -0,0 +1,32 @@
+{
+  "name": "my-app",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint my-app",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@paypal/react-paypal-js": "^8.9.1",
+    "axios": "^1.12.2",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1",
+    "react-router-dom": "^7.9.2",
+    "react-scripts": "^5.0.1"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.36.0",
+    "@types/react": "^19.1.13",
+    "@types/react-dom": "^19.1.9",
+    "@vitejs/plugin-react": "^5.0.3",
+    "eslint": "^9.36.0",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.20",
+    "globals": "^16.4.0",
+    "vite": "^7.1.7"
+  },
+  "proxy": "http://localhost:5001"
+}
--- a/frontend/public/vite.svg
+++ b/frontend/public/vite.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -0,0 +1,62 @@
+.App {
+    text-align: center;
+}
+
+.App-logo {
+    height: 40vmin;
+    pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+    .App-logo {
+        animation: App-logo-spin infinite 20s linear;
+    }
+}
+
+.App-header {
+    background-color: #282c34;
+    padding: 20px;
+    color: white;
+}
+
+.App-link {
+    color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+/* Custom PayPal button styling */
+.paypal-buttons {
+    margin-top: 20px;
+}
+
+/* Loading states */
+.btn-loading {
+    position: relative;
+    color: transparent;
+}
+
+.btn-loading::before {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 20px;
+    height: 20px;
+    border: 2px solid #ffffff;
+    border-radius: 50%;
+    border-top-color: transparent;
+    animation: spin 1s ease-in-out infinite;
+}
+
+@keyframes spin {
+    to { transform: translate(-50%, -50%) rotate(360deg); }
+}
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
+import { PayPalScriptProvider } from '@paypal/react-paypal-js';
+import Payment from './pages/Payment.jsx';
+import Success from './pages/Success.jsx';
+import Cancel from './pages/Cancel.jsx';
+import './App.css';
+
+// PayPal configuration
+const paypalOptions = {
+    "client-id": import.meta.env.VITE_REACT_APP_PAYPAL_CLIENT_ID || "test",
+    currency: "USD",
+    intent: "capture",
+};
+
+function App() {
+    return (
+        <PayPalScriptProvider options={paypalOptions}>
+            <Router>
+                <div className="App">
+                    <Routes>
+                        <Route path="/" element={<Payment />} />
+                        <Route path="/payment" element={<Payment />} />
+                        <Route path="/success" element={<Success />} />
+                        <Route path="/cancel" element={<Cancel />} />
+                        <Route path="*" element={
+                            <div className="container mt-5 text-center">
+                                <h2>Page Not Found</h2>
+                                <p>The requested page could not be found.</p>
+                                <a href="/payment" className="btn btn-primary">Go to Payment</a>
+                            </div>
+                        } />
+                    </Routes>
+                </div>
+            </Router>
+        </PayPalScriptProvider>
+    );
+}
+
+export default App;
--- a/frontend/src/assets/react.svg
+++ b/frontend/src/assets/react.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
--- a/frontend/src/components/OrderSummary.jsx
+++ b/frontend/src/components/OrderSummary.jsx
@@ -0,0 +1,69 @@
+import React from 'react';
+
+const OrderSummary = ({ orderData, loading }) => {
+    const formatCurrency = (amount, currency = 'USD') => {
+        return new Intl.NumberFormat('en-US', {
+            style: 'currency',
+            currency: currency,
+        }).format(parseFloat(amount));
+    };
+
+    if (loading) {
+        return (
+            <div className="order-summary">
+                <div className="loading-spinner">
+                    <div className="spinner-border" role="status">
+                        <span className="visually-hidden">Loading...</span>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+
+    return (
+        <div className="order-summary">
+            <h5 className="mb-3">
+                <i className="fas fa-receipt me-2"></i>
+                Order Summary
+            </h5>
+
+            <div className="order-item">
+                <span>Order #</span>
+                <span className="fw-bold">{orderData.wc_order_id}</span>
+            </div>
+
+            <div className="order-item">
+                <span>Description</span>
+                <span>{orderData.description}</span>
+            </div>
+
+            {orderData.customer_email && (
+                <div className="order-item">
+                    <span>Customer Email</span>
+                    <span>{orderData.customer_email}</span>
+                </div>
+            )}
+
+            <div className="order-item">
+                <span>Currency</span>
+                <span>{orderData.currency}</span>
+            </div>
+
+            <div className="order-item order-total">
+                <span>Total Amount</span>
+                <span className="text-primary">
+          {formatCurrency(orderData.total, orderData.currency)}
+        </span>
+            </div>
+
+            <div className="mt-3 p-2 bg-info bg-opacity-10 rounded">
+                <small className="text-info">
+                    <i className="fas fa-info-circle me-1"></i>
+                    You will be redirected to PayPal to complete this payment securely
+                </small>
+            </div>
+        </div>
+    );
+};
+
+export default OrderSummary;
--- a/frontend/src/components/PayPalButton.jsx
+++ b/frontend/src/components/PayPalButton.jsx
@@ -0,0 +1,102 @@
+import React, { useState } from 'react';
+import { PayPalButtons, usePayPalScriptReducer } from '@paypal/react-paypal-js';
+
+const PayPalButton = ({ orderData, onCreateOrder, onCaptureOrder, loading }) => {
+    const [{ isPending }] = usePayPalScriptReducer();
+    const [paypalError, setPaypalError] = useState('');
+
+    // Handle PayPal order creation
+    const handleCreateOrder = async (data, actions) => {
+        try {
+            setPaypalError('');
+            const orderId = await onCreateOrder();
+            return orderId;
+        } catch (error) {
+            setPaypalError(error.message);
+            throw error;
+        }
+    };
+
+    // Handle PayPal order approval
+    const handleOnApprove = async (data, actions) => {
+        try {
+            setPaypalError('');
+            await onCaptureOrder(data.orderID);
+        } catch (error) {
+            setPaypalError(error.message);
+            throw error;
+        }
+    };
+
+    // Handle PayPal errors
+    const handleOnError = (error) => {
+        console.error('PayPal Error:', error);
+        setPaypalError('An error occurred with PayPal. Please try again.');
+    };
+
+    // Handle PayPal cancel
+    const handleOnCancel = (data) => {
+        console.log('PayPal payment cancelled:', data);
+        setPaypalError('Payment was cancelled. You can try again if needed.');
+    };
+
+    if (isPending) {
+        return (
+            <div className="text-center py-4">
+                <div className="spinner-border text-primary" role="status">
+                    <span className="visually-hidden">Loading PayPal...</span>
+                </div>
+                <p className="mt-2 text-muted">Loading PayPal...</p>
+            </div>
+        );
+    }
+
+    return (
+        <div className="paypal-button-wrapper">
+            {paypalError && (
+                <div className="alert alert-danger mb-3">
+                    <i className="fas fa-exclamation-triangle me-2"></i>
+                    {paypalError}
+                </div>
+            )}
+
+            <PayPalButtons
+                style={{
+                    layout: 'vertical',
+                    color: 'blue',
+                    shape: 'rect',
+                    label: 'paypal',
+                    height: 45,
+                }}
+                createOrder={handleCreateOrder}
+                onApprove={handleOnApprove}
+                onError={handleOnError}
+                onCancel={handleOnCancel}
+                disabled={loading}
+                forceReRender={[orderData.total, orderData.currency]}
+            />
+
+            <div className="mt-3 text-center">
+                <small className="text-muted d-block">
+                    Don't have a PayPal account? You can still pay with your credit or debit card.
+                </small>
+            </div>
+
+            {/* Fallback button for when PayPal doesn't load */}
+            {!isPending && (
+                <div className="mt-3">
+                    <button
+                        className="btn btn-outline-secondary btn-sm w-100"
+                        onClick={() => window.location.reload()}
+                        disabled={loading}
+                    >
+                        <i className="fas fa-redo me-2"></i>
+                        Refresh PayPal
+                    </button>
+                </div>
+            )}
+        </div>
+    );
+};
+
+export default PayPalButton;
--- a/frontend/src/components/PaymentForm.jsx
+++ b/frontend/src/components/PaymentForm.jsx
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -0,0 +1,5 @@
+:root {
+  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+}
--- a/frontend/src/main.jsx
+++ b/frontend/src/main.jsx
@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.jsx'
+
+createRoot(document.getElementById('root')).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)
--- a/frontend/src/pages/Cancel.jsx
+++ b/frontend/src/pages/Cancel.jsx
@@ -0,0 +1,125 @@
+import React from 'react';
+import { useSearchParams } from 'react-router-dom';
+
+const Cancel = () => {
+    const [searchParams] = useSearchParams();
+
+    const error = searchParams.get('error');
+    const orderId = searchParams.get('order_id');
+    const paypalToken = searchParams.get('token');
+
+    const handleRetryPayment = () => {
+        // Build the payment URL with original parameters
+        const paymentUrl = new URL('/payment', window.location.origin);
+
+        if (orderId) {
+            paymentUrl.searchParams.set('wc_order_id', orderId);
+            // You might want to fetch original order details here
+            paymentUrl.searchParams.set('total', '25.99'); // This should come from order data
+        }
+
+        window.location.href = paymentUrl.toString();
+    };
+
+    const getErrorMessage = () => {
+        if (error) {
+            return decodeURIComponent(error);
+        }
+        return 'Your payment was cancelled. You can try again or choose a different payment method.';
+    };
+
+    const getIconClass = () => {
+        return error ? 'status-error' : 'status-warning';
+    };
+
+    const getIconName = () => {
+        return error ? 'fas fa-times-circle' : 'fas fa-exclamation-triangle';
+    };
+
+    const getTitle = () => {
+        return error ? 'Payment Failed' : 'Payment Cancelled';
+    };
+
+    const getTitleClass = () => {
+        return error ? 'text-danger' : 'text-warning';
+    };
+
+    return (
+        <div className="payment-container">
+            <div className="payment-card">
+                <div className="payment-body text-center">
+                    <div className={`payment-status-icon ${getIconClass()}`}>
+                        <i className={getIconName()}></i>
+                    </div>
+
+                    <h2 className={`mb-3 ${getTitleClass()}`}>
+                        {getTitle()}
+                    </h2>
+
+                    <p className="lead mb-4">
+                        {getErrorMessage()}
+                    </p>
+
+                    {orderId && (
+                        <div className="alert alert-info">
+                            <strong>Order ID:</strong>
+                            <span className="badge bg-secondary ms-2">{orderId}</span>
+                            <br />
+                            <small className="mt-2 d-block">
+                                Your order is still pending. You can complete the payment to process your order.
+                            </small>
+                        </div>
+                    )}
+
+                    {paypalToken && (
+                        <div className="mt-3">
+                            <small className="text-muted">
+                                <strong>PayPal Reference:</strong> {paypalToken}
+                            </small>
+                        </div>
+                    )}
+
+                    <div className="mt-4">
+                        <button
+                            className="btn btn-primary me-3"
+                            onClick={handleRetryPayment}
+                        >
+                            <i className="fas fa-redo me-2"></i>
+                            Try Payment Again
+                        </button>
+
+                        <a
+                            href={`${import.meta.env.VITE_REACT_APP_WOOCOMMERCE_URL || '#'}`}
+                            className="btn btn-outline-secondary"
+                        >
+                            <i className="fas fa-arrow-left me-2"></i>
+                            Back to Store
+                        </a>
+                    </div>
+
+                    <div className="mt-4">
+                        <div className="alert alert-light border">
+                            <h6 className="mb-3">Need Help?</h6>
+                            <p className="mb-2">If you're experiencing issues with payment:</p>
+                            <ul className="list-unstyled small text-start">
+                                <li><i className="fas fa-check text-success me-2"></i>Check your internet connection</li>
+                                <li><i className="fas fa-check text-success me-2"></i>Ensure your PayPal account has sufficient funds</li>
+                                <li><i className="fas fa-check text-success me-2"></i>Try using a different payment method</li>
+                                <li><i className="fas fa-check text-success me-2"></i>Contact our support team if the problem persists</li>
+                            </ul>
+                        </div>
+                    </div>
+
+                    <div className="mt-5 pt-4 border-top">
+                        <small className="text-muted">
+                            <i className="fas fa-headset me-1"></i>
+                            Contact support: support@yourstore.com | 1-800-XXX-XXXX
+                        </small>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default Cancel;
--- a/frontend/src/pages/Payment.jsx
+++ b/frontend/src/pages/Payment.jsx
@@ -0,0 +1,178 @@
+import React, { useState, useEffect } from 'react';
+import { useSearchParams, useNavigate } from 'react-router-dom';
+import OrderSummary from '../components/OrderSummary.jsx';
+import PayPalButton from '../components/PayPalButton.jsx';
+import { paymentAPI } from '../services/api';
+
+const Payment = () => {
+    const [searchParams] = useSearchParams();
+    const navigate = useNavigate();
+
+    const [orderData, setOrderData] = useState({
+        wc_order_id: searchParams.get('wc_order_id') || '123',
+        total: searchParams.get('total') || '25.99',
+        currency: searchParams.get('currency') || 'USD',
+        description: searchParams.get('description') || 'Test Order',
+        customer_email: searchParams.get('customer_email') || 'customer@example.com'
+    });
+
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState('');
+    const [paypalOrderId, setPaypalOrderId] = useState('');
+    const [token, setToken] = useState('');
+    const [backendStatus, setBackendStatus] = useState(null);
+
+    // Check backend connection on mount
+    useEffect(() => {
+        const checkBackend = async () => {
+            try {
+                const health = await paymentAPI.healthCheck();
+                setBackendStatus(health);
+                console.log('Backend connected:', health);
+            } catch (error) {
+                setError('Cannot connect to payment server. Please try again later.');
+                console.error('Backend connection error:', error);
+            }
+        };
+
+        checkBackend();
+    }, []);
+
+    // Validate required parameters
+    useEffect(() => {
+        if (!orderData.wc_order_id || !orderData.total) {
+            setError('Missing required order parameters');
+        } else if (parseFloat(orderData.total) <= 0) {
+            setError('Invalid order amount');
+        } else {
+            setError('');
+        }
+    }, [orderData]);
+
+    // Create PayPal order
+    const createPayPalOrder = async () => {
+        try {
+            setLoading(true);
+            setError('');
+
+            const data = await paymentAPI.createOrder({
+                wc_order_id: orderData.wc_order_id,
+                total: orderData.total,
+                currency: orderData.currency,
+                description: orderData.description
+            });
+
+            if (!data.success) {
+                throw new Error(data.error || 'Failed to create payment');
+            }
+
+            setPaypalOrderId(data.paypal_order_id);
+            setToken(data.token);
+
+            console.log('PayPal order created:', data.paypal_order_id);
+
+            return data.paypal_order_id;
+
+        } catch (error) {
+            console.error('Create order error:', error);
+            setError(error.message);
+            throw error;
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    // Capture PayPal payment
+    const capturePayPalOrder = async (orderId) => {
+        try {
+            setLoading(true);
+
+            const data = await paymentAPI.captureOrder(orderId, orderData.wc_order_id, token);
+
+            if (!data.success) {
+                throw new Error(data.error || 'Payment capture failed');
+            }
+
+            console.log('Payment captured:', data.transaction_id);
+
+            // Redirect to success page with transaction details
+            navigate(`/success?transaction_id=${data.transaction_id}&order_id=${orderData.wc_order_id}`);
+
+        } catch (error) {
+            console.error('Capture payment error:', error);
+            setError(error.message);
+            navigate(`/cancel?error=${encodeURIComponent(error.message)}&order_id=${orderData.wc_order_id}`);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    return (
+        <div className="payment-container">
+            <div className="payment-card">
+                <div className="payment-header">
+                    <h2>
+                        <i className="fas fa-credit-card me-2"></i>
+                        Secure Payment
+                    </h2>
+                    <p className="mb-0">Complete your order securely with PayPal</p>
+                </div>
+
+                <div className="payment-body">
+                    {error && (
+                        <div className="error-message">
+                            <i className="fas fa-exclamation-triangle me-2"></i>
+                            {error}
+                        </div>
+                    )}
+
+                    {backendStatus && (
+                        <div className="alert alert-success alert-dismissible fade show" role="alert">
+                            <i className="fas fa-check-circle me-2"></i>
+                            Payment system connected
+                            <button type="button" className="btn-close" data-bs-dismiss="alert"></button>
+                        </div>
+                    )}
+
+                    <OrderSummary
+                        orderData={orderData}
+                        loading={loading}
+                    />
+
+                    {!error && backendStatus && (
+                        <div className="paypal-button-container">
+                            <PayPalButton
+                                orderData={orderData}
+                                onCreateOrder={createPayPalOrder}
+                                onCaptureOrder={capturePayPalOrder}
+                                loading={loading}
+                            />
+                        </div>
+                    )}
+
+                    <div className="mt-4 text-center">
+                        <small className="text-muted">
+                            <i className="fas fa-lock me-1"></i>
+                            Your payment is secured by PayPal's advanced encryption
+                        </small>
+                    </div>
+
+                    {/* Debug info for development */}
+                    {process.env.NODE_ENV === 'development' && (
+                        <div className="mt-4 p-3 bg-light border rounded">
+                            <h6>Debug Info:</h6>
+                            <small>
+                                <strong>Order ID:</strong> {orderData.wc_order_id}<br/>
+                                <strong>Total:</strong> ${orderData.total}<br/>
+                                <strong>PayPal Order:</strong> {paypalOrderId || 'Not created yet'}<br/>
+                                <strong>Backend:</strong> {backendStatus ? '✅ Connected' : '❌ Disconnected'}
+                            </small>
+                        </div>
+                    )}
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default Payment;
--- a/frontend/src/pages/Success.jsx
+++ b/frontend/src/pages/Success.jsx
@@ -0,0 +1,153 @@
+import React, { useEffect, useState } from 'react';
+import { useSearchParams } from 'react-router-dom';
+
+const Success = () => {
+    const [searchParams] = useSearchParams();
+    const [orderStatus, setOrderStatus] = useState(null);
+    const [loading, setLoading] = useState(true);
+
+    const transactionId = searchParams.get('transaction_id');
+    const orderId = searchParams.get('order_id');
+    const paypalOrderId = searchParams.get('token'); // PayPal adds this
+
+    useEffect(() => {
+        // Simulate checking order status
+        const checkOrderStatus = async () => {
+            if (orderId) {
+                try {
+                    const response = await fetch(`/api/payment/order-status/${orderId}`);
+                    const data = await response.json();
+                    setOrderStatus(data);
+                } catch (error) {
+                    console.error('Error checking order status:', error);
+                }
+            }
+            setLoading(false);
+        };
+
+        const timer = setTimeout(checkOrderStatus, 1500); // Small delay for better UX
+        return () => clearTimeout(timer);
+    }, [orderId]);
+
+    const formatCurrency = (amount, currency = 'USD') => {
+        return new Intl.NumberFormat('en-US', {
+            style: 'currency',
+            currency: currency,
+        }).format(parseFloat(amount));
+    };
+
+    if (loading) {
+        return (
+            <div className="payment-container">
+                <div className="payment-card">
+                    <div className="payment-body text-center">
+                        <div className="loading-spinner">
+                            <div className="spinner-border text-success" role="status">
+                                <span className="visually-hidden">Processing...</span>
+                            </div>
+                            <p className="mt-3">Confirming your payment...</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+
+    return (
+        <div className="payment-container">
+            <div className="payment-card">
+                <div className="payment-body text-center">
+                    <div className="payment-status-icon status-success">
+                        <i className="fas fa-check-circle"></i>
+                    </div>
+
+                    <h2 className="text-success mb-3">Payment Successful!</h2>
+                    <p className="lead mb-4">Thank you for your payment. Your transaction has been completed successfully.</p>
+
+                    <div className="success-message">
+                        <div className="row">
+                            {transactionId && (
+                                <div className="col-md-6 mb-3">
+                                    <strong>Transaction ID:</strong>
+                                    <br />
+                                    <code>{transactionId}</code>
+                                </div>
+                            )}
+                            {orderId && (
+                                <div className="col-md-6 mb-3">
+                                    <strong>Order ID:</strong>
+                                    <br />
+                                    <span className="badge bg-primary">{orderId}</span>
+                                </div>
+                            )}
+                            {paypalOrderId && (
+                                <div className="col-12 mb-3">
+                                    <small className="text-muted">
+                                        <strong>PayPal Order ID:</strong> {paypalOrderId}
+                                    </small>
+                                </div>
+                            )}
+                        </div>
+                    </div>
+
+                    {orderStatus && orderStatus.success && (
+                        <div className="mt-4 p-3 bg-light rounded">
+                            <h6>Order Details</h6>
+                            <div className="row text-start">
+                                <div className="col-6">
+                                    <small>
+                                        <strong>Status:</strong>
+                                        <span className={`ms-2 badge bg-${
+                                            orderStatus.status === 'completed' ? 'success' :
+                                                orderStatus.status === 'processing' ? 'warning' : 'secondary'
+                                        }`}>
+                      {orderStatus.status}
+                    </span>
+                                    </small>
+                                </div>
+                                <div className="col-6">
+                                    <small>
+                                        <strong>Total:</strong> {formatCurrency(orderStatus.total, orderStatus.currency)}
+                                    </small>
+                                </div>
+                            </div>
+                        </div>
+                    )}
+
+                    <div className="mt-4">
+                        <div className="alert alert-info">
+                            <i className="fas fa-envelope me-2"></i>
+                            A confirmation email has been sent to your email address with all the transaction details.
+                        </div>
+                    </div>
+
+                    <div className="mt-4">
+                        <a
+                            href={`${import.meta.env.VITE_REACT_APP_WOOCOMMERCE_URL || '#'}`}
+                            className="btn btn-primary me-3"
+                        >
+                            <i className="fas fa-arrow-left me-2"></i>
+                            Back to Store
+                        </a>
+                        <button
+                            className="btn btn-outline-secondary"
+                            onClick={() => window.print()}
+                        >
+                            <i className="fas fa-print me-2"></i>
+                            Print Receipt
+                        </button>
+                    </div>
+
+                    <div className="mt-5 pt-4 border-top">
+                        <small className="text-muted">
+                            <i className="fas fa-shield-alt me-1"></i>
+                            This transaction was processed securely by PayPal
+                        </small>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default Success;
--- a/frontend/src/services/api.js
+++ b/frontend/src/services/api.js
@@ -0,0 +1,83 @@
+import axios from 'axios';
+
+// Create axios instance with default config
+const api = axios.create({
+    baseURL: import.meta.env.VITE_REACT_APP_API_BASE_URL || '',
+    timeout: 30000,
+    headers: {
+        'Content-Type': 'application/json',
+    },
+});
+
+// Request interceptor for logging
+api.interceptors.request.use(
+    (config) => {
+        console.log('API Request:', config.method?.toUpperCase(), config.url);
+        return config;
+    },
+    (error) => {
+        console.error('API Request Error:', error);
+        return Promise.reject(error);
+    }
+);
+
+// Response interceptor for error handling
+api.interceptors.response.use(
+    (response) => {
+        console.log('API Response:', response.status, response.data);
+        return response;
+    },
+    (error) => {
+        console.error('API Response Error:', error.response?.data || error.message);
+        return Promise.reject(error);
+    }
+);
+
+// Payment API functions
+export const paymentAPI = {
+    // Create PayPal order
+    createOrder: async (orderData) => {
+        try {
+            const response = await api.post('/api/payment/create-order', orderData);
+            return response.data;
+        } catch (error) {
+            throw new Error(error.response?.data?.error || 'Failed to create payment order');
+        }
+    },
+
+    // Capture PayPal payment
+    captureOrder: async (paypalOrderId, wcOrderId, token = null) => {
+        try {
+            const response = await api.post('/api/payment/capture-order', {
+                paypal_order_id: paypalOrderId,
+                wc_order_id: wcOrderId,
+                token: token,
+            });
+            return response.data;
+        } catch (error) {
+            throw new Error(error.response?.data?.error || 'Failed to capture payment');
+        }
+    },
+
+    // Get order status
+    getOrderStatus: async (wcOrderId) => {
+        try {
+            const response = await api.get(`/api/payment/order-status/${wcOrderId}`);
+            return response.data;
+        } catch (error) {
+            throw new Error(error.response?.data?.error || 'Failed to get order status');
+        }
+    },
+
+    // Health check
+    healthCheck: async () => {
+        try {
+            const response = await api.get('/api/health');
+            return response.data;
+        } catch (error) {
+            throw new Error('Backend server is not responding');
+        }
+    },
+};
+
+export default api;
--- a/frontend/vite.config.js
+++ b/frontend/vite.config.js
@@ -0,0 +1,22 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+    plugins: [react()],
+    server: {
+        port: 5173,
+        proxy: {
+            '/api': {
+                target: 'http://localhost:5001',
+                changeOrigin: true,
+                secure: false,
+            },
+            '/webhook': {
+                target: 'http://localhost:5001',
+                changeOrigin: true,
+                secure: false,
+            }
+        }
+    }
+})
--- a/package-lock.json
+++ b/package-lock.json
@@ -0,0 +1,373 @@
+{
+  "name": "payment-website",
+  "version": "1.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "payment-website",
+      "version": "1.0.0",
+      "license": "MIT",
+      "devDependencies": {
+        "concurrently": "^8.2.2"
+      }
+    },
+    "node_modules/@babel/runtime": {
+      "version": "7.28.4",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.28.4.tgz",
+      "integrity": "sha512-Q/N6JNWvIvPnLDvjlE1OUBLPQHH6l3CltCEsHIujp45zQUSSh8K+gHnaEX45yAT1nyngnINhvWtzN+Nb9D8RAQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/ansi-regex": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/chalk/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/cliui": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz",
+      "integrity": "sha512-BSeNnyus75C4//NQ9gQt1/csTXyo/8Sb+afLAkzAptFuMsod9HFokGNudZpi/oQV73hnVK+sR+5PVRMd+Dr7YQ==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "string-width": "^4.2.0",
+        "strip-ansi": "^6.0.1",
+        "wrap-ansi": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/concurrently": {
+      "version": "8.2.2",
+      "resolved": "https://registry.npmjs.org/concurrently/-/concurrently-8.2.2.tgz",
+      "integrity": "sha512-1dP4gpXFhei8IOtlXRE/T/4H88ElHgTiUzh71YUmtjTEHMSRS2Z/fgOxHSxxusGHogsRfxNq1vyAwxSC+EVyDg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "chalk": "^4.1.2",
+        "date-fns": "^2.30.0",
+        "lodash": "^4.17.21",
+        "rxjs": "^7.8.1",
+        "shell-quote": "^1.8.1",
+        "spawn-command": "0.0.2",
+        "supports-color": "^8.1.1",
+        "tree-kill": "^1.2.2",
+        "yargs": "^17.7.2"
+      },
+      "bin": {
+        "conc": "dist/bin/concurrently.js",
+        "concurrently": "dist/bin/concurrently.js"
+      },
+      "engines": {
+        "node": "^14.13.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/open-cli-tools/concurrently?sponsor=1"
+      }
+    },
+    "node_modules/date-fns": {
+      "version": "2.30.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz",
+      "integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.21.0"
+      },
+      "engines": {
+        "node": ">=0.11"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/date-fns"
+      }
+    },
+    "node_modules/emoji-regex": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+      "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/escalade": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
+      "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/get-caller-file": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
+      "integrity": "sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": "6.* || 8.* || >= 10.*"
+      }
+    },
+    "node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-fullwidth-code-point": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz",
+      "integrity": "sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/lodash": {
+      "version": "4.17.21",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
+      "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/require-directory": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/require-directory/-/require-directory-2.1.1.tgz",
+      "integrity": "sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/rxjs": {
+      "version": "7.8.2",
+      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.2.tgz",
+      "integrity": "sha512-dhKf903U/PQZY6boNNtAGdWbG85WAbjT/1xYoZIC7FAY0yWapOBQVsVrDl58W86//e1VpMNBtRV4MaXfdMySFA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "^2.1.0"
+      }
+    },
+    "node_modules/shell-quote": {
+      "version": "1.8.3",
+      "resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.8.3.tgz",
+      "integrity": "sha512-ObmnIF4hXNg1BqhnHmgbDETF8dLPCggZWBjkQfhZpbszZnYur5DUljTcCHii5LC3J5E0yeO/1LIMyH+UvHQgyw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/spawn-command": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/spawn-command/-/spawn-command-0.0.2.tgz",
+      "integrity": "sha512-zC8zGoGkmc8J9ndvml8Xksr1Amk9qBujgbF0JAIWO7kXr43w0h/0GJNM/Vustixu+YE8N/MTrQ7N31FvHUACxQ==",
+      "dev": true
+    },
+    "node_modules/string-width": {
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "emoji-regex": "^8.0.0",
+        "is-fullwidth-code-point": "^3.0.0",
+        "strip-ansi": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/supports-color": {
+      "version": "8.1.1",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
+      "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/supports-color?sponsor=1"
+      }
+    },
+    "node_modules/tree-kill": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/tree-kill/-/tree-kill-1.2.2.tgz",
+      "integrity": "sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "tree-kill": "cli.js"
+      }
+    },
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "dev": true,
+      "license": "0BSD"
+    },
+    "node_modules/wrap-ansi": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ansi-styles": "^4.0.0",
+        "string-width": "^4.1.0",
+        "strip-ansi": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
+    "node_modules/y18n": {
+      "version": "5.0.8",
+      "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz",
+      "integrity": "sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/yargs": {
+      "version": "17.7.2",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz",
+      "integrity": "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "cliui": "^8.0.1",
+        "escalade": "^3.1.1",
+        "get-caller-file": "^2.0.5",
+        "require-directory": "^2.1.1",
+        "string-width": "^4.2.3",
+        "y18n": "^5.0.5",
+        "yargs-parser": "^21.1.1"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/yargs-parser": {
+      "version": "21.1.1",
+      "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-21.1.1.tgz",
+      "integrity": "sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==",
+      "dev": true,
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    }
+  }
+}
--- a/package.json
+++ b/package.json
@@ -0,0 +1,20 @@
+{
+  "name": "payment-website",
+  "version": "1.0.0",
+  "description": "Standalone payment processing website with PayPal integration",
+  "main": "backend/server.js",
+  "scripts": {
+    "dev": "concurrently \"npm run server\" \"npm run client\"",
+    "server": "cd backend && npm run dev",
+    "client": "cd frontend && npm start",
+    "build": "cd frontend && npm run build",
+    "start": "cd backend && npm start",
+    "install-all": "npm install && cd backend && npm install && cd ../frontend && npm install"
+  },
+  "keywords": ["payment", "paypal", "woocommerce", "react", "express"],
+  "author": "Your Name",
+  "license": "MIT",
+  "devDependencies": {
+    "concurrently": "^8.2.2"
+  }
+}
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>