diff --git a/assets/js/src/settings/premium_tab/messages/mss_messages.jsx b/assets/js/src/settings/premium_tab/messages/mss_messages.jsx
new file mode 100644
index 0000000000..2e3e7744a9
--- /dev/null
+++ b/assets/js/src/settings/premium_tab/messages/mss_messages.jsx
@@ -0,0 +1,33 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import MailPoet from 'mailpoet';
+
+const validMessage = (
+  <div className="mailpoet_success">
+    {MailPoet.I18n.t('premiumTabMssValidMessage')}
+  </div>
+);
+
+const notValidMessage = (message) => (
+  <div className="mailpoet_error">
+    {message || MailPoet.I18n.t('premiumTabMssNotValidMessage')}
+  </div>
+);
+
+const MssMessages = (props) => {
+  if (props.keyValid) {
+    return validMessage;
+  }
+  return notValidMessage(props.keyMessage);
+};
+
+MssMessages.propTypes = {
+  keyValid: PropTypes.bool.isRequired,
+  keyMessage: PropTypes.string,
+};
+
+MssMessages.defaultProps = {
+  keyMessage: null,
+};
+
+export default MssMessages;
diff --git a/assets/js/src/settings/premium_tab/messages/premium_messages.jsx b/assets/js/src/settings/premium_tab/messages/premium_messages.jsx
new file mode 100644
index 0000000000..6d8f5b1e85
--- /dev/null
+++ b/assets/js/src/settings/premium_tab/messages/premium_messages.jsx
@@ -0,0 +1,33 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import MailPoet from 'mailpoet';
+
+const validMessage = (
+  <div className="mailpoet_success">
+    {MailPoet.I18n.t('premiumTabPremiumValidMessage')}
+  </div>
+);
+
+const notValidMessage = (message) => (
+  <div className="mailpoet_error">
+    {message || MailPoet.I18n.t('premiumTabPremiumNotValidMessage')}
+  </div>
+);
+
+const PremiumMessages = (props) => {
+  if (props.keyValid) {
+    return validMessage;
+  }
+  return notValidMessage(props.keyMessage);
+};
+
+PremiumMessages.propTypes = {
+  keyValid: PropTypes.bool.isRequired,
+  keyMessage: PropTypes.string,
+};
+
+PremiumMessages.defaultProps = {
+  keyMessage: null,
+};
+
+export default PremiumMessages;
diff --git a/assets/js/src/settings/premium_tab/premium_tab.jsx b/assets/js/src/settings/premium_tab/premium_tab.jsx
new file mode 100644
index 0000000000..9e5c01470c
--- /dev/null
+++ b/assets/js/src/settings/premium_tab/premium_tab.jsx
@@ -0,0 +1,144 @@
+import PropTypes from 'prop-types';
+import React, { useState } from 'react';
+import ReactDOM from 'react-dom';
+import MailPoet from 'mailpoet';
+import PremiumMessages from 'settings/premium_tab/messages/premium_messages.jsx';
+import MssMessages from 'settings/premium_tab/messages/mss_messages.jsx';
+
+const requestServicesApi = async (key, action) => MailPoet.Ajax.post({
+  api_version: window.mailpoet_api_version,
+  endpoint: 'services',
+  action,
+  data: { key },
+});
+
+const PremiumTab = (props) => {
+  const [key, setKey] = useState(props.activationKey);
+  const [premiumKeyValid, setPremiumKeyValid] = useState(key ? props.premiumKeyValid : null);
+  const [mssKeyValid, setMssKeyValid] = useState(key ? props.mssKeyValid : null);
+  const [premiumKeyMessage, setPremiumKeyMessage] = useState(null);
+  const [mssKeyMessage, setMssKeyMessage] = useState(null);
+
+  const verifyMailPoetPremiumKey = async () => {
+    try {
+      const response = await requestServicesApi(key, 'checkPremiumKey');
+      setPremiumKeyMessage(null);
+      MailPoet.trackEvent(
+        'User has validated a Premium key',
+        {
+          'MailPoet Free version': window.mailpoet_version,
+          'Premium plugin is active': response.meta.premium_plugin_active,
+        }
+      );
+    } catch (error) {
+      setPremiumKeyValid(false);
+      setPremiumKeyMessage(error.errors.map((e) => e.message).join(' ') || null);
+      MailPoet.trackEvent(
+        'User has failed to validate a Premium key',
+        {
+          'MailPoet Free version': window.mailpoet_version,
+          'Premium plugin is active': props.premiumPluginActive,
+        }
+      );
+    }
+  };
+
+  async function verifyMailPoetSendingServiceKey() {
+    try {
+      const response = await requestServicesApi(key, 'checkMSSKey');
+      setMssKeyValid(true);
+      setMssKeyMessage(response.data.message || null);
+    } catch (error) {
+      setMssKeyValid(false);
+      setMssKeyMessage(error.errors.map((e) => e.message).join(' ') || null);
+    }
+    window.updateMSSActivationUI();
+  }
+
+  return (
+    <table className="form-table">
+      <tbody>
+        <tr>
+          <th scope="row">
+            <label htmlFor="mailpoet_premium_key">
+              {MailPoet.I18n.t('premiumTabActivationKeyLabel')}
+            </label>
+            <p className="description">
+              {MailPoet.I18n.t('premiumTabDescription')}
+            </p>
+          </th>
+          <td>
+            <div>
+              <input
+                type="text"
+                id="mailpoet_premium_key"
+                className="regular-text"
+                name="premium[premium_key]"
+                value={key || ''}
+                onChange={(event) => setKey(event.target.value.trim() || null)}
+              />
+              {' '}
+              <button
+                type="button"
+                id="mailpoet_premium_key_verify"
+                className="button-secondary"
+                onClick={async () => {
+                  if (!key) {
+                    MailPoet.Notice.error(
+                      MailPoet.I18n.t('premiumTabNoKeyNotice'),
+                      { scroll: true },
+                    );
+                    return;
+                  }
+
+                  MailPoet.Modal.loading(true);
+                  await verifyMailPoetPremiumKey();
+                  await verifyMailPoetSendingServiceKey();
+                  MailPoet.Modal.loading(false);
+                }}
+              >
+                {MailPoet.I18n.t('premiumTabVerifyButton')}
+              </button>
+            </div>
+            {premiumKeyValid !== null && (
+              <PremiumMessages
+                keyValid={premiumKeyValid}
+                keyMessage={premiumKeyMessage}
+              />
+            )}
+            {mssKeyValid !== null && (
+              <MssMessages
+                keyValid={mssKeyValid}
+                keyMessage={mssKeyMessage}
+              />
+            )}
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  );
+};
+
+PremiumTab.propTypes = {
+  activationKey: PropTypes.string,
+  premiumKeyValid: PropTypes.bool.isRequired,
+  mssKeyValid: PropTypes.bool.isRequired,
+  premiumPluginActive: PropTypes.bool.isRequired,
+};
+
+PremiumTab.defaultProps = {
+  activationKey: null,
+};
+
+const container = document.getElementById('settings-premium-tab');
+if (container) {
+  ReactDOM.render(
+    <PremiumTab
+      activationKey={window.mailpoet_activation_key}
+      premiumKeyValid={window.mailpoet_premium_key_valid}
+      mssKeyValid={window.mailpoet_mss_key_valid}
+      premiumPluginActive={!!window.mailpoet_premium_version}
+    />,
+    container
+  );
+}
diff --git a/assets/js/src/webpack_admin_index.jsx b/assets/js/src/webpack_admin_index.jsx
index cad76783e4..021761aad3 100644
--- a/assets/js/src/webpack_admin_index.jsx
+++ b/assets/js/src/webpack_admin_index.jsx
@@ -12,6 +12,7 @@ import 'dynamic_segments/dynamic_segments.jsx'; // side effect - renders ReactDO
 import 'settings/settings.jsx'; // side effect - renders ReactDOM to document
 import 'forms/forms.jsx'; // side effect - renders ReactDOM to document
 import 'settings/tabs.js'; // side effect - assigns to MailPoet.Router, executes code on doc ready
+import 'settings/premium_tab/premium_tab.jsx'; // side effect - renders ReactDOM to document
 import 'help/help.jsx'; // side effect - renders ReactDOM to document
 import 'poll.jsx'; // side effect - assigns to MailPoet.Poll
 import 'settings/reinstall_from_scratch.js'; // side effect - adds event handler to document
diff --git a/views/settings.html b/views/settings.html
index 39fb9dc3ab..37d39edb3b 100644
--- a/views/settings.html
+++ b/views/settings.html
@@ -297,5 +297,14 @@
     'yourName': __('Your name'),
     'from': __('From'),
     'replyTo': __('Reply-to'),
+
+    'premiumTabActivationKeyLabel': __('Activation Key', 'mailpoet'),
+    'premiumTabDescription': __('This key is used to validate your free or paid subscription. Paying customers will enjoy automatic upgrades of their Premium plugin and access to faster support.', 'mailpoet'),
+    'premiumTabNoKeyNotice': __('Please specify a license key before validating it.', 'mailpoet'),
+    'premiumTabVerifyButton': __('Verify', 'mailpoet'),
+    'premiumTabPremiumValidMessage': __('Your Premium key has been successfully validated.', 'mailpoet'),
+    'premiumTabPremiumNotValidMessage': __('Your key is not valid for the Premium plugin.', 'mailpoet'),
+    'premiumTabMssValidMessage': __('Your MailPoet Sending Service key has been successfully validated.', 'mailpoet'),
+    'premiumTabMssNotValidMessage': __('Your key is not valid for the MailPoet Sending Service.', 'mailpoet'),
   }) %>
 <% endblock %>
diff --git a/views/settings/premium.html b/views/settings/premium.html
index 62712dbf61..786ea4b567 100644
--- a/views/settings/premium.html
+++ b/views/settings/premium.html
@@ -1,217 +1,9 @@
-<table class="form-table">
-  <tbody>
-    <!-- premium key -->
-    <tr>
-      <th scope="row">
-        <label for="mailpoet_premium_key">
-          <%= __('Activation Key') %>
-        </label>
-        <p class="description">
-          <%= __('This key is used to validate your free or paid subscription. Paying customers will enjoy automatic upgrades of their Premium plugin and access to faster support.') %>
-        </p>
-      </th>
-      <td>
-        <div>
-          <input
-            type="text"
-            class="regular-text"
-            id="mailpoet_premium_key"
-            name="premium[premium_key]"
-            value="<%=- settings.premium.premium_key | default(settings.mta.mailpoet_api_key) -%>"
-          />
-          <a
-            id="mailpoet_premium_key_verify"
-            class="button-secondary"
-          ><%= __('Verify') %></a>
-        </div>
-        <div
-          class="mailpoet_premium_key_valid mailpoet_success_item mailpoet_success<% if not(settings.premium.premium_key) or not(premium_key_valid) %> mailpoet_hidden<% endif %>"
-        >
-          <%= __('Your Premium key has been successfully validated.') %>
-        </div>
-        <div
-          class="mailpoet_premium_key_invalid mailpoet_error_item mailpoet_error<% if not(settings.premium.premium_key) or premium_key_valid %> mailpoet_hidden<% endif %>"
-        >
-          <%= __('Your key is not valid for the Premium plugin.') %>
-        </div>
-        <div
-          class="mailpoet_mss_key_valid mailpoet_success_item mailpoet_success<% if not(settings.mta.mailpoet_api_key) or not(mss_key_valid) %> mailpoet_hidden<% endif %>"
-        >
-          <%= __('Your MailPoet Sending Service key has been successfully validated.') %>
-        </div>
-        <div
-          class="mailpoet_mss_key_invalid mailpoet_error_item mailpoet_error<% if not(settings.mta.mailpoet_api_key) or mss_key_valid %> mailpoet_hidden<% endif %>"
-        >
-          <%= __('Your key is not valid for the MailPoet Sending Service.') %>
-        </div>
-        <div
-          class="mailpoet_premium_download mailpoet_spaced_block"
-          <% if premium_plugin_installed or not(premium_key_valid) %>
-            style="display: none;"
-          <% endif %>
-        >
-          <a
-            class="mailpoet_premium_install_link button-primary"
-            href="<%= premium_install_url | default('#') %>"
-          ><%= __('Install Premium now.') %>
-          </a>
-          <span>
-            <%= __('[link]Read guide[/link] on how to install Premium.')
-              |replaceLinkTags('https://kb.mailpoet.com/article/194-instructions-to-install-the-premium-plugin', {'target': '_blank', 'data-beacon-article': '59020a2d2c7d3a057f889e8f'})
-              |raw
-            %>
-           </span>
-        </div>
-        <div
-          class="mailpoet_premium_activate mailpoet_spaced_block"
-          <% if not(premium_plugin_installed) or premium_plugin_active or not(premium_key_valid) %>
-            style="display: none;"
-          <% endif %>
-        >
-          <span><%= __('You need to activate the MailPoet Premium plugin.') %></span>
-          <a
-            class="mailpoet_premium_activate_link button-primary"
-            href="<%= premium_activate_url | default('#') %>"
-          ><%= __('Activate Premium.') %></a>
-        </div>
-        <div
-          class="mailpoet_mss_activate_notice mailpoet_spaced_block"
-          <% if mss_active or not(mss_key_valid) %>
-            style="display: none;"
-          <% endif %>
-        >
-          <span>
-            <%= __("Don't forget to activate the MailPoet Sending Service in the [link]Send with...[/link] tab above.")
-              |replaceLinkTags('#mta')
-              |raw
-            %>
-          </span>
-        </div>
-      </td>
-    </tr>
-  </tbody>
-</table>
-
 <script type="text/javascript">
-  jQuery(function($) {
-    $(function() {
-      // verifying license key
-      $('#mailpoet_premium_key_verify').on('click', function () {
-        // get license key
-        var key = $('#mailpoet_premium_key').val();
-
-        if(key.length === 0) {
-          // validation
-          return MailPoet.Notice.error(
-            '<%= __('Please specify a license key before validating it.') | escape('js') %>',
-            { scroll: true }
-          );
-        }
-
-        MailPoet.Modal.loading(true);
-
-        var promise1 = verifyMailPoetPremiumKey(key);
-        var promise2 = verifyMailPoetSendingServiceKey(key);
-
-        // wait until both requests are completed before hiding the loading modal
-        promise1.always(function() {
-          promise2.always(function() {
-            MailPoet.Modal.loading(false);
-          });
-        });
-      });
-
-      function verifyMailPoetPremiumKey(key) {
-        $('.mailpoet_premium_key_valid, .mailpoet_premium_key_invalid').addClass('mailpoet_hidden');
-        $('.mailpoet_premium_download, .mailpoet_premium_activate').hide();
-
-        return MailPoet.Ajax.post({
-          api_version: window.mailpoet_api_version,
-          endpoint: 'services',
-          action: 'checkPremiumKey',
-          data: {
-            key: key
-          }
-        }).done(function(response) {
-          // Hide server error notices
-          $('.mailpoet_notice_server').hide();
-          $('.mailpoet_premium_key_valid').text(response.data.message);
-          $('.mailpoet_premium_key_valid').removeClass('mailpoet_hidden');
-          if (!response.meta.premium_plugin_installed) {
-            $('.mailpoet_premium_install_link')
-              .attr('href', response.meta.premium_install_url || '#');
-            $('.mailpoet_premium_download').show();
-          } else if (!response.meta.premium_plugin_active) {
-            $('.mailpoet_premium_activate_link')
-              .attr('href', response.meta.premium_activate_url || '#');
-            $('.mailpoet_premium_activate').show();
-          }
-          MailPoet.trackEvent(
-            'User has validated a Premium key',
-            {
-              'MailPoet Free version': window.mailpoet_version,
-              'Premium plugin is active': response.meta.premium_plugin_active
-            }
-          );
-        }).fail(function(response) {
-          if (response.errors.length > 0) {
-            $('.mailpoet_premium_key_invalid').text(
-              response.errors.map(function(error) { return error.message; }).join(' ')
-            );
-            $('.mailpoet_premium_key_invalid').removeClass('mailpoet_hidden');
-          }
-          MailPoet.trackEvent(
-            'User has failed to validate a Premium key',
-            {
-              'MailPoet Free version': window.mailpoet_version,
-              'Premium plugin is active': !!window.mailpoet_premium_version
-            }
-          );
-        });
-      }
-
-      function verifyMailPoetSendingServiceKey(key) {
-        $('.mailpoet_mss_key_valid, .mailpoet_mss_key_invalid').addClass('mailpoet_hidden');
-        $('.mailpoet_mss_activate_notice').hide();
-
-        return MailPoet.Ajax.post({
-          api_version: window.mailpoet_api_version,
-          endpoint: 'services',
-          action: 'checkMSSKey',
-          data: {
-            key: key
-          }
-        }).done(function(response) {
-          // Hide server error notices
-          $('.mailpoet_notice_server').hide();
-          $('.mailpoet_mss_key_valid').text(response.data.message);
-          $('.mailpoet_mss_key_valid').removeClass('mailpoet_hidden');
-          updateMSSActivationUI();
-        }).fail(function(response) {
-          if (response.errors.length > 0) {
-            $('.mailpoet_mss_key_invalid').text(
-              response.errors.map(function(error) { return error.message; }).join(' ')
-            );
-            $('.mailpoet_mss_key_invalid').removeClass('mailpoet_hidden');
-            updateMSSActivationUI();
-          }
-        });
-      }
-
-      $('.mailpoet_premium_install_link').on('click', function() {
-        MailPoet.trackEvent(
-          'User has installed the Premium plugin from Settings',
-          {'MailPoet Free version': window.mailpoet_version}
-        );
-      });
-
-      $('.mailpoet_premium_activate_link').on('click', function() {
-        MailPoet.trackEvent(
-          'User has activated the Premium plugin from Settings',
-          {'MailPoet Free version': window.mailpoet_version}
-        );
-      });
-
-    });
-  });
+  <% autoescape 'js' %>
+    var mailpoet_activation_key = <%= json_encode(settings.premium.premium_key ?: settings.mta.mailpoet_api_key) %>;
+    var mailpoet_premium_key_valid = <%= json_encode(premium_key_valid) %>;
+    var mailpoet_mss_key_valid = <%= json_encode(mss_key_valid) %>;
+  <% endautoescape %>
 </script>
+
+<div id="settings-premium-tab"></div>