--- a/browser/extensions/formautofill/test/browser/browser_creditCard_doorhanger.js
+++ b/browser/extensions/formautofill/test/browser/browser_creditCard_doorhanger.js
@@ -158,8 +158,96 @@ add_task(async function test_submit_cred
     }
   );
 
   await sleep(1000);
   let creditCards = await getCreditCards();
   is(creditCards.length, 2, "Still 2 credit cards in storage");
   LoginTestUtils.masterPassword.disable();
 });
+
+add_task(async function test_submit_creditCard_with_sync_account() {
+  await SpecialPowers.pushPrefEnv({
+    "set": [
+      [SYNC_USERNAME_PREF, "foo@bar.com"],
+    ],
+  });
+
+  await BrowserTestUtils.withNewTab({gBrowser, url: CREDITCARD_FORM_URL},
+    async function(browser) {
+      let promiseShown = BrowserTestUtils.waitForEvent(PopupNotifications.panel,
+                                                       "popupshown");
+      await ContentTask.spawn(browser, null, async function() {
+        let form = content.document.getElementById("form");
+        let name = form.querySelector("#cc-name");
+        name.focus();
+        name.setUserInput("User 2");
+
+        let number = form.querySelector("#cc-number");
+        number.setUserInput("1234123412341234");
+
+        // Wait 500ms before submission to make sure the input value applied
+        await new Promise(resolve => setTimeout(resolve, 500));
+        form.querySelector("input[type=submit]").click();
+      });
+
+      await promiseShown;
+      let cb = getDoorhangerCheckbox();
+      ok(!cb.hidden, "Sync checkbox should be visible");
+      is(SpecialPowers.getBoolPref(SYNC_CREDITCARDS_PREF), false,
+         "creditCards sync should be disabled by default");
+
+      // Verify if the checkbox and button state is changed.
+      let secondaryButton = getDoorhangerButton(SECONDARY_BUTTON);
+      let menuButton = getDoorhangerButton(MENU_BUTTON);
+      is(cb.checked, false, "Checkbox state should match creditCards sync state");
+      is(secondaryButton.disabled, false, "Not saving button should be enabled");
+      is(menuButton.disabled, false, "Never saving menu button should be enabled");
+      // Click the checkbox to enable credit card sync.
+      cb.click();
+      is(SpecialPowers.getBoolPref(SYNC_CREDITCARDS_PREF), true,
+         "creditCards sync should be enabled after checked");
+      is(secondaryButton.disabled, true, "Not saving button should be disabled");
+      is(menuButton.disabled, true, "Never saving menu button should be disabled");
+      // Click the checkbox again to disable credit card sync.
+      cb.click();
+      is(SpecialPowers.getBoolPref(SYNC_CREDITCARDS_PREF), false,
+         "creditCards sync should be disabled after unchecked");
+      is(secondaryButton.disabled, false, "Not saving button should be enabled again");
+      is(menuButton.disabled, false, "Never saving menu button should be enabled again");
+      await clickDoorhangerButton(MAIN_BUTTON);
+    }
+  );
+});
+
+add_task(async function test_submit_creditCard_with_synced_already() {
+  await SpecialPowers.pushPrefEnv({
+    "set": [
+      [SYNC_CREDITCARDS_PREF, true],
+      [SYNC_USERNAME_PREF, "foo@bar.com"],
+    ],
+  });
+
+  await BrowserTestUtils.withNewTab({gBrowser, url: CREDITCARD_FORM_URL},
+    async function(browser) {
+      let promiseShown = BrowserTestUtils.waitForEvent(PopupNotifications.panel,
+                                                       "popupshown");
+      await ContentTask.spawn(browser, null, async function() {
+        let form = content.document.getElementById("form");
+        let name = form.querySelector("#cc-name");
+        name.focus();
+        name.setUserInput("User 2");
+
+        let number = form.querySelector("#cc-number");
+        number.setUserInput("1234123412341234");
+
+        // Wait 500ms before submission to make sure the input value applied
+        await new Promise(resolve => setTimeout(resolve, 500));
+        form.querySelector("input[type=submit]").click();
+      });
+
+      await promiseShown;
+      let cb = getDoorhangerCheckbox();
+      ok(cb.hidden, "Sync checkbox should be hidden");
+      await clickDoorhangerButton(MAIN_BUTTON);
+    }
+  );
+});

--- a/browser/extensions/formautofill/test/browser/head.js
+++ b/browser/extensions/formautofill/test/browser/head.js
@@ -1,16 +1,17 @@
 /* exported MANAGE_ADDRESSES_DIALOG_URL, MANAGE_CREDIT_CARDS_DIALOG_URL, EDIT_ADDRESS_DIALOG_URL, EDIT_CREDIT_CARD_DIALOG_URL,
             BASE_URL, TEST_ADDRESS_1, TEST_ADDRESS_2, TEST_ADDRESS_3, TEST_ADDRESS_4, TEST_ADDRESS_5,
             TEST_CREDIT_CARD_1, TEST_CREDIT_CARD_2, TEST_CREDIT_CARD_3, FORM_URL, CREDITCARD_FORM_URL,
             FTU_PREF, ENABLED_AUTOFILL_ADDRESSES_PREF, AUTOFILL_CREDITCARDS_AVAILABLE_PREF, ENABLED_AUTOFILL_CREDITCARDS_PREF,
-            SYNC_USERNAME_PREF, SYNC_ADDRESSES_PREF,
+            SYNC_USERNAME_PREF, SYNC_ADDRESSES_PREF, SYNC_CREDITCARDS_PREF,
             sleep, expectPopupOpen, openPopupOn, expectPopupClose, closePopup, clickDoorhangerButton,
             getAddresses, saveAddress, removeAddresses, saveCreditCard,
-            getDisplayedPopupItems, getDoorhangerCheckbox, waitForMasterPasswordDialog */
+            getDisplayedPopupItems, getDoorhangerCheckbox, waitForMasterPasswordDialog,
+            getNotification, getDoorhangerButton */
 
 "use strict";
 
 Cu.import("resource://testing-common/LoginTestUtils.jsm", this);
 
 const MANAGE_ADDRESSES_DIALOG_URL = "chrome://formautofill/content/manageAddresses.xhtml";
 const MANAGE_CREDIT_CARDS_DIALOG_URL = "chrome://formautofill/content/manageCreditCards.xhtml";
 const EDIT_ADDRESS_DIALOG_URL = "chrome://formautofill/content/editAddress.xhtml";
@@ -20,16 +21,17 @@ const FORM_URL = "http://mochi.test:8888
 const CREDITCARD_FORM_URL =
   "http://mochi.test:8888/browser/browser/extensions/formautofill/test/browser/autocomplete_creditcard_basic.html";
 const FTU_PREF = "extensions.formautofill.firstTimeUse";
 const ENABLED_AUTOFILL_ADDRESSES_PREF = "extensions.formautofill.addresses.enabled";
 const AUTOFILL_CREDITCARDS_AVAILABLE_PREF = "extensions.formautofill.creditCards.available";
 const ENABLED_AUTOFILL_CREDITCARDS_PREF = "extensions.formautofill.creditCards.enabled";
 const SYNC_USERNAME_PREF = "services.sync.username";
 const SYNC_ADDRESSES_PREF = "services.sync.engine.addresses";
+const SYNC_CREDITCARDS_PREF = "services.sync.engine.creditcards";
 
 const TEST_ADDRESS_1 = {
   "given-name": "John",
   "additional-name": "R.",
   "family-name": "Smith",
   organization: "World Wide Web Consortium",
   "street-address": "32 Vassar Street\nMIT Room 32-G524",
   "address-level2": "Cambridge",
@@ -243,20 +245,25 @@ async function clickDoorhangerButton(but
     await dropdownPromise;
 
     let actionMenuItem = notification.querySelectorAll("menuitem")[index];
     await EventUtils.synthesizeMouseAtCenter(actionMenuItem, {});
   }
   await popuphidden;
 }
 
+
 function getDoorhangerCheckbox() {
   return getNotification().checkbox;
 }
 
+function getDoorhangerButton(button) {
+  return getNotification()[button];
+}
+
 
 // Wait for the master password dialog to popup and enter the password to log in
 // if "login" is "true" or dismiss it directly if otherwise.
 function waitForMasterPasswordDialog(login = false) {
   let dialogShown = TestUtils.topicObserved("common-dialog-loaded");
   return dialogShown.then(([subject]) => {
     let dialog = subject.Dialog;
     is(dialog.args.title, "Password Required", "Master password dialog shown");