--- a/toolkit/components/payments/res/debugging.html
+++ b/toolkit/components/payments/res/debugging.html
@@ -16,11 +16,14 @@
       <button id="logState">Log state</button>
       <button id="debugFrame" hidden>Debug frame</button>
       <h1>Requests</h1>
       <button id="setRequest1">Set Request 1</button>
       <button id="setRequest2">Set Request 2</button>
       <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>
     </div>
   </body>
 </html>

--- a/toolkit/components/payments/res/debugging.js
+++ b/toolkit/components/payments/res/debugging.js
@@ -138,31 +138,76 @@ let ADDRESSES_1 = {
     "guid": "68gjdh354j",
     "name": "Mrs. Bar",
     "postal-code": "94041",
     "street-address": "P.O. Box 123",
     "tel": "+1 650 555-5555",
   },
 };
 
+let BASIC_CARDS_1 = {
+  "53f9d009aed2": {
+    "cc-number": "************5461",
+    "guid": "53f9d009aed2",
+    "version": 1,
+    "timeCreated": 1505240896213,
+    "timeLastModified": 1515609524588,
+    "timeLastUsed": 0,
+    "timesUsed": 0,
+    "cc-name": "John Smith",
+    "cc-exp-month": 6,
+    "cc-exp-year": 2024,
+    "cc-given-name": "John",
+    "cc-additional-name": "",
+    "cc-family-name": "Smith",
+    "cc-exp": "2024-06",
+  },
+  "9h5d4h6f4d1s": {
+    "cc-number": "************0954",
+    "guid": "9h5d4h6f4d1s",
+    "version": 1,
+    "timeCreated": 1517890536491,
+    "timeLastModified": 1517890564518,
+    "timeLastUsed": 0,
+    "timesUsed": 0,
+    "cc-name": "Jane Doe",
+    "cc-exp-month": 5,
+    "cc-exp-year": 2023,
+    "cc-given-name": "Jane",
+    "cc-additional-name": "",
+    "cc-family-name": "Doe",
+    "cc-exp": "2023-05",
+  },
+};
+
 let buttonActions = {
   debugFrame() {
     window.parent.paymentRequest.sendMessageToChrome("debugFrame");
   },
 
   delete1Address() {
     let savedAddresses = Object.assign({}, requestStore.getState().savedAddresses);
     delete savedAddresses[Object.keys(savedAddresses)[0]];
     // Use setStateFromParent since it ensures there is no dangling
     // `selectedShippingAddress` foreign key (FK) reference.
     paymentDialog.setStateFromParent({
       savedAddresses,
     });
   },
 
+  delete1Card() {
+    let savedBasicCards = Object.assign({}, requestStore.getState().savedBasicCards);
+    delete savedBasicCards[Object.keys(savedBasicCards)[0]];
+    // Use setStateFromParent since it ensures there is no dangling
+    // `selectedPaymentCard` foreign key (FK) reference.
+    paymentDialog.setStateFromParent({
+      savedBasicCards,
+    });
+  },
+
   logState() {
     let state = requestStore.getState();
     // eslint-disable-next-line no-console
     console.log(state);
     dump(`${JSON.stringify(state, null, 2)}\n`);
   },
 
   refresh() {
@@ -172,16 +217,20 @@ let buttonActions = {
   rerender() {
     requestStore.setState({});
   },
 
   setAddresses1() {
     paymentDialog.setStateFromParent({savedAddresses: ADDRESSES_1});
   },
 
+  setBasicCards1() {
+    paymentDialog.setStateFromParent({savedBasicCards: BASIC_CARDS_1});
+  },
+
   setRequest1() {
     requestStore.setState({request: REQUEST_1});
   },
 
   setRequest2() {
     requestStore.setState({request: REQUEST_2});
   },
 };