diff --git a/src/components/common/TabCommon/components/TabPane/TabPane.tsx b/src/components/common/TabCommon/components/TabPane/TabPane.tsx
index e67784535..c0c7d2efa 100644
--- a/src/components/common/TabCommon/components/TabPane/TabPane.tsx
+++ b/src/components/common/TabCommon/components/TabPane/TabPane.tsx
@@ -3,7 +3,7 @@ import React from "react"
 import s from './TabPane.module.scss'
 
 export interface TabPaneProps {
-    active: boolean;
+    active?: boolean;
     children?: React.ReactNode;
     tabName: string
 }
diff --git a/src/components/common/index.ts b/src/components/common/index.ts
index a7b9075d3..33a555bff 100644
--- a/src/components/common/index.ts
+++ b/src/components/common/index.ts
@@ -41,3 +41,5 @@ export { default as ImgWithLink} from './ImgWithLink/ImgWithLink'
 export { default as RecipeDetail} from './RecipeDetail/RecipeDetail'
 export { default as DrawerCommon} from './DrawerCommon/DrawerCommon'
 export { default as CartDrawer} from './CartDrawer/CartDrawer'
+export { default as TabPane} from './TabCommon/components/TabPane/TabPane'
+export { default as TabCommon} from './TabCommon/TabCommon'
diff --git a/src/components/modules/checkout/CheckoutInfo/CheckoutInfo.tsx b/src/components/modules/checkout/CheckoutInfo/CheckoutInfo.tsx
index 16852ea43..0e0c9ccaa 100644
--- a/src/components/modules/checkout/CheckoutInfo/CheckoutInfo.tsx
+++ b/src/components/modules/checkout/CheckoutInfo/CheckoutInfo.tsx
@@ -4,6 +4,7 @@ import CheckoutCollapse from 'src/components/common/CheckoutCollapse/CheckoutCol
 import { CheckOutForm } from 'src/utils/types.utils'
 import s from './CheckoutInfo.module.scss'
 import CustomerInfoForm from './components/CustomerInfoForm/CustomerInfoForm'
+import PaymentInfoForm from './components/PaymentInfoForm/PaymentInfoForm'
 import ShippingInfoForm from './components/ShippingInfoForm/ShippingInfoForm'
 interface CheckoutInfoProps {}
 
@@ -44,6 +45,11 @@ const CheckoutInfo = ({}: CheckoutInfoProps) => {
       title: 'Shipping Information',
       form: <ShippingInfoForm onConfirm={onConfirm} id={2}/>,
     },
+    {
+      id: 3,
+      title: 'Payment Information',
+      form: <PaymentInfoForm onConfirm={onConfirm} id={3}/>,
+    },
   ]
   return (
     <div className={s.warpper}>
diff --git a/src/components/modules/checkout/CheckoutInfo/components/PaymentInfoForm/PaymentInfoForm.tsx b/src/components/modules/checkout/CheckoutInfo/components/PaymentInfoForm/PaymentInfoForm.tsx
index a947faa8b..1e29789c0 100644
--- a/src/components/modules/checkout/CheckoutInfo/components/PaymentInfoForm/PaymentInfoForm.tsx
+++ b/src/components/modules/checkout/CheckoutInfo/components/PaymentInfoForm/PaymentInfoForm.tsx
@@ -1,19 +1,26 @@
 import React from 'react'
-import TabPane from 'src/components/common/TabCommon/components/TabPane/TabPane'
-import TabCommon from 'src/components/common/TabCommon/TabCommon'
+import { TabCommon, TabPane } from 'src/components/common'
+import { CheckOutForm } from 'src/utils/types.utils'
+import BankTransfer from '../BankTransfer/BankTransfer'
+
 import s from "./PaymentInfoForm.module.scss"
 interface PaymentInfoFormProps {
-    
+    onConfirm?: (id:number,formInfo:CheckOutForm)=>void
+    id:number
 }
 
 const PaymentInfoForm = ({}: PaymentInfoFormProps) => {
     return (
-        <div className={s.warpper}>
+        <div className="">
             <TabCommon>
-                {/* <TabPane tabName="Bank Transfer">
-
-                </TabPane> */}
+                <TabPane tabName = "Bank Transfer">
+                    <BankTransfer/>
+                </TabPane>
+                <TabPane tabName = "Bank Transfer 2">
+                    <BankTransfer/>
+                </TabPane>
             </TabCommon>
+            
         </div>
     )
 }