By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
426,248 Members | 1,961 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 426,248 IT Pros & Developers. It's quick & easy.

How to create a credit/debit card payment form with validation?

P: 1
Hello, I am trying to create a Credit/debit card payment form with validation. I want my form to work something like when I enter the visa card details. it should detect visa and show VISA logo only and hide other companies logo. Kindly help.I tried this code snippet -

What I have tried:

I tried the code below javascript

Expand|Select|Wrap|Line Numbers
  1. $(function($) {
  2.   $('[data-numeric]').payment('restrictNumeric');
  3.   $('.cc-number').payment('formatCardNumber');
  4.   $('.cc-exp').payment('formatCardExpiry');
  5.   $('.cc-cvc').payment('formatCardCVC');
  6.   $.fn.toggleInputError = function(erred) {
  7.     this.parent('.form-group').toggleClass('has-error', erred);
  8.     return this;
  9.   };
  10.   $('form').submit(function(e) {
  11.     e.preventDefault();
  12.     var cardType = $.payment.cardType($('.cc-number').val());
  13.     $('.cc-number').toggleInputError(!$.payment.validateCardNumber($('.cc-number').val()));
  14.     $('.cc-exp').toggleInputError(!$.payment.validateCardExpiry($('.cc-exp').payment('cardExpiryVal')));
  15.     $('.cc-cvc').toggleInputError(!$.payment.validateCardCVC($('.cc-cvc').val(), cardType));
  16.     $('.cc-brand').text(cardType);
  17.     $('.validation').removeClass('text-danger text-success');
  18.     $('.validation').addClass($('.has-error').length ? 'text-danger' : 'text-success');
  19.   });
  20. });

HTML

Expand|Select|Wrap|Line Numbers
  1. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.payment/3.0.0/jquery.payment.min.js"></script>
  2. <div class="padding">
  3.     <div class="row">
  4.         <div class="container-fluid d-flex justify-content-center">
  5.             <div class="col-sm-8 col-md-6">
  6.                 <div class="card">
  7.                     <div class="card-header">
  8.                         <div class="row">
  9.                             <div class="col-md-6"> <span>CREDIT/DEBIT CARD PAYMENT</span> </div>
  10.                             <div class="col-md-6 text-right" style="margin-top: -5px;"> <img src="https://img.icons8.com/color/36/000000/visa.png"> <img src="https://img.icons8.com/color/36/000000/mastercard.png"> <img src="https://img.icons8.com/color/36/000000/amex.png"> </div>
  11.                         </div>
  12.                     </div>
  13.                     <div class="card-body" style="height: 350px">
  14.                         <div class="form-group"> <label for="cc-number" class="control-label">CARD NUMBER</label> <input id="cc-number" type="tel" class="input-lg form-control cc-number" autocomplete="cc-number" placeholder="   " required> </div>
  15.                         <div class="row">
  16.                             <div class="col-md-6">
  17.                                 <div class="form-group"> <label for="cc-exp" class="control-label">CARD EXPIRY</label> <input id="cc-exp" type="tel" class="input-lg form-control cc-exp" autocomplete="cc-exp" placeholder=" / " required> </div>
  18.                             </div>
  19.                             <div class="col-md-6">
  20.                                 <div class="form-group"> <label for="cc-cvc" class="control-label">CARD CVC</label> <input id="cc-cvc" type="tel" class="input-lg form-control cc-cvc" autocomplete="off" placeholder="" required> </div>
  21.                             </div>
  22.                         </div>
  23.                         <div class="form-group"> <label for="numeric" class="control-label">CARD HOLDER NAME</label> <input type="text" class="input-lg form-control"> </div>
  24.                         <div class="form-group"> <input value="MAKE PAYMENT" type="button" class="btn btn-success btn-lg form-control" style="font-size: .8rem;"> </div>
  25.                     </div>
  26.                 </div>
  27.             </div>
  28.         </div>
  29.     </div>
  30. </div>
3 Weeks Ago #1
Share this Question
Share on Google+
2 Replies


dev7060
P: 77
Visa starts with the number 4 and MasterCard starts with 5. You need to extract the first value of the input field and store it in a variable. Then use condition checks and apply the CSS display: none; property to the rest of the elements that you want to hide.
3 Weeks Ago #2

gits
Expert Mod 5K+
P: 5,283
those 'numbers' that you can use to identify paymentcards are called BIN (Bank Identification Number) and a list of them can be found here:

https://www.bincodes.com/bin-list/

since its not always only 1 specific number per card-type we usually speak of the BIN-Range.
3 Weeks Ago #3

Post your reply

Sign in to post your reply or Sign up for a free account.