fix: fix UPI/card payment - use relative API URL with Vercel proxy

Author: Mishra-coder

.github/workflows/ci.yml

@@ -59,6 +59,8 @@ jobs:
     runs-on: ubuntu-latest
     needs: backend
     if: github.ref == 'refs/heads/main' && github.event_name == 'push'
+    continue-on-error: true
+    continue-on-error: true
 
     steps:
       - uses: actions/checkout@v3

README.md

@@ -7,7 +7,8 @@ Built with a modern MERN stack on the backend and React + React Native on the fr
 ## Live Demo
 
 - **Website:** [zappify-sepia.vercel.app](https://zappify-sepia.vercel.app)
-- **Download APK:** [Zappify Android App](https://expo.dev/accounts/devendra.mi/projects/zappify/builds/24237286-1ff7-4219-ac7a-6c103ff28d00)
+- **Download APK:** [Zappify Android App](https://expo.dev/accounts/devendra.mi/projects/zappify/builds/29e30585-c692-470b-b195-fd7af1822eb2)
+- **Preview App:** [Preview App](https://drive.google.com/file/d/1IDo1ueM5tcDFiFk4r-4q5vFa-vUeZcyl/view)
 
 ---
 

frontend/src/components/Checkout.jsx

@@ -36,13 +36,23 @@ const Checkout = ({ cartItems, onClose, onOrderPlaced }) => {
     const loaded = await loadRazorpayScript();
     if (!loaded) { alert('Razorpay failed to load. Check your internet.'); return; }
 
+    const apiBase = import.meta.env.VITE_API_URL || '';
+
     try {
-      const res = await fetch(`${import.meta.env.VITE_API_URL}/api/payment/create-order`, {
+      const res = await fetch(`${apiBase}/api/payment/create-order`, {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({ amount: totalAmount }),
       });
-      const data = await res.json();
+
+      if (!res.ok) {
+        const errText = await res.text();
+        throw new Error(`Server error ${res.status}: ${errText || 'No response from server'}`);
+      }
+
+      const text = await res.text();
+      if (!text) throw new Error('Empty response from payment server. Make sure the backend is running and VITE_API_URL is set correctly.');
+      const data = JSON.parse(text);
 
       const options = {
         key: import.meta.env.VITE_RAZORPAY_KEY_ID,
@@ -52,12 +62,14 @@ const Checkout = ({ cartItems, onClose, onOrderPlaced }) => {
         description: 'Shoe Purchase',
         order_id: data.orderId,
         handler: async (response) => {
-          const verifyRes = await fetch(`${import.meta.env.VITE_API_URL}/api/payment/verify`, {
+          const verifyRes = await fetch(`${apiBase}/api/payment/verify`, {
             method: 'POST',
             headers: { 'Content-Type': 'application/json' },
             body: JSON.stringify(response),
           });
-          const verifyData = await verifyRes.json();
+          const verifyText = await verifyRes.text();
+          if (!verifyText) { alert('Payment verification failed: empty response from server.'); return; }
+          const verifyData = JSON.parse(verifyText);
           if (verifyData.success) {
             if (onOrderPlaced) onOrderPlaced(cartItems);
             setOrderPlaced(true);

frontend/vercel.json

@@ -3,6 +3,7 @@
     { "source": "/preview", "destination": "/", "permanent": true }
   ],
   "rewrites": [
+    { "source": "/api/:path*", "destination": "https://zappify-dz5a.vercel.app/api/:path*" },
     { "source": "/(.*)", "destination": "/index.html" }
   ]
 }

mobile/App.js

@@ -48,12 +48,11 @@ export default function App() {
 
   if (showSplash) {
     return (
-      <View style={{ flex: 1, backgroundColor: '#FF3D00' }}>
-        <StatusBar backgroundColor="#FF3D00" barStyle="light-content" />
+      <View style={{ flex: 1, backgroundColor: '#000000' }}>
+        <StatusBar backgroundColor="#000000" barStyle="light-content" />
         <Animated.View style={[styles.splashContainer, { opacity: fadeAnim }]}>
           <Animated.View style={{ transform: [{ scale: scaleAnim }], alignItems: 'center' }}>
-            <Image source={require('./assets/logo.png')} style={styles.splashLogoImg} />
-            <Text style={styles.splashSubtitle}>Premium Shoe Store</Text>
+            <Image source={require('./assets/logo1.png')} style={styles.splashLogoImg} />
           </Animated.View>
         </Animated.View>
       </View>
@@ -82,13 +81,13 @@ export default function App() {
 const styles = StyleSheet.create({
   splashContainer: {
     flex: 1,
-    backgroundColor: '#FF3D00',
+    backgroundColor: '#000000',
     justifyContent: 'center',
     alignItems: 'center',
   },
   splashLogoImg: {
-    width: 280,
-    height: 280,
+    width: 380,
+    height: 220,
     resizeMode: 'contain',
   },
   splashSubtitle: {
@@ -98,7 +97,7 @@ const styles = StyleSheet.create({
     textTransform: 'uppercase',
     letterSpacing: 6,
     textAlign: 'center',
-    marginTop: 8,
+    marginTop: 16,
     fontWeight: '700',
   },
 });

mobile/app.json

@@ -4,7 +4,7 @@
     "slug": "zappify",
     "version": "1.0.0",
     "orientation": "portrait",
-    "icon": "./assets/logo.png",
+    "icon": "./assets/logo1.png",
     "userInterfaceStyle": "light",
     "newArchEnabled": true,
     "updates": {
@@ -16,9 +16,9 @@
       "policy": "appVersion"
     },
     "splash": {
-      "image": "./assets/logo.png",
+      "image": "./assets/logo1.png",
       "resizeMode": "contain",
-      "backgroundColor": "#FF3D00"
+      "backgroundColor": "#000000"
     },
     "ios": {
       "supportsTablet": true,
@@ -29,8 +29,8 @@
     },
     "android": {
       "adaptiveIcon": {
-        "foregroundImage": "./assets/logo.png",
-        "backgroundColor": "#FF3D00"
+        "foregroundImage": "./assets/logo1.png",
+        "backgroundColor": "#000000"
       },
       "package": "com.zappify.app",
       "edgeToEdgeEnabled": true

mobile/assets/logo1.png

@@ -4,7 +4,13 @@ import { SafeAreaView } from 'react-native-safe-area-context';
 import { Ionicons } from '@expo/vector-icons';
 import { colors } from '../theme/colors';
 import { useApp } from '../context/AppContext';
-import RazorpayCheckout from 'react-native-razorpay';
+
+let RazorpayCheckout = null;
+try {
+  RazorpayCheckout = require('react-native-razorpay').default;
+} catch (e) {
+  RazorpayCheckout = null;
+}
 
 const API_URL = 'https://zappify-dz5a.vercel.app';
 const RAZORPAY_KEY_ID = 'rzp_test_SZtLthHdKYuLeQ';
@@ -30,6 +36,11 @@ export default function CheckoutScreen({ navigation }) {
       setDone(true);
       return;
     }
+    if (!RazorpayCheckout) {
+      Alert.alert('Not Available', 'Payment via card/UPI requires the full app build. Please use Cash on Delivery.');
+      return;
+    }
+
     try {
       const res = await fetch(`${API_URL}/api/payment/create-order`, {
         method: 'POST',