diff --git a/css/civicrm.css b/css/civicrm.css
index 38eb1e5a55496eb50c7bb1663a7e669c709ff80b..314ce761aa87c78bca921f950de2245fea250b19 100644
--- 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
index fd45ef04261ca4d4dfe75d30a407607e1f2a0112..0000000000000000000000000000000000000000
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
index 0000000000000000000000000000000000000000..a5ad9759f20cd15522e7c8ad506fb4de9bb29e0f
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
index b5d4e9ca084668927259894295968c77720f39c2..0000000000000000000000000000000000000000
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
index 0000000000000000000000000000000000000000..05311a864293c418c54734edad8bf37fe7bd893d
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
index 0000000000000000000000000000000000000000..cf43ae843fd23c7d3f85607096f35ed8b0af2435
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
index a2313881a1b8cbe5989a96f71beee4698ac4fd12..0000000000000000000000000000000000000000
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
index 0000000000000000000000000000000000000000..6254fb31cccdf5d691bc3c51c64e92a0bcc46b62
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
index 7dc08c09bc7992d0867257551b53474413c29e61..0000000000000000000000000000000000000000
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
index 0000000000000000000000000000000000000000..31635ebbc97fde4bc3b635178dc3ab873c86dac9
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
--- 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);