How to Add Custom Text on the Checkout Payment Page in Magento 2?

Hello Magento Friends,

In today’s blog, I will provide a solution on How to Add Custom Text on the Checkout Payment Page in Magento 2.

Magento 2 offers a wide range of customization options to tailor your online store according to your brand and customer preferences. One such customization involves adding custom text on the checkout payment page, allowing you to communicate important information or promotions to your customers at a critical stage in their purchasing journey. Whether it’s conveying important information, highlighting promotions, or reinforcing your brand message, this simple customization can make a significant impact on user satisfaction and conversion rates.

Let’s get started with adding custom text on the checkout payment page in Magento 2, empowering you to enhance user engagement and streamline the buying process.

Contents

1 Steps to Add Custom Text on the Checkout Payment Page in Magento 2:
2 Conclusion:

Steps to Add Custom Text on the Checkout Payment Page in Magento 2:

Step 1: Create a di.xml file inside the etc folder

app/code/Vendor/Extension/etc/frontend/

Add the following code

<?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="custom_text_config_provider" xsi:type="object">Vendor\Extension\Model\ConfigProvider</item>
            </argument>
        </arguments>
    </type>
</config>

Step 2: Now, create a ConfigProvider.php file inside the Model folder.

app/code/Vendor/Extension/Model/

Then add the code as below

<?php

namespace Vendor\Extension\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 [
            'custom_text' => $this->_layout->createBlock('Magento\Framework\View\Element\Template')->setTemplate("Vendor_Extension::custom_text.phtml")->toHtml()
        ];
    }
}

Step 3: Then create a custom_text.phtml file inside the view folder.

app/code/Vendor/Extension/view/frontend/templates

Include the following line of code

<?php echo "Custom Text !!!!"; ?>

Step 4: Next, create a checkout_index_index.xml file inside the view folder.

Vendor/Extension/view/frontend/layout

Then add the code as follows

<?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="custom_text" xsi:type="array">
                                                                    <item name="component" xsi:type="string">Vendor_Extension/js/view/payment/custom-text</item>
                                                                </item>
                                                            </item>
                                                        </item>
                                                    </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

Step 5: Then create a custom-text.js file inside the view folder.

app/code/Vendor/Extension/view/frontend/web/js/view/payment/

And add the following piece of code

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

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

        });
    }
);

Step 6: Now, create a custom-text.html file inside the view folder.

app/code/Vendor/Extension/view/frontend/web/template/

And add the following line of code

<div data-bind="html: window.checkoutConfig.custom_text" style="color:red;"></div>

Step 7: In the last step, we need to run below command once.

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

Output –

Check your Magento 2 storefront. You can see that the custom text is added to the checkout payment page, as shown in the image below.

Conclusion:

By adding custom text on the checkout payment page in Magento 2, you can create a more engaging and informative shopping experience for your customers.

Learn – How to Create an Attractive Checkout Page in the Magento 2 Store.

Stay tuned for more Magento 2 customization tips to optimize your e-commerce store and stay ahead in the competitive online marketplace.

Happy Coding!

Click to rate this post!

[Total: 0 Average: 0]

Dhiren Vasoya

Dhiren Vasoya is a Director and Co-founder at MageComp, Passionate 🎖️ Certified Magento Developer👨‍💻. He has more than 9 years of experience in Magento Development and completed 850+ projects to solve the most important E-commerce challenges. He is fond❤️ of coding and if he is not busy developing then you can find him at the cricket ground, hitting boundaries.🏏