Skip to content

Commit f3d1a98

Browse files
hreinbergerhreinberger
authored
Merge pull request PAYONE-GmbH#286 from p1fb/MAG2-120-auto-cc-detection
MAG2-120: Auto CC Detection
2 parents 99a5d7a + e82279a commit f3d1a98

File tree

7 files changed

+96
-1
lines changed

7 files changed

+96
-1
lines changed

‎Helper/HostedIframe.php

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@
2626

2727
namespace Payone\Core\Helper;
2828

29+
use Payone\Core\Model\PayoneConfig;
2930
use Payone\Core\Model\Source\CreditcardTypes;
3031

3132
/**
@@ -172,6 +173,33 @@ protected function getDefaultStyles($aHostedParams)
172173
return $aDefaultStyle;
173174
}
174175

176+
/**
177+
* Returns the auto cardtype detection config.
178+
*
179+
* @return array|null The auto cardtype detection config or null if auto cardtype detection is disabled.
180+
*/
181+
protected function getAutoCardtypeDetectionConfig()
182+
{
183+
// Get enabled state of auto cardtype detection.
184+
$autoCcDetection = $this->getConfigParam('auto_cardtype_detection', PayoneConfig::METHOD_CREDITCARD, 'payment') === '1';
185+
186+
if ($autoCcDetection) {
187+
// Get a flat CC type array like (e.g. ["V", "M", "J", "U", "P"]).
188+
$availableCcTypes = array_map(function ($type) { return $type['id']; }, $this->paymentHelper->getAvailableCreditcardTypes());
189+
190+
// Return the auto cardtype detection config with enabled CC types.
191+
return [
192+
'supportedCardtypes' => $availableCcTypes,
193+
194+
// This is just a placeholder and will be set in JS code later.
195+
'callback' => false,
196+
];
197+
}
198+
199+
// Indicates disabled auto-detection setting.
200+
return null;
201+
}
202+
175203
/**
176204
* Generate the complete hosted iframe configuration
177205
*
@@ -185,6 +213,13 @@ public function getHostedFieldConfig()
185213
if (!empty($aHostedParams)) { // hosted iframe config existing?
186214
$aFieldConfig['fields'] = $this->getFieldConfig(); // generate config for all field types
187215
$aFieldConfig['defaultStyle'] = $this->getDefaultStyles($aHostedParams);
216+
217+
// Add auto cardtype detection config (if enabled in the settings).
218+
$autoCardtypeDetectionConfig = $this->getAutoCardtypeDetectionConfig();
219+
if ($autoCardtypeDetectionConfig) {
220+
$aFieldConfig['autoCardtypeDetection'] = $autoCardtypeDetectionConfig;
221+
}
222+
188223
if ($aHostedParams['Errors_active'] == "true") {
189224
$aFieldConfig['error'] = 'errorOutput'; // area to display error-messages (optional)
190225
$aFieldConfig['language'] = $aHostedParams['Errors_lang']; // has to be defined in javascript

‎etc/adminhtml/system/payone_creditcard.xml

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,12 @@
5757
<label>Sort Order</label>
5858
<config_path>payment/payone_creditcard/sort_order</config_path>
5959
</field>
60+
<field id="auto_cardtype_detection" translate="label,comment" type="select" sortOrder="105" showInDefault="1" showInWebsite="1" showInStore="1">
61+
<label>Auto Cardtype Detection</label>
62+
<comment>Enables the cardtype auto-detection and disables the manual cardtype selection for customers.</comment>
63+
<config_path>payment/payone_creditcard/auto_cardtype_detection</config_path>
64+
<source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
65+
</field>
6066
<field id="types" translate="label" type="multiselect" sortOrder="110" showInDefault="1" showInWebsite="1" showInStore="1">
6167
<label>Creditcard-Type</label>
6268
<source_model>Payone\Core\Model\Source\CreditcardTypes</source_model>

‎etc/config.xml

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@
4242
<model>Payone\Core\Model\Methods\Creditcard</model>
4343
<order_status>pending</order_status>
4444
<title>PAYONE - Creditcard</title>
45+
<auto_cardtype_detection>0</auto_cardtype_detection>
4546
<allowspecific>0</allowspecific>
4647
<group>payone</group>
4748
</payone_creditcard>

‎i18n/de_DE.csv

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -90,6 +90,8 @@
9090
"Countries","Länder"
9191
"Fee","Gebühr"
9292
"Use Global Settings","Nutze Globale-Einstellungen"
93+
"Auto Cardtype Detection","Automatische Kartentyp Erkennung"
94+
"Enables the cardtype auto-detection and disables the manual cardtype selection for customers.","Aktiviert die automatische Erkennung des Kreditkartentyps und deaktiviert die manuelle Kartentyp-Auswahl für den Kunden."
9395
"Creditcard-Type","Kartentyp"
9496
"Request BIC","BIC abfrage"
9597
"Check Card Validation Code","Prüfe Kartenprüfziffer"

‎view/frontend/web/css/creditcard.css

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,4 +32,16 @@
3232
display: inline-block;
3333
min-width: 120px;
3434
margin: 0 15px 0 15px;
35-
}
35+
}
36+
37+
.ccard .cc-icon {
38+
max-height: 20px;
39+
max-width: 40px;
40+
width: auto;
41+
height: auto;
42+
display: none;
43+
}
44+
45+
.ccard .cc-icon--show {
46+
display: inline;
47+
}

‎view/frontend/web/js/view/payment/method-renderer/creditcard-method.js

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,32 @@ define(
7676
},
7777

7878
handleIframes: function () {
79+
var _this = this;
80+
81+
// Configure auto cardtype detection (if enabled).
82+
if (window.checkoutConfig.payment.payone.fieldConfig.autoCardtypeDetection) {
83+
window.checkoutConfig.payment.payone.fieldConfig.autoCardtypeDetection.callback = function (t) {
84+
console.debug('auto-cc-detection: ' + t);
85+
86+
var allIcons = document.querySelectorAll('.ccard .cc-icon');
87+
var activeIcon = document.getElementById(_this.getCode() + '_cc_icon_' + t.toLowerCase());
88+
89+
allIcons.forEach(function (icon) {
90+
icon.classList.remove('cc-icon--show');
91+
});
92+
93+
if (activeIcon) {
94+
activeIcon.classList.add('cc-icon--show');
95+
}
96+
97+
var ccTypeInput = document.getElementById(_this.getCode() + '_credit_card_type');
98+
99+
if (ccTypeInput) {
100+
ccTypeInput.value = t.toUpperCase();
101+
}
102+
};
103+
}
104+
79105
var fieldconfig = window.checkoutConfig.payment.payone.fieldConfig;
80106
if (typeof fieldconfig.language != 'undefined') {
81107
if (fieldconfig.language == 'de') {
@@ -107,6 +133,9 @@ define(
107133
}
108134
return window.checkoutConfig.payment.payone.saveCCDataEnabled;
109135
},
136+
isAutoCardtypeDetectionEnabled: function () {
137+
return window.checkoutConfig.payment.payone.fieldConfig.hasOwnProperty('autoCardtypeDetection');
138+
},
110139
getSavedPaymentData: function () {
111140
return window.checkoutConfig.payment.payone.savedPaymentData;
112141
},

‎view/frontend/web/template/payment/creditcard.html

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,10 @@
7171
</div>
7272
<!--/ko-->
7373
<div data-bind="attr: {id: getCode() + '_new_data_container'}" class="fieldset ccard">
74+
<!-- ko if: isAutoCardtypeDetectionEnabled() -->
75+
<input name="payment[cc_type]" type="hidden" value="" data-bind="attr: {id: getCode() + '_credit_card_type', value: getCreditcardTypes()[0].id, 'data-container': getCode() + '_credit_card_type'}" />
76+
<!--/ko-->
77+
<!-- ko if: !isAutoCardtypeDetectionEnabled() -->
7478
<div class="field">
7579
<label data-bind="attr: {for: getCode() + '_credit_card_type'}" class="label">
7680
<span><!-- ko i18n: 'Credit Card Type'--><!-- /ko --></span>
@@ -87,6 +91,7 @@
8791
</select>
8892
</div>
8993
</div>
94+
<!--/ko-->
9095

9196
<div class="field number required">
9297
<label data-bind="attr: {for: getCode() + '_firstname'}" class="label">
@@ -122,6 +127,11 @@
122127
<div class="field number required">
123128
<label data-bind="attr: {for: getCode() + '_cc_number'}" class="label">
124129
<span><!-- ko i18n: 'Credit Card Number'--><!-- /ko --></span>
130+
<!-- ko if: isAutoCardtypeDetectionEnabled() -->
131+
<!-- ko foreach: getCreditcardTypes() -->
132+
<img class="cc-icon" data-bind="attr: {id: $parent.getCode() + '_cc_icon_' + id.toLowerCase(), src: 'https://cdn.pay1.de/cc/' + id.toLowerCase() + '/s/default.png'}"/>
133+
<!--/ko-->
134+
<!--/ko-->
125135
</label>
126136
<div class="control">
127137
<span id="cardpan" class="inputIframe"></span>

0 commit comments

Comments
 (0)