diff --git a/src/pages/settings/Subscription/CardSection/CardSection.tsx b/src/pages/settings/Subscription/CardSection/CardSection.tsx
index cd2e3a3cf4f0..2ccf183ab2b9 100644
--- a/src/pages/settings/Subscription/CardSection/CardSection.tsx
+++ b/src/pages/settings/Subscription/CardSection/CardSection.tsx
@@ -1,6 +1,5 @@
 import React, {useCallback, useEffect, useMemo, useState} from 'react';
 import {View} from 'react-native';
-import Button from '@components/Button';
 import ConfirmModal from '@components/ConfirmModal';
 import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
@@ -33,6 +32,7 @@ import SubscriptionBillingBanner from './BillingBanner/SubscriptionBillingBanner
 import TrialEndedBillingBanner from './BillingBanner/TrialEndedBillingBanner';
 import TrialStartedBillingBanner from './BillingBanner/TrialStartedBillingBanner';
 import CardSectionActions from './CardSectionActions';
+import CardSectionButton from './CardSectionButton';
 import CardSectionDataEmpty from './CardSectionDataEmpty';
 import RequestEarlyCancellationMenuItem from './RequestEarlyCancellationMenuItem';
 import type {BillingStatusResult} from './utils';
@@ -175,7 +175,7 @@ function CardSection() {
 
                 <View style={styles.mb3}>{isEmptyObject(defaultCard?.accountData) && <CardSectionDataEmpty />}</View>
                 {billingStatus?.isRetryAvailable !== undefined && (
-                    <Button
+                    <CardSectionButton
                         text={translate('subscription.cardSection.retryPaymentButton')}
                         isDisabled={isOffline || !billingStatus?.isRetryAvailable}
                         isLoading={subscriptionRetryBillingStatusPending}
@@ -185,7 +185,7 @@ function CardSection() {
                     />
                 )}
                 {hasCardAuthenticatedError() && (
-                    <Button
+                    <CardSectionButton
                         text={translate('subscription.cardSection.authenticatePayment')}
                         isDisabled={isOffline || !billingStatus?.isAuthenticationRequired}
                         isLoading={subscriptionRetryBillingStatusPending}
diff --git a/src/pages/settings/Subscription/CardSection/CardSectionButton/index.native.tsx b/src/pages/settings/Subscription/CardSection/CardSectionButton/index.native.tsx
new file mode 100644
index 000000000000..d17d9dd8832b
--- /dev/null
+++ b/src/pages/settings/Subscription/CardSection/CardSectionButton/index.native.tsx
@@ -0,0 +1,8 @@
+import type {ButtonProps} from '@components/Button';
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function CardSectionButton(_props: ButtonProps) {
+    return null;
+}
+
+export default CardSectionButton;
diff --git a/src/pages/settings/Subscription/CardSection/CardSectionButton/index.tsx b/src/pages/settings/Subscription/CardSection/CardSectionButton/index.tsx
new file mode 100644
index 000000000000..834305243d68
--- /dev/null
+++ b/src/pages/settings/Subscription/CardSection/CardSectionButton/index.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import type {ButtonProps} from '@components/Button';
+import Button from '@components/Button';
+
+function CardSectionButton(props: ButtonProps) {
+    // eslint-disable-next-line react/jsx-props-no-spreading
+    return <Button {...props} />;
+}
+
+export default CardSectionButton;