diff --git a/client/src/components/Donation/assets/ApplePay.js b/client/src/components/Donation/assets/ApplePay.js
deleted file mode 100644
index 70d2427318..0000000000
--- a/client/src/components/Donation/assets/ApplePay.js
+++ /dev/null
@@ -1,42 +0,0 @@
-/* eslint-disable max-len */
-import React from 'react';
-
-const propTypes = {};
-
-function ApplePay(props) {
- return (
- <>
- Apple Pay Logo
-
- >
- );
-}
-
-ApplePay.displayName = 'ApplePay';
-ApplePay.propTypes = propTypes;
-
-export default ApplePay;
diff --git a/client/src/components/Donation/assets/ApplePay.tsx b/client/src/components/Donation/assets/ApplePay.tsx
new file mode 100644
index 0000000000..3feec2a6ef
--- /dev/null
+++ b/client/src/components/Donation/assets/ApplePay.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+
+const ApplePay = (
+ props: JSX.IntrinsicAttributes & React.SVGProps
+): JSX.Element => (
+ <>
+ Apple Pay Logo
+
+ >
+);
+
+ApplePay.displayName = 'ApplePay';
+
+export default ApplePay;
diff --git a/client/src/components/Donation/assets/GooglePay.js b/client/src/components/Donation/assets/GooglePay.js
deleted file mode 100644
index bbea2fe4e4..0000000000
--- a/client/src/components/Donation/assets/GooglePay.js
+++ /dev/null
@@ -1,73 +0,0 @@
-/* eslint-disable max-len */
-import React from 'react';
-
-const propTypes = {};
-
-function GooglePay(props) {
- return (
- <>
- Google Pay Logo
-
- >
- );
-}
-
-GooglePay.displayName = 'GooglePay';
-GooglePay.propTypes = propTypes;
-
-export default GooglePay;
diff --git a/client/src/components/Donation/assets/GooglePay.tsx b/client/src/components/Donation/assets/GooglePay.tsx
new file mode 100644
index 0000000000..7d624b25ca
--- /dev/null
+++ b/client/src/components/Donation/assets/GooglePay.tsx
@@ -0,0 +1,69 @@
+import React from 'react';
+
+const GooglePay = (
+ props: JSX.IntrinsicAttributes & React.SVGProps
+): JSX.Element => (
+ <>
+ Google Pay Logo
+
+ >
+);
+
+GooglePay.displayName = 'GooglePay';
+
+export default GooglePay;