diff --git a/src/pages/Membership/Membership.js b/src/pages/Membership/Membership.js
index 1e031b9..4032e17 100644
--- a/src/pages/Membership/Membership.js
+++ b/src/pages/Membership/Membership.js
@@ -39,6 +39,7 @@ export const Membership = observer(() => {
   const [confirmLoading, setConfirmLoading] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
 
+  
   useEffect(() => {
     const init = async () => {
       try {
@@ -146,7 +147,8 @@ export const Membership = observer(() => {
           </Button>
           <Button
             onClick={() => {
-              setDestination(record?.user_detail?.id);
+              setDestination(record?.id);
+              console.log(record?.id)
               setIsVisibleTopUpModal(true);
             }}
           >
@@ -426,7 +428,7 @@ export const Membership = observer(() => {
             label="Amount"
             rules={[{ required: true, message: "Please input amount!" }]}
           >
-            <Input />
+            <Input/>
           </Form.Item>
         </Form>
       </Modal>
diff --git a/src/pages/Transaction/Product.js b/src/pages/Transaction/Product.js
index fab2125..0c4955a 100644
--- a/src/pages/Transaction/Product.js
+++ b/src/pages/Transaction/Product.js
@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
 import { useStore } from "../../utils/useStore";
-import { Button, Card, Col, Input, Row, Select } from "antd";
+import { Button, Card, Col, Input, Row, Select ,message} from "antd";
 import { observer } from "mobx-react-lite";
 import { BuyProductModal } from "../../component/BuyProductModal";
 
@@ -13,6 +13,7 @@ export const Product = observer(() => {
   const [isLoading, setIsLoading] = useState(false);
   const [productData, setProductData] = useState([]);
   const [data, setData] = useState({});
+  const [kode, setKode] = useState({});
 
   useEffect(() => {
     const init = async () => {
@@ -49,9 +50,18 @@ export const Product = observer(() => {
     await store.transaction.getData();
   };
 
-  const handleBuyProduct = (data) => {
-    setData(data);
-    store.transaction.visibleModalTransaction = true;
+  const handleBuy = async (data) => {
+    setKode(data.code);
+    //console.log(data.code)
+  };
+  const handleBuyProduct = async (kode)=>{
+    console.log(kode)
+    try {
+      await store.product.buyProduct({productCode:kode});
+      message.success("Success Buy Product");
+    } catch (e) {
+      message.error("Failed Buy Product");
+    }
   };
 
   return (
@@ -100,8 +110,8 @@ export const Product = observer(() => {
           {productData.map((item, index) => (
             <Col key={index} xs={24} md={16} lg={8}>
               <Card
-                onClick={() => handleBuyProduct(item)}
-                style={{ cursor: "pointer" }}
+                onClick={() => handleBuy(item)} 
+                style={{ cursor: "pointer",backgroundColor:"#2D9CDB" }}
               >
                 <span style={{ color: "black" }}>{item.name}</span>
                 <br />
@@ -118,7 +128,9 @@ export const Product = observer(() => {
       )}
       {productData.length !== 0 && (
         <Col style={{ textAlign: "right" }}>
-          <Button style={{ backgroundColor: "#2D9CDB", color: "white" }}>
+          <Button style={{ backgroundColor: "#2D9CDB", color: "white" }}
+          onClick={() => handleBuyProduct(kode)} 
+          >
             Beli Sekarang
           </Button>
         </Col>
diff --git a/src/store/product.js b/src/store/product.js
index f1d0747..694f715 100644
--- a/src/store/product.js
+++ b/src/store/product.js
@@ -78,6 +78,16 @@ export class Product {
         }
     }
 
+    async buyProduct(data) {
+        try {
+            const response = await http.post('/transaction/order').send(data);
+            await this.getData();
+            return response;
+        } catch (e) {
+            console.error(e);
+        }
+    }
+
     async update(id, data) {
         try {
             const response = await http.put(`/product/${id}`).send(data);