diff --git a/resources/assets/js/components/CreditCard/CardForm.vue b/resources/assets/js/components/CreditCard/CardForm.vue
index 7283faff5..3718649e7 100644
--- a/resources/assets/js/components/CreditCard/CardForm.vue
+++ b/resources/assets/js/components/CreditCard/CardForm.vue
@@ -1,7 +1,41 @@
 <template>
 <div>
-    <div class="card" v-if="card">
+    <div class="row align-items-center" v-if="Object.keys(cards).length">
         <div class="row align-items-center">
+            <div class="col-md-12">
+                <div class="form-group">
+                    <label for="item_name" class="form-control-label">Cards</label>
+                    <div class="input-group-invoice-text" v-for="(name, key, id) in cards">
+                        <div class="custom-control custom-radio mb-2">
+                            <input
+                                type="radio"
+                                :name="'card-' + key"
+                                :id="'card-'+ key + '-' + id"
+                                :value="key"
+                                v-model="card_id"
+                                class="custom-control-input">
+                            <label :for="'card-'+ key + '-' + id" class="custom-control-label">
+                                {{ name }}
+                            </label>
+                        </div>
+                    </div>
+                    <div class="input-group-invoice-text">
+                        <div class="custom-control custom-radio mb-2">
+                            <input
+                                type="radio"
+                                name="card-new"
+                                id="card-new-card"
+                                value="new_card"
+                                v-model="card_id"
+                                class="custom-control-input">
+                            <label for="card-new-card" class="custom-control-label">
+                                New Card
+                            </label>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
             <div class="col-md-6 p-5">
                 <div class="form-group">
                     <label for="cardName" class="form-control-label">{{ textCardName }}</label>
@@ -129,7 +163,7 @@
         </div>
     </div>
 
-    <div class="row align-items-center" v-if="!card">
+    <div class="row align-items-center" v-if="!Object.keys(cards).length">
         <div class="col-md-6 p-5">
             <div class="form-group">
                 <label for="cardNumber" class="form-control-label">{{ textCardNumber }}</label>
@@ -202,7 +236,6 @@
                                     v-for="n in 12"
                                     v-bind:disabled="n < minCardMonth"
                                     v-bind:key="n"
-                                    :selected="selected == value"
                                 >{{generateMonthValue(n)}}</option>
                             </select>
                         </div>
@@ -224,7 +257,6 @@
                                         v-bind:value="$index + minCardYear"
                                         v-for="(n, $index) in 12"
                                         v-bind:key="n"
-                                        :selected="selected == value"
                                     >{{$index + minCardYear}}</option>
                             </select>
                         </div>
@@ -267,7 +299,7 @@
                 </div>
             </div>
 
-            <div class="row">
+            <div class="form-group">
                 <button class="btn btn-icon btn-success" v-on:click="invaildCard" :disabled="loading">
                     <div v-if="loading" class="aka-loader-frame">
                         <div class="aka-loader"></div>
@@ -277,7 +309,7 @@
             </div>
         </div>
 
-        <div class="col-md-6 mt--3">
+        <div class="col-md-6 mt--6">
             <Card
                 :fields="fields"
                 :labels="formData"
@@ -331,10 +363,9 @@ export default {
     },
 
     props: {
-        card: {
-            type: Boolean,
-            default: false,
-            icon: '',
+        cards: {
+            type: [Array, Object],
+            default: [],
             description: "Add Card Style"
         },
 
@@ -427,6 +458,7 @@ export default {
                     cardYear: '',
                     cardCvv: '',
                     storeCard: false,
+                    card_id: 0,
                 }
             }
         },
@@ -456,7 +488,8 @@ export default {
             minCardYear: new Date().getFullYear(),
             isCardNumberMasked: true,
             mainCardNumber: this.cardNumber,
-            cardNumberMaxLength: 19
+            cardNumberMaxLength: 19,
+            card_id: 0,
         }
     },
 
@@ -562,6 +595,8 @@ export default {
                 isOdd = !isOdd;
             }*/
 
+            this.formData.card_id = this.card_id;
+
             if (sum % 10 !== 0) {
                 alert('invaild card number');
                 this.loading = false;
diff --git a/resources/assets/js/views/portal/invoices.js b/resources/assets/js/views/portal/invoices.js
index 6c5344504..96763b4de 100644
--- a/resources/assets/js/views/portal/invoices.js
+++ b/resources/assets/js/views/portal/invoices.js
@@ -42,6 +42,7 @@ const app = new Vue({
                 cardYear: '',
                 cardCvv: '',
                 storeCard: false,
+                card_id: 0,
             }
         }
     },
@@ -97,6 +98,7 @@ const app = new Vue({
                                         cardYear: '',
                                         cardCvv: '',
                                         storeCard: false,
+                                        card_id: 0,
                                     }
                                 }
                             },
@@ -187,6 +189,7 @@ const app = new Vue({
                                         cardYear: '',
                                         cardCvv: '',
                                         storeCard: false,
+                                        card_id: 0,
                                     }
                                 }
                             },
diff --git a/resources/views/partials/portal/payment_method/hosted.blade.php b/resources/views/partials/portal/payment_method/hosted.blade.php
index 072b3a914..6095d1154 100644
--- a/resources/views/partials/portal/payment_method/hosted.blade.php
+++ b/resources/views/partials/portal/payment_method/hosted.blade.php
@@ -1,5 +1,4 @@
 <card-form
-    :card="false"
     :path="'{{ $confirm_url }}'"
     placeholder-card-number="{{ trans('general.form.enter', ['field' => trans('general.card.number')]) }}"
     placeholder-card-name="{{ trans('general.form.enter', ['field' => trans('general.card.name')]) }}"
@@ -12,6 +11,7 @@
     text-cvv="{{ trans('general.card.cvv') }}"
     textButton="{{ trans('general.confirm') }}"
     textStoreCard="{{ trans('general.card.store') }} "
-    :store-card="true"
+    :store-card="{{ !empty($store_card) ? 'true' : 'false' }}"
+    :cards="{{ !empty($cards) ? json_encode($cards) : json_encode([]) }}"
     :form-data="formData"
 />
diff --git a/resources/views/portal/invoices/signed.blade.php b/resources/views/portal/invoices/signed.blade.php
index 22c5222fd..a20c018b6 100644
--- a/resources/views/portal/invoices/signed.blade.php
+++ b/resources/views/portal/invoices/signed.blade.php
@@ -66,16 +66,9 @@
                 <div class="card-body">
                     <div class="tab-content" id="myTabContent">
                         @php $is_active = true; @endphp
-
-                        @foreach ($payment_methods as $key => $name)
-                            @stack('invoice_{{ $key }}_content_start')
-                            <div class="tab-pane fade{{ ($is_active) ? ' show active': '' }}" id="tabs-payment-method-{{ $key }}" role="tabpanel" aria-labelledby="tabs-payment-method-{{ $key }}-tab">
-                                <component v-bind:is="method_show_html" @interface="onRedirectConfirm"></component>
-                            </div>
-                            @stack('invoice_{{ $key }}_content_end')
-
-                            @php $is_active = false; @endphp
-                        @endforeach
+                        <div class="tab-pane fade{{ ($is_active) ? ' show active': '' }}" id="tabs-payment-method" role="tabpanel" aria-labelledby="tabs-payment-method">
+                            <component v-bind:is="method_show_html" @interface="onRedirectConfirm"></component>
+                        </div>
                     </div>
                 </div>
             </div>