Magento 2 – Checkout Payment Method Render List

checkoutjavascriptmagento2payment-methods

How do I / how does Magento trigger the payment method's list renderer to display the available payment methods? I'm updating my checkout and would like to display the payment methods after some conditions have been met.

Best Answer

If you look in default Magento functionality for "Apply Discount" on checkout/payment page, you will get it. Navigate to Magento/module-sales-rule/view/frontend/web/js/action/set-coupon-code.js

/**
 * Copyright © 2016 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */
/**
 * Customer store credit(balance) application
 */
/*global define,alert*/
define(
    [
        'ko',
        'jquery',
        'Magento_Checkout/js/model/quote',
        'Magento_Checkout/js/model/resource-url-manager',
        'Magento_Checkout/js/model/error-processor',
        'Magento_SalesRule/js/model/payment/discount-messages',
        'mage/storage',
        'mage/translate',
        'Magento_Checkout/js/action/get-payment-information',
        'Magento_Checkout/js/model/totals'
    ],
    function (
        ko,
        $,
        quote,
        urlManager,
        errorProcessor,
        messageContainer,
        storage,
        $t,
        getPaymentInformationAction,
        totals
    ) {
        'use strict';
        return function (couponCode, isApplied, isLoading) {
            var quoteId = quote.getQuoteId();
            var url = urlManager.getApplyCouponUrl(couponCode, quoteId);
            var message = $t('Your coupon was successfully applied.');
            return storage.put(
                url,
                {},
                false
            ).done(
                function (response) {
                    if (response) {
                        var deferred = $.Deferred();
                        isLoading(false);
                        isApplied(true);
                        totals.isLoading(true);
                        getPaymentInformationAction(deferred);
                        $.when(deferred).done(function () {
                            totals.isLoading(false);
                        });
                        messageContainer.addSuccessMessage({'message': message});
                    }
                }
            ).fail(
                function (response) {
                    isLoading(false);
                    totals.isLoading(false);
                    errorProcessor.process(response, messageContainer);
                }
            );
        };
    }
);

Here in this js file you can see 

if (response) {
                            var deferred = $.Deferred();
                            isLoading(false);
                            isApplied(true);
                            totals.isLoading(true);
                            getPaymentInformationAction(deferred);
                            $.when(deferred).done(function () {
                                totals.isLoading(false);
                            });
                            messageContainer.addSuccessMessage({'message': message});
                        }

in this code fragment, you can see getPaymentInformationAction(deferred);

is the one which will reload/refresh payment method as per your requirement . Try this in your custom js with condition. cheers !!

Related Topic