Commit 54be855c authored by bgm's avatar bgm

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

parent 55a9a4f4
......@@ -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,
......
// 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);
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment