---
title: "Magento 2: How to Show Custom Notice Message Before Payment Step on Checkout"
url: "https://magecomp.com/blog/magento-2-show-custom-notice-message-before-payment-step-on-checkout/"
date: "2024-09-23T12:41:45+00:00"
modified: "2025-02-12T10:16:26+00:00"
author:
  name: "Dhiren Vasoya"
  url: "https://magecomp.com/"
categories:
  - "How To"
  - "Magento 2"
word_count: 443
reading_time: "3 min read"
summary: "Hello Magento Friends,"
description: "Learn how to display a custom notice message before the payment step in Magento 2's checkout process."
keywords: "How To, Magento 2"
language: "en"
schema_type: "Article"
related_posts:
  - title: "How to Apply Admin Theme in Magento 2?"
    url: "https://magecomp.com/blog/apply-admin-theme-magento-2/"
  - title: "Magento 2: Regenerate Catalog Product Cache Images Programmatically"
    url: "https://magecomp.com/blog/magento-2-regenerate-catalog-product-cache-images-programmatically/"
  - title: "How to Create Customer Programmatically in Magento 2?"
    url: "https://magecomp.com/blog/create-customer-programmatically-magento-2/"
---

# Magento 2: How to Show Custom Notice Message Before Payment Step on Checkout

_Published: September 23, 2024_  
_Author: Dhiren Vasoya_  

![Magento 2 How to Show Custom Notice Message Before Payment Step on Checkout](https://magecomp.com/blog/wp-content/uploads/2024/09/Magento-2-How-to-Show-Custom-Notice-Message-Before-Payment-Step-on-Checkout-1024x512.avif)

**Hello Magento Friends,**

In Magento 2, you can [**customize the checkout process**](https://magecomp.com/magento-2-custom-checkout-fields.html) to enhance the user experience and provide additional information. One common requirement is to display a custom notice message before the payment step.
[![Magento Malware Removal](https://magecomp.com/blog/wp-content/uploads/2025/02/Magento-Malware-Removal-CTA-4.webp)](https://magecomp.com/magento-malware-removal.html)

Displaying a custom notice message before the payment step in Magento 2’s checkout process can be a useful feature to enhance customer experience. Whether you want to provide important payment instructions, highlight offers, or give additional information about shipping methods, adding a custom notice message can improve user awareness and trust. In this blog, we’ll walk through the steps to implement a custom notice message right before the payment step in Magento 2.
## Why Add a Custom Notice Message Before Payment?
Displaying a custom message before the payment step can be beneficial for several reasons:
- **Alert Customers:** Inform customers about important details like shipping delays, additional fees, or promotion details before they complete their purchase.- **Reduce Abandoned Carts:** By providing useful information upfront, you help prevent surprises at the last step that might cause customers to abandon the cart.- **Improve Transparency:** Highlight special conditions or offer clarifications to keep the checkout process smooth and transparent.
## Steps to Add a Custom Notice Message Before Payment in Magento 2:
**Step 1:** First, we need to create a **“requirejs-config.js“** file inside our extension at the following path
**app\code\Vendor\Extension\view\frontend\requirejs-config.js**

Then add the code as follows
```
var config = {
config: {
        mixins: {
             'Magento_Checkout/js/model/step-navigator': {
                 'Vendor_Extension/js/model/step-navigator-mixin': true
             }
        }
    }
};
```

[![Magento 2 Speed & Performance Optimization Services](https://magecomp.com/blog/wp-content/uploads/2025/02/Magento-2-Speed-Performance-Optimization-Services-CTA-4.webp)](https://magecomp.com/magento-performance-optimization.html)

**Step 2:** Now, we need to create a **“step-navigator-mixin.js“** file inside our extension at the following path
**app\code\Vendor\Extension\view\frontend\web\js\model\step-navigator-mixin.js**

Now, add the code as mentioned below
```
    'mage/utils/wrapper',
    'jquery',
    'Magento_Checkout/js/model/totals',
    'Magento_Ui/js/modal/alert',
], function (wrapper,$,totals,alert) {
    'use strict';

    return function (stepNavigator) {
        stepNavigator.next = wrapper.wrapSuper(stepNavigator.next, function () {
            this._super();
            var subtotal = parseFloat(totals.totals()['subtotal']);
            console.log(subtotal);
            if(subtotal < 100){
            	alert({
		        title: $.mage.__('Notice'),
		        content: $.mage.__('Your order subtotal is below $100. You may want to review your cart or add more items to qualify for any applicable promotions.'),
		        actions: {
		            always: function(){}
		        }
		    });
            }
        });

        return stepNavigator;
    };
});
```

**Output:**

![checkout custom notice](https://magecomp.com/blog/wp-content/uploads/2024/09/checkout-custom-notice.avif)

## Conclusion:
By following this method, you can easily add a custom notice message before the payment step in Magento 2’s checkout process. This can improve customer experience, reduce confusion, and enhance transparency during the checkout flow. You can modify the message content based on your store’s specific needs, such as displaying a warning, promotion, or any other important detail.
[![hyva theme development](https://magecomp.com/blog/wp-content/uploads/2025/02/hyva-theme-development-CTA-3.webp)](https://magecomp.com/services/hyva-theme-development/)

Adding custom messages to different stages of checkout is a great way to engage with your customers and improve their overall journey.
**Happy Coding!**


---

_View the original post at: [https://magecomp.com/blog/magento-2-show-custom-notice-message-before-payment-step-on-checkout/](https://magecomp.com/blog/magento-2-show-custom-notice-message-before-payment-step-on-checkout/)_  
_Served as markdown by [Third Audience](https://github.com/third-audience) v3.5.3_  
_Generated: 2026-09-23 21:23:30 UTC_