diff --git a/src/components/ReportActionItemIOUAction.js b/src/components/ReportActionItemIOUAction.js
index 6921735155af..869539015fcf 100644
--- a/src/components/ReportActionItemIOUAction.js
+++ b/src/components/ReportActionItemIOUAction.js
@@ -6,7 +6,6 @@ import ReportActionItemIOUQuote from './ReportActionItemIOUQuote';
 import ReportActionPropTypes from '../pages/home/report/ReportActionPropTypes';
 import ReportActionItemIOUPreview from './ReportActionItemIOUPreview';
 import Navigation from '../libs/Navigation/Navigation';
-import compose from '../libs/compose';
 import ROUTES from '../ROUTES';
 
 const propTypes = {
@@ -25,25 +24,17 @@ const propTypes = {
         /** The participants of this report */
         participants: PropTypes.arrayOf(PropTypes.string),
     }),
-
-    /** iouReport associated with this iouAction */
-    iouReport: PropTypes.shape({
-        /** Does the iouReport have an outstanding IOU? */
-        hasOutstandingIOU: PropTypes.bool,
-    }),
 };
 
 const defaultProps = {
     chatReport: {
         participants: [],
     },
-    iouReport: {},
 };
 
 const ReportActionItemIOUAction = ({
     action,
     chatReportID,
-    iouReport,
     isMostRecentIOUReportAction,
 }) => {
     const launchDetailsModal = () => {
@@ -56,9 +47,7 @@ const ReportActionItemIOUAction = ({
                 shouldShowViewDetailsLink={Boolean(action.originalMessage.IOUReportID)}
                 onViewDetailsPressed={launchDetailsModal}
             />
-            {isMostRecentIOUReportAction
-            && iouReport.hasOutstandingIOU
-            && Boolean(action.originalMessage.IOUReportID) && (
+            {isMostRecentIOUReportAction && Boolean(action.originalMessage.IOUReportID) && (
                 <ReportActionItemIOUPreview
                     iouReportID={action.originalMessage.IOUReportID}
                     chatReportID={chatReportID}
@@ -73,15 +62,8 @@ ReportActionItemIOUAction.propTypes = propTypes;
 ReportActionItemIOUAction.defaultProps = defaultProps;
 ReportActionItemIOUAction.displayName = 'ReportActionItemIOUAction';
 
-export default compose(
-    withOnyx({
-        chatReport: {
-            key: ({chatReportID}) => `${ONYXKEYS.COLLECTION.REPORT}${chatReportID}`,
-        },
-    }),
-    withOnyx({
-        iouReport: {
-            key: ({chatReport}) => `${ONYXKEYS.COLLECTION.REPORT_IOUS}${chatReport.iouReportID}`,
-        },
-    }),
-)(ReportActionItemIOUAction);
+export default withOnyx({
+    chatReport: {
+        key: ({chatReportID}) => `${ONYXKEYS.COLLECTION.REPORT}${chatReportID}`,
+    },
+})(ReportActionItemIOUAction);
diff --git a/src/components/ReportActionItemIOUPreview.js b/src/components/ReportActionItemIOUPreview.js
index de7b29d04ece..e96236f9f86b 100644
--- a/src/components/ReportActionItemIOUPreview.js
+++ b/src/components/ReportActionItemIOUPreview.js
@@ -18,6 +18,7 @@ import withLocalize, {withLocalizePropTypes} from './withLocalize';
 import {fetchIOUReportByID} from '../libs/actions/Report';
 import themeColors from '../styles/themes/default';
 import Icon from './Icon';
+import CONST from '../CONST';
 import {Checkmark} from './Icon/Expensicons';
 
 const propTypes = {
@@ -82,6 +83,14 @@ const ReportActionItemIOUPreview = ({
     onPayButtonPressed,
     translate,
 }) => {
+    // Usually the parent determines whether the IOU Preview is displayed. But as the iouReport total cannot be known
+    // until it is stored locally, we need to make this check within the Component after retrieving it. This allows us
+    // to handle the loading UI from within this Component instead of needing to declare it within each parent, which
+    // would duplicate and complicate the logic
+    if (iouReport.total === 0) {
+        return null;
+    }
+
     const sessionEmail = lodashGet(session, 'email', null);
     const managerEmail = iouReport.managerEmail || '';
     const ownerEmail = iouReport.ownerEmail || '';
@@ -131,7 +140,9 @@ const ReportActionItemIOUPreview = ({
                                 ? translate('iou.owes', {manager: managerName, owner: ownerName})
                                 : translate('iou.paid', {manager: managerName, owner: ownerName})}
                         </Text>
-                        {(isCurrentUserManager && !shouldHidePayButton && (
+                        {(isCurrentUserManager
+                            && !shouldHidePayButton
+                            && iouReport.stateNum === CONST.REPORT.STATE_NUM.PROCESSING && (
                             <TouchableOpacity
                                 style={[styles.buttonSmall, styles.buttonSuccess, styles.mt4]}
                                 onPress={onPayButtonPressed}
diff --git a/src/pages/iou/IOUDetailsModal.js b/src/pages/iou/IOUDetailsModal.js
index c0e8548fc724..5b00f2aa5556 100644
--- a/src/pages/iou/IOUDetailsModal.js
+++ b/src/pages/iou/IOUDetailsModal.js
@@ -211,14 +211,12 @@ class IOUDetailsModal extends Component {
                 {reportIsLoading ? <ActivityIndicator color={themeColors.text} /> : (
                     <View style={[styles.flex1, styles.justifyContentBetween]}>
                         <ScrollView contentContainerStyle={styles.iouDetailsContainer}>
-                            {(this.props.iouReport.hasOutstandingIOU) && (
-                                <ReportActionItemIOUPreview
-                                    iou={this.props.iouReport}
-                                    chatReportID={Number(this.props.route.params.chatReportID)}
-                                    iouReportID={Number(this.props.route.params.iouReportID)}
-                                    shouldHidePayButton
-                                />
-                            )}
+                            <ReportActionItemIOUPreview
+                                iou={this.props.iouReport}
+                                chatReportID={Number(this.props.route.params.chatReportID)}
+                                iouReportID={Number(this.props.route.params.iouReportID)}
+                                shouldHidePayButton
+                            />
                             <IOUTransactions
                                 chatReportID={Number(this.props.route.params.chatReportID)}
                                 iouReportID={Number(this.props.route.params.iouReportID)}