diff --git a/src/components/ADempiere/Form/VPOS/Collection/overdrawnInvoice/index.vue b/src/components/ADempiere/Form/VPOS/Collection/overdrawnInvoice/index.vue
index 268648ba..242f02c7 100644
--- a/src/components/ADempiere/Form/VPOS/Collection/overdrawnInvoice/index.vue
+++ b/src/components/ADempiere/Form/VPOS/Collection/overdrawnInvoice/index.vue
@@ -65,49 +65,31 @@
               <b>{{ $t('form.pos.collect.overdrawnInvoice.customerLimit') }}: {{ formatPrice(maximumRefundAllowed, currency.iSOCode) }} | {{ formatPrice(0, isoCode) }} </b>
             </span>
           </div>
-          <div class="text item">
-            <el-form
-              label-position="top"
-              label-width="10px"
-            >
-              <el-row>
-                <el-col
-                  v-for="field in primaryFieldsList"
-                  :key="field.sequence"
-                  :span="8"
-                >
-                  <field-definition
-                    :key="field.columnName"
-                    :metadata-field="field"
-                  />
-                </el-col>
-                <el-col :span="8">
-                  <el-form-item label="Tipo de pago">
-                    <el-select
-                      v-model="currentPaymentType"
-                      style="width: -webkit-fill-available;"
-                      @change="changePaymentType"
-                    >
-                      <el-option
-                        v-for="item in paymentTypeList"
-                        :key="item.uuid"
-                        :label="item.name"
-                        :value="item.key"
-                      />
-                    </el-select>
-                  </el-form-item>
-                </el-col>
-                <el-col
-                  v-for="field in hiddenFieldsList"
-                  :key="field.sequence"
-                  :span="8"
-                >
-                  <field-definition
-                    :metadata-field="field"
-                  />
-                </el-col>
-              </el-row>
-            </el-form>
+          <div v-if="optionTypePay === 0" class="text item">
+            <el-row :gutter="12">
+              <el-col v-for="(payment, index) in paymentTypeList" :key="index" :span="8">
+                <div @click="optionTypePay = payment.key">
+                  <el-card shadow="hover">
+                    <div slot="header" class="clearfix" style="text-align: center;">
+                      <span>
+                        {{ payment.name }}
+                      </span>
+                    </div>
+                    <p style="text-align: center;"> Nombre </p>
+                    <p style="text-align: center;"> Cedula </p>
+                    <p style="text-align: center;"> Telefono </p>
+                    <p style="text-align: center;"> Banco </p>
+                    <p style="text-align: center;"> Descripcion </p>
+                  </el-card>
+                </div>
+              </el-col>
+            </el-row>
+          </div>
+          <div v-if="optionTypePay !== 0" class="text item">
+            <component
+              :is="componentRender"
+              :change="change"
+            />
           </div>
         </el-card>
       </div>
@@ -130,6 +112,13 @@
         </el-card>
       </div>
       <span slot="footer" class="dialog-footer">
+        <el-button
+          v-if="optionTypePay !== 0"
+          type="info"
+          class="custom-button-create-bp"
+          icon="el-icon-back"
+          @click="optionTypePay = 0"
+        />
         <el-button
           type="danger"
           class="custom-button-create-bp"
@@ -195,12 +184,25 @@ export default {
   data() {
     return {
       option: 1,
+      optionTypePay: 0,
       fieldsList: fieldsListOverdrawnInvoice,
       currentFieldCurrency: '',
       currentPaymentType: ''
     }
   },
   computed: {
+    componentRender() {
+      let typePay
+      switch (this.optionTypePay) {
+        case 'P':
+          typePay = () => import('./paymentTypeChange/MobilePayment.vue')
+          break
+        case 'A':
+          typePay = () => import('./paymentTypeChange/ACH/index.vue')
+          break
+      }
+      return typePay
+    },
     showDialogo() {
       return this.$store.state['pointOfSales/payments/index'].dialogoInvoce.show
     },
@@ -211,14 +213,12 @@ export default {
       return this.$store.getters.posAttributes.currentPointOfSales.displayCurrency.iso_code
     },
     maximumDailyRefundAllowed() {
-      console.log(this.$store.getters.posAttributes.currentPointOfSales.displayCurrency.iso_code)
       return this.$store.getters.posAttributes.currentPointOfSales.maximumDailyRefundAllowed
     },
     maximumRefundAllowed() {
       return this.$store.getters.posAttributes.currentPointOfSales.maximumRefundAllowed
     },
     displayeCurrency() {
-      console.log(this.$store.getters.posAttributes.currentPointOfSales)
       const tenderType = this.$store.getters.getValueOfField({
         containerUuid: 'OverdrawnInvoice',
         columnName: 'TenderType'
@@ -392,6 +392,11 @@ export default {
 </script>
 
 <style scoped>
+  .el-dialog__header {
+    padding: 20px;
+    padding-bottom: 10px;
+    background: #dae6f32e;
+  }
   .el-image {
     display: inline-block;
     overflow: hidden;
diff --git a/src/components/ADempiere/Form/VPOS/Collection/overdrawnInvoice/paymentTypeChange/ACH/fieldsListACH.js b/src/components/ADempiere/Form/VPOS/Collection/overdrawnInvoice/paymentTypeChange/ACH/fieldsListACH.js
new file mode 100644
index 00000000..a296f7fb
--- /dev/null
+++ b/src/components/ADempiere/Form/VPOS/Collection/overdrawnInvoice/paymentTypeChange/ACH/fieldsListACH.js
@@ -0,0 +1,108 @@
+// ADempiere-Vue (Frontend) for ADempiere ERP & CRM Smart Business Solution
+// Copyright (C) 2017-Present E.R.P. Consultores y Asociados, C.A.
+// Contributor(s): Yamel Senih ysenih@erpya.com www.erpya.com
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+const tableName = 'C_Payment'
+
+export default [
+  // Name
+  {
+    elementColumnName: 'Name',
+    columnName: 'Name',
+    tableName: 'C_BPartner',
+    tabindex: '1',
+    isFromDictionary: true,
+    overwriteDefinition: {
+      sequence: 0,
+      isCustomField: true,
+      size: 24,
+      isMandatory: true
+    }
+  },
+  // Code
+  {
+    elementColumnName: 'Value',
+    columnName: 'Value',
+    isFromDictionary: true,
+    tabindex: '0',
+    overwriteDefinition: {
+      sequence: 1,
+      isCustomField: true,
+      size: 24,
+      isMandatory: true
+    }
+  },
+  // Bank
+  {
+    tableName,
+    columnName: 'C_Bank_ID',
+    isFromDictionary: true,
+    overwriteDefinition: {
+      sequence: 6,
+      handleActionKeyPerformed: true,
+      handleActionPerformed: true,
+      handleContentSelection: true,
+      size: 24,
+      isActiveLogics: true,
+      isMandatory: true
+    }
+  },
+  // accountno
+  {
+    tableName,
+    elementColumnName: 'AccountNo',
+    columnName: 'AccountNo',
+    isFromDictionary: true,
+    overwriteDefinition: {
+      sequence: 8,
+      handleActionKeyPerformed: true,
+      handleContentSelection: true,
+      handleActionPerformed: true,
+      size: 24,
+      isActiveLogics: true,
+      isMandatory: true
+    }
+  },
+  {
+    elementColumnName: 'EMail',
+    columnName: 'EMail',
+    tableName: 'AD_user',
+    isFromDictionary: true,
+    overwriteDefinition: {
+      sequence: 9,
+      handleActionKeyPerformed: true,
+      handleContentSelection: true,
+      handleActionPerformed: true,
+      size: 24,
+      isActiveLogics: true,
+      isMandatory: true
+    }
+  },
+  {
+    tableName,
+    elementColumnName: 'PayAmt',
+    columnName: 'PayAmt',
+    isFromDictionary: true,
+    overwriteDefinition: {
+      sequence: 0,
+      handleContentSelection: true,
+      handleActionPerformed: true,
+      size: 24,
+      isNumericField: true,
+      isActiveLogics: true,
+      isMandatory: true
+    }
+  }
+]
diff --git a/src/components/ADempiere/Form/VPOS/Collection/overdrawnInvoice/paymentTypeChange/ACH/index.vue b/src/components/ADempiere/Form/VPOS/Collection/overdrawnInvoice/paymentTypeChange/ACH/index.vue
new file mode 100644
index 00000000..ef0e0043
--- /dev/null
+++ b/src/components/ADempiere/Form/VPOS/Collection/overdrawnInvoice/paymentTypeChange/ACH/index.vue
@@ -0,0 +1,232 @@
+<!--
+ ADempiere-Vue (Frontend) for ADempiere ERP & CRM Smart Business Solution
+ Copyright (C) 2017-Present E.R.P. Consultores y Asociados, C.A.
+ Contributor(s): Elsio Sanchez elsiosanches@gmail.com www.erpya.com
+ This program is free software: you can redistribute it and/or modify
+ it under the terms of the GNU General Public License as published by
+ the Free Software Foundation, either version 3 of the License, or
+ (at your option) any later version.
+
+ This program is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License
+ along with this program.  If not, see <https:www.gnu.org/licenses/>.
+-->
+<template>
+  <div>
+    <el-form
+      label-position="top"
+      label-width="10px"
+    >
+      <el-row :gutter="12">
+        <el-col
+          v-for="field in fieldsList"
+          :key="field.sequence"
+          :span="6"
+        >
+          <field-definition
+            :key="field.columnName"
+            :metadata-field="field"
+          />
+        </el-col>
+      </el-row>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import { formatPrice } from '@/utils/ADempiere/valueFormat.js'
+import formMixin from '@/components/ADempiere/Form/formMixin'
+import posMixin from '@/components/ADempiere/Form/VPOS/posMixin.js'
+import fieldsListACH from './fieldsListACH.js'
+
+export default {
+  name: 'ACH',
+  mixins: [
+    formMixin,
+    posMixin
+  ],
+  props: {
+    change: {
+      type: Number,
+      default: 0
+    },
+    pay: {
+      type: Number,
+      default: 0
+    },
+    pending: {
+      type: Number,
+      default: 0
+    },
+    totalOrder: {
+      type: Number,
+      default: 0
+    },
+    currency: {
+      type: Object,
+      default: undefined
+    },
+    metadata: {
+      type: Object,
+      default: () => {
+        return {
+          uuid: 'ACH',
+          containerUuid: 'ACH'
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      option: 1,
+      typePay: 0,
+      fieldsList: fieldsListACH,
+      currentFieldCurrency: '',
+      currentPaymentType: ''
+    }
+  },
+  computed: {
+    showDialogo() {
+      return this.$store.state['pointOfSales/payments/index'].dialogoInvoce.show
+    },
+    caseOrder() {
+      return this.$store.state['pointOfSales/payments/index'].dialogoInvoce.type
+    },
+    isoCode() {
+      return this.$store.getters.posAttributes.currentPointOfSales.displayCurrency.iso_code
+    },
+    maximumDailyRefundAllowed() {
+      console.log(this.$store.getters.posAttributes.currentPointOfSales.displayCurrency.iso_code)
+      return this.$store.getters.posAttributes.currentPointOfSales.maximumDailyRefundAllowed
+    },
+    maximumRefundAllowed() {
+      return this.$store.getters.posAttributes.currentPointOfSales.maximumRefundAllowed
+    },
+    displayeCurrency() {
+      const tenderType = this.$store.getters.getValueOfField({
+        containerUuid: 'OverdrawnInvoice',
+        columnName: 'TenderType'
+      })
+      if (tenderType === 'D') {
+        return true
+      }
+      return false
+    },
+    primaryFieldsList() {
+      return this.fieldsList.filter(field => field.sequence <= 2)
+    },
+    hiddenFieldsList() {
+      return this.fieldsList.filter(field => field.sequence >= 3)
+    },
+    listCurrency() {
+      return this.$store.getters.getCurrenciesList
+    },
+    emptyFieldGiftCard() {
+      const empty = this.fieldsList.filter(field => {
+        if (field.sequence < 3 && this.isEmptyValue(
+          this.$store.getters.getValueOfField({
+            containerUuid: 'OverdrawnInvoice',
+            columnName: field.columnName
+          })
+        )) {
+          return field
+        }
+      })
+      return empty.map(empty => empty.name)
+    },
+    emptyMandatoryFields() {
+      return this.$store.getters.getFieldsListEmptyMandatory({ containerUuid: 'OverdrawnInvoice', formatReturn: 'name' })
+    },
+    paymentTypeList() {
+      return this.$store.getters.getPaymentTypeList
+    }
+  },
+  created() {
+    this.$store.commit('updateValueOfField', {
+      containerUuid: 'ACH',
+      columnName: 'PayAmt',
+      value: this.change
+    })
+  },
+  methods: {
+    formatPrice,
+    close() {
+      this.$store.commit('dialogoInvoce', { show: false })
+    },
+    changeCurrency(value) {
+      this.currentFieldCurrency = value
+    },
+    changePaymentType(value) {
+      this.$store.commit('currentTenderChange', value)
+      this.currentPaymentType = value
+      this.$store.commit('updateValueOfField', {
+        containerUuid: 'OverdrawnInvoice',
+        columnName: 'TenderType',
+        value: value
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .el-image {
+    display: inline-block;
+    overflow: hidden;
+  }
+  .el-card__header {
+    padding: 18px 20px;
+    border-bottom: 1px solid #e6ebf5;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    background-color: rgb(245, 247, 250);
+  }
+  .el-card__body {
+    padding-top: 0px !important;
+    padding-right: 0px!important;
+    padding-bottom: 20px;
+    padding-left: 10px!important;
+    height: 100%!important;
+  }
+
+  .bottom {
+    margin-top: 0px!important;
+    line-height: 1px;
+  }
+
+  .button {
+    padding: 0;
+    float: right;
+  }
+
+  .image {
+    width: 100%;
+    display: block;
+    height: 9vh;
+  }
+
+  .clearfix:before,
+  .clearfix:after {
+    display: table;
+    content: "";
+  }
+
+  .clearfix:after {
+    clear: both
+  }
+  .el-header {
+    background: 'white';
+    color: #333;
+    line-height: 10px;
+  }
+  .el-aside {
+    color: #333;
+  }
+  .el-row {
+    margin: 0px!important;
+  }
+</style>
diff --git a/src/components/ADempiere/Form/VPOS/Collection/overdrawnInvoice/paymentTypeChange/MobilePayment.vue b/src/components/ADempiere/Form/VPOS/Collection/overdrawnInvoice/paymentTypeChange/MobilePayment.vue
new file mode 100644
index 00000000..fbf7806c
--- /dev/null
+++ b/src/components/ADempiere/Form/VPOS/Collection/overdrawnInvoice/paymentTypeChange/MobilePayment.vue
@@ -0,0 +1,224 @@
+<!--
+ ADempiere-Vue (Frontend) for ADempiere ERP & CRM Smart Business Solution
+ Copyright (C) 2017-Present E.R.P. Consultores y Asociados, C.A.
+ Contributor(s): Elsio Sanchez elsiosanches@gmail.com www.erpya.com
+ This program is free software: you can redistribute it and/or modify
+ it under the terms of the GNU General Public License as published by
+ the Free Software Foundation, either version 3 of the License, or
+ (at your option) any later version.
+
+ This program is distributed in the hope that it will be useful,
+ but WITHOUT ANY WARRANTY; without even the implied warranty of
+ MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License
+ along with this program.  If not, see <https:www.gnu.org/licenses/>.
+-->
+<template>
+  <div>
+    <el-form
+      label-position="top"
+      label-width="10px"
+    >
+      <el-row :gutter="12">
+        <el-col
+          v-for="field in primaryFieldsList"
+          :key="field.sequence"
+          :span="8"
+        >
+          <field-definition
+            :key="field.columnName"
+            :metadata-field="field"
+          />
+        </el-col>
+      </el-row>
+    </el-form>
+  </div>
+</template>
+
+<script>
+import { formatPrice } from '@/utils/ADempiere/valueFormat.js'
+import formMixin from '@/components/ADempiere/Form/formMixin'
+import posMixin from '@/components/ADempiere/Form/VPOS/posMixin.js'
+import fieldsListOverdrawnInvoice from '../fieldsListOverdrawnInvoice.js'
+
+export default {
+  name: 'MobilePayment',
+  mixins: [
+    formMixin,
+    posMixin
+  ],
+  props: {
+    change: {
+      type: Number,
+      default: 0
+    },
+    pay: {
+      type: Number,
+      default: 0
+    },
+    pending: {
+      type: Number,
+      default: 0
+    },
+    totalOrder: {
+      type: Number,
+      default: 0
+    },
+    currency: {
+      type: Object,
+      default: undefined
+    },
+    metadata: {
+      type: Object,
+      default: () => {
+        return {
+          uuid: 'OverdrawnInvoice',
+          containerUuid: 'OverdrawnInvoice'
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      option: 1,
+      typePay: 0,
+      fieldsList: fieldsListOverdrawnInvoice,
+      currentFieldCurrency: '',
+      currentPaymentType: ''
+    }
+  },
+  computed: {
+    showDialogo() {
+      return this.$store.state['pointOfSales/payments/index'].dialogoInvoce.show
+    },
+    caseOrder() {
+      return this.$store.state['pointOfSales/payments/index'].dialogoInvoce.type
+    },
+    isoCode() {
+      return this.$store.getters.posAttributes.currentPointOfSales.displayCurrency.iso_code
+    },
+    maximumDailyRefundAllowed() {
+      return this.$store.getters.posAttributes.currentPointOfSales.maximumDailyRefundAllowed
+    },
+    maximumRefundAllowed() {
+      return this.$store.getters.posAttributes.currentPointOfSales.maximumRefundAllowed
+    },
+    displayeCurrency() {
+      const tenderType = this.$store.getters.getValueOfField({
+        containerUuid: 'OverdrawnInvoice',
+        columnName: 'TenderType'
+      })
+      if (tenderType === 'D') {
+        return true
+      }
+      return false
+    },
+    primaryFieldsList() {
+      return this.fieldsList.filter(field => field.sequence <= 2)
+    },
+    hiddenFieldsList() {
+      return this.fieldsList.filter(field => field.sequence >= 3)
+    },
+    listCurrency() {
+      return this.$store.getters.getCurrenciesList
+    },
+    emptyFieldGiftCard() {
+      const empty = this.fieldsList.filter(field => {
+        if (field.sequence < 3 && this.isEmptyValue(
+          this.$store.getters.getValueOfField({
+            containerUuid: 'OverdrawnInvoice',
+            columnName: field.columnName
+          })
+        )) {
+          return field
+        }
+      })
+      return empty.map(empty => empty.name)
+    },
+    emptyMandatoryFields() {
+      return this.$store.getters.getFieldsListEmptyMandatory({ containerUuid: 'OverdrawnInvoice', formatReturn: 'name' })
+    },
+    paymentTypeList() {
+      return this.$store.getters.getPaymentTypeList
+    }
+  },
+  methods: {
+    formatPrice,
+    close() {
+      this.$store.commit('dialogoInvoce', { show: false })
+    },
+    changeCurrency(value) {
+      this.currentFieldCurrency = value
+    },
+    changePaymentType(value) {
+      this.$store.commit('currentTenderChange', value)
+      this.currentPaymentType = value
+      this.$store.commit('updateValueOfField', {
+        containerUuid: 'OverdrawnInvoice',
+        columnName: 'TenderType',
+        value: value
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .el-image {
+    display: inline-block;
+    overflow: hidden;
+  }
+  .el-card__header {
+    padding: 18px 20px;
+    border-bottom: 1px solid #e6ebf5;
+    -webkit-box-sizing: border-box;
+    box-sizing: border-box;
+    background-color: rgb(245, 247, 250);
+  }
+  .el-card__body {
+    padding-top: 0px !important;
+    padding-right: 0px!important;
+    padding-bottom: 20px;
+    padding-left: 10px!important;
+    height: 100%!important;
+  }
+
+  .bottom {
+    margin-top: 0px!important;
+    line-height: 1px;
+  }
+
+  .button {
+    padding: 0;
+    float: right;
+  }
+
+  .image {
+    width: 100%;
+    display: block;
+    height: 9vh;
+  }
+
+  .clearfix:before,
+  .clearfix:after {
+    display: table;
+    content: "";
+  }
+
+  .clearfix:after {
+    clear: both
+  }
+  .el-header {
+    background: 'white';
+    color: #333;
+    line-height: 10px;
+  }
+  .el-aside {
+    color: #333;
+  }
+  .el-row {
+    margin: 0px!important;
+  }
+</style>