diff --git a/src/common/pages/Vouchers/Checkout/index.js b/src/common/pages/Vouchers/Checkout/index.js
index 2b58dda..96ebeaa 100644
--- a/src/common/pages/Vouchers/Checkout/index.js
+++ b/src/common/pages/Vouchers/Checkout/index.js
@@ -28,10 +28,14 @@ export default class CheckoutVouchers extends React.Component {
     this.http = props.appstate.http;
     this.authStore = props.appstate.auth;
     this.globalUI = props.appstate.globalUI;
+    this.vouchersStore = props.appstate.vouchers;
   }
 
   componentDidMount() {
-
+    console.log("skuid",this.vouchersStore.skuId);
+    console.log("skuName",this.vouchersStore.skuName);
+    console.log("skuPrice",this.vouchersStore.skuPrice);
+    console.log("data",this.vouchersStore.dataItems);
   }
 
   render() {
@@ -68,19 +72,20 @@ export default class CheckoutVouchers extends React.Component {
                         </div>
                         <Divider style={{marginBottom:10,marginTop:10}} />
                         <div className="row" style={{marginTop:30}}>
-                            <div className="col s4 m4 l4">
+                            <div className="col s5 m5 l5">
                                 <div style={{display:'flex',justifyContent:'center',alignItems:'center'}}>
-                                    <Avatar size={74} src="https://png.pngtree.com/element_origin_min_pic/17/09/17/d78f6e704459b24bcdd0f32943d29145.jpg" />
+                                <img className={'imageCard'} src={this.http.appendImagePath(this.vouchersStore.dataItems.images.logo)} />
+                                    {/* <Avatar size={74} src={this.http.appendImagePath(this.vouchersStore.dataItems.images.logo)} /> */}
                                 </div>
                             </div>
-                            <div className="col s4 m8 l8">
+                            <div className="col s4 m7 l7">
                             <div style={{alignItems:'center'}}>
                                 <Row>
                                     <div className="col s12 m6 6">
                                         <h3>Jenis Layanan :</h3>
                                     </div>
                                     <div className="col s12 m6 6">
-                                        <h3 style={{color:''}}>KFC Rp.50.000,00</h3>
+                                        <h3 style={{color:''}}>{this.vouchersStore.dataItems.name} {this.vouchersStore.skuName}</h3>
                                     </div>
                                 </Row>
                                 <Row>
@@ -88,7 +93,7 @@ export default class CheckoutVouchers extends React.Component {
                                         <h3>Point :</h3>
                                     </div>
                                     <div className="col s12 m6 6">
-                                        <h3 style={{color:'#FF6F00'}}>50 Points</h3>
+                                        <h3 style={{color:'#FF6F00'}}>{this.vouchersStore.skuPrice} Points</h3>
                                     </div>
                                 </Row>
                             </div>
@@ -108,7 +113,7 @@ export default class CheckoutVouchers extends React.Component {
                         <div className="row">
                             <div style={{display:'flex',justifyContent:'space-between'}}>
                                 <h3>Total Pembayaran Point</h3>
-                                <h3 style={{color:'#FF6F00'}}>50 Points</h3>
+                                <h3 style={{color:'#FF6F00'}}>{this.vouchersStore.skuPrice} Points</h3>
                             </div>
                         </div>
                         <div className="row">
diff --git a/src/common/pages/Vouchers/Modal/index.js b/src/common/pages/Vouchers/Modal/index.js
index c7f0230..e29108e 100644
--- a/src/common/pages/Vouchers/Modal/index.js
+++ b/src/common/pages/Vouchers/Modal/index.js
@@ -15,11 +15,14 @@ export default class ModalVouchersComponent extends React.Component {
     super(props);
     this.props = props;
     this.state = {
-      selectedOption: '0',
-      hidden:'inline'
+      selectedOption: '',
+      hidden:'inline',
+      skuName:'',
+      skuPrice:'0'
     };
     this.defaultState = Object.assign({}, this.state);
     this.http = props.appstate.http;
+    this.vouchersStore = props.appstate.vouchers;
   }
 
   componentDidMount() {}
@@ -60,7 +63,7 @@ export default class ModalVouchersComponent extends React.Component {
           flex: 0.3
         }}>
           <img className={'imageModal'} src={image} />
-          <p className={'titleModal'}>{data.name} }</p>
+          <p className={'titleModal'}>{data.name}</p>
         </div>
         <div style={{
           display: 'flex',
@@ -79,33 +82,49 @@ export default class ModalVouchersComponent extends React.Component {
 
           <Select
             showSearch
+            // labelInValue
             className={'optionSelectModal'}
             placeholder="Please Select your Option"
             optionFilterProp="children"
-            onChange={(e) => {
-                this.setState({selectedOption: e})
+            onChange={(value) => {
+                this.setState({selectedOption: value})
                 this.setState({hidden: 'none'})
-                console.log(this.state.hidden,'onChange')
+                // console.log('onChange',value);
+                const points = data.sku.filter(item => item.id == value);
+                console.log(points[0].price,'points',points[0].name);
+                this.setState({
+                  skuName :points[0].name,
+                  skuPrice : points[0].price
+                })
               }
             }
             onDropdownVisibleChange={(value) => {
               this.setState({hidden: 'inline'})
-              console.log(this.state.hidden,'onDropdownVisibleChange')
             }}
           >
             {data.sku.map((item, index) => {
-              return <Option  value={item.price}><div style={{display:'flex',justifyContent:'space-between', width:'100%'}}><span>{item.name}</span> <span style={{color:'#FF6F00', display:this.state.hidden}}><NumberFormat value={(item.price)} displayType={'text'} thousandSeparator={true}/> </span></div></Option>
+              return <Option  value={item.id}><div style={{display:'flex',justifyContent:'space-between', width:'100%'}}><span>{item.name}</span> <span style={{color:'#FF6F00', display:this.state.hidden}}><NumberFormat value={(item.price)} displayType={'text'} thousandSeparator={true}/> </span></div></Option>
+              // return <Option  value={item.id}>{item.price}</Option>
             })}
           </Select>
 
           <div className={'costContainerModal'}>
             <div className={'costLeftPaneModal'}>
               <p className={'costTitleModal'}>Points</p>
-              <p className={'costValueModal'}><NumberFormat value={(this.state.selectedOption)} displayType={'text'} thousandSeparator={true}/> </p>
+              <p className={'costValueModal'}><NumberFormat value={(this.state.skuPrice)} displayType={'text'} thousandSeparator={true}/> </p>
             </div>
             <div className={'costRightPaneModal'}>
               <Route render={({ history}) => (
-                <Button onClick={() => history.push(LINKS.VERIFY_VOUCHERS)}  type="primary" size={"large"} block>Buy</Button>
+                <Button onClick={() => {
+                  this.vouchersStore.dataItems = data;
+                  this.vouchersStore.skuId = this.state.selectedOption;
+                  this.vouchersStore.skuName = this.state.skuName;
+                  this.vouchersStore.skuPrice = this.state.skuPrice;
+                  console.log('enak',this.state);
+                  history.push(LINKS.VERIFY_VOUCHERS);
+                }
+                }  
+                  type="primary" size={"large"} block>Buy</Button>
               )} />
             </div>
           </div>
diff --git a/src/common/pages/Vouchers/Payment/index.js b/src/common/pages/Vouchers/Payment/index.js
index 8388a56..a382fcd 100644
--- a/src/common/pages/Vouchers/Payment/index.js
+++ b/src/common/pages/Vouchers/Payment/index.js
@@ -29,6 +29,7 @@ export default class PaymentVouchers extends React.Component {
     this.http = props.appstate.http;
     this.authStore = props.appstate.auth;
     this.globalUI = props.appstate.globalUI;
+    this.vouchersStore = props.appstate.vouchers;
   }
 
   componentDidMount() {
@@ -45,6 +46,10 @@ export default class PaymentVouchers extends React.Component {
         });
       };
 
+      const price = this.vouchersStore.skuPrice;
+      const qty = 1;
+      const total = price * qty;
+
     return (
     <div className="wallet containerMiddle">
         <div className="row">
@@ -67,7 +72,7 @@ export default class PaymentVouchers extends React.Component {
                     <Panel style={{backgroundColor:'white'}} showArrow={false} header={
                             <div style={{display:'flex',justifyContent:'space-between', paddingRight:20, paddingLeft:15}}>
                                 <h3 style={{color:'#FF6F00'}}>
-                                50 Points
+                                {price} Points
                                 </h3>
                                 <h3 style={{color:'#6772e5'}}>
                                     Detail  Tagihan
@@ -76,21 +81,21 @@ export default class PaymentVouchers extends React.Component {
                         } key="1">
                         <Row>
                             <div style={{display:'flex',justifyContent:'space-between', paddingLeft:24}}>
-                                <p>KFC - Rp. 50,000</p>
-                                <p>50 Points</p>
+                                <p>{this.vouchersStore.dataItems.name} - {this.vouchersStore.skuName}</p>
+                                <p>{price} Points</p>
                             </div>
                         </Row>
                         <Row>
                             <div style={{display:'flex',justifyContent:'space-between', paddingLeft:24}}>
-                                <p>1 x Rp. 50 Points</p>
-                                <p>50 Points</p>
+                                <p>{qty} x  {price} Points</p>
+                                <p>{total} Points</p>
                             </div>
                         </Row>
                         <Divider dashed={true} />
                         <Row>
                             <div style={{display:'flex',justifyContent:'space-between', paddingLeft:24}}>
                                 <p>Tagihan</p>
-                                <p>50 Points</p>
+                                <p>{total} Points</p>
                             </div>
                         </Row>
                     </Panel>
@@ -120,8 +125,20 @@ export default class PaymentVouchers extends React.Component {
                 </div>
                 <div className="row">
                 <Button type="primary" block onClick={() => {
-                    this.props.history.push(LINKS.VOUCHERS)
-                    openNotificationWithIcon('success')
+                    this.vouchersStore.buyVoucher(this.vouchersStore.skuId)
+                    .then(res => {
+                      this.globalUI.hideDialogLoading();
+                      this.props.history.push(LINKS.VOUCHERS)
+                        openNotificationWithIcon('success')
+                    //   this.globalUI.openSnackbar("Success Added New Store");
+                    //   this.setState({
+                    //     stepIndex: 0
+                    //   })
+                    })
+                    .catch(err => {
+                      this.globalUI.openSnackbar(err.message);
+                      console.error(err, 'ini errornya');
+                    });
                     }}>Pakai Points</Button>
                 </div>
             </div>
diff --git a/src/common/pages/Vouchers/index.js b/src/common/pages/Vouchers/index.js
index f44c3b7..e242667 100644
--- a/src/common/pages/Vouchers/index.js
+++ b/src/common/pages/Vouchers/index.js
@@ -36,6 +36,7 @@ export default class VouchersComponent extends React.Component {
         // ],
         sku: [
           {
+            id:'',
             name: '',
             price: ''
           },
diff --git a/src/common/stores/vouchers.js b/src/common/stores/vouchers.js
index ba63d59..7b8bf2a 100644
--- a/src/common/stores/vouchers.js
+++ b/src/common/stores/vouchers.js
@@ -7,6 +7,15 @@ export default class Vouchers {
         @observable istLoading = false;
         @observable isSearching = false;
         @observable filtered = [];
+        @observable skuId = {} ;
+        @observable skuName = {} ;
+        @observable skuPrice = {} ;
+        @observable dataItems = {
+          name :'',
+          images : {
+            logo: ''
+          }
+        } ;
 
         constructor(context) {
             this.http = context.http;
@@ -19,7 +28,6 @@ export default class Vouchers {
             this.isLoading = true;
             return this.http.get("items")
             .then(res => {
-                console.log(res.data,'res list')
               this.list = res.data;
               this.isLoading = false;
             })
@@ -44,12 +52,16 @@ export default class Vouchers {
         } 
     
         @action
-        post(data){
+        buyVoucher(data){
+          console.log('data',data)
             this.isLoading = true;
-            return this.http.post("stores", data)
-              .then(res => {
+            return this.http.post("shop/buy_voucher", {
+              item_sku_id : data
+            }
+            ).then(res => {
                 this.isLoading = false;
                 this.getList();
+                console.log('res',res)
                 return res;
               })
               .catch(err => {