diff --git a/app/controllers/origami/card_payments_controller.rb b/app/controllers/origami/card_payments_controller.rb
new file mode 100644
index 00000000..2df4b266
--- /dev/null
+++ b/app/controllers/origami/card_payments_controller.rb
@@ -0,0 +1,10 @@
+class Origami::CardPaymentsController < BaseOrigamiController
+
+
+  def index
+  end
+
+  def create
+  end
+
+end
diff --git a/app/controllers/origami/credit_payments_controller.rb b/app/controllers/origami/credit_payments_controller.rb
new file mode 100644
index 00000000..a348951e
--- /dev/null
+++ b/app/controllers/origami/credit_payments_controller.rb
@@ -0,0 +1,10 @@
+class Origami::CreditPaymentsController < BaseOrigamiController
+
+
+  def index
+  end
+
+  def create
+  end
+
+end
diff --git a/app/controllers/origami/payments_controller.rb b/app/controllers/origami/payments_controller.rb
index 3fa3aa9b..f64e27e3 100644
--- a/app/controllers/origami/payments_controller.rb
+++ b/app/controllers/origami/payments_controller.rb
@@ -5,6 +5,9 @@ class Origami::PaymentsController < BaseOrigamiController
   end
 
   def create
+    #payment type
+    #sale status
+    #point - get  [ food amount ]
   end
 
   def show
diff --git a/app/views/origami/card_payments/index.html.erb b/app/views/origami/card_payments/index.html.erb
new file mode 100644
index 00000000..86ef10b0
--- /dev/null
+++ b/app/views/origami/card_payments/index.html.erb
@@ -0,0 +1 @@
+Hello Card Payment
diff --git a/app/views/origami/credit_payments/index.html.erb b/app/views/origami/credit_payments/index.html.erb
new file mode 100644
index 00000000..e4f97119
--- /dev/null
+++ b/app/views/origami/credit_payments/index.html.erb
@@ -0,0 +1 @@
+hello Credit
diff --git a/app/views/origami/request_bills/show.html.erb b/app/views/origami/request_bills/show.html.erb
index 98ed0019..573a63f4 100644
--- a/app/views/origami/request_bills/show.html.erb
+++ b/app/views/origami/request_bills/show.html.erb
@@ -74,8 +74,8 @@
   </div>
   <div class="col-lg-5 col-md-5 col-sm-3">
     <div class="row">
-      <div class="col-md-8">AMOUNT DUE</div>
-      <div class="col-md-4"><%= @sale_data.grand_total %></div>
+      <div class="col-md-8"><strong>AMOUNT DUE</strong></div>
+      <div class="col-md-4"><strong><span id="amount_due"><%= @sale_data.grand_total %></span></strong></div>
     </div>
     <hr>
     <div class="row">
@@ -95,7 +95,7 @@
       <hr>
     <div class="row">
       <div class="col-md-8">BALANCE</div>
-      <div class="col-md-4">0.0</div>
+      <div class="col-md-4"><span id='balance'><%= @sale_data.grand_total %></span></div>
     </div>
       <hr>
     <div class="row">
@@ -157,7 +157,7 @@
                </div>
              </div>
              <div class="col-md-5">
-                <div class="col-md-12 cashier_number long purple id="pay"">PAY</div>
+                <div class="col-md-12 cashier_number long purple " id="pay">PAY</div>
              </div>
            </div>
       </div>
@@ -179,8 +179,10 @@ $(document).on('click', '.cashier_number', function(event){
               var input_value = $(this).attr("data-value");
               if (original_value == "0.0"){
                 $('#cash').text(input_value);
+                update_balance();
               }else{
                 $('#cash').append(input_value);
+                update_balance();
               }
               break;
 
@@ -188,6 +190,7 @@ $(document).on('click', '.cashier_number', function(event){
                 var input_value = $(this).attr("data-value");
                 amount = parseInt(input_value) + parseInt(original_value);
                 $('#cash').text(amount);
+                update_balance();
               break;
 
           }
@@ -196,6 +199,7 @@ $(document).on('click', '.cashier_number', function(event){
             return false;
         }
 });
+
 $( document ).ready(function() {
   $('#credit_payment').click(function() {
     var sale_id = $('#sale_id').text();
@@ -208,5 +212,25 @@ $( document ).ready(function() {
     window.location.href = '/origami/sale/'+ sale_id  + "/payment/card_payment"
     return false;
  });
+
+ $('#pay').click(function() {
+   console.log("pay")
+   if($('#amount_due').text() > 0){
+     console.log("greater")
+   }else{
+     console.log("less")
+   }
+ });
+
 });
+
+function update_balance(){
+  var cash = $('#cash').text();
+  var credit = $('#credit').text();
+  var card = $('#card').text();
+  var amount_due = $('#amount_due').text();
+  var total = cash + credit + card
+  var result = amount_due - total
+  $('#balance').text(result);
+}
 </script>