--- a/toolkit/components/payments/res/debugging.css
+++ b/toolkit/components/payments/res/debugging.css
@@ -1,7 +1,11 @@
 /* This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 h1 {
   font-size: 1em;
 }
+
+fieldset > label {
+  white-space: nowrap;
+}

--- a/toolkit/components/payments/res/debugging.html
+++ b/toolkit/components/payments/res/debugging.html
@@ -13,17 +13,23 @@
     <div>
       <button id="refresh">Refresh</button>
       <button id="rerender">Re-render</button>
       <button id="logState">Log state</button>
       <button id="debugFrame" hidden>Debug frame</button>
       <h1>Requests</h1>
       <button id="setRequest1">Request 1</button>
       <button id="setRequest2">Request 2</button>
-      <button id="setRequestContactNoShipping">Contact &amp; No Shipping</button>
+      <fieldset id="paymentOptions">
+        <legend>Payment Options</legend>
+        <label><input type="checkbox" autocomplete="off" name="requestPayerName" id="setRequestPayerName">requestPayerName</label>
+        <label><input type="checkbox" autocomplete="off" name="requestPayerEmail" id="setRequestPayerEmail">requestPayerEmail</label>
+        <label><input type="checkbox" autocomplete="off" name="requestPayerPhone" id="setRequestPayerPhone">requestPayerPhone</label>
+        <label><input type="checkbox" autocomplete="off" name="requestShipping" id="setRequestShipping">requestShipping</label>
+      </fieldset>
       <h1>Addresses</h1>
       <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>

--- a/toolkit/components/payments/res/debugging.js
+++ b/toolkit/components/payments/res/debugging.js
@@ -2,16 +2,34 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 const paymentDialog = window.parent.document.querySelector("payment-dialog");
 // The requestStore should be manipulated for most changes but autofill storage changes
 // happen through setStateFromParent which includes some consistency checks.
 const requestStore = paymentDialog.requestStore;
 
+// keep the payment options checkboxes in sync w. actual state
+const paymentOptionsUpdater = {
+  stateChangeCallback(state) {
+    this.render(state);
+  },
+  render(state) {
+    let options = state.request.paymentOptions;
+    let checkboxes = document.querySelectorAll("#paymentOptions input[type='checkbox']");
+    for (let input of checkboxes) {
+      if (options.hasOwnProperty(input.name)) {
+        input.checked = options[input.name];
+      }
+    }
+  },
+};
+
+requestStore.subscribe(paymentOptionsUpdater);
+
 let REQUEST_1 = {
   tabId: 9,
   topLevelPrincipal: {URI: {displayHost: "tschaeff.github.io"}},
   requestId: "3797081f-a96b-c34b-a58b-1083c6e66e25",
   paymentMethods: [],
   paymentDetails: {
     id: "",
     totalItem: {label: "Demo total", amount: {currency: "EUR", value: "1.00"}, pending: false},
@@ -115,38 +133,16 @@ let REQUEST_2 = {
     requestPayerName: false,
     requestPayerEmail: false,
     requestPayerPhone: false,
     requestShipping: true,
     shippingType: "shipping",
   },
 };
 
-let REQUEST_CONTACT_NO_SHIPPING = {
-  tabId: 10,
-  topLevelPrincipal: {URI: {displayHost: "example.org"}},
-  requestId: "8288347a-ccec-4190-b4b1-673dbc709738",
-  paymentMethods: [],
-  paymentDetails: {
-    id: "",
-    totalItem: {label: "", amount: {currency: "EUR", value: "1234.56"}, pending: false},
-    displayItems: [],
-    shippingOptions: [],
-    modifiers: null,
-    error: "",
-  },
-  paymentOptions: {
-    requestPayerName: true,
-    requestPayerEmail: true,
-    requestPayerPhone: true,
-    requestShipping: false,
-    shippingType: "shipping",
-  },
-};
-
 let ADDRESSES_1 = {
   "48bnds6854t": {
     "address-level1": "MI",
     "address-level2": "Some City",
     "country": "US",
     "guid": "48bnds6854t",
     "name": "Mr. Foo",
     "postal-code": "90210",
@@ -263,18 +259,39 @@ let buttonActions = {
   setRequest1() {
     requestStore.setState({request: REQUEST_1});
   },
 
   setRequest2() {
     requestStore.setState({request: REQUEST_2});
   },
 
-  setRequestContactNoShipping() {
-    requestStore.setState({request: REQUEST_CONTACT_NO_SHIPPING});
+  setRequestPayerName() {
+    buttonActions.setPaymentOptions();
+  },
+  setRequestPayerEmail() {
+    buttonActions.setPaymentOptions();
+  },
+  setRequestPayerPhone() {
+    buttonActions.setPaymentOptions();
+  },
+  setRequestShipping() {
+    buttonActions.setPaymentOptions();
+  },
+
+  setPaymentOptions() {
+    let options = {};
+    let checkboxes = document.querySelectorAll("#paymentOptions input[type='checkbox']");
+    for (let input of checkboxes) {
+      options[input.name] = input.checked;
+    }
+    let req = Object.assign({}, requestStore.getState().request, {
+      paymentOptions: options,
+    });
+    requestStore.setState({ request: req });
   },
 
   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({