I have this code inside .phtml:

<div data-bind="scope: 'checkout-agreements-component-scope'" class="checkout-agreements-block">
    <!-- ko template: getTemplate() --><!-- /ko -->
<script type="text/x-magento-init">
        "*": {
            "Magento_Ui/js/core/app": {
                "components": {
                    "checkout-agreements-component-scope": {
                        "component": "Magento_CheckoutAgreements/js/view/checkout-agreements",
                        "agreements": <?php /* @noEscape */ echo $agreementJson; ?>,
                        "isVisible": true,
                        "exampleMessage": "<?php echo 'Hello Magento Stack Exchange!'; ?>",
                        "sarfaraj": "<?php echo 'I am Back....!' ?>"


inside .js:

return Component.extend({
            defaults: {
                exampleMessage: 'Default Text Ready',
                sarfaraj: 'Raj',
                template: 'Magento_CheckoutAgreements/checkout/checkout-agreements'

            initialize: function() {
                this.message = ko.observable(this.exampleMessage);
                this.FIR = ko.observable(this.sarfaraj);


inside .html:

<h2 data-bind="text: message"></h2>
<h3 data-bind="text: FIR"></h3>

My OUTPUT at Checkout page:

enter image description here

Help Me. Thanks.

  • I don't have time to look at this in depth atm but can you try one quick thing please, try adding the text/x-magento-init call before your data-bindings. I don't think this is the issue but I have seen stranger things happen! – Ben Crook Oct 26 '17 at 14:22
  • And can you include the require() call in your JS code please just to make sure that is ok. – Ben Crook Oct 26 '17 at 14:24
  • @BenCrook, Thanks for reply & check this one time. – Sarfaraj Sipai Oct 27 '17 at 5:03

Your Answer

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

Browse other questions tagged or ask your own question.