Interface
1. Default bank cards list
«Stores » → «Configuration » → «Sales » → «Payment Methods » → «BraintreeTwo » → «Advanced Braintree Settings » → «Credit Card Types »:
The list of shown and available to a particular customer bank card types is calculated as a intersection of the default bank cards list and the country specific bank card list:
/**
* Filter list of available card types
* @param {Object} availableTypes
* @param {Object} countrySpecificCardTypes
* @returns {Object}
*/
collectTypes: function (availableTypes, countrySpecificCardTypes) {
var key,
filteredTypes = [];
for (key in availableTypes) {
if (_.indexOf(countrySpecificCardTypes, availableTypes[key]) !== -1) {
filteredTypes.push(availableTypes[key]);
}
}
return filteredTypes;
},
The collectTypes() method from the Magento_BraintreeTwo's validator.js can be simplified from 8 lines to 1
Implementation
public function toOptionArray()
{
$allowed = $this->getAllowedTypes();
$options = [];
foreach ($this->getCcTypeLabelMap() as $code => $name) {
if (in_array($code, $allowed)) {
$options[] = ['value' => $code, 'label' => $name];
}
}
return $options;
}
How to get the system-wide list of bank card types?
/**
* Retrieve available credit card types
*
* @return array
*/
public function getAvailableCardTypes()
{
$ccTypes = $this->getValue(self::KEY_CC_TYPES);
return !empty($ccTypes) ? explode(',', $ccTypes) : [];
}
How does a payment method pass its configuration to the client side (JavaScript)?
getCcAvailableTypes: function () {
var availableTypes = validator.getAvailableCardTypes(),
billingAddress = quote.billingAddress(),
billingCountryId;
this.lastBillingAddress = quote.shippingAddress();
if (!billingAddress) {
billingAddress = this.lastBillingAddress;
}
billingCountryId = billingAddress.countryId;
if (billingCountryId && validator.getCountrySpecificCardTypes(billingCountryId)) {
return validator.collectTypes(
availableTypes, validator.getCountrySpecificCardTypes(billingCountryId)
);
}
return availableTypes;
<ul class="credit-card-types">
<!-- ko foreach: {data: getCcAvailableTypes(), as: 'item'} -->
<li class="item" data-bind="css: {
_active: $parent.selectedCardType() == item,
_inactive: $parent.selectedCardType() != null && $parent.selectedCardType() != item
} ">
<!--ko if: $parent.getIcons(item) -->
<img data-bind="attr: {
'src': $parent.getIcons(item).url,
'width': $parent.getIcons(item).width,
'height': $parent.getIcons(item).height
}">
<!--/ko-->
</li>
<!--/ko-->
</ul>
