Ignore:
Timestamp:
10 Mar 2015, 12:48:07 (10 years ago)
Author:
uli
Message:

Some art work ;-)

File:
1 edited

Legend:

Unmodified
Added
Removed

  • main/waeup.ikoba/branches/uli-payments/src/waeup/ikoba/payments/templates/demo_cc_step1.pt

    r12704 r12708  
    1 <p>
    2   Enter your Credit Card Details here...
    3 </p>
    4 <!--
     1<form class="form-horizontal">
     2  <div class="form-group">
     3    <label for="firstname" class="col-sm-3 control-label">
     4      Cardholder's First Name:
     5    </label>
     6    <div class="col-sm-5">
     7      <input type="text" class="form-control" placeholder="John"
     8             id="firstname" />
     9    </div>
     10  </div>
    511
    6   Here we will get a form with action target at the gateway providers
    7   site. As demo provider is fake, we can send people to ourselves.
     12  <div class="form-group">
     13    <label for="lastname" class="col-sm-3 control-label">
     14      Cardholder's Last Name:
     15    </label>
     16    <div class="col-sm-5">
     17      <input type="text" class="form-control" placeholder="Smith"
     18             id="lastname" />
     19    </div>
     20  </div>
    821
    9 -->
     22  <div class="form-group">
     23    <label for="ccnumber" class="col-sm-3 control-label">
     24      Credit Card Number:
     25    </label>
     26    <div class="col-sm-5">
     27      <input type="text" class="form-control" id="ccnumber" />
     28    </div>
     29  </div>
     30
     31  <div class="form-group">
     32    <label for="exp_date" class="col-sm-3 control-label">
     33      Expiration Date:
     34    </label>
     35
     36    <div class="col-sm-2">
     37      <select class="form-control text-right" id="exp_date_month">
     38        <option class="text-right">1</option>
     39        <option>2</option>
     40        <option selected="selected">3</option>
     41        <option>4</option>
     42        <option>5</option>
     43        <option>6</option>
     44        <option>7</option>
     45        <option>8</option>
     46        <option>9</option>
     47        <option>10</option>
     48        <option>11</option>
     49        <option>12</option>
     50      </select>
     51    </div>
     52
     53    <div class="col-sm-2">
     54      <select class="form-control" id="exp_date_month">
     55        <option>2015</option>
     56        <option>2016</option>
     57        <option>2017</option>
     58        <option>2018</option>
     59        <option>2019</option>
     60        <option>2020</option>
     61        <option>2021</option>
     62      </select>
     63    </div>
     64  </div>
     65
     66  <div class="form-group">
     67    <label for="sec_code" class="col-sm-3 control-label">
     68      Security Code (CSC):
     69      <div class="small">
     70        <a href="#collapseExample" data-toggle="collapse"
     71           aria-expanded="false" aria-controls="collapseExample">
     72          What is a CSC?
     73        </a>
     74      </div>
     75    </label>
     76    <div class="col-sm-3">
     77      <input type="text" class="form-control" maxlength="4" id="sec_code" />
     78    </div>
     79
     80  </div>
     81
     82  <div class="form-group">
     83    <div class="collapse col-sm-12" id="collapseExample">
     84      <div class="well">
     85        <p class="strong"><b>Card Security Code (CSC)</b></p>
     86        <p>
     87          The card security code, also known as card verification
     88          value (CVV or CVV2) is a counter-measure to protect you from
     89          credit card fraud.
     90        </p>
     91
     92        <p>
     93            The security code is located on the back of MasterCard,
     94            Visa and Discover credit or debit cards and is typically a
     95            separate group of 3 digits within or to the right of the
     96            signature strip.
     97        </p>
     98        <div class="col-sm-12">
     99          <div>
     100            <img src="/static/img/cvv2-sample-visa.png"
     101                 class="img-responsive col-sm-3" />
     102            </div><div>
     103            <img src="/static/img/cvv2-sample-amex.png"
     104                 class="img-responsive col-sm-3" />
     105          </div>
     106        </div>
     107
     108        <p>
     109          On American Express cards, the card security code is a
     110          printed, not embossed, group of four digits on the front
     111          towards the right.
     112        </p>
     113      </div>
     114    </div>
     115
     116  </div>
     117
     118  <hr />
     119
     120  <div class="form-group">
     121    <div class="col-sm-offset-1 col-sm-2">
     122      <b>Payment Total:</b>
     123    </div>
     124    <div class="col-sm-9 text-left">
     125      <b>$&nbsp;3,012.40&nbsp;USD</b>
     126    </div>
     127  </div>
     128  <div class="form-group">
     129    <div class="col-sm-offset-2 col-sm-10">
     130      <button type="submit" class="btn btn-primary">Authorize Payment</button>
     131      <button type="submit" class="btn">Cancel</button>
     132    </div>
     133  </div>
     134
     135</form>
Note: See TracChangeset for help on using the changeset viewer.