templates/CRM/Core/BillingBlock.js

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