فرم بانکی

با استفاده از این پلاگین می توانید در سایت خود یک فرم بانکی داشته باشید.

آموزش استفاده

۱- فراخوانی کتابخانه پلاگین و خصوصیت ها

  <script src="jquery.js"></script>
  <script type="text/javascript" src="creditly.js"></script>
  <script type="text/javascript">
    $(function() {
      var creditly = Creditly.initialize(
          '.creditly-wrapper .expiration-month-and-year',
          '.creditly-wrapper .credit-card-number',
          '.creditly-wrapper .security-code',
          '.creditly-wrapper .card-type');

      $(".creditly-card-form .submit").click(function(e) {
        e.preventDefault();
        var output = creditly.validate();
        if (output) {
          console.log(output);
        }
      });
    });
  </script>
    <link rel="stylesheet" href="creditly.css" />

2-  کد html جهت استفاده پلاگین

 <div class="main">
  <form class="creditly-card-form">
    <section class="creditly-wrapper">
      <div class="credit-card-wrapper">
        <div class="first-row form-group">
          <div class="col-sm-8 controls">
            <label class="control-label">شماره کارت</label>
            <input class="number credit-card-number form-control" type="text" name="number" pattern="\d*" inputmode="numeric" autocomplete="cc-number" autocompletetype="cc-number" x-autocompletetype="cc-number" placeholder="&#149;&#149;&#149;&#149; &#149;&#149;&#149;&#149; &#149;&#149;&#149;&#149; &#149;&#149;&#149;&#149;" />
          </div>
          <div class="col-sm-4 controls">
            <label class="control-label">CVV2</label>
              <input class="security-code form-control" inputmode="numeric" pattern="\d*" type="text" name="security-code" placeholder="&#149;&#149;&#149;&#149;" />
          </div>
        </div>
        <div class="second-row form-group">
          <div class="col-sm-8 controls">
            <label class="control-label">نام روی کارت</label>
            <input class="billing-address-name form-control" type="text" name="name" placeholder="محمدرضا طاهری" />
          </div>
          <div class="col-sm-4 controls">
            <label class="control-label">تاریخ انقضاء</label>
              <input class="expiration-month-and-year form-control" type="text" name="expiration-month-and-year" placeholder="سال / ماه" />
          </div>
        </div>
          <h2 id="ij"><a href="http://ijquery.ir">دنیای جی کوئری</a></h2>
          <button class="submit"><span>ارسال</span></button>
      </div>
    </section>
  </form>
 </div>