Introduction | TrueUI

Molecules | Forms

Payment Form

Example

Choose Your Payment Type

Card Credit or Debit

Bank Transfer (ACH)

U.S Only - Takes 3-5 Business Days

Card Information

Secure Payment Form

Card Information
CVV

I am over 18 and agree to TrueAccord Terms and Conditions

SSL

HTML

<div class="shadow-1 pa4 w-100 w-80-ns">
 <form>
   <h2 class="f4 fw6 mt0">Choose Your Payment Type</h2>
   <div class="cf">
     <div class="dib ba b--blue-medium pa3">
       <div class="dt">
         <label class="dtc pr2">
           <input type="radio">
         </label>
         <div class="dtc f3"> 
           <p class="mb2">Card <span class="f6 charcoal-medium">Credit or Debit</span></p>
           <p class="ma0"><img src="../../img/multi-step-payment-methods.svg"></p>
         </div>
       </div>
     </div>
     <div class="dib ba b--charcoal-medium pa3">
       <div class="dt">
         <label class="dtc pr2">
           <input type="radio">
         </label>
         <div class="dtc f3"> 
           <p class="mb1">Bank Transfer (ACH)</p>
           <p class="mt1 f6 charcoal-medium">U.S Only - Takes 3-5 Business Days</p>
         </div>
       </div>
     </div>
   </div>
   <div class="cf">
     <div class="dib pr4">
       <h2 class="f4 fw6">Card Information</h2>
     </div>
     <div class="dib">
       <p class="f7">Secure Payment Form</p>
     </div>
     <fieldset class="bn pa0">
       <legend>Card Information</legend>
       <div class="cf pv2">
         <div class="fl w-100 w-50-ns pr0 pr3-ns">
           <label class="f6 db w-100 pv2">First Name</label>
           <input type="text" id="FirstName" class="w-100 pa2">
         </div>
         <div class="fl w-100 w-50-ns">
           <label class="f6 db w-100 pv2">Last Name</label>
           <input type="text" id="FirstName" class="w-100 pa2">
         </div>
       </div>
       <div class="cf pv2">
         <div class="fl w-100 w-50-ns pr0 pr3-ns">
           <label class="f6 db w-100 pv2">Email Address</label>
           <input type="text" id="EmailAddress" class="w-100 pa2">
         </div>
         <div class="fl w-100 w-50-ns">
           <label class="f6 db w-100 pv2">Phone Number</label>
           <input type="text" id="PhoneNumber" class="w-100 pa2">
         </div>
       </div>
       <div class="cf pv2">
         <div class="fl w-100 w-75-ns pr0 pr3-ns">
           <label class="f6 dt w-100 pv2"><span class="dtc w-60">Credit Card Number (no dashes)</span><span class="dtc w-33 red f7 tr">AMEX not accepted</span></label>
           <input type="text" id="CreditCardNumber" class="w-100 pa2">
         </div>
         <div class="fl w-100 w-25-ns">
           <label class="f6 db w-100 pv2">Billing Zip Code</label>
           <input type="text" id="BillingZip" class="w-100 pa2">
         </div>
       </div>
       <div class="cf pv2">
         <div class="fl w-100 w-50-ns pr0 pr3-ns">
           <label class="f6 db w-100 pv2">Security Code (CVV) (3 on back) </label>
           <input type="text" id="CVV" class="w-100 pa2"><img src="../../img/cvv.gif" alt="CVV" class="w-50 mt2">
         </div>
         <div class="fl w-100 w-25-ns pr0 pr3-ns">
           <label class="f6 db w-100 pv2">Exp Month</label>
           <select class="bg-charcoal-light ba b--charcoal-medium charcoal f6 w-100">
             <option> </option>
             <option>Option Two</option>
             <option>Option Three   </option>
           </select>
         </div>
         <div class="fl w-100 w-25-ns">
           <label class="f6 db w-100 pv2">Exp Year</label>
           <select class="bg-charcoal-light ba b--charcoal-medium charcoal f6 w-100">
             <option> </option>
             <option>Option Two</option>
             <option>Option Three  </option>
           </select>
         </div>
       </div>
       <p class="f6">
         <input name="checkbox" type="checkbox" class="mr2">I am over 18 and agree to TrueAccord <a href="#">Terms and Conditions </a>
       </p>
       <div class="dt w-100">
         <div class="dtc w-100 w-50-ns"><img src="../../img/ssl-seal.png" alt="SSL"></div>
         <div class="dtc w-100 w-50-ns tr v-mid">
           <input type="submit" value="Make a Payment" class="btn btn--orange">
         </div>
       </div>
     </fieldset>
   </div>
 </form>
</div>