diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/InputSettingsBlock.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/InputSettingsBlock.js
index dbea5589c..7407ce6d8 100644
--- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/InputSettingsBlock.js
+++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/InputSettingsBlock.js
@@ -8,13 +8,14 @@ const InputSettingsBlock = ( {
 	description,
 	supplementaryLabel,
 	showDescriptionFirst = false,
-	actionProps = {},
-	...props
+	value,
+	onChange,
+	placeholder = '',
 } ) => {
 	const TheDescription = <Description>{ description }</Description>;
 
 	return (
-		<SettingsBlock { ...props } className="ppcp-r-settings-block__input">
+		<SettingsBlock className="ppcp-r-settings-block__input">
 			<Title>
 				{ title }
 				{ supplementaryLabel && (
@@ -27,11 +28,9 @@ const InputSettingsBlock = ( {
 			<Action>
 				<TextControl
 					className="ppcp-r-vertical-text-control"
-					placeholder={ actionProps.placeholder }
-					value={ actionProps.value }
-					onChange={ ( newValue ) =>
-						actionProps.callback( actionProps.key, newValue )
-					}
+					placeholder={ placeholder }
+					value={ value }
+					onChange={ onChange }
 				/>
 			</Action>
 			{ ! showDescriptionFirst && TheDescription }
diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/ConnectionDetails.js b/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/ConnectionDetails.js
index 33393284b..144f9a55b 100644
--- a/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/ConnectionDetails.js
+++ b/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/ConnectionDetails.js
@@ -82,27 +82,23 @@ const generateOptions = ( config, settings, updateFormValue ) => [
 			<>
 				<InputSettingsBlock
 					title={ config.clientIdTitle }
-					actionProps={ {
-						value: settings[ `${ config.mode }ClientId` ],
-						callback: updateFormValue,
-						key: `${ config.mode }ClientId`,
-						placeholder: __(
-							'Enter Client ID',
-							'woocommerce-paypal-payments'
-						),
-					} }
+					// Input field props.
+					value={ settings[ `${ config.mode }ClientId` ] }
+					onChange={ updateFormValue }
+					placeholder={ __(
+						'Enter Client ID',
+						'woocommerce-paypal-payments'
+					) }
 				/>
 				<InputSettingsBlock
 					title={ config.secretKeyTitle }
-					actionProps={ {
-						value: settings[ `${ config.mode }SecretKey` ],
-						callback: updateFormValue,
-						key: `${ config.mode }SecretKey`,
-						placeholder: __(
-							'Enter Secret Key',
-							'woocommerce-paypal-payments'
-						),
-					} }
+					// Input field props.
+					value={ settings[ `${ config.mode }SecretKey` ] }
+					onChange={ updateFormValue }
+					placeholder={ __(
+						'Enter Secret Key',
+						'woocommerce-paypal-payments'
+					) }
 				/>
 				<Button
 					variant="primary"
diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/PaypalSettings.js b/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/PaypalSettings.js
index bc6ffc8c8..25b97b1ea 100644
--- a/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/PaypalSettings.js
+++ b/modules/ppcp-settings/resources/js/Components/Screens/Overview/TabSettingsElements/Blocks/PaypalSettings.js
@@ -88,15 +88,13 @@ const PaypalSettings = ( { updateFormValue, settings } ) => {
 					'woocommerce-paypal-payments'
 				) }
 				showDescriptionFirst={ true }
-				actionProps={ {
-					value: settings.brandName,
-					callback: updateFormValue,
-					key: 'brandName',
-					placeholder: __(
-						'Brand name',
-						'woocommerce-paypal-payments'
-					),
-				} }
+				// Input field props.
+				value={ settings.brandName }
+				onChange={ updateFormValue }
+				placeholder={ __(
+					'Brand name',
+					'woocommerce-paypal-payments'
+				) }
 			/>
 
 			<InputSettingsBlock
@@ -106,15 +104,13 @@ const PaypalSettings = ( { updateFormValue, settings } ) => {
 					'woocommerce-paypal-payments'
 				) }
 				showDescriptionFirst={ true }
-				actionProps={ {
-					value: settings.softDescriptor,
-					callback: updateFormValue,
-					key: 'softDescriptor',
-					placeholder: __(
-						'Soft Descriptor',
-						'woocommerce-paypal-payments'
-					),
-				} }
+				// Input field props.
+				value={ settings.softDescriptor }
+				onChange={ updateFormValue }
+				placeholder={ __(
+					'Soft Descriptor',
+					'woocommerce-paypal-payments'
+				) }
 			/>
 
 			<RadioSettingsBlock
diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Settings/Blocks/InvoicePrefix.js b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Settings/Blocks/InvoicePrefix.js
index 5c50e9490..8e5c76fd0 100644
--- a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Settings/Blocks/InvoicePrefix.js
+++ b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Settings/Blocks/InvoicePrefix.js
@@ -13,15 +13,10 @@ const InvoicePrefix = () => {
 				'woocommerce-paypal-payments'
 			) }
 			description="Add a unique prefix to invoice numbers for site-specific tracking (recommended)."
-			actionProps={ {
-				key: 'invoicePrefix',
-				callback: setInvoicePrefix,
-				value: invoicePrefix,
-				placeholder: __(
-					'Input prefix',
-					'woocommerce-paypal-payments'
-				),
-			} }
+			// Input field props.
+			placeholder={ __( 'Input prefix', 'woocommerce-paypal-payments' ) }
+			onChange={ setInvoicePrefix }
+			value={ invoicePrefix }
 		/>
 	);
 };