3

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

asked Nov 21, 2019 at 22:20
3

1 Answer 1

4

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!

answered Nov 22, 2019 at 3:43
4
  • 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. Commented Nov 25, 2019 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. Commented Nov 26, 2019 at 0:05
  • 1
    never mind.. figured out, put it after <sequence><module name="Magento_SalesRule"/></sequence> works. Commented Nov 26, 2019 at 0:26
  • 1
    Still works perfectly on Magento 2.4.5. This should be Magento official doc page. Commented Jun 12, 2023 at 14:03

Your Answer

Draft saved
Draft discarded

Sign up or log in

Sign up using Google
Sign up using Email and Password

Post as a guest

Required, but never shown

Post as a guest

Required, but never shown

By clicking "Post Your Answer", you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.