diff --git a/src/components/FormAlertWithSubmitButton.js b/src/components/FormAlertWithSubmitButton.js
index 82cff4bf3838..1e158d63635c 100644
--- a/src/components/FormAlertWithSubmitButton.js
+++ b/src/components/FormAlertWithSubmitButton.js
@@ -1,53 +1,36 @@
-import _ from 'underscore';
 import React from 'react';
-import {View} from 'react-native';
 import PropTypes from 'prop-types';
 import styles from '../styles/styles';
-import Icon from './Icon';
-import * as Expensicons from './Icon/Expensicons';
-import colors from '../styles/colors';
-import compose from '../libs/compose';
 import Button from './Button';
-import withLocalize, {withLocalizePropTypes} from './withLocalize';
-import TextLink from './TextLink';
-import Text from './Text';
-import RenderHTML from './RenderHTML';
-import OfflineIndicator from './OfflineIndicator';
-import networkPropTypes from './networkPropTypes';
-import {withNetwork} from './OnyxProvider';
+import FormAlertWrapper from './FormAlertWrapper';
 
 const propTypes = {
+    /** Text for the button */
+    buttonText: PropTypes.string.isRequired,
+
+    /** Styles for container element */
+    containerStyles: PropTypes.arrayOf(PropTypes.object),
+
     /** Whether to show the alert text */
     isAlertVisible: PropTypes.bool.isRequired,
 
     /** Whether the button is disabled */
     isDisabled: PropTypes.bool,
 
-    /** Submit function */
-    onSubmit: PropTypes.func.isRequired,
-
-    /** Text for the button */
-    buttonText: PropTypes.string.isRequired,
-
-    /** Callback fired when the "fix the errors" link is pressed */
-    onFixTheErrorsLinkPressed: PropTypes.func,
-
-    /** Error message to display above button */
-    message: PropTypes.string,
+    /** Is the button in a loading state */
+    isLoading: PropTypes.bool,
 
     /** Whether message is in html format */
     isMessageHtml: PropTypes.bool,
 
-    /** Styles for container element */
-    containerStyles: PropTypes.arrayOf(PropTypes.object),
-
-    /** Is the button in a loading state */
-    isLoading: PropTypes.bool,
+    /** Error message to display above button */
+    message: PropTypes.string,
 
-    ...withLocalizePropTypes,
+    /** Callback fired when the "fix the errors" link is pressed */
+    onFixTheErrorsPressed: PropTypes.func,
 
-    /** Props to detect online status */
-    network: networkPropTypes.isRequired,
+    /** Submit function */
+    onSubmit: PropTypes.func.isRequired,
 };
 
 const defaultProps = {
@@ -56,74 +39,25 @@ const defaultProps = {
     isMessageHtml: false,
     containerStyles: [],
     isLoading: false,
-    onFixTheErrorsLinkPressed: () => {},
+    onFixTheErrorsPressed: () => {},
 };
 
-const FormAlertWithSubmitButton = (props) => {
-    /**
-     * @returns {React.Component}
-     */
-    function getAlertPrompt() {
-        let error = '';
-
-        if (!_.isEmpty(props.message)) {
-            if (props.isMessageHtml) {
-                error = (
-                    <RenderHTML html={`<muted-text>${props.message}</muted-text>`} />
-                );
-            } else {
-                error = (
-                    <Text style={styles.mutedTextLabel}>{props.message}</Text>
-                );
-            }
-        } else {
-            error = (
-                <>
-                    <Text style={styles.mutedTextLabel}>
-                        {`${props.translate('common.please')} `}
-                    </Text>
-                    <TextLink
-                        style={styles.label}
-                        onPress={props.onFixTheErrorsLinkPressed}
-                    >
-                        {props.translate('common.fixTheErrors')}
-                    </TextLink>
-                    <Text style={styles.mutedTextLabel}>
-                        {` ${props.translate('common.inTheFormBeforeContinuing')}.`}
-                    </Text>
-                </>
-            );
-        }
-
-        return (
-            <View style={[styles.flexRow, styles.ml2, styles.flexWrap, styles.flex1]}>
-                {error}
-            </View>
-        );
-    }
-
-    if (props.network.isOffline) {
-        return (
-            <View style={[styles.mh5, styles.mb5, styles.flex1, styles.justifyContentEnd, ...props.containerStyles]}>
-                <Button
-                    success
-                    isDisabled
-                    text={props.buttonText}
-                    style={[styles.mb3]}
-                />
-                <OfflineIndicator />
-            </View>
-        );
-    }
-
-    return (
-        <View style={[styles.mh5, styles.mb5, styles.flex1, styles.justifyContentEnd, ...props.containerStyles]}>
-            {props.isAlertVisible && (
-                <View style={[styles.flexRow, styles.alignItemsCenter, styles.mb3]}>
-                    <Icon src={Expensicons.Exclamation} fill={colors.red} />
-                    {getAlertPrompt()}
-                </View>
-            )}
+const FormAlertWithSubmitButton = props => (
+    <FormAlertWrapper
+        containerStyles={props.containerStyles}
+        isAlertVisible={props.isAlertVisible}
+        isMessageHtml={props.isMessageHtml}
+        message={props.message}
+        onFixTheErrorsPressed={props.onFixTheErrorsPressed}
+    >
+        {isOffline => (isOffline ? (
+            <Button
+                success
+                isDisabled
+                text={props.buttonText}
+                style={[styles.mb3]}
+            />
+        ) : (
             <Button
                 success
                 pressOnEnter
@@ -132,15 +66,12 @@ const FormAlertWithSubmitButton = (props) => {
                 isDisabled={props.isDisabled}
                 isLoading={props.isLoading}
             />
-        </View>
-    );
-};
+        ))}
+    </FormAlertWrapper>
+);
 
 FormAlertWithSubmitButton.propTypes = propTypes;
 FormAlertWithSubmitButton.defaultProps = defaultProps;
 FormAlertWithSubmitButton.displayName = 'FormAlertWithSubmitButton';
 
-export default compose(
-    withLocalize,
-    withNetwork(),
-)(FormAlertWithSubmitButton);
+export default FormAlertWithSubmitButton;
diff --git a/src/components/FormAlertWrapper.js b/src/components/FormAlertWrapper.js
new file mode 100644
index 000000000000..93b196f1bb6b
--- /dev/null
+++ b/src/components/FormAlertWrapper.js
@@ -0,0 +1,96 @@
+import _ from 'underscore';
+import {View} from 'react-native';
+import PropTypes from 'prop-types';
+import React from 'react';
+import {withNetwork} from './OnyxProvider';
+import Icon from './Icon';
+import * as Expensicons from './Icon/Expensicons';
+import RenderHTML from './RenderHTML';
+import TextLink from './TextLink';
+import Text from './Text';
+import colors from '../styles/colors';
+import compose from '../libs/compose';
+import OfflineIndicator from './OfflineIndicator';
+import networkPropTypes from './networkPropTypes';
+import styles from '../styles/styles';
+import withLocalize, {withLocalizePropTypes} from './withLocalize';
+
+const propTypes = {
+    /** Wrapped child components */
+    children: PropTypes.node.isRequired,
+
+    /** Styles for container element */
+    containerStyles: PropTypes.arrayOf(PropTypes.object),
+
+    /** Whether to show the alert text */
+    isAlertVisible: PropTypes.bool,
+
+    /** Whether message is in html format */
+    isMessageHtml: PropTypes.bool,
+
+    /** Error message to display above button */
+    message: PropTypes.string,
+
+    /** Props to detect online status */
+    network: networkPropTypes.isRequired,
+
+    /** Callback fired when the "fix the errors" link is pressed */
+    onFixTheErrorsPressed: PropTypes.func,
+
+    ...withLocalizePropTypes,
+};
+
+const defaultProps = {
+    containerStyles: [],
+    isAlertVisible: false,
+    isMessageHtml: false,
+    message: '',
+    onFixTheErrorsPressed: () => {},
+};
+
+// The FormAlertWrapper offers a standardized way of showing error messages and offline functionality.
+//
+// This component takes other components as a child prop. It will then render any wrapped components as a function using "render props",
+// and passes it a (bool) isOffline parameter. Child components can then use the isOffline variable to determine offline behavior.
+const FormAlertWrapper = props => (
+    <View style={[styles.mh5, styles.mb5, styles.flex1, styles.justifyContentEnd, ...props.containerStyles]}>
+        {props.isAlertVisible && (
+            <View style={[styles.flexRow, styles.alignItemsCenter, styles.mb3]}>
+                <Icon src={Expensicons.Exclamation} fill={colors.red} />
+                <View style={[styles.flexRow, styles.ml2, styles.flexWrap, styles.flex1]}>
+                    {!_.isEmpty(props.message) && props.isMessageHtml && <RenderHTML html={`<muted-text>${props.message}</muted-text>`} />}
+
+                    {!_.isEmpty(props.message) && !props.isMessageHtml
+                        ? <Text style={styles.mutedTextLabel}>{props.message}</Text>
+                        : (
+                            <>
+                                <Text style={styles.mutedTextLabel}>
+                                    {`${props.translate('common.please')} `}
+                                </Text>
+                                <TextLink
+                                    style={styles.label}
+                                    onPress={props.onFixTheErrorsPressed}
+                                >
+                                    {props.translate('common.fixTheErrors')}
+                                </TextLink>
+                                <Text style={styles.mutedTextLabel}>
+                                    {` ${props.translate('common.inTheFormBeforeContinuing')}.`}
+                                </Text>
+                            </>
+                        )}
+                </View>
+            </View>
+        )}
+        {props.children(props.network.isOffline)}
+        {props.network.isOffline && <OfflineIndicator />}
+    </View>
+);
+
+FormAlertWrapper.propTypes = propTypes;
+FormAlertWrapper.defaultProps = defaultProps;
+FormAlertWrapper.displayName = 'FormAlertWrapper';
+
+export default compose(
+    withLocalize,
+    withNetwork(),
+)(FormAlertWrapper);
diff --git a/src/pages/settings/Payments/PaymentMethodList.js b/src/pages/settings/Payments/PaymentMethodList.js
index 9f1ddd25ea33..716876af7da6 100644
--- a/src/pages/settings/Payments/PaymentMethodList.js
+++ b/src/pages/settings/Payments/PaymentMethodList.js
@@ -15,6 +15,7 @@ import CONST from '../../../CONST';
 import * as Expensicons from '../../../components/Icon/Expensicons';
 import bankAccountPropTypes from '../../../components/bankAccountPropTypes';
 import * as PaymentUtils from '../../../libs/PaymentUtils';
+import FormAlertWrapper from '../../../components/FormAlertWrapper';
 
 const MENU_ITEM = 'menuItem';
 const BUTTON = 'button';
@@ -210,17 +211,21 @@ class PaymentMethodList extends Component {
         }
         if (item.type === BUTTON) {
             return (
-                <Button
-                    text={item.text}
-                    icon={item.icon}
-                    onPress={item.onPress}
-                    isDisabled={item.isDisabled}
-                    style={item.style}
-                    iconStyles={item.iconStyles}
-                    success={item.success}
-                    shouldShowRightIcon={item.shouldShowRightIcon}
-                    extraLarge
-                />
+                <FormAlertWrapper>
+                    {isOffline => (
+                        <Button
+                            text={item.text}
+                            icon={item.icon}
+                            onPress={item.onPress}
+                            isDisabled={item.isDisabled || isOffline}
+                            style={item.style}
+                            iconStyles={item.iconStyles}
+                            success={item.success}
+                            shouldShowRightIcon={item.shouldShowRightIcon}
+                            extraLarge
+                        />
+                    )}
+                </FormAlertWrapper>
             );
         }