by Firecheckout Support

How to show CMS block when payment method used?

Some store owners might need to show custom content on the Magento 2 order success page after the order placement and a specific payment method was applied.

Let's do that with the Checkout Success Page module. You must have basic HTML and jQuery knowledge. Please follow the example below to understand the general idea of implementation. Go ahead to customize it.

Look at the requirement. We have to show an additional message for customers who used the Check / Money Order payment method to pay for an order.

Follow the steps:

First we create CMS Block:

  • Block Title: Checkout Success Info
  • Identifier: checkout-success-info
  • Content:
    <div class="checkout-success-page-info checkmo" style="display: none; border-radius: 3px; border: 2px solid #42ca49; padding: 0 15px;">
    <h3>For your information</h3>
    <p>You've select money order as your payment method. This may slow down a little bit order processing.</p>
    <p>We will contact your for some additional information if we need it.</p>
    </div>
    

Then we go to Checkout Success Page configuration in Magento Admin. We will open section CMS blocks for additional content.

  • Select a created block for the Above order information option.
  • Go to section Page Layout. Drag block CMS: Above info to the place where you want to show the message.
  • Go to section General and insert a script below into Textarea Miscellaneous scripts and HTML.
<script language="javascript">
    require([
        'jquery'
    ], function($) {
        'use strict';

        $('.checkout-success-page-info.{{paymentCode}}').show();
    });
   </script>
   
  • Save.
  • Brief explanation: {{paymentCode}} is a dynamic string that will be replaced with the code of payment method from the order. For the Check / Money Order payment method the code is checkmo. We used this value as the CSS class of the DIV element in the CMS block. And JavaScript code from item 5 just shows that DIV.

    Recent articles

    up