diff --git a/mongoUtils/connect.js b/mongoUtils/connect.js
index e4e7a83..3222365 100644
--- a/mongoUtils/connect.js
+++ b/mongoUtils/connect.js
@@ -70,10 +70,22 @@ const mrInsertOne = (collectionName, input, callFunc) => {
   });
 };
 
+const mrUpdate = (collectionName, input, callFunc) => {
+  const { id, ResCode,refId } = input;
+  mrConnect((db, client) => {
+    db.collection(collectionName).update({"refId": refId},{$set: { "ResCode": ResCode}}, (findErr, addResult) => {
+      if (findErr) throw findErr;
+      callFunc(input);
+    });
+    client.close();
+  });
+};
+
 module.exports = {
   mrConnect,
   mrFindAll,
   mrInsertOne,
   mrInitCollections,
   mrCheckAndInsert,
+  mrUpdate
 };
diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css
index d763eae..739ef7c 100644
--- a/public/stylesheets/style.css
+++ b/public/stylesheets/style.css
@@ -29,3 +29,257 @@ a {
   max-width: 320px;
   margin: 150px auto;
 }
+
+.main-loader{
+  overflow: hidden;
+  width: 100%;
+  height: 100vh;
+  position: relative;
+}
+.main-loader-title {
+  position: absolute;
+  font-family: "Open Sans";
+  font-weight: 600;
+  font-size: 12px;
+  text-transform: uppercase;
+  left: 50%;
+  top: 58%;
+  margin-left: -20px;
+}
+
+.main-loader-body {
+  position: absolute;
+  top: 50%;
+  margin-left: -50px;
+  left: 50%;
+  animation: speeder 0.4s linear infinite;
+}
+.main-loader-body > span {
+  height: 5px;
+  width: 35px;
+  background: #000;
+  position: absolute;
+  top: -19px;
+  left: 60px;
+  border-radius: 2px 10px 1px 0;
+}
+
+.base span {
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-top: 6px solid transparent;
+  border-right: 100px solid #000;
+  border-bottom: 6px solid transparent;
+}
+.base span:before {
+  content: "";
+  height: 22px;
+  width: 22px;
+  border-radius: 50%;
+  background: #000;
+  position: absolute;
+  right: -110px;
+  top: -16px;
+}
+.base span:after {
+  content: "";
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-top: 0 solid transparent;
+  border-right: 55px solid #000;
+  border-bottom: 16px solid transparent;
+  top: -16px;
+  right: -98px;
+}
+
+.face {
+  position: absolute;
+  height: 12px;
+  width: 20px;
+  background: #000;
+  border-radius: 20px 20px 0 0;
+  transform: rotate(-40deg);
+  right: -125px;
+  top: -15px;
+}
+.face:after {
+  content: "";
+  height: 12px;
+  width: 12px;
+  background: #000;
+  right: 4px;
+  top: 7px;
+  position: absolute;
+  transform: rotate(40deg);
+  transform-origin: 50% 50%;
+  border-radius: 0 0 0 2px;
+}
+
+.main-loader-body > span > span:nth-child(1),
+.main-loader-body > span > span:nth-child(2),
+.main-loader-body > span > span:nth-child(3),
+.main-loader-body > span > span:nth-child(4) {
+  width: 30px;
+  height: 1px;
+  background: #000;
+  position: absolute;
+  animation: fazer1 0.2s linear infinite;
+}
+
+.main-loader-body > span > span:nth-child(2) {
+  top: 3px;
+  animation: fazer2 0.4s linear infinite;
+}
+
+.main-loader-body > span > span:nth-child(3) {
+  top: 1px;
+  animation: fazer3 0.4s linear infinite;
+  animation-delay: -1s;
+}
+
+.main-loader-body > span > span:nth-child(4) {
+  top: 4px;
+  animation: fazer4 1s linear infinite;
+  animation-delay: -1s;
+}
+
+@keyframes fazer1 {
+  0% {
+    left: 0;
+  }
+  100% {
+    left: -80px;
+    opacity: 0;
+  }
+}
+@keyframes fazer2 {
+  0% {
+    left: 0;
+  }
+  100% {
+    left: -100px;
+    opacity: 0;
+  }
+}
+@keyframes fazer3 {
+  0% {
+    left: 0;
+  }
+  100% {
+    left: -50px;
+    opacity: 0;
+  }
+}
+@keyframes fazer4 {
+  0% {
+    left: 0;
+  }
+  100% {
+    left: -150px;
+    opacity: 0;
+  }
+}
+@keyframes speeder {
+  0% {
+    transform: translate(2px, 1px) rotate(0deg);
+  }
+  10% {
+    transform: translate(-1px, -3px) rotate(-1deg);
+  }
+  20% {
+    transform: translate(-2px, 0px) rotate(1deg);
+  }
+  30% {
+    transform: translate(1px, 2px) rotate(0deg);
+  }
+  40% {
+    transform: translate(1px, -1px) rotate(1deg);
+  }
+  50% {
+    transform: translate(-1px, 3px) rotate(-1deg);
+  }
+  60% {
+    transform: translate(-1px, 1px) rotate(0deg);
+  }
+  70% {
+    transform: translate(3px, 1px) rotate(-1deg);
+  }
+  80% {
+    transform: translate(-2px, -1px) rotate(1deg);
+  }
+  90% {
+    transform: translate(2px, 1px) rotate(0deg);
+  }
+  100% {
+    transform: translate(1px, -2px) rotate(-1deg);
+  }
+}
+.longfazers {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+}
+.longfazers span {
+  position: absolute;
+  height: 2px;
+  width: 20%;
+  background: #000;
+}
+.longfazers span:nth-child(1) {
+  top: 20%;
+  animation: lf 0.6s linear infinite;
+  animation-delay: -5s;
+}
+.longfazers span:nth-child(2) {
+  top: 40%;
+  animation: lf2 0.8s linear infinite;
+  animation-delay: -1s;
+}
+.longfazers span:nth-child(3) {
+  top: 60%;
+  animation: lf3 0.6s linear infinite;
+}
+.longfazers span:nth-child(4) {
+  top: 80%;
+  animation: lf4 0.5s linear infinite;
+  animation-delay: -3s;
+}
+
+@keyframes lf {
+  0% {
+    left: 200%;
+  }
+  100% {
+    left: -200%;
+    opacity: 0;
+  }
+}
+@keyframes lf2 {
+  0% {
+    left: 200%;
+  }
+  100% {
+    left: -200%;
+    opacity: 0;
+  }
+}
+@keyframes lf3 {
+  0% {
+    left: 200%;
+  }
+  100% {
+    left: -100%;
+    opacity: 0;
+  }
+}
+@keyframes lf4 {
+  0% {
+    left: 200%;
+  }
+  100% {
+    left: -100%;
+    opacity: 0;
+  }
+}
diff --git a/routes/index.js b/routes/index.js
index 408fd65..21cc28e 100644
--- a/routes/index.js
+++ b/routes/index.js
@@ -5,6 +5,7 @@ const {
   mrFindAll,
   mrInsertOne,
   mrInitCollections,
+  mrUpdate
 } = require("../mongoUtils/connect");
 const { v4: uuidv4 } = require("uuid");
 const { ACCESS_TOKEN } = process.env;
@@ -53,19 +54,15 @@ router.post("/login", function (req, res, next) {
 router.post("/bank", function (req, res, next) {
   const {
     orderId,
-    token,
     callBackUrl,
     amount,
-    userName,
-    userPassword,
   } = req.body;
-  const refId = uuidv4();
 
   const inputData = {
-    refId,
     orderId,
     callBackUrl,
     amount,
+    refId: uuidv4(),
     saleOrderId: orderId,
     SaleReferenceId: Math.floor(Math.random() * 10000000),
   };
@@ -75,4 +72,10 @@ router.post("/bank", function (req, res, next) {
   });
 });
 
+router.post("/complete-payment", function (req, res, next) {
+  mrUpdate("transactions", req.body, (data) => {
+    res.render("completePayment", { title: "complete payment", result: data });
+  });
+});
+
 module.exports = router;
diff --git a/views/bank.jade b/views/bank.jade
index 48d2b31..01d9fe1 100644
--- a/views/bank.jade
+++ b/views/bank.jade
@@ -13,12 +13,18 @@ block content
           td #{result.amount}
     div.text-center.row
       .col
-        form(action="#{result.callBackUrl}",method="post", name="bank")
+        form(action="/complete-payment",method="post", name="bank")
+          input(type="hidden", name="id", value="#{result._id}")
           input(type="hidden", name="orderId", value="#{result.orderId}")
+          input(type="hidden", name="refId", value="#{result.refId}")
+          input(type="hidden", name="callBackUrl", value="#{result.callBackUrl}")
           input(type="hidden", name="ResCode", value="0")
           button.btn.btn-success(type="submit") success
       .col
-        form(action="#{result.callBackUrl}",method="post", name="bank")
+        form(action="/complete-payment",method="post", name="bank")
+          input(type="hidden", name="id", value="#{result._id}")
           input(type="hidden", name="orderId", value="#{result.orderId}")
+          input(type="hidden", name="refId", value="#{result.refId}")
+          input(type="hidden", name="callBackUrl", value="#{result.callBackUrl}")
           input(type="hidden", name="ResCode", value="17")
           button.btn.btn-danger(type="submit") failed
diff --git a/views/completePayment.jade b/views/completePayment.jade
new file mode 100644
index 0000000..82d088a
--- /dev/null
+++ b/views/completePayment.jade
@@ -0,0 +1,24 @@
+extends layout
+block content
+  .main-loader
+    .main-loader-body
+      span
+        span
+        span
+        span
+        span
+      .base
+        span
+        .face
+    .longfazers
+      span
+      span
+      span
+      span
+    h1.main-loader-title Redirecting
+    form(action="#{result.callBackUrl}",method="post", name="completePayment")
+      input(type="hidden", name="orderId", value="#{result.orderId}")
+      input(type="hidden", name="ResCode", value="#{result.ResCode}")
+      input(type="hidden", name="refId", value="#{result.refId}")
+    script.
+      document.forms['completePayment'].submit()
diff --git a/views/transactions.jade b/views/transactions.jade
index 7ed4f57..b77c2c5 100644
--- a/views/transactions.jade
+++ b/views/transactions.jade
@@ -8,6 +8,7 @@ block content
       tr
         td Id
         td RefId
+        td ResCode
         td Amount
         td SaleOrderId
         td SaleReferenceId
@@ -17,6 +18,7 @@ block content
         tr
           td #{transaction._id}
           td #{transaction.refId}
+          td #{transaction.ResCode}
           td #{transaction.amount}
           td #{transaction.saleOrderId}
           td #{transaction.SaleReferenceId}