CRM-12515: better credit card handling in contribution forms.

diff --git a/css/civicrm.css b/css/civicrm.css
index 38eb1e5a55496eb50c7bb1663a7e669c709ff80b..314ce761aa87c78bca921f950de2245fea250b19 100644 (file)
--- a/css/civicrm.css
+++ b/css/civicrm.css
@@ -3962,29 +3962,37 @@ span.crm-status-icon {
 
 /* Styles for credit card payment logos (FIXME: replace with sprite?) */
 #crm-container .credit_card_type-section .crm-credit_card_type-logos .crm-credit_card_type-logo-visa {
-  background: url(../i/cc-visa.gif) no-repeat 0 0 transparent;
+  background: url(../i/cc-visa.png) no-repeat 0 0 transparent;
 }
 
 #crm-container .credit_card_type-section .crm-credit_card_type-logos .crm-credit_card_type-logo-mastercard {
-  background: url(../i/cc-mastercard.gif) no-repeat 0 0 transparent;
+  background: url(../i/cc-mastercard.png) no-repeat 0 0 transparent;
 }
 
 #crm-container .credit_card_type-section .crm-credit_card_type-logos .crm-credit_card_type-logo-amex {
-  background: url(../i/cc-amex.gif) no-repeat 0 0 transparent;
+  background: url(../i/cc-amex.png) no-repeat 0 0 transparent;
 }
 
 #crm-container .credit_card_type-section .crm-credit_card_type-logos .crm-credit_card_type-logo-discover {
-  background: url(../i/cc-discover.gif) no-repeat 0 0 transparent;
+  background: url(../i/cc-discover.png) no-repeat 0 0 transparent;
+}
+
+#crm-container .credit_card_type-section .crm-credit_card_type-logos .crm-credit_card_type-logo-jcb {
+  background: url(../i/cc-jcb.png) no-repeat 0 0 transparent;
 }
 
 #crm-container .credit_card_type-section .crm-credit_card_type-logos a {
   display: block;
   float: left;
   width: 50px;
-  height: 22px;
+  height: 30px;
   text-indent: -20000px;
 }
 
+#crm-container .credit_card_type-section .crm-credit_card_type-logos a.crm-credit_card_type-logo-visa {
+  width: 90px;
+}
+
 /* Avoid weird border around the images */
 #crm-container .credit_card_type-section .crm-credit_card_type-logos a,
 #crm-container .credit_card_type-section .crm-credit_card_type-logos a:link,

diff --git a/i/cc-amex.gif b/i/cc-amex.gif
deleted file mode 100644 (file)
index fd45ef0..0000000
Binary files a/i/cc-amex.gif and /dev/null differ

diff --git a/i/cc-amex.png b/i/cc-amex.png
new file mode 100644 (file)
index 0000000..a5ad975
Binary files /dev/null and b/i/cc-amex.png differ

diff --git a/i/cc-discover.gif b/i/cc-discover.gif
deleted file mode 100644 (file)
index b5d4e9c..0000000
Binary files a/i/cc-discover.gif and /dev/null differ

diff --git a/i/cc-discover.png b/i/cc-discover.png
new file mode 100644 (file)
index 0000000..05311a8
Binary files /dev/null and b/i/cc-discover.png differ

diff --git a/i/cc-jcb.png b/i/cc-jcb.png
new file mode 100644 (file)
index 0000000..cf43ae8
Binary files /dev/null and b/i/cc-jcb.png differ

diff --git a/i/cc-mastercard.gif b/i/cc-mastercard.gif
deleted file mode 100644 (file)
index a231388..0000000
Binary files a/i/cc-mastercard.gif and /dev/null differ

diff --git a/i/cc-mastercard.png b/i/cc-mastercard.png
new file mode 100644 (file)
index 0000000..6254fb3
Binary files /dev/null and b/i/cc-mastercard.png differ

diff --git a/i/cc-visa.gif b/i/cc-visa.gif
deleted file mode 100644 (file)
index 7dc08c0..0000000
Binary files a/i/cc-visa.gif and /dev/null differ

diff --git a/i/cc-visa.png b/i/cc-visa.png
new file mode 100644 (file)
index 0000000..31635eb
Binary files /dev/null and b/i/cc-visa.png differ

diff --git a/templates/CRM/Core/BillingBlock.js b/templates/CRM/Core/BillingBlock.js
index 33fdad0f21555ba7232f2e4beb26ce45b99c644c..c67dd9f11c2051ecb3f304f7cd58685e51a0dcec 100644 (file)
--- a/templates/CRM/Core/BillingBlock.js
+++ b/templates/CRM/Core/BillingBlock.js
@@ -1,49 +1,82 @@
 // http://civicrm.org/licensing
 (function($) {
-  function civicrm_billingblock_add_cc_logos() {
+  civicrm_billingblock_creditcard_helper();
+
+  $('#crm-container').on('crmFormLoad', '*', function() {
+    civicrm_billingblock_creditcard_helper();
+  });
+
+  /**
+   * Adds the logos of enabled credit cards
+   * Handles clicking on a logo.
+   * Changes the logo depending on the credit card number.
+   * Removes spaces and dashes from credit card numbers.
+   */
+  function civicrm_billingblock_creditcard_helper() {
     $.each(CRM.config.creditCardTypes, function(key, val) {
       var html = '<a href="#" title="' + val + '" class="crm-credit_card_type-logo-' + key + '"><span>' + val + '</span></a>';
       $('.crm-credit_card_type-logos').append(html);
 
-      cj('.crm-credit_card_type-logo-' + key).click(function() {
-        cj('#crm-container .credit_card_type-section #credit_card_type').val(val);
-        cj('#crm-container .credit_card_type-section a').css('opacity', 0.4);
-        cj('#crm-container .credit_card_type-section .crm-credit_card_type-logo-' + key).css('opacity', 1);
+      $('.crm-credit_card_type-logo-' + key).click(function() {
+        $('#crm-container .credit_card_type-section #credit_card_type').val(val);
+        $('#crm-container .credit_card_type-section a').css('opacity', 0.25);
+        $('#crm-container .credit_card_type-section .crm-credit_card_type-logo-' + key).css('opacity', 1);
         return false;
       });
+    });
 
-      // Hide the CC type field (redundant)
-      $('#crm-container .credit_card_type-section select#credit_card_type').hide();
-      $('#crm-container .credit_card_type-section .label').hide();
-
-      // Select according to the number entered
-      cj('#crm-container input#credit_card_number').change(function() {
-        var ccnumtype = cj(this).val().substr(0, 4);
-
-        // Semi-hide all images, we will un-hide the right one afterwards
-        cj('#crm-container .credit_card_type-section a').css('opacity', 0.4);
-        cj('#credit_card_type').val('');
-
-        // https://en.wikipedia.org/wiki/Credit_card_numbers
-        if (ccnumtype.substr(0, 1) == '3') {
-          cj('#credit_card_type').val('Amex');
-          cj('#crm-container .credit_card_type-section .crm-credit_card_type-logo-visa').css('opacity', 1);
-        }
-        else if (ccnumtype.substr(0, 2) >= '51' && ccnumtype.substr(0, 2) <= '55') {
-          cj('#credit_card_type').val('MasterCard');
-          cj('#crm-container .credit_card_type-section .crm-credit_card_type-logo-mastercard').css('opacity', 1);
-        }
-        else if (ccnumtype.substr(0, 1) == '4') {
-          cj('#credit_card_type').val('Visa');
-          cj('#crm-container .credit_card_type-section .crm-credit_card_type-logo-visa').css('opacity', 1);
-        }
-      });
+    // Hide the CC type field (redundant)
+    $('#crm-container .credit_card_type-section select#credit_card_type').hide();
+    $('#crm-container .credit_card_type-section .label').hide();
+
+    // Select according to the number entered
+    $('#crm-container input#credit_card_number').change(function() {
+      var ccnumber = cj(this).val();
+
+      // Remove spaces and dashes
+      ccnumber = ccnumber.replace(/[- ]/g, '');
+      cj(this).val(ccnumber);
+
+      // Semi-hide all images, we will un-hide the right one afterwards
+      $('#crm-container .credit_card_type-section a').css('opacity', 0.25);
+      $('#credit_card_type').val('');
+
+      civicrm_billingblock_set_card_type(ccnumber);
     });
   }
 
-  civicrm_billingblock_add_cc_logos();
+  function civicrm_billingblock_set_card_type(ccnumber) {
+    // Based on http://davidwalsh.name/validate-credit-cards
+    // See also https://en.wikipedia.org/wiki/Credit_card_numbers
+    var card_types = {
+      'mastercard': '5[1-5][0-9]{14}',
+      'visa': '4(?:[0-9]{12}|[0-9]{15})',
+      'amex': '3[47][0-9]{13}',
+      'dinersclub': '3(?:0[0-5][0-9]{11}|[68][0-9]{12})',
+      'carteblanche': '3(?:0[0-5][0-9]{11}|[68][0-9]{12})',
+      'discover': '6011[0-9]{12}',
+      'jcb': '(?:3[0-9]{15}|(2131|1800)[0-9]{11})',
+      'unionpay': '62(?:[0-9]{14}|[0-9]{17})'
+    }
 
-  $('#crm-container').on('crmFormLoad', '*', function() {
-    civicrm_billingblock_add_cc_logos();
-  });
+    var card_values = {
+      'mastercard': 'MasterCard',
+      'visa': 'Visa',
+      'amex': 'Amex',
+      'dinersclub': 'Diners Club',
+      'carteblanche': 'Carte Blanche',
+      'discover': 'Discover',
+      'jcb': 'JCB',
+      'unionpay': 'UnionPay'
+    }
+
+    $.each(card_types, function(key, pattern) {
+      if (ccnumber.match('^' + pattern + '$')) {
+        var value = card_values[key];
+        $('#crm-container .credit_card_type-section .crm-credit_card_type-logo-' + key).css('opacity', 1);
+        $('select#credit_card_type').val(value);
+        return false;
+      }
+    });
+  }
 })(cj);