diff --git a/src/app/pages/payment/payment.page.html b/src/app/pages/payment/payment.page.html
index 80f45c5..4c7445b 100644
--- a/src/app/pages/payment/payment.page.html
+++ b/src/app/pages/payment/payment.page.html
@@ -56,17 +56,17 @@
 
     <div *ngIf="tabs =='cards'" class="lesson">
 
-      <div class="video" *ngFor="let item of [1,2]">
+      <div class="video" *ngFor="let item of usersCardsData">
         <div class="left">
-          <div class="bg_image men_image" [style.backgroundImage]="'url(assets/images/line.png)'"></div>
+          <div class="bg_image men_image" [style.backgroundImage]="'url(assets/images/cards/credit-card.png)'"></div>
 
           <div class="text">
-            <ion-label class="bold_text">Why Using Figma ?</ion-label>
-            <ion-label class="grey_text">10 mins</ion-label>
+            <ion-label class="bold_text">{{item.description}} **** **** **** {{item.digits}}</ion-label>
+            <ion-label class="grey_text">Added : {{item.added | date }}</ion-label>
           </div>
         </div>
         <div class="right">
-          <ion-icon name="lock-closed-outline"></ion-icon>
+            <ion-icon name="trash-outline" color="danger"></ion-icon>
         </div>
       </div>
 
diff --git a/src/app/pages/payment/payment.page.ts b/src/app/pages/payment/payment.page.ts
index 6354e04..2a89f7f 100644
--- a/src/app/pages/payment/payment.page.ts
+++ b/src/app/pages/payment/payment.page.ts
@@ -20,6 +20,7 @@ export class PaymentPage implements OnInit {
   ) { }
 
   ngOnInit() {
+    this.getUsersCardsList();
   }
 
   onAddCard() {
@@ -30,4 +31,32 @@ export class PaymentPage implements OnInit {
     this.navctr.back();
   }
 
+  usrData: {
+    action:number, member_id: number, uid: string, sessionid: string, limit:20, page:1,offset: 0
+  };
+
+  usersCardsTotalData:any;
+  usersCardsData: [];
+  getUsersCardsList(){
+    this.usrData =
+        {
+          action:11055,
+          member_id: this.sessionDataProviderService.member_id,
+          uid: this.sessionDataProviderService.member_uid,
+          sessionid: this.sessionDataProviderService.session ,
+          limit:20, page:1,offset: 0
+        };
+
+    this.wrenchService.getusersCardList(this.usrData).subscribe(
+        usersCardsTotalData => {
+          this.usersCardsTotalData = usersCardsTotalData;
+          console.log("usersCardsTotalData TOTAL  RETURN->", this.usersCardsTotalData);
+          this.usersCardsData = this.usersCardsTotalData.result_list;
+          // debugger;
+          console.log("usersCardsData RETURN DATA->", this.usersCardsData);
+          //this.total_family = this.familyData.length;
+        }
+    );
+
+  }
 }
diff --git a/src/app/services/wrench.service.ts b/src/app/services/wrench.service.ts
index df87fbe..33af036 100644
--- a/src/app/services/wrench.service.ts
+++ b/src/app/services/wrench.service.ts
@@ -107,6 +107,10 @@ export class WrenchService {
   getWaitingInterest(usrData){
       return this.getPostData('waitinginterest',usrData);
   }
+
+  getusersCardList(usrData){
+      return this.getPostData('paylistcard',usrData);
+  }
   getHomeBanners(usrData){
       return this.getPostData('homebanners',usrData);
   }