ok

package-lock.json

@@ -18,6 +18,9 @@
         "react-scripts": "5.0.1",
         "socket.io-client": "^4.8.1",
         "web-vitals": "^2.1.4"
+      },
+      "devDependencies": {
+        "cross-env": "^10.0.0"
       }
     },
     "node_modules/@adobe/css-tools": {
@@ -2381,6 +2384,13 @@
         "postcss-selector-parser": "^6.0.10"
       }
     },
+    "node_modules/@epic-web/invariant": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@epic-web/invariant/-/invariant-1.0.0.tgz",
+      "integrity": "sha512-lrTPqgvfFQtR/eY/qkIzp98OGdNJu0m5ji3q/nJI8v3SXkRKEnWiOxMmbvcSoAIzv/cGiuvRy57k4suKQSAdwA==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/@eslint-community/eslint-utils": {
       "version": "4.7.0",
       "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.7.0.tgz",
@@ -5986,6 +5996,24 @@
         "node": ">=10"
       }
     },
+    "node_modules/cross-env": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-10.0.0.tgz",
+      "integrity": "sha512-aU8qlEK/nHYtVuN4p7UQgAwVljzMg8hB4YK5ThRqD2l/ziSnryncPNn7bMLt5cFYsKVKBh8HqLqyCoTupEUu7Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@epic-web/invariant": "^1.0.0",
+        "cross-spawn": "^7.0.6"
+      },
+      "bin": {
+        "cross-env": "dist/bin/cross-env.js",
+        "cross-env-shell": "dist/bin/cross-env-shell.js"
+      },
+      "engines": {
+        "node": ">=20"
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",

package.json

@@ -15,7 +15,7 @@
     "web-vitals": "^2.1.4"
   },
   "scripts": {
-    "start": "react-scripts start",
+    "start": "cross-env PORT=3002 react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
@@ -37,5 +37,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "cross-env": "^10.0.0"
   }
 }

src/App.css

@@ -1,5 +1,15 @@
 .App {
   text-align: center;
+  
+    height: 100vh;
+    width: 100vw;
+    position: absolute;
+    top: 0;
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: #dfdfdf;
 }
 
 .App-logo {

src/Checkout.css

@@ -1,327 +0,0 @@
-.checkout-container {
-    display: flex;
-    flex-direction: row;
-    border-radius: 12px;
-    overflow: hidden;
-    box-shadow: 0 0 20px rgba(0,0,0,0.2);
-    max-width: 900px;
-    margin: 40px auto;
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
-        Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
-}
-
-.left-panel {
-    background-color: #2e2a4a;
-    color: white;
-    flex: 1;
-    padding: 40px 30px;
-    display: flex;
-    flex-direction: column;
-    gap: 20px;
-    position: relative;
-}
-
-.back-arrow {
-    font-size: 20px;
-    cursor: pointer;
-    margin-bottom: 10px;
-    user-select: none;
-}
-
-.brand-name {
-    font-weight: 600;
-    font-size: 14px;
-    opacity: 0.8;
-}
-
-.product-name {
-    font-weight: 600;
-    font-size: 24px;
-}
-
-.product-price {
-    font-weight: 600;
-    font-size: 32px;
-    margin-bottom: 20px;
-}
-
-.product-image-container {
-    background-color: #b7c4f9;
-    border-radius: 8px;
-    padding: 20px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    max-width: 300px;
-    max-height: 300px;
-}
-
-.product-image-container img {
-    max-width: 100%;
-    max-height: 100%;
-    object-fit: contain;
-}
-
-.right-panel {
-    background-color: white;
-    flex: 1;
-    padding: 40px 30px;
-    display: flex;
-    flex-direction: column;
-    gap: 20px;
-    color: #222;
-}
-
-.apple-pay-button {
-    background-color: black;
-    color: white;
-    font-weight: 600;
-    font-size: 18px;
-    padding: 15px 0;
-    border: none;
-    border-radius: 6px;
-    cursor: pointer;
-    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
-}
-
-.separator {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    color: #999;
-    font-size: 14px;
-}
-
-.separator .line {
-    flex: 1;
-    border: none;
-    border-top: 1px solid #ddd;
-}
-
-.shipping-info h3,
-.payment-methods h3 {
-    font-weight: 600;
-    margin-bottom: 10px;
-    font-size: 16px;
-}
-
-.shipping-info input,
-.shipping-info select {
-    width: 100%;
-    margin: 8px 0;
-    padding: 10px 12px;
-    border: 1px solid #ccc;
-    border-radius: 6px;
-    font-size: 14px;
-    color: #333;
-}
-
-.manual-address {
-    font-size: 12px;
-    color: #666;
-    text-decoration: underline;
-    cursor: pointer;
-    margin-top: 4px;
-    display: inline-block;
-}
-
-.payment-methods label {
-    display: flex;
-    align-items: center;
-    gap: 10px;
-    padding: 10px 12px;
-    border: 1px solid #ddd;
-    border-radius: 6px;
-    margin-bottom: 8px;
-    cursor: pointer;
-    font-size: 14px;
-    user-select: none;
-}
-
-.payment-methods input[type="radio"] {
-    cursor: pointer;
-}
-
-.payment-methods .icon {
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-    width: 20px;
-    height: 20px;
-    font-weight: 700;
-    font-size: 14px;
-    border-radius: 4px;
-    background-color: #eee;
-    color: #555;
-}
-
-.payment-methods .klarna {
-    background-color: #ff4f8b;
-    color: white;
-    font-weight: 700;
-    font-size: 14px;
-    padding: 0 4px;
-    border-radius: 4px;
-}
-
-.payment-methods .ideal {
-    background-color: #f9a825;
-    color: white;
-    font-weight: 700;
-    font-size: 14px;
-    padding: 0 4px;
-    border-radius: 4px;
-}
-
-.klarna-subtext {
-    font-size: 12px;
-    color: #999;
-    margin-left: 30px;
-    margin-top: -6px;
-}
-
-.pay-button {
-    background-color: black;
-    color: white;
-    font-weight: 600;
-    font-size: 16px;
-    padding: 15px 0;
-    border: none;
-    border-radius: 6px;
-    cursor: pointer;
-    margin-top: 10px;
-}
-
-.pay-button:hover {
-    background-color: #222;
-}
-
-.footer {
-    font-size: 12px;
-    color: #999;
-    text-align: center;
-    margin-top: auto;
-    padding-top: 20px;
-    user-select: none;
-}
-/* Responsive styles */
-@media (max-width: 900px) {
-    .checkout-container {
-        flex-direction: column;
-        max-width: 100vw;
-        min-height: 100vh;
-        border-radius: 0;
-        box-shadow: none;
-    }
-    .left-panel, .right-panel {
-        padding: 32px 16px;
-        min-width: 0;
-        max-width: 100vw;
-    }
-    .left-panel {
-        border-radius: 0 0 12px 12px;
-        align-items: center;
-        text-align: center;
-    }
-    .right-panel {
-        border-radius: 12px 12px 0 0;
-    }
-    .product-image-container {
-        max-width: 220px;
-        max-height: 220px;
-        margin: 0 auto;
-    }
-}
-
-@media (max-width: 600px) {
-    .checkout-container {
-        padding: 0;
-    }
-    .left-panel, .right-panel {
-        padding: 20px 6vw;
-        gap: 14px;
-    }
-    .product-name {
-        font-size: 18px;
-    }
-    .product-price {
-        font-size: 22px;
-    }
-    .apple-pay-button, .pay-button {
-        font-size: 15px;
-        padding: 12px 0;
-    }
-    .shipping-info input,
-    .shipping-info select {
-        font-size: 13px;
-        padding: 8px 10px;
-    }
-    .payment-methods label {
-        font-size: 13px;
-        padding: 8px 8px;
-    }
-    .footer {
-        font-size: 10px;
-        padding-top: 10px;
-    }
-}
-.checkmark-container {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  animation: fadeIn 0.5s ease-in;
-}
-
-.checkmark {
-  width: 100px;
-  height: 100px;
-  stroke-width: 2;
-  stroke: #4CAF50;
-  stroke-miterlimit: 10;
-  animation: scaleIn 0.3s ease-in-out;
-}
-
-.checkmark-circle {
-  stroke-dasharray: 166;
-  stroke-dashoffset: 166;
-  stroke-width: 2;
-  stroke: #4CAF50;
-  fill: none;
-  animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
-}
-
-.checkmark-check {
-  transform-origin: 50% 50%;
-  stroke-dasharray: 48;
-  stroke-dashoffset: 48;
-  stroke: #4CAF50;
-  stroke-linecap: round;
-  stroke-linejoin: round;
-  animation: stroke 0.3s 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
-}
-
-@keyframes stroke {
-  to {
-    stroke-dashoffset: 0;
-  }
-}
-
-@keyframes scaleIn {
-  0% {
-    transform: scale(0);
-  }
-  100% {
-    transform: scale(1);
-  }
-}
-
-@keyframes fadeIn {
-  from {
-    opacity: 0;
-    transform: translateY(10px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}

src/Checkout.js

@@ -1,216 +1,267 @@
-import React, { useState, useEffect } from 'react';
-import './Checkout.css';
+import React, { useEffect, useState } from 'react';
+import styles from './Checkout.module.css';
 import { QRCodeCanvas } from 'qrcode.react';
 
-const Checkout = ({ socketId, transactionSuccess }) => {
-    const [qrisData, setQrisData] = useState(null); // QRIS string
-    const [value, setValue] = useState(null); // QRIS value (optional)
-    const [products, setProducts] = useState([]); // Produk dari itemsId
-    const [loadingProducts, setLoadingProducts] = useState(false);
-
-    // Helper get cookie value
-    const getCookie = (name) => {
-        const value = `; ${document.cookie}`;
-        const parts = value.split(`; ${name}=`);
-        if (parts.length === 2) return parts.pop().split(';').shift();
+function parseJwt(token) {
+  try {
+    const base64Url = token.split('.')[1];
+    const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
+    const jsonPayload = decodeURIComponent(
+      atob(base64)
+        .split('')
+        .map((c) => '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2))
+        .join('')
+    );
+    return JSON.parse(jsonPayload);
+  } catch (e) {
     return null;
-    };
+  }
+}
+
+function formatTimeLeft(ms) {
+  const totalSeconds = Math.max(Math.floor(ms / 1000), 0);
+  const minutes = String(Math.floor(totalSeconds / 60)).padStart(2, '0');
+  const seconds = String(totalSeconds % 60).padStart(2, '0');
+  return `${minutes}:${seconds}`;
+}
+
+const Checkout = ({ socketId, transactionSuccess }) => {
+  const [products, setProducts] = useState([]);
+  const [itemIds, setItemIds] = useState(null);
+  const [token, setToken] = useState(null);
+
+  const [qrisData, setQrisData] = useState(null);
+  const [transferData, setTransferData] = useState(null);
+  const [value, setValue] = useState(null);
+  const [loadingPay, setLoadingPay] = useState(false);
+
+  const [redirect_uri, setRedirect_Uri] = useState('');
+  const [redirect_failed, setRedirect_Failed] = useState('');
+  const [paymentMethod, setPaymentMethod] = useState('QRIS');
+
+  const [payTimeout, setPayTimeout] = useState(null);
+  const [timeLeft, setTimeLeft] = useState(null);
+
+  const [activeAccordion, setActiveAccordion] = useState('QRIS');
 
   useEffect(() => {
-        document.cookie = "token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VySWQiOjMsInVzZXJuYW1lIjoia2VkaXJpdGVjaG5vcGFyayIsImVtYWlsIjoia2VkaXJpdGVjaG5vcGFya0BnbWFpbC5jb20iLCJwcm9maWxlX2RhdGEiOnt9LCJzdWJzY3JpcHRpb25zIjp7InByb2R1Y3RzIjpbeyJpZCI6InByb2RfMDAxIiwibmFtZSI6IktFRElSSVRFQ0hOT1BBUkstQURNSU4ifV19LCJpYXQiOjE3NTMzNTE4MjN9.PyZwtRseT5BLZm82vEdjIF4fgbUO7Mv4G01iJtVS2qg; path=/";
-document.cookie = "itemsId=" + JSON.stringify([1, 2]) + "; path=/";
+    if (!socketId) return;
 
-        const fetchProducts = async () => {
-            const itemsIdRaw = getCookie('itemsId');
-            if (!itemsIdRaw) return;
+    let urlParams = new URLSearchParams(window.location.search);
+    let tokenParam = urlParams.get('token');
+    let itemsIdString = urlParams.get('itemsId');
 
-            let itemsId = [];
-            try {
-                itemsId = JSON.parse(itemsIdRaw);
-            } catch (e) {
-                console.error('Gagal parse itemsId dari cookie:', e);
-                return;
-            }
-
-            if (itemsId.length === 0) return;
-
-            setLoadingProducts(true);
+    const handlePay = async () => {
+      setLoadingPay(true);
 
       try {
-                const token = getCookie('token');
-                if (!token) {
-                    console.warn('Token tidak ditemukan');
-                    return;
-                }
+        const newName = urlParams.get('new_name');
+        const setName = urlParams.get('set_name');
 
         const params = new URLSearchParams();
-                itemsId.forEach(id => params.append('itemsId', id));
+        itemsIdString.forEach((id) => params.append('itemsId', id));
+        params.append('socketId', socketId);
+        params.append('paymentMethod', paymentMethod);
+        if (newName) params.append('newName', newName);
+        if (setName) params.append('setName', setName);
 
-                const res = await fetch(`https://bot.kediritechnopark.com/webhook/store-dev/products`, {
+        const response = await fetch('https://bot.kediritechnopark.com/webhook/store-production/pay', {
           method: 'POST',
           headers: {
-                        'Authorization': `Bearer ${token}`,
             'Content-Type': 'application/x-www-form-urlencoded',
+            Authorization: `Bearer ${tokenParam}`,
           },
           body: params.toString(),
         });
 
-                if (!res.ok) throw new Error(`HTTP error! status: ${res.status}`);
-
-                const data = await res.json();
-                setProducts(data);
-            } catch (error) {
-                console.error('Error fetching products:', error);
-            } finally {
-                setLoadingProducts(false);
-            }
-        };
-
-        fetchProducts();
-    }, []);
-
-
-    const handlePay = async (e) => {
-        e.preventDefault();
-
-        let itemsIdRaw = getCookie('itemsId');
-        let token = getCookie('token');
-
-        if (!itemsIdRaw || !token) {
-            alert("Token atau itemsId tidak ditemukan di cookies.");
-            return;
-        }
-
-        let itemsId = [];
-        try {
-            itemsId = JSON.parse(itemsIdRaw);
-        } catch (e) {
-            alert("Gagal parsing itemsId.");
-            return;
-        }
-
-        try {
-            const params = new URLSearchParams();
-            itemsId.forEach(id => params.append('itemsId', id));
-            params.append('socketId', socketId);
-
-
-            const response = await fetch('https://bot.kediritechnopark.com/webhook/store-dev/pay', {
-                method: 'POST',
-                headers: {
-                    'Content-Type': 'application/x-www-form-urlencoded',
-                    'Authorization': `Bearer ${token}`
-                },
-                body: params.toString()
-            });
-
-
         const result = await response.json();
-
-            if (response.ok && result[0].qris_dynamic) {
-                setQrisData(result[0].qris_dynamic);
-                setValue(result[0].total_price);
-            } else {
-                alert(`Gagal mendapatkan QRIS: ${result?.error || 'Unknown error'}`);
+        if (response.ok) {
+          if (result.pay_timeout && result.time_now) {
+            const timeout = new Date(result.pay_timeout).getTime();
+            const now = new Date(result.time_now).getTime();
+            setPayTimeout(timeout);
+            setTimeLeft(timeout - now);
           }
 
+          setValue(result.total_price);
+          setQrisData(result.qris_dynamic || null);
+          setTransferData(result);
+        } else {
+          alert(`Request gagal: ${result?.error || 'Unknown error'}`);
+        }
       } catch (error) {
         console.error('Network error:', error);
-            alert("Terjadi kesalahan jaringan.");
+        alert('Terjadi kesalahan jaringan.');
+      } finally {
+        setLoadingPay(false);
       }
     };
 
+    itemsIdString = JSON.parse(urlParams.get('itemsId'));
+    setRedirect_Uri(urlParams.get('redirect_uri') || '');
+    setRedirect_Failed(urlParams.get('redirect_failed') || '');
+    setToken(tokenParam);
+
+    if (!itemsIdString || !Array.isArray(itemsIdString) || itemsIdString.length === 0) {
+      window.location.href = urlParams.get('redirect_failed') || '/';
+      return;
+    }
+
+    setItemIds(itemsIdString);
+    handlePay();
+  }, [socketId]);
+
+  useEffect(() => {
+    if (itemIds?.length > 0) {
+      fetch('https://bot.kediritechnopark.com/webhook/store-production/products', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ itemsId: itemIds, noParents: true }),
+      })
+        .then((res) => res.json())
+        .then((data) => setProducts(data))
+        .catch((err) => console.error('Error fetching products:', err));
+    }
+  }, [itemIds]);
+
+  useEffect(() => {
+    if (transactionSuccess) {
+      const timer = setTimeout(() => {
+        window.location.href = redirect_uri;
+      }, 10000);
+      return () => clearTimeout(timer);
+    }
+  }, [transactionSuccess, redirect_uri]);
+
+  useEffect(() => {
+    if (!payTimeout) return;
+    const interval = setInterval(() => {
+      const now = Date.now();
+      const remaining = payTimeout - now;
+      setTimeLeft(remaining);
+      if (remaining <= 0) {
+        clearInterval(interval);
+        alert('Waktu pembayaran habis.');
+        window.location.href = redirect_failed;
+      }
+    }, 1000);
+    return () => clearInterval(interval);
+  }, [payTimeout]);
+
+  const subtotal = products.reduce((acc, item) => acc + (item.price || 0), 0);
+  const grandTotal = subtotal;
+  const tax = 0;
+
   return (
-        <div className="checkout-container">
-            <div className="left-panel">
-                <div className="back-arrow">←</div>
-                <div className="brand-name">Powdur</div>
-                <div className="product-name">Pure kit</div>
-                <div className="product-price">$65.00</div>
-                <div className="product-image-container">
-                    <img src="path/to/image.jpg" alt="Powdur Product" />
+    <div className={styles.page}>
+      <div className={styles.checkoutCard}>
+        <div className={styles.cartSection}>
+          <div className={styles.invHeader}>
+            <div>
+              <h2 className={styles.brand}>
+                KEDIRI<span className={styles.brandLight}>TECHNOPARK</span>
+              </h2>
+              <p className={styles.greeting}>
+                Hello, {parseJwt(token)?.username || 'User'} <br />
+                Thank you for your order
+              </p>
+            </div>
+            <div className={styles.orderInfo}>
+              <div className={styles.invoiceLabel}>Invoice</div>
+              <div className={styles.orderMeta}>ORDER #{String(itemIds?.[0] || '').padStart(5, '0')}</div>
+              <div className={styles.orderMeta}>{new Date().toLocaleDateString()}</div>
             </div>
           </div>
-            <div className="right-panel">
-                {!qrisData ? (
-                    <>
-                        <h3>Cart Items</h3>
-                        {loadingProducts ? (
-                            <p>Loading products...</p>
-                        ) : products.length === 0 ? (
-                            <p>No products found</p>
-                        ) : (
-                            <ul>
-                                {products.map((product) => (
-                                    <li key={product.id || product._id}>
-                                        {product.name} - ${product.price}
-                                    </li>
+
+          <table className={styles.table}>
+            <thead>
+              <tr>
+                <th>Item</th>
+                <th className={styles.textRight}>Subtotal</th>
+              </tr>
+            </thead>
+            <tbody>
+              {products.map((item) => (
+                <tr key={item.id}>
+                  <td>{item.name}</td>
+                  <td className={styles.textRight}>
+                    Rp{(item.price || 0).toLocaleString('id-ID')}
+                  </td>
+                </tr>
               ))}
-                            </ul>
-                        )}
+            </tbody>
+          </table>
 
-                        <form className="shipping-info" onSubmit={handlePay}>
-                            <h3>Shipping information</h3>
-                            <input type="email" placeholder="Email" />
-                            <input type="text" placeholder="Name" />
-                            <select >
-                                <option value="United States">United States</option>
-                            </select>
-                            <input type="text" placeholder="Address" />
-                            <a href="#" className="manual-address">Enter address manually</a>
-
-                            <div className="payment-methods">
-                                <h3>Payment method</h3>
-                                <label>
-                                    <input type="radio" name="payment" value="card" />
-                                    <span className="icon">💳</span> Card
-                                </label>
-                                <label>
-                                    <input type="radio" name="payment" value="bank" />
-                                    <span className="icon">🏦</span> Bank
-                                </label>
-                                <label>
-                                    <input type="radio" name="payment" value="klarna" />
-                                    <span className="icon klarna">K</span> Klarna
-                                    <div className="klarna-subtext">Buy now pay later</div>
-                                </label>
-                                <label>
-                                    <input type="radio" name="payment" value="ideal" />
-                                    <span className="icon ideal">iD</span> iDEAL
-                                </label>
+          <div className={styles.summary}>
+            <div className={styles.summaryRow}>
+              <span>SUBTOTAL</span>
+              <span>Rp{subtotal.toLocaleString('id-ID')}</span>
+            </div>
+            <div className={styles.summaryRow}>
+              <span>TAX</span>
+              <span>Rp{tax.toLocaleString('id-ID')}</span>
+            </div>
+            <div className={styles.summaryTotal}>
+              <span>Total</span>
+              <span>Rp{value?.toLocaleString('id-ID')}</span>
+            </div>
+          </div>
         </div>
 
-                            <button type="submit" className="pay-button">Pay</button>
-                        </form>
-                    </>
-                ) : (
-                    <>
-                        {transactionSuccess ? (
-                            <div className="success-section">
-                                <div className="checkmark-container">
-                                    <svg className="checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
-                                        <circle className="checkmark-circle" cx="26" cy="26" r="25" fill="none" />
-                                        <path className="checkmark-check" fill="none" d="M14 27l7 7 16-16" />
+        <div className={styles.checkoutSection}>
+          {(qrisData || transferData) && (
+            <div className="mt-4">
+              {qrisData && (
+                <div className={styles.accordion}>
+                  <div
+                    className={styles.accordionHeader}
+                    onClick={() =>
+                      setActiveAccordion(activeAccordion === 'QRIS' ? '' : 'QRIS')
+                    }
+                  >
+                    QRIS Payment
+                  </div>
+                  {activeAccordion === 'QRIS' && (
+                    <div className={styles.accordionBody}>
+                      <QRCodeCanvas value={qrisData} size={200} />
+                      {transactionSuccess && (
+                        <div className={styles.CheckmarkOverlay}>
+                          <svg className={styles.Checkmark} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
+                            <circle className={styles.CheckmarkCircle} cx="26" cy="26" r="25" />
+                            <path className={styles.CheckmarkCheck} d="M14 27l7 7 16-16" />
                           </svg>
-                                    <h2>Payment Successful!</h2>
                         </div>
+                      )}
                     </div>
-                        ) : (
-                            <>
-                                <div className="qris-section">
-                                    <h3>Scan QRIS to Pay</h3>
-                                    <QRCodeCanvas value={qrisData} size={256} />
-                                    <p className="qris-string">{qrisData}</p>
+                  )}
                 </div>
-                                <h1>{value}</h1>
-                            </>
               )}
 
-                    </>
+              {transferData && (
+                <div className={styles.accordion}>
+                  <div
+                    className={styles.accordionHeader}
+                    onClick={() =>
+                      setActiveAccordion(activeAccordion === 'Bank' ? '' : 'Bank')
+                    }
+                  >
+                    Bank Transfer
+                  </div>
+                  {activeAccordion === 'Bank' && (
+                    <div className={styles.accordionBody}>
+                      <div><strong>Bank:</strong> {transferData?.bank_name}</div>
+                      <div><strong>Account No:</strong> {transferData?.bank_account}</div>
+                      <div><strong>Account Name:</strong> {transferData?.account_name}</div>
+                    </div>
+                  )}
+                </div>
+              )}
+            </div>
           )}
 
-                <div className="footer">
-                    Powered by <strong>stripe</strong> | Terms | Privacy
+          <div className={styles.footerText}>
+            Powered by <span className={styles.footerHighlight}>KEDIRITECHNOPARK</span>
+          </div>
         </div>
       </div>
     </div>

src/Checkout.module.css

@@ -0,0 +1,297 @@
+/* Layout wrapper */
+.page {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+  box-sizing: border-box;
+}
+
+.checkoutCard {
+  border-radius: 12px;
+  border: 1px solid #e5e7eb;
+  box-shadow: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  max-width: 64rem; /* desktop width */
+  width: 100%;
+  background: #fff;
+}
+
+/* Sections */
+.cartSection, .checkoutSection { flex: 1; }
+
+.cartSection {
+  padding: 2rem;
+  background: #ffffff;
+  border-bottom: 1px solid #f3f4f6;
+}
+
+.checkoutSection {
+  padding: 2rem 3rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+/* Header invoice */
+.invHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  border-bottom: 1px solid #e5e7eb;
+  padding-bottom: 1rem;
+  margin-bottom: 1rem;
+}
+.brand {
+  margin-top: 0;
+  font-size: 1.25rem;
+  font-weight: 800;
+  color: #2563eb;
+}
+.brandLight { font-weight: 500; }
+.greeting { text-align: left; margin-top: .5rem; font-size: .875rem; color: #374151; }
+.orderInfo { text-align: right; font-size: .875rem; color: #6b7280; }
+.invoiceLabel { font-size: 1rem; color: #4b5563; }
+.orderMeta { margin-top: .125rem; }
+
+/* Table */
+.table {
+  text-align: left;
+  width: 100%;
+  border-collapse: collapse;
+  margin-top: .5rem;
+  margin-bottom: 1rem;
+  font-size: .9rem;
+}
+.table th, .table td { padding: .75rem 0; }
+.table th {
+  border-bottom: 1px solid #d1d5db;
+  color: #374151;
+  font-weight: 600;
+}
+.table td { color: #1f2937; border-bottom: 1px solid #f3f4f6; }
+.textRight { text-align: right; }
+.actionsCol { width: 2rem; }
+
+/* Remove button (small) */
+.removeBtn {
+  font-weight: 700;
+  font-size: 1.25rem;
+  line-height: 1;
+  color: #ef4444;
+  background: none;
+  border: none;
+  cursor: pointer;
+}
+.removeBtn:hover { color: #b91c1c; }
+
+/* Summary */
+.summary { margin-top: 1rem; text-align: left; }
+.summaryRow, .summaryTotal {
+  display: flex;
+  justify-content: space-between;
+  font-size: .9rem;
+  color: #374151;
+  margin-top: .25rem;
+}
+.summaryTotal {
+  font-weight: 700;
+  font-size: 1.125rem;
+  margin-top: .5rem;
+}
+
+/* Right side */
+.checkoutTitle {
+  font-size: 1.25rem;
+  font-weight: 700;
+  color: #111827;
+  margin-bottom: 1rem;
+}
+
+.paymentInfo { margin-bottom: 1rem; }
+.paymentHeading {
+  font-size: .75rem;
+  font-weight: 700;
+  color: #374151;
+  letter-spacing: .04em;
+  margin-bottom: .5rem;
+}
+.radioLabel {
+  display: block;
+  margin-bottom: .4rem;
+  font-size: .95rem;
+  color: #374151;
+}
+
+.inputGroup { margin-bottom: 1rem; }
+.inputNote {
+  width: 100%;
+  padding: .75rem 1rem;
+  border: 1px solid #d1d5db;
+  border-radius: .5rem;
+  font-size: 1rem;
+  box-sizing: border-box;
+}
+.inputNote:focus {
+  outline: none;
+  border-color: #3b82f6;
+  box-shadow: 0 0 0 2px rgba(59,130,246,.4);
+}
+
+.paymentBtn {
+  width: 100%;
+  background: #8b5cf6;
+  color: #fff;
+  font-weight: 700;
+  padding: .75rem 0;
+  border-radius: .5rem;
+  font-size: 1.05rem;
+  border: none;
+  cursor: pointer;
+  box-shadow: 0 4px 6px rgba(139,92,246,.45);
+  transition: background-color .2s ease;
+}
+.paymentBtn:hover { background: #7c3aed; }
+
+/* Footer */
+.footerText {
+  font-size: .75rem;
+  color: #6b7280;
+  text-align: center;
+  margin-top: 2rem;
+}
+.footerHighlight { font-weight: 700; color: #374151; }
+
+/* QR view */
+.qrTitle { font-size: .95rem; color: #374151; }
+.qrBox {
+  margin-top: 2rem;
+  text-align: center;
+  position: relative;
+  display: inline-block;
+}
+
+/* Checkmark animation (as-is from your logic) */
+.CheckmarkOverlay {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background: rgba(255,255,255,.5);
+  width: 130px;
+  height: 130px;
+  display: flex; align-items: center; justify-content: center;
+  border-radius: 50%;
+  pointer-events: none;
+  z-index: 10;
+}
+.Checkmark { width: 100px; height: 100px; display: block; }
+.CheckmarkCircle {
+  fill: none; stroke: #4BB543; stroke-width: 4;
+  stroke-dasharray: 157; stroke-dashoffset: 157;
+  transform: rotate(-90deg); transform-origin: center;
+  animation: CircleFill 1s ease forwards;
+}
+.CheckmarkCheck {
+  fill: none; stroke: #4BB543; stroke-width: 4;
+  stroke-dasharray: 48; stroke-dashoffset: 48;
+  animation: DrawCheck .5s ease forwards; animation-delay: 1s;
+}
+@keyframes CircleFill { to { stroke-dashoffset: 0; } }
+@keyframes DrawCheck { to { stroke-dashoffset: 0; } }
+
+/* Responsive */
+@media (min-width: 768px) {
+  .checkoutCard { flex-direction: row; }
+  .cartSection { border-right: 1px solid #f3f4f6; border-bottom: none; }
+}
+@media (max-width: 767px) {
+  .checkoutCard { flex-direction: column; }
+}
+
+.selectPayment {
+  width: 100%;
+  padding: 10px;
+  font-size: 16px;
+  border-radius: 6px;
+  border: 1px solid #ccc;
+  margin-top: 8px;
+  margin-bottom: 16px;
+}
+
+.selectPaymentModern {
+  width: 100%;
+  padding: 0.65rem 1rem;
+  font-size: 1rem;
+  border-radius: 0.5rem;
+  border: 1px solid #d1d5db;
+  background-color: #f9fafb;
+  appearance: none;
+  background-image: url("data:image/svg+xml;utf8,<svg fill='gray' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
+  background-repeat: no-repeat;
+  background-position: right 1rem center;
+  background-size: 1rem;
+  cursor: pointer;
+}
+.selectPaymentModern:focus {
+  outline: none;
+  border-color: #3b82f6;
+  background-color: #fff;
+}
+
+.transferBox {
+  margin-top: 2rem;
+  padding: 1.5rem;
+  border: 1px solid #e5e7eb;
+  border-radius: 0.5rem;
+  background: #f9fafb;
+  text-align: left;
+}
+.transferBox span {
+  text-align: right;
+}
+.transferTitle {
+  font-size: 1.125rem;
+  font-weight: 700;
+  margin-bottom: 1rem;
+  color: #111827;
+}
+.transferRow {
+  display: flex;
+  justify-content: space-between;
+  padding: 0.5rem 0;
+  border-bottom: 1px dashed #d1d5db;
+  font-size: 0.95rem;
+  color: #374151;
+}
+.transferRow:last-child {
+  border-bottom: none;
+}
+
+.accordion {
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  margin-bottom: 1rem;
+  overflow: hidden;
+}
+
+.accordionHeader {
+  background-color: #f5f5f5;
+  padding: 12px 16px;
+  cursor: pointer;
+  font-weight: bold;
+  transition: background 0.2s ease;
+}
+
+.accordionHeader:hover {
+  background-color: #e0e0e0;
+}
+
+.accordionBody {
+  padding: 16px;
+  background-color: #fff;
+  border-top: 1px solid #ddd;
+}