MAGENTO 2 - Remove "Your credit card will be charged for"

Question

Running Magento 2.1.7 - Running two (2) stores. One in Guatemala currency and another with Belize currency - Both have to use a USD Base Currency to process Credit Card and PayPal payments but I don't want the USD total to appear on the checkout page so that we don't confuse the clients.

I'm trying to remove or hide the YOUR CREDIT CARD WILL BE CHARGED FOR... field on the checkout page.

Need some help. Anyone out there with the answer? :)

Answer 1

There are a few different methods to accomplish this:

Method 1. Use a mixin to override the isBaseGrandTotalDisplayNeeded method in Magento_Tax/js/view/checkout/summary/grand-total

Vendor/Module/view/frontend/requirejs-config.js

var config = {
  'config': {
    'mixins': {
      'Magento_Tax/js/view/checkout/summary/grand-total': {
        'Vendor_Module/js/grand-total-mixin': true
      }
    }
  }
};

Vendor/Module/view/frontend/js/grand-total-mixin.js

define(function () {
  'use strict';

  var mixin = {
    isBaseGrandTotalDisplayNeeded: function () {
      // you custom logic for displaying base grand total
      // returning false prevents the section from being displayed
      return false;
    }
  };

  return function (target) {
    return target.extend(mixin);
  };
});

Method 2. Override Magento_Tax/template/checkout/summary/grand-total.html using a module or theme and remove the section of the template you don't want.

Using a module:

Vendor/Module/view/frontend/requirejs-config.js

var config = {
  map: {
    '*': {
      'Magento_Tax/template/checkout/summary/grand-total.html':
        'Vendor_Module/template/checkout/summary/grand-total.html'
  }
};

Vendor/Module/view/frontend/web/template/checkout/summary/grand-total.html

Below is the template with the base grand total display removed.

<!--
/**
 * Copyright © 2013-2017 Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<!-- ko if: isTaxDisplayedInGrandTotal && isDisplayed() -->
<tr class="grand totals incl">
    <th class="mark" scope="row">
        <strong data-bind="i18n: inclTaxLabel"></strong>
    </th>
    <td data-bind="attr: {'data-th': inclTaxLabel}" class="amount">
        <strong><span class="price" data-bind="text: getValue()"></span></strong>
    </td>
</tr>
<tr class="grand totals excl">
    <th class="mark" scope="row">
        <strong data-bind="i18n: exclTaxLabel"></strong>
    </th>
    <td data-bind="attr: {'data-th': exclTaxLabel}" class="amount">
        <strong><span class="price" data-bind="text: getGrandTotalExclTax()"></span></strong>
    </td>
</tr>
<!-- /ko -->
<!-- ko if: !isTaxDisplayedInGrandTotal && isDisplayed() -->
<tr class="grand totals">
    <th class="mark" scope="row">
        <strong data-bind="i18n: title"></strong>
    </th>
    <td data-bind="attr: {'data-th': title}" class="amount">
        <strong><span class="price" data-bind="text: getValue()"></span></strong>
    </td>
</tr>
<!-- /ko -->

The same template above can be placed directly in a custom theme without the module or requirejs-config by placing in app/design/Vendor/Package/Magento_Tax/web/template/checkout/summary/grand-total.html