--- a/browser/components/payments/res/containers/payment-dialog.js
+++ b/browser/components/payments/res/containers/payment-dialog.js
@@ -105,16 +105,25 @@ export default class PaymentDialog exten
   }
 
   changeShippingOption(optionID) {
     paymentRequest.changeShippingOption({
       optionID,
     });
   }
 
+  _getAdditionalDisplayItems(state) {
+    let methodId = state.selectedPaymentCard;
+    let modifier = paymentRequest.getModifierForPaymentMethod(state, methodId);
+    if (modifier && modifier.additionalDisplayItems) {
+      return modifier.additionalDisplayItems;
+    }
+    return [];
+  }
+
   /**
    * Set some state from the privileged parent process.
    * Other elements that need to set state should use their own `this.requestStore.setState`
    * method provided by the `PaymentStateSubscriberMixin`.
    *
    * @param {object} state - See `PaymentsStore.setState`
    */
   setStateFromParent(state) {
@@ -231,16 +240,20 @@ export default class PaymentDialog exten
     this._cachedState.selectedShippingOption = state.selectedShippingOption;
   }
 
   render(state) {
     let request = state.request;
     let paymentDetails = request.paymentDetails;
     this._hostNameEl.textContent = request.topLevelPrincipal.URI.displayHost;
 
+    let displayItems = request.paymentDetails.displayItems || [];
+    let additionalItems = this._getAdditionalDisplayItems(state);
+    this._viewAllButton.hidden = !displayItems.length && !additionalItems.length;
+
     let shippingType = state.request.paymentOptions.shippingType || "shipping";
     this._shippingAddressPicker.dataset.addAddressTitle =
       this.dataset[shippingType + "AddressTitleAdd"];
     this._shippingAddressPicker.dataset.editAddressTitle =
       this.dataset[shippingType + "AddressTitleEdit"];
 
     let totalItem = paymentRequest.getTotalItem(state);
     let totalAmountEl = this.querySelector("#total > currency-amount");

--- a/browser/components/payments/test/mochitest/test_payment_dialog.html
+++ b/browser/components/payments/test/mochitest/test_payment_dialog.html
@@ -84,16 +84,41 @@ add_task(async function test_initialStat
   let initialState = el1.requestStore.getState();
   let elDetails = el1._orderDetailsOverlay;
 
   is(initialState.orderDetailsShowing, false, "orderDetailsShowing is initially false");
   ok(elDetails.hasAttribute("hidden"), "Check details are hidden");
   is(initialState.page.id, "payment-summary", "Check initial page");
 });
 
+add_task(async function test_viewAllButtonVisibility() {
+  await setup();
+
+  let button = el1._viewAllButton;
+  ok(button.hidden, "Button is initially hidden when there are no items to show");
+
+  // Add a display item.
+  let request = deepClone(el1.requestStore.getState().request);
+  request.paymentDetails.displayItems = [
+    {
+      "label": "Triangle",
+      "amount": {
+        "currency": "CAD",
+        "value": "3",
+      },
+    },
+  ];
+  await el1.requestStore.setState({ request });
+  await asyncElementRendered();
+
+  // Check if the "View all items" button is visible.
+  ok(!button.hidden, "Button is visible");
+});
+
+
 add_task(async function test_viewAllButton() {
   await setup();
 
   let elDetails = el1._orderDetailsOverlay;
   let button = el1._viewAllButton;
 
   button.click();
   await asyncElementRendered();