--- a/toolkit/components/payments/res/debugging.html
+++ b/toolkit/components/payments/res/debugging.html
@@ -23,13 +23,14 @@
       <button id="setAddresses1">Set Addreses 1</button>
       <button id="delete1Address">Delete 1 Address</button>
       <h1>Payment Methods</h1>
       <button id="setBasicCards1">Set Basic Cards 1</button>
       <button id="delete1Card">Delete 1 Card</button>
       <h1>States</h1>
       <button id="setChangesPrevented">Prevent changes</button>
       <button id="setChangesAllowed">Allow changes</button>
+      <button id="setShippingError">Shipping Error</button>
       <button id="setStateDefault">Default</button>
       <button id="setStateProcessing">Processing</button>
     </div>
   </body>
 </html>

--- a/toolkit/components/payments/res/debugging.js
+++ b/toolkit/components/payments/res/debugging.js
@@ -267,16 +267,26 @@ let buttonActions = {
   setRequest2() {
     requestStore.setState({request: REQUEST_2});
   },
 
   setRequestContactNoShipping() {
     requestStore.setState({request: REQUEST_CONTACT_NO_SHIPPING});
   },
 
+  setShippingError() {
+    let request = Object.assign({}, requestStore.getState().request);
+    request.paymentDetails = Object.assign({}, requestStore.getState().request.paymentDetails);
+    request.paymentDetails.error = "Error!";
+    request.paymentDetails.shippingOptions = [];
+    requestStore.setState({
+      request,
+    });
+  },
+
   setStateDefault() {
     requestStore.setState({
       completionState: "initial",
     });
   },
 
   setStateProcessing() {
     requestStore.setState({

--- a/toolkit/components/payments/res/paymentRequest.css
+++ b/toolkit/components/payments/res/paymentRequest.css
@@ -38,16 +38,20 @@ payment-dialog > header {
 
 #payment-summary {
   display: grid;
   flex: 1 1 auto;
   grid-template-rows: fit-content(10%) auto fit-content(10%);
   position: relative;
 }
 
+#error-text {
+  text-align: center;
+}
+
 #order-details-overlay {
   background-color: -moz-dialog;
   overflow: auto;
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;

--- a/toolkit/components/payments/res/paymentRequest.xhtml
+++ b/toolkit/components/payments/res/paymentRequest.xhtml
@@ -62,27 +62,30 @@
       </div>
     </header>
 
     <div id="main-container">
       <section id="payment-summary">
         <h1>&paymentSummaryTitle;</h1>
 
         <section>
+          <div id="error-text"></div>
+
           <div class="shipping-related"
                id="shipping-type-label"
                data-shipping-address-label="&shippingAddressLabel;"
                data-delivery-address-label="&deliveryAddressLabel;"
                data-pickup-address-label="&pickupAddressLabel;"><label></label></div>
           <address-picker class="shipping-related" selected-state-key="selectedShippingAddress"></address-picker>
+
           <div class="shipping-related"><label>&shippingOptionsLabel;</label></div>
           <shipping-option-picker class="shipping-related"></shipping-option-picker>
+
           <div><label>&paymentMethodsLabel;</label></div>
           <payment-method-picker selected-state-key="selectedPaymentCard"></payment-method-picker>
-          <div id="error-text"></div>
         </section>
 
         <footer id="controls-container">
           <button id="cancel">&cancelPaymentButton.label;</button>
           <button id="pay"
                   data-initial-label="&approvePaymentButton.label;"
                   data-processing-label="&processingPaymentButton.label;"></button>
         </footer>