I am working on checkout page, I have pass some array values to checkout config provider.

How to get those values in knockout JS and display by knockout html.

Want to display all applied codes in checkout payment step.

I have passed values to config provider by below code

public function getConfig()
        return $this->getAppliedGiftCards();

    public function getAppliedGiftCards()
        $quoteId = $this->checkoutSession->getQuote()->getId();
        $giftcardCodes = $this->quoteFactory->getGiftCardCollection($quoteId);
        $config = [];
        foreach ($giftcardCodes as $giftcardCode){
            $config['payment']['applied_giftcard'][$giftcardCode->getCode()] = $giftcardCode->getCode();
        return $config;

Get values in Js by below code

var configValues = window.checkoutConfig.payment;
var applied_giftcard = ko.observable(configValues.applied_giftcard);

How to render passed config array value to knockout template.

  • on which section of payment method you want to show your data? – Amit Bera Aug 17 '18 at 14:27
  • I want to display just before discount code apply block – Suresh Chikani Aug 17 '18 at 14:32

You want to add window.checkoutConfig then you need to create a plugin on Magento\Checkout\Model\DefaultConfigProvider.

Create after method on getConfig() afterGetConfig and add pass you array as json value.

Create di.xml at app/code/{Vendor}/{Module}/etc.

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
    <type name="Magento\Checkout\Model\DefaultConfigProvider">
        <plugin name="add_new_variable_checkout_config" type="{VendorName}{ModuleName}\Plugin\DefaultConfigProviderPlugin" sortOrder="1" />

Plugin class

namespace {VendorName}\{ModuleName}\Plugin;

class DefaultConfigProviderPlugin

    public function afterGetConfig(
        \Magento\Checkout\Model\DefaultConfigProvider $subject,
    ) {
        $output['my_custom_data'] = json_encode(array('name'=> 'john', 'age' => '10'));
    return $output;

Now, you want to render this data to payment section then ,Please copy


to your theme level


OR Rewrite module-checkout/view/frontend/web/js/view/payment.js

and new function getmyCustomdata name for getting value from the config value

    getmyCustomdata: function () {
        return window.checkoutConfig.my_custom_data;

Now, you have to print getmyCustomdata value to knockjs HTML template vendor/magento/module-checkout/view/frontend/web/template/payment.html

So, copy this file to to your theme level.


At this payment.html bind data using <span data-bind="text: getmyCustomdata()"></span>

  • check my updated question. – Suresh Chikani Aug 17 '18 at 13:52
  • I have follow same but not working. – Suresh Chikani Aug 20 '18 at 5:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.