diff --git a/src/features/pay/components/PaymentType.tsx b/src/features/pay/components/PaymentType.tsx
new file mode 100644
index 0000000..d06049c
--- /dev/null
+++ b/src/features/pay/components/PaymentType.tsx
@@ -0,0 +1,30 @@
+/** biome-ignore-all lint/style/useNamingConvention: <The codes are expected as is..> */
+
+import { asp as g } from "@asp/asp";
+import { Image } from "expo-image";
+import type { FC } from "react";
+import { TouchableOpacity, type TouchableOpacityProps } from "react-native";
+import type { PaymentTypeCode } from "../types";
+
+const Images = {
+	OM: require("@assets/operators/orange_money.png"),
+	MTN: require("@assets/operators/mtn_money.png"),
+	WAVE: require("@assets/operators/wave_money.png"),
+	FLOOZ: require("@assets/operators/moov_money.png"),
+	CB: require("@assets/operators/visa_card.png"),
+};
+
+type PaymentTypeProps = Omit<TouchableOpacityProps, "children"> & { type: PaymentTypeCode };
+
+const PaymentType: FC<PaymentTypeProps> = ({ style, type, ...rest }) => {
+	return (
+		<TouchableOpacity
+			style={[g.rounded_md, g.overflow_hidden, { height: 70, width: 100 }, style]}
+			{...rest}
+		>
+			<Image source={Images[type]} style={[g.flex_1]} cachePolicy={"memory-disk"} />
+		</TouchableOpacity>
+	);
+};
+
+export default PaymentType;