Magento 2: How to Display a Custom Price/Fee to the Order Summary in Hyvä Checkout

Hello Magento Friends,

In this blog, I will show you how to display a custom price/fee for the order summary in Hyvä Checkout for Magento 2.

Hyvä Checkout is fast and easy to use, offering an optimized user experience for Magento 2 stores. Merchants who want to tailor their offerings will often want to add custom fees or prices to order summaries within Hyvä Checkout for extra services or additional charges.

This tutorial will walk you through the steps of adding a custom price or fee to the order summary in Hyvä Checkout.

Steps to Display a Custom Price/Fee to the Order Summary in Hyvä Checkout:

Step 1: First, we need to create a “hyva_checkout_components.xml“ file inside our extension at the following path

app\code\Vendor\Extension\view\frontend\layout\hyva_checkout_components.xml

Then add the code as follows

<?xml version="1.0"?>
<layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/layout_generic.xsd">
    <referenceBlock name="hyva.checkout.components"> 
        <referenceBlock name="price-summary.total-segments"> 
                    <block name="price-summary.total-segment.fee" as="fee" template="Vendor_Extension::hyvacheckout/checkout/price-summary/total-segments/fee.phtml" after="price-summary.total-segment.subtotal">
                    <arguments>
                        <argument name="magewire" xsi:type="object">
                            \Vendor\Extension\Magewire\Checkout\PriceSummary\Fee
                        </argument>
                    </arguments>
                    </block>
        </referenceBlock> 
    </referenceBlock> 
</layout>

Step 2: After that, we need to create a “fee.phtml” file inside our extension at the following path

app\code\Vendor\Extension\view\frontend\templates\hyvacheckout\checkout\price-summary\total-segments\fee.phtml

And add the code as given below

<?php
use Magento\Framework\Escaper;
use Magento\Framework\View\Element\Template;
use Hyva\Checkout\ViewModel\Checkout\Formatter as FormatterViewModel;
use Hyva\Theme\Model\ViewModelRegistry;
/** @var Template $block */
/** @var FormatterViewModel $formatterViewModel */
/** @var ViewModelRegistry $viewModels */
/** @var Escaper $escaper */
$formatterViewModel = $viewModels->require(FormatterViewModel::class);
?>
<?php if($magewire->new_config['status']){ ?>
    <div class="flex gap-4 justify-between md:gap-0">
        <span class="label">
            <?= /* @noEscape */ $magewire->new_config['fee_name']; ?>
        </span>
        <span class="value">
            <?= /* @noEscape */ $formatterViewModel->currency($magewire->extra_fee) ?>
        </span>
    </div>
<?php } ?>

Step 3: After that, we need to create a “Fee.php” file inside our extension at the following path

app\code\Vendor\Extension\Magewire\Checkout\PriceSummary\Fee.php

Then include the following piece of code

<?php
namespace Vendor\Extension\Magewire\Checkout\PriceSummary;
use Magento\Checkout\Model\Session as SessionCheckout;
use Magento\Framework\Exception\LocalizedException;
use Magento\Framework\Exception\NoSuchEntityException;
use Magewirephp\Magewire\Component;
use Magento\Framework\App\Config\ScopeConfigInterface;
class Fee extends Component
{
    public $extra_fee = 0;
    public $config = [];
    public $new_config = [];
    protected $scopeConfig;
    protected SessionCheckout $sessionCheckout;
    public function __construct(
        SessionCheckout $sessionCheckout,
        ScopeConfigInterface $scopeConfig
    ) {
        $this->sessionCheckout = $sessionCheckout;
        $this->scopeConfig = $scopeConfig;
    }
    /**
     * @throws NoSuchEntityException
     */
    public function mount(): void
    {
        $quote = $this->sessionCheckout->getQuote();
        $store_id = $quote->getStoreId();
        $quoteTotal = $quote->getTotals();
        $status = 1;
        $config['status'] = $status;
        $config['fee_name'] = 'Extra Fee';
        $this->new_config = $config;
        $this->extra_fee = 10;
    }
}

Output:

Once you complete the above steps, the custom fees will be displayed in the order summary of Hyvä Checkout.

Conclusion:

By following the steps outlined in this tutorial, you can successfully add a custom price or fee to the order summary in Hyvä Checkout. This customization empowers merchants to add value-added services or apply additional charges seamlessly.

For any customization related to the Magento store, Hire Experienced Magento Developers.

Happy Coding!