so I'm trying to add some new configurations to my checkout page, and I added 3 new settings to the admin page, but now I would like to load them to my JS file, but I don't know what to do to achieve this.

The Settings in Admin:

enter image description here

The Module Structure (The arrow is the js file to which I would like to load the settings)

enter image description here

The js file code:

], function(ko, $, urlFormatter, Component, customer, quote, urlBuilder, errorProcessor, cartCache, formData) {
    'use strict';
    var partial_second_order = window.checkoutConfig.partial_payment_second_order;

    return Component.extend({
        giftFields: ko.observable(null),
        formData: formData.giftFieldsData,
        hideGiftBar: false,
        hideGiftWrap: false,
        hideGiftTicket: false,

         * Initialize component
         * @returns {exports}
        initialize: function () {
            var self = this;
            formData = this.source.get('giftCheckoutForm');
            var formDataCached = cartCache.get('gift-form');
            if (formDataCached) {
                formData = this.source.set('giftCheckoutForm', formDataCached);




            return this;

         * Trigger save method if form is change
        onFormChange: function () {

         * Form submit handler
        saveGiftFields: function() {
            this.source.set('params.invalid', false);

            if (!this.source.get('params.invalid')) {
                var formData = this.source.get('giftCheckoutForm');
                var quoteId = quote.getQuoteId();
                var isCustomer = customer.isLoggedIn();
                var url;

                if (isCustomer) {
                    url = urlBuilder.createUrl('/carts/mine/set-order-gift-fields', {});
                } else {
                    url = urlBuilder.createUrl('/guest-carts/:cartId/set-order-gift-field', {cartId: quoteId});

                var payload = {
                    cartId: quoteId,
                    giftFields: formData
                var result = true;
                    url: urlFormatter.build(url),
                    data: JSON.stringify(payload),
                    global: false,
                    contentType: 'application/json',
                    type: 'PUT',
                    async: true
                    function (response) {
                        cartCache.set('gift-form', formData);
                        result = true;
                    function (response) {
                        result = false;

                return result;

         * Disables gift option for partial payment second orders
        disableGift: function () {
            if (partial_second_order > 0) {
                this.hideGiftBar = true;

System.xml file:

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Config:etc/system_file.xsd">
        <section id="gifts" translate="label" sortOrder="0" showInDefault="1" showInWebsite="1" showInStore="1">
            <group id="checkout_gifts" translate="label" type="select" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
                <label>Checkout Gifts</label>
                <field id="gift_wrap" type="text" translate="label" sortOrder="1" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Gift Wrap</label>
                <field id="gift_ticket" type="text" translate="select" sortOrder="1" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Gift Ticket</label>
                <field id="gift_message" type="text" translate="select" sortOrder="1" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Gift Message</label>

In the end what I want is the hideGiftWrap, hideGiftTicket to be the setting values but any help loading them would be enough since that's the part I can't figure out.

Any help would be appreciated.


For example i have load contacts recipient email in checkout page. You should load your settings like below.

Step 1:- Create file di.xml under path PackageName/Module/etc/frontend/

<?xml version="1.0"?>

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <type name="Magento\Checkout\Model\CompositeConfigProvider">
            <argument name="configProviders" xsi:type="array">
                <item name="foo_bar_config_provider" xsi:type="object">PackageName\Module\Model\SampleConfigProvider</item>

Step 2:- Create file SampleConfigProvider.php file under path PackageName\Module\Model\

You have to add your system configuration settings in this file


namespace PackageName\Module\Model;

use Magento\Checkout\Model\ConfigProviderInterface;

 * Class SampleConfigProvider
class SampleConfigProvider implements ConfigProviderInterface
    protected $scopeConfig;

    public function __construct(
        \Magento\Framework\App\Config\ScopeConfigInterface $scopeConfig
    ) {
        $this->scopeConfig = $scopeConfig;

     * Retrieve assoc array of checkout configuration
     * @return array
    public function getConfig()

        $config = [
            'contacts' => [
                'email' => $this->scopeConfig->getValue('contact/email/recipient_email'),

        return $config;

Step 3:- Now in your js file you have to get above configuration like below

], function ($, ko, Component, url) {
    'use strict';

    return Component.extend({
        initialize: function(config) {

You can access your admin settings value in js file like - window.checkoutConfig.contacts.email

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.