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.
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.
