diff --git a/app.py b/app.py
index 4a6a79b..cd9609e 100644
--- a/app.py
+++ b/app.py
@@ -14,7 +14,7 @@ def app_create():
 
 @app.route('/charge', methods=['POST'])
 def app_charge():
-    amount = 5100
+    amount = request.form['amount']
     payment_id = request.form['razorpay_payment_id']
     razorpay_client.payment.capture(payment_id, amount)
     return json.dumps(razorpay_client.payment.fetch(payment_id))
diff --git a/templates/app.html b/templates/app.html
index 1ebe927..07ee00c 100644
--- a/templates/app.html
+++ b/templates/app.html
@@ -1,24 +1,68 @@
-<html>
-<head lang="en">
-    <meta charset="utf-8">
+<!DOCTYPE html>
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+<head runat="server">
+    <title>Razorpay Python Sample App</title>
 </head>
+
 <body>
-    <form action="charge" method="POST">
-        <script
-            src="https://checkout.razorpay.com/v1/checkout.js"
-            data-key="rzp_test_WyK93y9mvps7SN"
-            data-amount="5100"
-            data-name="Daft Punk"
-            data-description="Purchase Description"
-            data-image="vk.jpg"
-            data-netbanking="true"
-            data-description="Tron Legacy"
-            data-prefill.name="Harshil Mathur"
-            data-prefill.email="harshil@razorpay.com"
-            data-prefill.contact="9999999999"
-            data-notes.shopping_order_id="21">
-        </script>
-        <input type="hidden" name="shopping_order_id" value="21">
+    <button id="rzp-button1">Pay with Razorpay</button>
+    <script src="https://checkout.razorpay.com/v1/checkout.js"></script>
+    <form action="charge" method="POST" name="razorpayForm">
+        <input type="hidden" id="payment_id" name="razorpay_payment_id" />
+        <input type="hidden" id="amount" name="amount" />
     </form>
+    <script>
+        // Checkout details as a json
+        var amount = 5100;
+        var options = {
+            'key': '', // Add you key here
+            'amount': amount,
+            "name": "DJ Tiesto",
+            "description": "Tron Legacy",
+            "image": "https://s29.postimg.org/r6dj1g85z/daft_punk.jpg",
+            "prefill": {
+                "name": "Daft Punk",
+                "email": "customer@merchant.com",
+                "contact": "+919999999999",
+            },
+            "notes": {
+                "address": "Hello World",
+                "merchant_order_id": "12312321",
+            },
+            "theme": {
+                "color": "#F37254"
+            }
+        }
+        /**
+         * The entire list of Checkout fields is available at
+         * https://docs.razorpay.com/docs/checkout-form#checkout-fields
+         */
+        options.handler = function (response) {
+            document.getElementById('payment_id').value = response.razorpay_payment_id;
+            document.getElementById('amount').value = amount;
+            document.razorpayForm.submit();
+        };
+        // Boolean whether to show image inside a white frame. (default: true)
+        options.theme.image_padding = false;
+        options.modal = {
+            ondismiss: function () {
+                console.log("This code runs when the popup is closed");
+            },
+            // Boolean indicating whether pressing escape key 
+            // should close the checkout form. (default: true)
+            escape: true,
+            // Boolean indicating whether clicking translucent blank
+            // space outside checkout form should close the form. (default: false)
+            backdropclose: false
+        };
+        var rzp = new Razorpay(options);
+        document.getElementById('rzp-button1').onclick = function (e) {
+            rzp.open();
+            e.preventDefault();
+        }
+    </script>
 </body>
+
 </html>
