--- a/browser/components/payments/res/containers/address-form.css
+++ b/browser/components/payments/res/containers/address-form.css
@@ -18,8 +18,22 @@ address-form[address-fields] #address-le
 address-form[address-fields] #postal-code-container,
 address-form[address-fields] #country-container,
 address-form[address-fields]:not([address-fields~='email']) #email-container,
 address-form[address-fields]:not([address-fields~='tel']) #tel-container {
   /* !important is needed because autofillEditForms.js sets
      inline styles on the form fields with display: flex; */
   display: none !important;
 }
+
+address-form .error input,
+address-form .error select,
+address-form .error textarea {
+  border: 1px solid #ce001a;
+}
+
+.error-text:not(:empty) {
+  border-radius: 2px;
+  background-color: #ce001a;
+  color: #f9e6e9;
+  padding: .1em .5em;
+  margin-inline-start: .1em;
+}

--- a/browser/components/payments/res/containers/address-form.js
+++ b/browser/components/payments/res/containers/address-form.js
@@ -147,16 +147,17 @@ export default class AddressForm extends
       let container = document.querySelector(errorSelector);
       let span = container.querySelector(".error-text");
       if (!span) {
         span = document.createElement("span");
         span.className = "error-text";
         container.appendChild(span);
       }
       span.textContent = shippingAddressErrors[errorName];
+      container.classList.toggle("error", !!shippingAddressErrors[errorName]);
     }
   }
 
   handleEvent(event) {
     switch (event.type) {
       case "click": {
         this.onClick(event);
         break;

--- a/browser/components/payments/res/debugging.html
+++ b/browser/components/payments/res/debugging.html
@@ -31,16 +31,17 @@
       <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="setAddressErrors">Address Errors</button>
       <button id="setStateDefault">Default</button>
       <button id="setStateProcessing">Processing</button>
       <button id="setStateSuccess">Success</button>
       <button id="setStateFail">Fail</button>
       <button id="setStateUnknown">Unknown</button>
     </div>
   </body>
 </html>

--- a/browser/components/payments/res/debugging.js
+++ b/browser/components/payments/res/debugging.js
@@ -381,16 +381,34 @@ let buttonActions = {
     request.paymentDetails = Object.assign({}, requestStore.getState().request.paymentDetails);
     request.paymentDetails.error = "Error!";
     request.paymentDetails.shippingOptions = [];
     requestStore.setState({
       request,
     });
   },
 
+  setAddressErrors() {
+    let request = Object.assign({}, requestStore.getState().request);
+    request.paymentDetails = Object.assign({}, requestStore.getState().request.paymentDetails);
+    request.paymentDetails.shippingAddressErrors = {
+      addressLine: "Can only ship to ROADS, not DRIVES, BOULEVARDS, or STREETS",
+      city: "Can only ship to CITIES, not TOWNSHIPS or VILLAGES",
+      country: "Can only ship to USA, not CA",
+      organization: "Can only ship to CORPORATIONS, not CONSORTIUMS",
+      phone: "Only allowed to ship to area codes that start with 9",
+      postalCode: "Only allowed to ship to postalCodes that start with 0",
+      recipient: "Can only ship to names that start with J",
+      region: "Can only ship to regions that start with M",
+    };
+    requestStore.setState({
+      request,
+    });
+  },
+
   setStateDefault() {
     requestStore.setState({
       completionState: "initial",
     });
   },
 
   setStateProcessing() {
     requestStore.setState({