On the checkout page of the website the complete list of the credit card is displayed be default. Instead, we need to show only the selected credit card and hide all the unselected cards in the payment method section.
In case customers need to update their selected card, provide a dropdown section, which shows the complete list of credit cards linked to their account.
Upon making a new selection, only the newly chosen card will be displayed.
If no card is selected for a customer, then the entire list of credit cards will be shown in the payment method section.
JavaScript file
_.extend(OrderWizardModulePaymentMethodCreditcard.prototype, {
template: jj_paymentmethod_creditcard_module_tpl,
childViews: _.extend(OrderWizardModulePaymentMethodCreditcard.prototype.childViews, {
'Selected.CreditCard': function () {
var credicardList = this.getPaymentMethodsToShow()
if (this.paymentMethodSelected) {
this.setCreditCard({
id: this.paymentMethodSelected
});
var selectedCreditCard = credicardList.find(item => item.get('internalid') === this.paymentMethodSelected);
credicardList = selectedCreditCard;
} else {
credicardList = this.getPaymentMethodsToShow();
}
return new BackboneCollectionView({
collection: credicardList,
childView: this.paymentmethodview,
childViewOptions: {
showActions: true,
showDefaults: this.showDefaults,
showSelect: true,
hideSelector: false,
selectMessage: this.selectMessage,
showSecurityCodeForm:
this.requireccsecuritycode && paymentinstrument_creditcard_edit_tpl,
selectedCreditCardId:
this.paymentMethodSelected || this.getDefaultCreditCardId()
},
viewsPerRow:
this.itemsPerRow ||
(Utils.isDesktopDevice() ? 3 : Utils.isTabletDevice() ? 2 : 1),
cellTemplate: backbone_collection_view_cell_tpl,
rowTemplate: backbone_collection_view_row_tpl
});
},
}),
getContext: _.wrap(OrderWizardModulePaymentMethodCreditcard.prototype.getContext, function (fn) {
try {
var original = fn.apply(this, _.toArray(arguments).slice(1));
original.haveSelectedCard = !!this.paymentMethodSelected;
return original;
} catch (e) {
console.log('error@OrderWizardModuleAddress', e);
}
}),
})
Template file
<div class="order-wizard-paymentmethod-creditcard-module">
{{#if showTitle}}
<h3 class="order-wizard-paymentmethod-creditcard-module-title">{{title}}</h3>
{{/if}}
{{#if showList}}
{{#if haveSelectedCard}}
<div id="creditcard-module-list-placeholder" class="order-wizard-paymentmethod-creditcard-module-list-placeholder">
<div data-view="Selected.CreditCard"></div>
</div>
<div class="order-wizard-address-expander-head" id="credit-card-list-selection">
<a class="order-wizard-address-expander-head-toggle collapsed" data-toggle="collapse"
data-target="#credit-card-list" aria-expanded="false" aria-controls="credit-card-list">
{{translate 'Change Card'}}
<i class="order-wizard-paymentmethod-giftcertificates-module-expander-icon"></i>
</a>
</div>
<div class="credit-card-list-module-expander-container">
<div id="credit-card-list" class="credit-card-list-section collapse" data-action="credit-card-list">
<div id="credit-card-list-placeholder"
class="order-wizard-paymentmethod-creditcard-module-list-placeholder">
<div data-view="CreditCard.List"></div>
</div>
</div>
</div>
{{else}}
<div id="creditcard-module-list-placeholder" class="order-wizard-paymentmethod-creditcard-module-list-placeholder">
<div data-view="CreditCard.List"></div>
</div>
{{/if}}
{{/if}}
{{#if showForm}}
<div class="order-wizard-paymentmethod-creditcard-module-form">
<form method="POST" data-view="CreditCard.Form"></form>
</div>
{{/if}}
<p class="order-wizard-paymentmethod-creditcard-module-learn-more"> <i
class="order-wizard-paymentmethod-creditcard-module-learn-more-icon"></i> {{ translate 'Learn more about <a
class="order-wizard-paymentmethod-creditcard-module-learn-more-link" data-action="show-safe-secure-info">
safe and secure </a> shopping' }} </p>
</div>