diff --git a/changelog/dev-migrate-affirm-afterpay-components-to-ts b/changelog/dev-migrate-affirm-afterpay-components-to-ts
new file mode 100644
index 00000000000..d60541e795d
--- /dev/null
+++ b/changelog/dev-migrate-affirm-afterpay-components-to-ts
@@ -0,0 +1,4 @@
+Significance: minor
+Type: dev
+
+Migrate Affirm and Afterpay payment method components to TypeScript.
diff --git a/client/payment-details/payment-method/affirm/index.js b/client/payment-details/payment-method/affirm/index.tsx
similarity index 63%
rename from client/payment-details/payment-method/affirm/index.js
rename to client/payment-details/payment-method/affirm/index.tsx
index b53a55a0168..4f9fae7f73f 100644
--- a/client/payment-details/payment-method/affirm/index.js
+++ b/client/payment-details/payment-method/affirm/index.tsx
@@ -4,21 +4,23 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
+import React from 'react';
 
 /**
  * Internal dependencies.
  */
 import Detail from '../detail';
+import { PaymentMethodDetails } from 'wcpay/payment-details/types';
+import { Charge } from 'wcpay/types/charges';
 
 /**
  * Extracts and formats payment method details from a charge.
  *
- * @param {Object} charge The charge object.
- * @return {Object}       A flat hash of all necessary values.
+ * @param {Charge} charge The charge object.
+ * @return {PaymentMethodDetails} A flat hash of all necessary values.
  */
-const formatPaymentMethodDetails = ( charge ) => {
+const formatPaymentMethodDetails = ( charge: Charge ): PaymentMethodDetails => {
 	const { billing_details: billingDetails, payment_method: id } = charge;
-
 	const { name, email, formatted_address: formattedAddress } = billingDetails;
 
 	return {
@@ -32,20 +34,36 @@ const formatPaymentMethodDetails = ( charge ) => {
 /**
  * Placeholders to display while loading.
  */
-const paymentMethodPlaceholders = {
+const paymentMethodPlaceholders: PaymentMethodDetails = {
 	id: 'id placeholder',
 	name: 'name placeholder',
 	email: 'email placeholder',
 	formattedAddress: 'address placeholder',
 };
 
-const CardDetails = ( { charge = {}, isLoading } ) => {
-	const details =
+/**
+ * Props interface for AffirmDetails component
+ */
+interface AffirmDetailsProps {
+	charge?: Charge;
+	isLoading: boolean;
+}
+
+const AffirmDetails: React.FC< AffirmDetailsProps > = ( {
+	charge,
+	isLoading,
+} ) => {
+	const details: PaymentMethodDetails | typeof paymentMethodPlaceholders =
 		charge && charge.payment_method_details
 			? formatPaymentMethodDetails( charge )
 			: paymentMethodPlaceholders;
 
-	const { id, name, email, formattedAddress } = details;
+	const {
+		id,
+		name,
+		email,
+		formattedAddress,
+	}: PaymentMethodDetails | typeof paymentMethodPlaceholders = details;
 
 	return (
 		<div className="payment-method-details">
@@ -78,6 +96,7 @@ const CardDetails = ( { charge = {}, isLoading } ) => {
 					label={ __( 'Address', 'woocommerce-payments' ) }
 				>
 					<span
+						// eslint-disable-next-line react/no-danger
 						dangerouslySetInnerHTML={ {
 							__html: formattedAddress || '–',
 						} }
@@ -88,4 +107,4 @@ const CardDetails = ( { charge = {}, isLoading } ) => {
 	);
 };
 
-export default CardDetails;
+export default AffirmDetails;
diff --git a/client/payment-details/payment-method/afterpay-clearpay/index.js b/client/payment-details/payment-method/afterpay-clearpay/index.tsx
similarity index 63%
rename from client/payment-details/payment-method/afterpay-clearpay/index.js
rename to client/payment-details/payment-method/afterpay-clearpay/index.tsx
index 99b6f20dc26..d775fa1ec38 100644
--- a/client/payment-details/payment-method/afterpay-clearpay/index.js
+++ b/client/payment-details/payment-method/afterpay-clearpay/index.tsx
@@ -4,21 +4,23 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
+import React from 'react';
 
 /**
  * Internal dependencies.
  */
 import Detail from '../detail';
+import { Charge } from 'wcpay/types/charges';
+import { PaymentMethodDetails } from 'wcpay/payment-details/types';
 
 /**
  * Extracts and formats payment method details from a charge.
  *
- * @param {Object} charge The charge object.
- * @return {Object}       A flat hash of all necessary values.
+ * @param {Charge} charge The charge object.
+ * @return {PaymentMethodDetails} A flat hash of all necessary values.
  */
-const formatPaymentMethodDetails = ( charge ) => {
+const formatPaymentMethodDetails = ( charge: Charge ): PaymentMethodDetails => {
 	const { billing_details: billingDetails, payment_method: id } = charge;
-
 	const { name, email, formatted_address: formattedAddress } = billingDetails;
 
 	return {
@@ -30,22 +32,33 @@ const formatPaymentMethodDetails = ( charge ) => {
 };
 
 /**
- * Placeholders to display while loading.
+ * Placeholder object for loading state
  */
-const paymentMethodPlaceholders = {
+const paymentMethodPlaceholders: PaymentMethodDetails = {
 	id: 'id placeholder',
 	name: 'name placeholder',
 	email: 'email placeholder',
 	formattedAddress: 'address placeholder',
 };
 
-const CardDetails = ( { charge = {}, isLoading } ) => {
-	const details =
+/**
+ * Props interface for AfterpayClearpayDetailss component
+ */
+interface AfterpayClearpayDetailsProps {
+	charge?: Charge;
+	isLoading: boolean;
+}
+
+const AfterpayClearpayDetails: React.FC< AfterpayClearpayDetailsProps > = ( {
+	charge,
+	isLoading,
+} ) => {
+	const details: PaymentMethodDetails =
 		charge && charge.payment_method_details
 			? formatPaymentMethodDetails( charge )
 			: paymentMethodPlaceholders;
 
-	const { id, name, email, formattedAddress } = details;
+	const { id, name, email, formattedAddress }: PaymentMethodDetails = details;
 
 	return (
 		<div className="payment-method-details">
@@ -77,6 +90,7 @@ const CardDetails = ( { charge = {}, isLoading } ) => {
 					label={ __( 'Address', 'woocommerce-payments' ) }
 				>
 					<span
+						// eslint-disable-next-line react/no-danger
 						dangerouslySetInnerHTML={ {
 							__html: formattedAddress || '–',
 						} }
@@ -87,4 +101,4 @@ const CardDetails = ( { charge = {}, isLoading } ) => {
 	);
 };
 
-export default CardDetails;
+export default AfterpayClearpayDetails;
diff --git a/client/payment-details/types.ts b/client/payment-details/types.ts
index d2142207dbd..c8d7a0ebd6d 100644
--- a/client/payment-details/types.ts
+++ b/client/payment-details/types.ts
@@ -39,3 +39,13 @@ export const isPaymentIntent = (
 export const isCharge = ( data: PaymentIntent | Charge ): data is Charge => {
 	return ( data as PaymentIntent ).charge === undefined;
 };
+
+/*
+ * Interface for PaymentMethodDetails used in the payment method components on transaction details page.
+ */
+export interface PaymentMethodDetails {
+	id: string;
+	name: null | string;
+	email: null | string;
+	formattedAddress?: string;
+}