feat: Add Razorpay integration for cart-order page payments

Author: VAISHAKH-GK

internal/handler/user.go

@@ -223,13 +223,18 @@ func CartOrderPost(c echo.Context) error {
 
 	var cart = utils.GetSessionAll(c, "cart")
 	var orderId = uuid.New()
+	body.Id = orderId.String()
 	var total int = 0
 	for id, size := range cart {
 		var product, _ = mysql.GetProductById(id.(string))
 		var order models.Order = body
 
 		order.ProductId = product.Id
-		order.Status = "ordered"
+		if body.Payment == "online" {
+			order.Status = "pending"
+		} else {
+			order.Status = "ordered"
+		}
 		order.Quantity = 1
 		order.Total = product.Price
 		order.Size = size.(string)
@@ -240,8 +245,23 @@ func CartOrderPost(c echo.Context) error {
 		}
 		total += order.Total
 	}
+	if body.Payment == "online" {
+		var key = os.Getenv("RAZORPAY_KEY")
+		var secret = os.Getenv("RAZORPAY_SECRET")
+		var client = razorpay.NewClient(key, secret)
+		var ord = map[string]interface{}{
+			"amount":   total * 100,
+			"currency": "INR",
+		}
+		order, err := client.Order.Create(ord, nil)
+		if err != nil {
+			fmt.Println(err)
+		}
+		fmt.Println("submit cart")
 
-	utils.DeleteSession(c, "cart")
+		var component = user.OnlinePaymentCart(body, order, key)
+		return utils.Render(c, component)
+	}
 
 	if c.Request().Header.Get("HX-Request") == "true" {
 		c.Response().Header().Set("HX-Location", "/cart")

view/user/cart-order.templ

@@ -10,6 +10,7 @@ import (
 
 templ CartOrder(products []models.Product) {
     @layout.User() {
+        <script src="https://checkout.razorpay.com/v1/checkout.js"></script>
         <link rel="stylesheet" href="/static/styles/user/order.css">
         <div class={Container()}>
             <h1>Place Order</h1>
@@ -25,7 +26,7 @@ templ CartOrder(products []models.Product) {
                         <hr>
                     }
                 </div>
-                <form hx-post="/cart/order">
+                <form hx-post="/cart/order" hx-target="closest form" hx-swap="afterend">
                     <input type="text" name="name" placeholder="Name"/>
                     <textarea name="address" placeholder="Adress"></textarea>
                     <input type="text" name="house" placeholder="House no. or House name"/>
@@ -41,4 +42,61 @@ templ CartOrder(products []models.Product) {
             </div>
         </div>
     }
+}
+templ OnlinePaymentCart(order models.Order,ord map[string]interface{},key string) {
+  @templ.JSONScript("order-data", order)
+  @templ.JSONScript("ord-data", ord)
+  @templ.JSONScript("key-data", key)
+
+  <script id="order-data" type="application/json"></script>
+  <script id="ord-data" type="application/json"></script>
+  <script id="key-data" type="application/json"></script>
+
+  <script>
+    var order = JSON.parse(document.getElementById("order-data").textContent)
+    var ord = JSON.parse(document.getElementById("ord-data").textContent)
+    var key = JSON.parse(document.getElementById("key-data").textContent)
+  console.log(order)
+
+    var options = {
+        key: key,
+        amount: order.Total,
+        currency: "INR",
+        name: "Stitch",
+        description: "Cloth Shop",
+        "order_id": ord.id,
+        handler: async function (response) {
+          var url = "/payment-verification/" + order.id
+          var body = JSON.stringify({"orderId": response.razorpay_order_id, "paymentId": response.razorpay_payment_id, "razorpaySignature": response.razorpay_signature})
+          console.log(body)
+          var res = await fetch(url,{method: "POST", headers: {"Content-Type": "application/json"}, body:body})
+          if (res.ok) {
+            var json = await res.json()
+            alert(json)
+          } else {
+            var json = await res.json()
+            alert(json)
+          }
+        },
+        modal: {
+          ondismiss: async function() {
+            var url = "/delete-order/" + order.id
+            var res = await fetch(url)
+            if (res.ok) {
+                var json = await res.json()
+                alert(json)
+            } 
+          }
+        },
+        prefil: {
+            name: order.Name,
+            contact: order.Phone
+        },
+        theme: "#ff0000"
+    }
+
+    var raz = new Razorpay(options) 
+    raz.open();
+
+  </script>
 }