From: Mathieu Lutfy Date: Fri, 3 May 2013 19:09:17 +0000 (-0400) Subject: CRM-12515: better credit card handling in contribution forms. X-Git-Url: https://vcs.fsf.org/?a=commitdiff_plain;h=54be855cf97e00df02c2f404a80eec5bc15c0354;p=civicrm-core.git CRM-12515: better credit card handling in contribution forms. --- diff --git a/css/civicrm.css b/css/civicrm.css index 38eb1e5a55..314ce761aa 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 fd45ef0426..0000000000 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 0000000000..a5ad9759f2 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 b5d4e9ca08..0000000000 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 0000000000..05311a8642 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 0000000000..cf43ae843f 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 a2313881a1..0000000000 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 0000000000..6254fb31cc 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 7dc08c09bc..0000000000 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 0000000000..31635ebbc9 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 33fdad0f21..c67dd9f11c 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 = '' + val + ''; $('.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);