Index: main/waeup.ikoba/branches/uli-payments/src/waeup/ikoba/payments/templates/demo_cc_step1.pt
===================================================================
--- main/waeup.ikoba/branches/uli-payments/src/waeup/ikoba/payments/templates/demo_cc_step1.pt	(revision 12704)
+++ main/waeup.ikoba/branches/uli-payments/src/waeup/ikoba/payments/templates/demo_cc_step1.pt	(revision 12708)
@@ -1,9 +1,135 @@
-<p>
-  Enter your Credit Card Details here...
-</p>
-<!--
+<form class="form-horizontal">
+  <div class="form-group">
+    <label for="firstname" class="col-sm-3 control-label">
+      Cardholder's First Name:
+    </label>
+    <div class="col-sm-5">
+      <input type="text" class="form-control" placeholder="John"
+             id="firstname" />
+    </div>
+  </div>
 
-  Here we will get a form with action target at the gateway providers
-  site. As demo provider is fake, we can send people to ourselves.
+  <div class="form-group">
+    <label for="lastname" class="col-sm-3 control-label">
+      Cardholder's Last Name:
+    </label>
+    <div class="col-sm-5">
+      <input type="text" class="form-control" placeholder="Smith"
+             id="lastname" />
+    </div>
+  </div>
 
--->
+  <div class="form-group">
+    <label for="ccnumber" class="col-sm-3 control-label">
+      Credit Card Number:
+    </label>
+    <div class="col-sm-5">
+      <input type="text" class="form-control" id="ccnumber" />
+    </div>
+  </div>
+
+  <div class="form-group">
+    <label for="exp_date" class="col-sm-3 control-label">
+      Expiration Date:
+    </label>
+
+    <div class="col-sm-2">
+      <select class="form-control text-right" id="exp_date_month">
+        <option class="text-right">1</option>
+        <option>2</option>
+        <option selected="selected">3</option>
+        <option>4</option>
+        <option>5</option>
+        <option>6</option>
+        <option>7</option>
+        <option>8</option>
+        <option>9</option>
+        <option>10</option>
+        <option>11</option>
+        <option>12</option>
+      </select>
+    </div>
+
+    <div class="col-sm-2">
+      <select class="form-control" id="exp_date_month">
+        <option>2015</option>
+        <option>2016</option>
+        <option>2017</option>
+        <option>2018</option>
+        <option>2019</option>
+        <option>2020</option>
+        <option>2021</option>
+      </select>
+    </div>
+  </div>
+
+  <div class="form-group">
+    <label for="sec_code" class="col-sm-3 control-label">
+      Security Code (CSC):
+      <div class="small">
+        <a href="#collapseExample" data-toggle="collapse"
+           aria-expanded="false" aria-controls="collapseExample">
+          What is a CSC?
+        </a>
+      </div>
+    </label>
+    <div class="col-sm-3">
+      <input type="text" class="form-control" maxlength="4" id="sec_code" />
+    </div>
+
+  </div>
+
+  <div class="form-group">
+    <div class="collapse col-sm-12" id="collapseExample">
+      <div class="well">
+        <p class="strong"><b>Card Security Code (CSC)</b></p>
+        <p>
+          The card security code, also known as card verification
+          value (CVV or CVV2) is a counter-measure to protect you from
+          credit card fraud.
+        </p>
+
+        <p>
+            The security code is located on the back of MasterCard,
+            Visa and Discover credit or debit cards and is typically a
+            separate group of 3 digits within or to the right of the
+            signature strip.
+        </p>
+        <div class="col-sm-12">
+          <div>
+            <img src="/static/img/cvv2-sample-visa.png"
+                 class="img-responsive col-sm-3" />
+            </div><div>
+            <img src="/static/img/cvv2-sample-amex.png"
+                 class="img-responsive col-sm-3" />
+          </div>
+        </div>
+
+        <p>
+          On American Express cards, the card security code is a
+          printed, not embossed, group of four digits on the front
+          towards the right.
+        </p>
+      </div>
+    </div>
+
+  </div>
+
+  <hr />
+
+  <div class="form-group">
+    <div class="col-sm-offset-1 col-sm-2">
+      <b>Payment Total:</b>
+    </div>
+    <div class="col-sm-9 text-left">
+      <b>$&nbsp;3,012.40&nbsp;USD</b>
+    </div>
+  </div>
+  <div class="form-group">
+    <div class="col-sm-offset-2 col-sm-10">
+      <button type="submit" class="btn btn-primary">Authorize Payment</button>
+      <button type="submit" class="btn">Cancel</button>
+    </div>
+  </div>
+
+</form>
