<div class="billing-page" ng-controller="paymentsCtrl as vm">
  <div ba-panel
         ba-panel-title="New Payment">
             <div class="pull-right back">
      <a ui-sref="main.checkpoints.list" class="newlink"> {{'checkpointnewpage.back' | translate}} <i class="fa fa-chevron-right" aria-hidden="true"></i></a>
      </div>
    <form name="form" ng-submit="vm.create()" role="form">
      <div class="checkpoint-inner">
        <div class="col-xlg-12 col-lg-12 col-md-12 col-sm-12 col-xs-12 pull-left checkpoint-panel">
          <div class="checkpoint-body">
            <div class="panel-content">
              <div class="header">Checkpoint Information  <p>{{ 'HEADLINE' | translate }}</p></div>
              <div class="row">
                <div class="col-xlg-12 col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <card ng-submit="submit()" options="{}" disable="false">
            <input card-number placeholder="Card number" type="text">
            <input card-name placeholder="Full name" type="text"><br>
            <input card-expiry placeholder="MM/YY" type="text">
            <input card-cvc placeholder="CVC" type="text">
            <button type="submit">Submit</button>
          <card/>
                </div>
           
              </div>
            

            </div>
          </div>
        </div>

      
       
        <div class="row col-sm-12">
          <div class="form-actions pull-right">
            <button type="submit" ng-disabled="form.$invalid || vm.dataLoading" class="btn btn-primary" translate>checkpointnewpage.checkpointbutton</button>
            <img ng-if="vm.dataLoading" src="data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==" /> </div>
        </div>
      </div>
    </form>
  </div>
</div>
