Reading list Switch to dark mode

    Additional info on the Checkout Payment Page

    In this blog, we are going to add an additional info to the checkout payment page. First of all, we need to create a custom module. you can create a module using this blog Click Here.

    This topic contains basic information about how to customize the view of an existing checkout payment page. In the Magento application, checkout is implemented using UI components. You can customize each step by changing the JavaScript implementation or template for a component

    Step 1:- After the module creation In your custom module directory, create the following new file: <your_module_dir>/view/frontend/layout/checkout_index_index.xml. (For your checkout customization to be applied correctly, your custom module should depend on the Magento_Checkout module.).

    Step 2:- In this file, add the following:

    <?xml version="1.0"?>
     * Copyright © Magento, Inc. All rights reserved.
     * See COPYING.txt for license details.
    <page xmlns:xsi=""
            <script  src="" defer="defer" async="async" src_type="url"/>
            <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="place-order-custom-container" xsi:type="array">
                                                                        <item name="component" xsi:type="string">uiComponent</item>
                                                                        <item name="displayArea" xsi:type="string">beforeMethods</item>
                                                                        <item name="children" xsi:type="array">
                                                                            <item name="place-order-custom" xsi:type="array">
                                                                                <item name="component" xsi:type="string">Webkul_Custom/js/custom</item>
                                                                                <item name="displayArea" xsi:type="string">place-order-custom</item>
                                                                                <item name="configSource" xsi:type="string">checkoutConfig</item>

    In the checkout page, we added a component Webkul_Custom/js/custom, add a displayArea, and the configSource.

    Searching for an experienced
    Magento Company ?
    Read More

    Change the path to the component’s .js file, template, or any other property as per your need.

    Make sure that you declare a component so that it is rendered correctly by the parent component. If a parent component is a general UI component (referenced by the uiComponent alias), its child components are rendered without any conditions. But if a parent component is an extension of a general UI components, then children rendering might be restricted in certain way. For example a component can render only children from a certain displayArea.

    Step 3:- After this we need to create the following new file: <your_module_dir>/view/frontend/web/js/custom.js

    Step 4:- In this file, add the following:

     * Copyright © Magento, Inc. All rights reserved.
     * See COPYING.txt for license details.
        ], function (Component, $) {
            'use strict';
            return Component.extend({
                defaults: {
                    template: 'Webkul_Custom/custom',
                initialize: function () {

    In this above code, we define the template where you need to add your custom code as per your need.

    Step 4:- After this, we need to create the following new file: <your_module_dir>/view/frontend/web/template/custom.html

    <p>this is custom text</p>

    It will look like this.


    I hope you like this blog 🙂

    . . .
    Add a comment

    Leave a Comment

    Your email address will not be published. Required fields are marked*

    Be the first to comment.

    Back to Top
    I have tested and used Webkul Marketplace extension for years under Odoo and now recently also deployed it under Magento 2 and I have to say that not only the code is responsive but also the team :-) Working hard and politely on my little nerdy requests, bug fixing and customization.
    Mohamed Es Fih
    eSolutions for Business Adviser
    Talk to Sales


    Live Chat

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home