templates/CRM/Core/BillingBlock.js

   1 // http://civicrm.org/licensing
   2 (function($) {
   3   civicrm_billingblock_creditcard_helper();
   4
   5   $('#crm-container .credit_card_type-section').on('crmFormLoad', '*', function() {
   6     civicrm_billingblock_creditcard_helper();
   7   });
   8
   9   /**
  10    * Adds the icons of enabled credit cards
  11    * Handles clicking on a icon.
  12    * Changes the icon depending on the credit card number.
  13    * Removes spaces and dashes from credit card numbers.
  14    */
  15   function civicrm_billingblock_creditcard_helper() {
  16     $.each(CRM.config.creditCardTypes, function(key, val) {
  17       var html = '<a href="#" title="' + val + '" class="crm-credit_card_type-icon-' + key + '"><span>' + val + '</span></a>';
  18       $('.crm-credit_card_type-icons').append(html);
  19
  20       $('.crm-credit_card_type-icon-' + key).click(function() {
  21         $('#crm-container .credit_card_type-section #credit_card_type').val(val);
  22         $('#crm-container .credit_card_type-section a').css('opacity', 0.25);
  23         $('#crm-container .credit_card_type-section .crm-credit_card_type-icon-' + key).css('opacity', 1);
  24         return false;
  25       });
  26     });
  27
  28     // Hide the CC type field (redundant)
  29     $('#crm-container .credit_card_type-section select#credit_card_type').hide();
  30     $('#crm-container .credit_card_type-section .label').hide();
  31
  32     // Select according to the number entered
  33     $('#crm-container input#credit_card_number').change(function() {
  34       var ccnumber = cj(this).val();
  35
  36       // Remove spaces and dashes
  37       ccnumber = ccnumber.replace(/[- ]/g, '');
  38       cj(this).val(ccnumber);
  39
  40       // Semi-hide all images, we will un-hide the right one afterwards
  41       $('#crm-container .credit_card_type-section a').css('opacity', 0.25);
  42       $('#credit_card_type').val('');
  43
  44       civicrm_billingblock_set_card_type(ccnumber);
  45     });
  46   }
  47
  48   function civicrm_billingblock_set_card_type(ccnumber) {
  49     // Based on http://davidwalsh.name/validate-credit-cards
  50     // See also https://en.wikipedia.org/wiki/Credit_card_numbers
  51     var card_types = {
  52       'mastercard': '5[1-5][0-9]{14}',
  53       'visa': '4(?:[0-9]{12}|[0-9]{15})',
  54       'amex': '3[47][0-9]{13}',
  55       'dinersclub': '3(?:0[0-5][0-9]{11}|[68][0-9]{12})',
  56       'carteblanche': '3(?:0[0-5][0-9]{11}|[68][0-9]{12})',
  57       'discover': '6011[0-9]{12}',
  58       'jcb': '(?:3[0-9]{15}|(2131|1800)[0-9]{11})',
  59       'unionpay': '62(?:[0-9]{14}|[0-9]{17})'
  60     }
  61
  62     var card_values = {
  63       'mastercard': 'MasterCard',
  64       'visa': 'Visa',
  65       'amex': 'Amex',
  66       'dinersclub': 'Diners Club',
  67       'carteblanche': 'Carte Blanche',
  68       'discover': 'Discover',
  69       'jcb': 'JCB',
  70       'unionpay': 'UnionPay'
  71     }
  72
  73     $.each(card_types, function(key, pattern) {
  74       if (ccnumber.match('^' + pattern + '$')) {
  75         var value = card_values[key];
  76         $('#crm-container .credit_card_type-section .crm-credit_card_type-icon-' + key).css('opacity', 1);
  77         $('select#credit_card_type').val(value);
  78         return false;
  79       }
  80     });
  81   }
  82 })(cj);