Settings People Revamp: Add Payments integration to new Sync Settings.

chrome/browser/resources/settings/people_page/sync_page.html

 <link rel="import" href="chrome://resources/html/i18n_behavior.html">
 <link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="chrome://resources/html/web_ui_listener_behavior.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/iron-pages/iron-pages.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-checkbox/paper-checkbox.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-dropdown-menu/paper-dropdown-menu.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-input/paper-input.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-radio-button/paper-radio-button.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-radio-group/paper-radio-group.html">
@@ skipping 30 matching lines @@
         </div>
 
         <div class="list-frame">
           <paper-checkbox checked="{{syncPrefs.appsSynced}}"
               on-change="onSingleSyncDataTypeChanged_" class="list-item"
               hidden="[[!syncPrefs.appsRegistered]]"
               disabled="[[shouldSyncCheckboxBeDisabled_(
                   syncPrefs.syncAllDataTypes, syncPrefs.appsEnforced)]]">
             $i18n{appCheckboxLabel}
           </paper-checkbox>
+
+          <!-- Autofill has a special on-change handler to deal with
+               Payments integriation. -->
           <paper-checkbox checked="{{syncPrefs.autofillSynced}}"
-              on-change="onSingleSyncDataTypeChanged_" class="list-item"
+              on-change="onAutofillDataTypeChanged_" class="list-item"
               hidden="[[!syncPrefs.autofillRegistered]]"
               disabled="[[shouldSyncCheckboxBeDisabled_(
                   syncPrefs.syncAllDataTypes, syncPrefs.autofillEnforced)]]">
             $i18n{autofillCheckboxLabel}
           </paper-checkbox>
+
           <paper-checkbox checked="{{syncPrefs.bookmarksSynced}}"
               on-change="onSingleSyncDataTypeChanged_" class="list-item"
               hidden="[[!syncPrefs.bookmarksRegistered]]"
               disabled="[[shouldSyncCheckboxBeDisabled_(
                   syncPrefs.syncAllDataTypes, syncPrefs.bookmarksEnforced)]]">
             $i18n{bookmarksCheckboxLabel}
           </paper-checkbox>
           <paper-checkbox checked="{{syncPrefs.extensionsSynced}}"
               on-change="onSingleSyncDataTypeChanged_" class="list-item"
               hidden="[[!syncPrefs.extensionsRegistered]]"
@@ skipping 29 matching lines @@
                   syncPrefs.syncAllDataTypes, syncPrefs.themesEnforced)]]">
             $i18n{themesAndWallpapersCheckboxLabel}
           </paper-checkbox>
           <paper-checkbox checked="{{syncPrefs.tabsSynced}}"
               on-change="onSingleSyncDataTypeChanged_" class="list-item"
               hidden="[[!syncPrefs.tabsRegistered]]"
               disabled="[[shouldSyncCheckboxBeDisabled_(
                   syncPrefs.syncAllDataTypes, syncPrefs.tabsEnforced)]]">
             $i18n{openTabsCheckboxLabel}
           </paper-checkbox>
+
+          <!-- The Payments integration checkbox is a special case in many ways.
+               It's visible only if autofill is registered. It's disabled and
+               unchecked if autofill is unchecked.-->
+          <paper-checkbox checked="{{syncPrefs.paymentsIntegrationEnabled}}"
+              on-change="onSingleSyncDataTypeChanged_" class="list-item"
+              hidden="[[!syncPrefs.autofillRegistered]]"
+              disabled="[[shouldPaymentsCheckboxBeDisabled_(
+                  syncPrefs.syncAllDataTypes, syncPrefs.autofillSynced)]]">
+            $i18n{enablePaymentsIntegrationCheckboxLabel}
+            <a href="$i18nRaw{autofillHelpURL}" target="_blank">
+              $i18n{learnMore}
+            </a>
+          </paper-checkbox>
         </div>
 
         <div class="settings-box two-line" on-tap="onManageSyncedDataTap_">
           <div class="start">
             $i18n{manageSyncedDataTitle}
             <div class="secondary">
               $i18n{manageSyncedDataDescription}
             </div>
           </div>
         </div>
@@ skipping 64 matching lines @@
                 on-tap="onSubmitExistingPassphraseTap_" class="action-button">
               $i18n{submitPassphraseButton}
             </paper-button>
           </div>
         </template>
       </div>
     </iron-pages>
   </template>
   <script src="sync_page.js"></script>
 </dom-module>