From: Mathieu Lutfy Date: Fri, 3 May 2013 16:06:04 +0000 (-0400) Subject: CRM-12515: improving the credit card type in contribution forms. X-Git-Url: https://vcs.fsf.org/?a=commitdiff_plain;h=55a9a4f496c5986ab1e779361c6aaa1e82270656;p=civicrm-core.git 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 09ac4ef709..b6fdd3b86c 100644 --- 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 67b07bd90d..38eb1e5a55 100644 --- 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 index 0000000000..fd45ef0426 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 index 0000000000..b5d4e9ca08 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 index 0000000000..a2313881a1 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 index 0000000000..7dc08c09bc 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 index 0000000000..33fdad0f21 --- /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 = '' + 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); + 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 3936b3562b..ec1fb2f26c 100644 --- a/templates/CRM/Core/BillingBlock.tpl +++ b/templates/CRM/Core/BillingBlock.tpl @@ -81,7 +81,10 @@ {else}
{$form.credit_card_type.label} {$reqMark}
-
{$form.credit_card_type.html}
+
+ {$form.credit_card_type.html} +
+