I want to add custom text block in onepage checkout in #payment page. That block will use to remind the "discount code" to customer, it's like popup text.

Please check the sample image.

enter image description here


Try following way to use magento default popup modal:


<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="checkout" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
        <referenceBlock name="checkout.root">
                <argument name="jsLayout" xsi:type="array">
                    <item name="components" xsi:type="array">
                        <item name="checkout" xsi:type="array">
                            <item name="children" xsi:type="array">
                                <item name="steps" xsi:type="array">
                                    <item name="children" xsi:type="array">
                                        <item name="billing-step" xsi:type="array">
                                            <item name="children" xsi:type="array">
                                                <item name="payment" xsi:type="array">
                                                    <item name="children" xsi:type="array">
                                                        <item name="beforeMethods" xsi:type="array">
                                                            <item name="children" xsi:type="array">
                                                                <item name="custom_block" xsi:type="array">
                                                                    <item name="component" xsi:type="string">SR_MagentoCommunity/js/view/custom-block</item>


], function ($, ko, Component, modal, payment, $t) {
    'use strict';

    return Component.extend({
        defaults: {
            template: 'SR_MagentoCommunity/custom-block'
        options: {
            popupModalContent: '#sr-discount-popup'
        shouldShowMessage: ko.observable(false),
        initialize: function () {
            var self = this;
            var subscription = payment.prototype.isVisible.subscribe(function(value){
                if (value) {
                    var popupModalContent = self.options.popupModalContent;
                    var modalOption = {
                        type: 'popup',
                        responsive: true,
                        title: 'Test Title',
                        buttons: [{}],
                        closed: function () {
            return this;
        getMessage: function () {
            return $t("Don't forget to use discount code");


<div id="sr-discount-popup" data-bind="visible:shouldShowMessage">
    <span data-bind="text: getMessage()"></span>
  • Thank you. @ Sohel – Priya Apr 10 '19 at 8:56
  • Please let me know, how to add image instead of text. – Priya Apr 10 '19 at 9:58
  • 1
    Pass image from php checkout config and added that image in html – Sohel Rana Apr 10 '19 at 10:08
  • Yeah got it thank you – Priya Apr 10 '19 at 10:42
  • @mohana do you manage that? – Sohel Rana Apr 10 '19 at 10:48

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.