matej/AluxPay
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
matej
2025-09-26 17:34:37 +02:00
commit b96ccfd112
37 changed files with 23138 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
.gitignore vendored Normal file
View File

@@ -0,0 +1,7 @@
node_modules
backend/.env
backend/node_modules
frontend/.env
frontend/node_modules
frontend/dist
frontend/dist-ssr

8
.idea/.gitignore generated vendored Normal file
View File

@@ -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

12
.idea/aluxpay.iml generated Normal file
View File

@@ -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>

6
.idea/inspectionProfiles/Project_Default.xml generated Normal file
View File

@@ -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>

8
.idea/modules.xml generated Normal file
View File

@@ -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>

6
.idea/vcs.xml generated Normal file
View File

@@ -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>

0
README.md Normal file
View File

1595
backend/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

25
backend/package.json Normal file
View File

@@ -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"
}
}

269
backend/routes/payment.js Normal file
View File

@@ -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;

173
backend/routes/webhook.js Normal file
View File

@@ -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;

112
backend/server.js Normal file
View File

@@ -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;

145
backend/services/paypal.js Normal file
View File

@@ -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
};

204
backend/services/woocommerce.js Normal file
View File

@@ -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();

197
backend/utils/helpers.js Normal file
View File

@@ -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
};

24
frontend/.gitignore vendored Normal file
View File

@@ -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?

16
frontend/README.md Normal file
View File

@@ -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.

29
frontend/eslint.config.js Normal file
View File

@@ -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_]' }],
},
},
])

13
frontend/index.html Normal file
View File

@@ -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>

19013
frontend/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

32
frontend/package.json Normal file
View File

@@ -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"
}

1
frontend/public/vite.svg Normal file
View File

@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

62
frontend/src/App.css Normal file
View File

@@ -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); }
}

40
frontend/src/App.jsx Normal file
View File

@@ -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;

1
frontend/src/assets/react.svg Normal file
View File

@@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 4.0 KiB

69
frontend/src/components/OrderSummary.jsx Normal file
View File

@@ -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;

102
frontend/src/components/PayPalButton.jsx Normal file
View File

@@ -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;

0
frontend/src/components/PaymentForm.jsx Normal file
View File

5
frontend/src/index.css Normal file
View File

@@ -0,0 +1,5 @@
:root {
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
line-height: 1.5;
font-weight: 400;
}

10
frontend/src/main.jsx Normal file
View File

@@ -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>,
)

125
frontend/src/pages/Cancel.jsx Normal file
View File

@@ -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;

178
frontend/src/pages/Payment.jsx Normal file
View File

@@ -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;

153
frontend/src/pages/Success.jsx Normal file
View File

@@ -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;

83
frontend/src/services/api.js Normal file
View File

@@ -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;

22
frontend/vite.config.js Normal file
View File

@@ -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,
}
}
}
})

373
package-lock.json generated Normal file
View File

@@ -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"
}
}
}
}

20
package.json Normal file
View File

@@ -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"
}
}