CRM-12515: improving the credit card type in contribution forms.

diff --git a/CRM/Core/Payment/Form.php b/CRM/Core/Payment/Form.php
index 09ac4ef7098356b2ad209149aeebec0100ff0f51..b6fdd3b86c4c4fdaa849f98a04bc1108b7b3f7a4 100644 (file)
--- a/CRM/Core/Payment/Form.php
+++ b/CRM/Core/Payment/Form.php
@@ -271,6 +271,24 @@ class CRM_Core_Payment_Form {
           'state_province' => "billing_state_province_id-{$form->_bltID}",
         ));
       CRM_Core_BAO_Address::addStateCountryMap($stateCountryMap);
+
+      // Add JS to show icons for the accepted credit cards
+      // the credit card pseudo constant results only the CC label, not the key ID
+      // so we normalize the name to use it as a CSS class.
+      $creditCardTypes = array();
+      foreach (CRM_Contribute_PseudoConstant::creditCard() as $key => $name) {
+        // Replace anything not css-friendly by an underscore
+        // Non-latin names will not like this, but so many things are wrong with
+        // the credit-card type configurations already.
+        $key = str_replace(' ', '', $key);
+        $key = preg_replace('/[^a-zA-Z0-9]/', '_', $key);
+        $key = strtolower($key);
+        $creditCardTypes[$key] = $name;
+      }
+
+      CRM_Core_Resources::singleton()
+        ->addSetting(array('config' => array('creditCardTypes' => $creditCardTypes)))
+        ->addScriptFile('civicrm', 'templates/CRM/Core/BillingBlock.js');
     }
 
     if ($form->_paymentProcessor['billing_mode'] & CRM_Core_Payment::BILLING_MODE_BUTTON) {

diff --git a/css/civicrm.css b/css/civicrm.css
index 67b07bd90d249ab2ffa37b4dc4829654905450e5..38eb1e5a55496eb50c7bb1663a7e669c709ff80b 100644 (file)
--- a/css/civicrm.css
+++ b/css/civicrm.css
@@ -3959,3 +3959,38 @@ span.crm-status-icon {
   border: 1px solid #000;
   text-align: center;
 }
+
+/* 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;
+}
+
+#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;
+}
+
+#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;
+}
+
+#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;
+}
+
+#crm-container .credit_card_type-section .crm-credit_card_type-logos a {
+  display: block;
+  float: left;
+  width: 50px;
+  height: 22px;
+  text-indent: -20000px;
+}
+
+/* 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,
+#crm-container .credit_card_type-section .crm-credit_card_type-logos a:hover,
+#crm-container .credit_card_type-section .crm-credit_card_type-logos a:focus,
+#crm-container .credit_card_type-section .crm-credit_card_type-logos a:active {
+  color: #fff;
+}
+

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

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

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

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

diff --git a/templates/CRM/Core/BillingBlock.js b/templates/CRM/Core/BillingBlock.js
new file mode 100644 (file)
index 0000000..33fdad0
--- /dev/null
+++ b/templates/CRM/Core/BillingBlock.js
@@ -0,0 +1,49 @@
+// http://civicrm.org/licensing
+(function($) {
+  function civicrm_billingblock_add_cc_logos() {
+    $.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);
+        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);
+        }
+      });
+    });
+  }
+
+  civicrm_billingblock_add_cc_logos();
+
+  $('#crm-container').on('crmFormLoad', '*', function() {
+    civicrm_billingblock_add_cc_logos();
+  });
+})(cj);

diff --git a/templates/CRM/Core/BillingBlock.tpl b/templates/CRM/Core/BillingBlock.tpl
index 3936b3562b05fd6374474581a39d3938e971bd20..ec1fb2f26c71c6850893e36d68f6859e462f00b8 100644 (file)
--- a/templates/CRM/Core/BillingBlock.tpl
+++ b/templates/CRM/Core/BillingBlock.tpl
@@ -81,7 +81,10 @@
                     {else}
                         <div class="crm-section {$form.credit_card_type.name}-section">
                              <div class="label">{$form.credit_card_type.label} {$reqMark}</div>
-                             <div class="content">{$form.credit_card_type.html}</div>
+                             <div class="content">
+                                 {$form.credit_card_type.html}
+                                 <div class="crm-credit_card_type-logos"></div>
+                             </div>
                              <div class="clear"></div>
                         </div>
                         <div class="crm-section {$form.credit_card_number.name}-section">