diff --git a/public/js/checkout.js b/public/js/checkout.js
new file mode 100644
index 0000000..a48b4d3
--- /dev/null
+++ b/public/js/checkout.js
@@ -0,0 +1,40 @@
+function view_checkout() {
+    var bag = JSON.parse(localStorage.getItem("bag"));
+    var html = '';
+    var total_price = 0;
+
+    for (var i = 0; i < bag.length; i++) {
+        let request = new XMLHttpRequest();
+        request.open('GET', `api/getProduct?id=${bag[i].product_id}`, false);
+        request.send(null);
+
+        if (request.status === 200) {
+            let data = JSON.parse(request.responseText);
+            total_price += parseInt(data[0].PRICE * bag[i].quantity);
+            html += `
+            <tr class="titletrdes">
+                <th scope="row" style="display: flex;"><img alt="placeholder image" class="img lazyload"
+                        height="80px" src="img/${data[0].IMAGE}" width="80px">
+                    <div class="info">
+                        <p>${data[0].TITLE}</p>
+                        <p>${data[0].SIZE}</p>
+                        <p>Qty : ${bag[i].quantity}</p>
+                    </div>
+                </th>
+                <td>Rp ${data[0].PRICE}</td>
+                <td>Rp ${data[0].PRICE * bag[i].quantity}</td>
+            </tr>
+            `;
+        }
+    }
+    html += `
+    <tr style="border-bottom: 1px solid white;">
+        <th>Total Price</th>
+        <td></td>
+        <td id="total-price">Rp ${total_price}</td>
+    </tr>
+    `
+    document.getElementById("view-checkout").innerHTML = html;
+}
+
+view_checkout();
\ No newline at end of file
diff --git a/views/pages/checkout.ejs b/views/pages/checkout.ejs
index f6cdc7e..0d8821c 100644
--- a/views/pages/checkout.ejs
+++ b/views/pages/checkout.ejs
@@ -19,15 +19,7 @@
                         <th scope="col">Sub Total</th>
                     </tr>
                 </thead>
-                <tbody>
-                    <%- include('../layouts/checkouttr.ejs') %>
-                    <%- include('../layouts/checkouttr.ejs') %>
-                    <%- include('../layouts/checkouttr.ejs') %>
-                    <tr style="border-bottom: 1px solid white;">
-                        <th>Total Price</th>
-                        <td></td>
-                        <td>Rp 5.999.997,00</td>
-                    </tr>
+                <tbody id="view-checkout">
                 </tbody>
             </table>
         </div>