1

Which file should i edit to add text underneath all the payment methods. ( I would like to add some return/refund policy).

The URL is

https://www.mywebsite.com/checkout/#payment

enter image description here

1

You need to follow below steps, by following these steps you can add your phtml files changes on checkout page's payment step after discount code.

Create di.xml file here in your custom module

app/code/Vendor/Module/etc/frontend/di.xml

Content for this file is..

<?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">
        <arguments>
            <argument name="configProviders" xsi:type="array">
                <item name="return_refund_config_provider" xsi:type="object">Vendor\Module\Model\ConfigProvider</item>
            </argument>
        </arguments>
    </type>
</config>

Now you need to crate ConfigProvider.php Model file here on this path in your custom module

app/code/Vendor/Module/Model/ConfigProvider.php

Content for this file is..

<?php

namespace Vendor\Module\Model;

use Magento\Checkout\Model\ConfigProviderInterface;
use Magento\Framework\View\LayoutInterface;

class ConfigProvider implements ConfigProviderInterface
{
    protected $_layout;

    public function __construct(LayoutInterface $layout)
    {
        $this->_layout = $layout;
    }

    public function getConfig()
    {
        return [
            'return_refund_policy' => $this->_layout->createBlock('Magento\Framework\View\Element\Template')->setTemplate("Vendor_Module::return_refund_policy.phtml")->toHtml()
        ];
    }
}
  • Here in above file we have added one key return_refund_policy in getConfig() function so we can access this using window.checkoutConfig.return_refund_policy on checkout page's html file, and we set our template path (phtml template) to that array key.

Now we will create phtml file here

app/code/Vendor/Module/view/frontend/templates/return_refund_policy.phtml

Content for this file is..

<?php echo "This is return and Refund Policy sample text!!!!"; ?>
  • I've added sample text here, you can add whatever you want here to display.

Now we will create checkout_index_index.xml file here

app/code/Vendor/Module/view/frontend/layout/checkout_index_index.xml

Content for this file is..

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="checkout.root">
            <arguments>
                <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="component" xsi:type="string">uiComponent</item>
                                            <item name="children" xsi:type="array">
                                                <item name="payment" xsi:type="array">
                                                    <item name="children" xsi:type="array">
                                                        <item name="afterMethods" xsi:type="array">
                                                            <item name="children" xsi:type="array">
                                                                <item name="return-refund-policy" xsi:type="array">
                                                                    <item name="component" xsi:type="string">Vendor_Module/js/view/payment/return-refund-policy</item>
                                                                </item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>
  • Here in this file I've added on JS file called return-refund-policy.js after payment method section on checkout page.

So now we will create on JS file here

app/code/Vendor/Module/view/frontend/web/js/view/payment/return-refund-policy.js

Content for this file is..

define([
    'uiComponent',
    'ko',
    'jquery',
], function (Component, ko, $) {
        'use strict';
        return Component.extend({
            defaults: {
                template: 'Vendor_Module/return-refund-policy'
            },

            initialize: function () {
                var self = this;
                this._super();
            }

        });
    }
);
  • Here in this file I've added html template path which is return-refund-policy.html.

So now we will create html file here in our custom module

app/code/Vendor/Module/view/frontend/web/template/return-refund-policy.html

Content for this file is

<div data-bind="html: window.checkoutConfig.return_refund_policy"></div>

That's it. Now we need to run below command once

php bin/magento setup:upgrade
php bin/magento cache:clean
php bin/magento cache:flush

Checkout Custom Block on Payment step Magento 2

Hope this will work for you!

  • 1
    Thanks, Kishan! This solution works, too. I made another solution that takes the content from cms block, so other user can make the changes from the admin panel. – Kris Wen Nov 25 at 17:43
  • 1
    On one of the two site, the return/refund policy message shows before the "apply discount code' area, do you know how to fix that? I already set the module to load after Magento_Checkout on app/etc/config.php, also set the <sequence><module name="Magento_Checkout"/></sequence> on module.xml. Thanks. – Kris Wen Nov 26 at 0:05
  • 1
    never mind.. figured out, put it after <sequence><module name="Magento_SalesRule"/></sequence> works. – Kris Wen Nov 26 at 0:26
  • 1
    thanks again for your help! – Kris Wen Nov 26 at 17:23

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.