Commit 55a9a4f4 authored by bgm's avatar bgm

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

parent 26832e79
......@@ -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) {
......
......@@ -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;
}
i/cc-amex.gif

645 Bytes

i/cc-visa.gif

365 Bytes

// 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);
......@@ -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">
......
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