Back to Top

Additional info on the Checkout Payment Page

Updated 27 April 2023

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="http://www.w3.org/2001/XMLSchema-instance"
      xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <head>
        <script  src="https://challenges.cloudflare.com/turnstile/v0/api.js" defer="defer" async="async" src_type="url"/>
    </head>
    <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="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>
                                                                        </item>
                                                                    </item>
                                                                </item>
                                                            </item>
                                                        </item>
                                                   </item>
                                                </item>
                                            </item>
                                        </item>
                                    </item>
                                </item>
                            </item>
                        </item>
                    </item>
                </argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

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

Searching for an experienced
Magento Company ?
Find out More
Selection_046

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.
 */
define(
    [
        'uiComponent',
        'jquery',
    ], function (Component, $) {
        'use strict';
        return Component.extend({
            defaults: {
                template: 'Webkul_Custom/custom',
            },

            initialize: function () {
                this._super();
            },
        });
    });

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.

Selection_047

I hope you like this blog 🙂

. . .

Leave a Comment

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


Be the first to comment.

Back to Top

Message Sent!

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

Back to Home