source: main/waeup.ikoba/trunk/src/waeup/ikoba/payments/templates/demo_cc_step1.pt @ 12765

<form class="form-horizontal">
  <div class="form-group"
       tal:attributes="class view/validations/first_name">
    <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" name="first_name"
             tal:attributes="value view/first_name" />
    </div>
  </div>

  <div tal:attributes="class view/validations/last_name" 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" name="last_name"
             tal:attributes="value view/last_name" />
    </div>
  </div>

  <div class="form-group"
       tal:attributes="class view/validations/cc_number">
    <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"
             name="cc_number" tal:attributes="value view/cc_number" />
    </div>
  </div>

  <div class="form-group"
       tal:attributes="class view/validations/exp_date">
    <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"
              name="exp_month" tal:content="structure view/months">
        <option>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" name="exp_year"
              tal:content="structure view/years">
        <option>2014</option>
        <option selected="selected">2015</option>
        <option>2016</option>
        <option>2017</option>
        <option>2018</option>
        <option>2019</option>
      </select>
    </div>
  </div>

  <div class="form-group"
       tal:attributes="class view/validations/csc">
    <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="password" class="form-control" maxlength="4" id="sec_code"
             name="csc" tal:attributes="value view/csc" />
    </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 tal:content="view/amount">$&nbsp;3,012.40&nbsp;USD</b>
    </div>
  </div>

  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div tal:condition="view/availableActions">
        <input tal:repeat="action view/actions"
               tal:replace="structure action/render"
               />
      </div>
    </div>
  </div>

</form>