How to extend ParadoxLabs\Authnetcim\Model\ConfigProvider to add addtional config data to access in authencim.js and related .html template?

Question

I see following code in authnetcim/view/frontend/web/js/view/payment/method-renderer/authnetcim.js. I understand that it's using cc.html template to display the content. How to know which Block or Helper classes are called to get data for use inside this .js and in cc.html template? I need to check customer session data and display a message around 'Place Order' button, so trying to understand which back-end code needs to be modified, so that I can get that data into HTML template file.

define(
[
    'ko',
    'ParadoxLabs_TokenBase/js/view/payment/method-renderer/cc'
],
function (ko, Component) {
    'use strict';
    var config=window.checkoutConfig.payment.authnetcim;
    return Component.extend({
        defaults: {
            template: 'ParadoxLabs_Authnetcim/payment/cc'

Wrote custom Model ConfigProvider.php that extends ParadoxLabs\Authnetcim\Model\ConfigProvider, then added below method

public function getCustomerName() { if ($this->customerSession->isLoggedIn()) { return $this->customerSession->getCustomer()->getFirstname(); } return false; }

Added below code to getConfig() method:

public function getConfig()
{
    if (!$this->methods[static::CODE]->isAvailable()) {
        return [];
    }

    $config             = parent::getConfig();
    $selected           = null;
    $storedCardOptions  = [];


    $config = array_merge_recursive($config, [
        'payment' => [
            static::CODE => [
                'useVault'                => true,
                'canSaveCard'             => $this->canSaveCard(),
                <few other attributes here>
                'canStoreBin'             => $this->getCanStoreBin(),
        'customerName' => $this->getCustomerName(), -- new custom attribute
            ],
        ],
    ]);
$config['customerName'] = $this->getCustomerName();
    return $config;
}

`$config['customerName'] = $this->getCustomerName();

Overwrote vendor/paradoxlabs/authnetcim/view/frontend/web/js/view/payment/method-renderer/authentcim.js to add new function as below, using requirejs-config.js in my custom module:

getCustomerName: function () { return config.customerName; }

Code in cc.html copied from vendor/paradoxlabs/authnetcim/view/frontend/web/template/paymentcc.html template to access customerName data, inside the custom module:

<!-- ko if: (getCustomerName())-->

I do see it working if I hard code a name inside the authentcim.js getCustomerName() function, so I am guessing it's an issue with getting model data into config object that is of type window.checkoutConfig.payment.authnetcim.

Answer 1

This is thirdparty module. I assume they follow magento standard.

Open etc/frontend/di.xml

Find out following tag

<type name="Magento\Checkout\Model\CompositeConfigProvider">

Inside configProviders have one class which actually pass data to js.

You can check magento default module

and here

[Update]

According to getConfig() method, you should try to pass value following way:

$config['payment'][static::CODE]['customerName'] = $this->getCustomerName();

OR

$config = array_merge_recursive($config, [
'payment' => [
    static::CODE => [
            'useVault'                => true,
            'canSaveCard'             => $this->canSaveCard(),
            'canStoreBin'             => $this->getCanStoreBin(),
            'customerName'            => $this->getCustomerName(),
        ],
    ],
]);

Now this value is accessible by the following code:

var config=window.checkoutConfig.payment.authnetcim;

config.customerName

You can check all data inside console like:

console.log(window.checkoutConfig.payment.authnetcim);