I want to add my custom template on checkout page in order summary just after Total as shown in screenshot :

enter image description here

In this template .phtml file I want to add some conversion depend on payment gateway just to display only to customer.

How can I do that?

  • We cannot include the phtml because the checkout Page used Knockout html template. We should build the js to get the result. – Khoa TruongDinh Nov 22 '17 at 5:11
  • @KhoaTruongDinh, please post how can I build js for my requirement. – Vinaya Maheshwari Nov 22 '17 at 5:18
  • The problem is here: depend on payment gateway. So, when the client chooses the payment, the custom total will re-calculate? – Khoa TruongDinh Nov 22 '17 at 5:28
  • As I said I just want to display the price which will be show on payment gateway to customer, payment gateway conversion is done in its module already, don't want to update cart total and anything else. – Vinaya Maheshwari Nov 22 '17 at 5:31
  • @KhoaTruongDinh, Can you please suggest how can I use ajax in .html file ? – Vinaya Maheshwari Nov 22 '17 at 6:08

If we take a look the Json config of xml layout on checkout page:

enter image description here

As we can see, we can add the custom content to itemsBefore area.

For example code:


<?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">
        <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="sidebar" xsi:type="array">
                                    <item name="children" xsi:type="array">
                                        <item name="summary" xsi:type="array">
                                            <item name="children" xsi:type="array">
                                                <item name="itemsBefore" xsi:type="array">
                                                    <item name="children" xsi:type="array">
                                                        <item name="testcustom" xsi:type="array">
                                                            <item name="component" xsi:type="string">Vendor_Checkout/js/view/summary/custom</item>


    function (Component) {
        'use strict';
        return Component.extend({
            defaults: {
                template: 'Vendor_Checkout/summary/custom'


<div>Test Test Here</div>
|improve this answer|||||
  • Can I add .phtml file in place of .html file? – Vinaya Maheshwari Nov 22 '17 at 4:03
  • I do not try but I think we cannot. Try to use html and use Cms content. – Khoa TruongDinh Nov 22 '17 at 4:32
  • I tried but not working, I need to load cart session here and some calculation, Please suggest How can I add .phtml below Total? – Vinaya Maheshwari Nov 22 '17 at 4:35
  • I tried but not working? The message did not show? I'm pretty sure it will show. – Khoa TruongDinh Nov 22 '17 at 4:40
  • I meant to say .html is working properly, but when I tried with .phtml it is not working. And I need to add .phtml file not html as I have to do some php calculation here. – Vinaya Maheshwari Nov 22 '17 at 4:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.