diff --git a/auth-web/src/components/pay/PayWithCreditCard.vue b/auth-web/src/components/pay/PayWithCreditCard.vue
new file mode 100644
index 000000000..3e2dddc2c
--- /dev/null
+++ b/auth-web/src/components/pay/PayWithCreditCard.vue
@@ -0,0 +1,84 @@
+<template>
+  <v-card elevation="0">
+    <v-card-text class="heading-info py-7 px-8">
+      <h2 class="mb-2">Balance Due: <span class="ml-2">${{totalBalanceDue.toFixed(2)}}</span></h2>
+      <template>
+        <p class="mb-1" v-if="showPayWithOnlyCC">
+          <strong>Credit card will be the only payment option for this transaction</strong>.<br />
+          Online banking payment option is not available.
+        </p>
+        <p class="mb-1" v-if="partialCredit">
+          You can't <strong>use your account credit</strong> with credit card payment.<br />
+          <strong>Full amount</strong> will be charged if you pay by credit card.
+        </p>
+        <p class="mb-1" v-else>
+          Click "pay now" to complete transaction balance with credit card.
+          By credit card, your transaction will be completed <strong>immediately</strong>.
+        </p>
+      </template>
+
+    </v-card-text>
+    <v-card-text class="pt-7 pb-0 px-8">
+      <template>
+        <h3 class="body-1 font-weight-bold mb-3">How to pay with credit card:</h3>
+        <ol class="mb-5">
+          <li>Click on "Pay Now"</li>
+          <li>Complete credit card payment</li>
+          <li>Get confirmation receipt</li>
+        </ol>
+      </template>
+      <v-divider class="my-6"></v-divider>
+      </v-card-text>
+  </v-card>
+</template>
+
+<script lang="ts">
+
+import { Component, Prop, Vue } from 'vue-property-decorator'
+
+@Component({})
+export default class PayWithCreditCard extends Vue {
+  @Prop({ default: false }) showPayWithOnlyCC: boolean
+  @Prop({ default: 0 }) totalBalanceDue: number
+  @Prop({ default: false }) partialCredit: boolean
+}
+</script>
+
+<style lang="scss" scoped>
+@import '$assets/scss/theme.scss';
+
+.bcol-payment-card {
+  .heading-info {
+    background: var(--v-primary-base);
+    color: #fff !important;
+    h2 {
+      color: #fff !important;
+    }
+    .payee-name {
+      padding-right: 16px;
+      margin-right: 16px;
+      border-right: 1px solid #fff;
+    }
+  }
+  ol {
+    li {
+      margin-bottom: 4px;
+    }
+  }
+  .pay-with-credit-card {
+    ::v-deep {
+      .v-input__slot {
+        align-items: flex-start;
+      }
+      .v-label {
+        display: block;
+        color: #000;
+        .subtxt {
+          font-size: .875rem;
+          margin-top: 6px;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/auth-web/src/components/pay/PayWithOnlineBanking.vue b/auth-web/src/components/pay/PayWithOnlineBanking.vue
new file mode 100644
index 000000000..4d051e25d
--- /dev/null
+++ b/auth-web/src/components/pay/PayWithOnlineBanking.vue
@@ -0,0 +1,128 @@
+<template>
+  <v-card elevation="0">
+    <v-card-text class="heading-info py-7 px-8">
+      <h2 class="mb-2">Balance Due: <span class="ml-2">{{overCredit ? '-': ''}}${{totalBalanceDue.toFixed(2)}}</span></h2>
+      <template v-if="overCredit">
+        <p class="mb-6">
+          Transaction will be completed with your account credit.<br />
+          You now have <strong>${{creditBalance}} remaining credit</strong> in your account.
+        </p>
+      </template>
+      <template v-else-if="partialCredit">
+        <p class="mb-6">
+          Payment is partially covered with your account credit: ${{credit}}<br />
+          You now have <strong>${{creditBalance}} remaining credit</strong> in your account.
+        </p>
+      </template>
+      <template v-else>
+        <p class="mb-6">
+          Transaction will be completed when payment is received in full.
+          Online Banking payment methods can expect between <strong>2-5 days</strong> for your payment.
+        </p>
+        </template>
+        <template>
+        <div class="mb-1">
+          <span class="payee-name">
+            <strong>Payee Name:</strong>
+            {{payeeName}}
+          </span>
+          <span>
+            <strong>Account #:</strong>
+            {{cfsAccountId}}
+          </span>
+        </div>
+      </template>
+    </v-card-text>
+    <v-card-text class="pt-7 pb-0 px-8" v-if="!overCredit">
+      <template>
+        <h3 class="mb-3">How to pay with online banking:</h3>
+        <ol class="mb-5">
+          <li>Sign in to your financial institution's online banking website or app</li>
+          <li>Go to your financial institution's bill payment page</li>
+          <li>Enter "BC Registries and Online Services" as payee</li>
+          <li>Enter BC Registries and Online Services account number</li>
+          <li>Submit your payment for the balance due</li>
+        </ol>
+      </template>
+      <v-divider class="my-6"></v-divider>
+    </v-card-text>
+  </v-card>
+</template>
+
+<script lang="ts">
+
+import { Component, Emit, Prop, Watch } from 'vue-property-decorator'
+import Vue from 'vue'
+
+@Component
+export default class PayWithOnlineBanking extends Vue {
+  @Prop() onlineBankingData: any
+  @Prop({ default: false }) showPayWithOnlyCC: boolean
+  private payWithCreditCard: boolean = false
+  private totalBalanceDue = 0
+  private cfsAccountId: string = ''
+  private payeeName: string = ''
+  private overCredit:boolean = false
+  private creditBalance = 0
+  private partialCredit:boolean = false
+  private credit = 0
+
+  @Watch('onlineBankingData', { deep: true })
+  async updateonlineBankingData (val, oldVal) {
+    this.setData()
+  }
+
+  private setData () {
+    this.totalBalanceDue = this.onlineBankingData?.totalBalanceDue || 0
+    this.payeeName = this.onlineBankingData?.payeeName
+    this.cfsAccountId = this.onlineBankingData?.cfsAccountId || ''
+    this.overCredit = this.onlineBankingData?.overCredit || false
+    this.partialCredit = this.onlineBankingData?.partialCredit || false
+    this.creditBalance = this.onlineBankingData?.creditBalance || 0
+    this.credit = this.onlineBankingData?.credit || 0
+  }
+
+  private mounted () {
+    this.setData()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '$assets/scss/theme.scss';
+
+.bcol-payment-card {
+  .heading-info {
+    background: var(--v-primary-base);
+    color: #fff !important;
+    h2 {
+      color: #fff !important;
+    }
+    .payee-name {
+      padding-right: 16px;
+      margin-right: 16px;
+      border-right: 1px solid #fff;
+    }
+  }
+  ol {
+    li {
+      margin-bottom: 4px;
+    }
+  }
+  .pay-with-credit-card {
+    ::v-deep {
+      .v-input__slot {
+        align-items: flex-start;
+      }
+      .v-label {
+        display: block;
+        color: #000;
+        .subtxt {
+          font-size: .875rem;
+          margin-top: 6px;
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/auth-web/src/components/pay/PaymentCard.vue b/auth-web/src/components/pay/PaymentCard.vue
index 0de0508a8..802973793 100644
--- a/auth-web/src/components/pay/PaymentCard.vue
+++ b/auth-web/src/components/pay/PaymentCard.vue
@@ -1,70 +1,36 @@
 <template>
-  <v-card class="bcol-payment-card">
-    <v-card-text class="heading-info py-7 px-8">
-      <h2 class="mb-2">Balance Due: <span class="ml-2">${{totalBalanceDue.toFixed(2)}}</span></h2>
-      <template v-if="payWithCreditCard">
-        <p class="mb-1" v-if="showPayWithOnlyCC">
-          <strong>Credit card will be the only payment option for this transaction</strong>.<br />
-          Online banking payment option is not available.
-        </p>
-        <p class="mb-1" v-else>
-          Click "pay now" to complete transaction balance with credit card.
-          By credit card, your transaction will be completed <strong>immediately</strong>.
-        </p>
-      </template>
-      <template v-else>
-        <p class="mb-6">
-          Transaction will be completed when payment is received in full.
-          Online Banking payment methods can expect between <strong>2-5 days</strong> for your payment.
-        </p>
-        <div class="mb-1">
-          <span class="payee-name">
-            <strong>Payee Name:</strong>
-            {{payeeName}}
-          </span>
-          <span>
-            <strong>Account #:</strong>
-            {{cfsAccountId}}
-          </span>
-        </div>
-      </template>
-    </v-card-text>
-    <v-card-text class="pt-7 pb-8 px-8">
-      <template v-if="payWithCreditCard">
-        <h3 class="body-1 font-weight-bold mb-3">How to pay with credit card:</h3>
-        <ol class="mb-5">
-          <li>Click on "Pay Now"</li>
-          <li>Complete credit card payment</li>
-          <li>Get confirmation receipt</li>
-        </ol>
-      </template>
-      <template v-else>
-        <h3 class="mb-3">How to pay with online banking:</h3>
-        <ol class="mb-5">
-          <li>Sign in to your financial institution's online banking website or app</li>
-          <li>Go to your financial institution's bill payment page</li>
-          <li>Enter "BC Registries and Online Services" as payee</li>
-          <li>Enter BC Registries and Online Services account number</li>
-          <li>Submit your payment for the balance due</li>
-        </ol>
+  <v-card class="bcol-payment-card" data-test='div-bcol-payment-card'>
+    <!-- wording for credit card payment -->
+    <PayWithCreditCard v-if="payWithCreditCard"
+    :totalBalanceDue="totalBalanceDue"
+    :showPayWithOnlyCC="showPayWithOnlyCC"
+    :partialCredit="partialCredit"
+    />
+    <!-- wording for online bank payment -->
+    <PayWithOnlineBanking
+    :onlineBankingData="onlineBankingData"
+    v-else />
+
+    <v-card-text class="pt-0 pb-8 px-8">
+      <template v-if="!overCredit">
+        <p v-if="showPayWithOnlyCC">Click <strong>"pay now"</strong> to complete transaction balance with credit card</p>
+        <p v-else>Would you like to complete transaction immediately?</p>
+        <v-checkbox
+          class="pay-with-credit-card mb-4"
+          v-model="payWithCreditCard"
+          color="primary"
+          hide-details
+          :disabled="showPayWithOnlyCC"
+        >
+          <template v-slot:label>
+            <div class="ml-1">
+              <div class="font-weight-bold">Credit Card</div>
+              <div class="subtitle-2 mt-1">Pay your balance and access files <strong>immediately</strong></div>
+              <div class="subtitle-2" v-if="partialCredit">Account credit will <strong>not apply</strong> with credit card payment option.</div>
+            </div>
+          </template>
+        </v-checkbox>
       </template>
-      <v-divider class="my-6"></v-divider>
-      <p v-if="showPayWithOnlyCC">Click <strong>"pay now"</strong> to complete transaction balance with credit card</p>
-      <p v-else>Would you like to complete transaction immediately?</p>
-      <v-checkbox
-        class="pay-with-credit-card mb-4"
-        v-model="payWithCreditCard"
-        color="primary"
-        hide-details
-        :disabled="showPayWithOnlyCC"
-      >
-        <template v-slot:label>
-          <div class="ml-1">
-            <div class="font-weight-bold">Credit Card</div>
-            <div class="subtitle-2 mt-1">Pay your balance and access files <strong>immediately</strong></div>
-          </div>
-        </template>
-      </v-checkbox>
       <v-divider class="mt-8"></v-divider>
       <v-row>
         <v-col
@@ -77,7 +43,8 @@
             color="primary"
             class="px-0"
             @click="emitBtnClick('download-invoice')"
-            v-if="!payWithCreditCard"
+            v-if="!payWithCreditCard && !overCredit"
+            data-test='btn-download-invoice'
           >
             <v-icon class="mr-1">
               mdi-file-download-outline
@@ -100,6 +67,7 @@
               width="100"
               class="ml-3"
               @click="cancel"
+              data-test='btn-cancel-online-banking'
             >
               Cancel
             </v-btn>
@@ -111,6 +79,7 @@
               width="100"
               class="font-weight-bold"
               @click="emitBtnClick('complete-online-banking')"
+              data-test='btn-complete-online-banking'
             >
               Ok
             </v-btn>
@@ -124,21 +93,61 @@
 <script lang="ts">
 
 import { Component, Emit, Prop, Vue } from 'vue-property-decorator'
+import PayWithCreditCard from '@/components/pay/PayWithCreditCard.vue'
+import PayWithOnlineBanking from '@/components/pay/PayWithOnlineBanking.vue'
+import PaymentServices from '@/services/payment.services'
 
-@Component({})
+@Component({
+  components: {
+    PayWithCreditCard,
+    PayWithOnlineBanking
+  }
+
+})
 export default class PaymentCard extends Vue {
   @Prop() paymentCardData: any
   @Prop({ default: false }) showPayWithOnlyCC: boolean
   private payWithCreditCard: boolean = false
+  private balanceDue = 0
   private totalBalanceDue = 0
   private cfsAccountId: string = ''
   private payeeName: string = ''
+  private onlineBankingData: any = []
+  private credit?: number = null
+  private doHaveCredit:boolean = false
+  private overCredit:boolean = false
+  private partialCredit:boolean = false
+  private creditBalance = 0
+  private paymentId: string
+  private totalPaid = 0
 
   private mounted () {
     this.totalBalanceDue = this.paymentCardData?.totalBalanceDue || 0
+    this.totalPaid = this.paymentCardData?.totalPaid || 0
+    this.balanceDue = this.totalBalanceDue - this.totalPaid
     this.payeeName = this.paymentCardData.payeeName
     this.cfsAccountId = this.paymentCardData?.cfsAccountId || ''
     this.payWithCreditCard = this.showPayWithOnlyCC
+    this.credit = this.paymentCardData.credit
+    this.doHaveCredit = this.paymentCardData.credit !== null && this.paymentCardData.credit !== 0
+    if (this.doHaveCredit) {
+      this.overCredit = this.credit >= this.totalBalanceDue
+      this.partialCredit = this.credit < this.totalBalanceDue
+      this.balanceDue = this.overCredit ? this.balanceDue : this.balanceDue - this.credit
+    }
+    this.creditBalance = this.overCredit ? this.credit - this.balanceDue : 0
+    this.paymentId = this.paymentCardData.paymentId
+
+    // setting online data
+    this.onlineBankingData = {
+      totalBalanceDue: this.balanceDue,
+      payeeName: this.payeeName,
+      cfsAccountId: this.cfsAccountId,
+      overCredit: this.overCredit,
+      partialCredit: this.partialCredit,
+      creditBalance: this.creditBalance,
+      credit: this.credit
+    }
   }
 
   private cancel () {
@@ -149,7 +158,10 @@ export default class PaymentCard extends Vue {
     }
   }
 
-  private emitBtnClick (eventName) {
+  private async emitBtnClick (eventName) {
+    if (eventName === 'complete-online-banking' && this.doHaveCredit) {
+      await PaymentServices.applycredit(this.paymentId)
+    }
     this.$emit(eventName)
   }
 }
diff --git a/auth-web/src/services/payment.services.ts b/auth-web/src/services/payment.services.ts
index f034990ef..82dad7b1f 100644
--- a/auth-web/src/services/payment.services.ts
+++ b/auth-web/src/services/payment.services.ts
@@ -53,6 +53,10 @@ export default class PaymentService {
     })
   }
 
+  static applycredit (paymentId: string): AxiosPromise<any> {
+    return axios.patch(`${ConfigHelper.getPayAPIURL()}/payment-requests/${paymentId}?applyCredit=true`, {})
+  }
+
   static createTransactionForPadPayment (paymentId: string, redirectUrl: string): AxiosPromise<any> {
     const url = `${ConfigHelper.getPayAPIURL()}/payments/${paymentId}/transactions`
     return axios.post(url, {
diff --git a/auth-web/src/views/pay/PaymentView.vue b/auth-web/src/views/pay/PaymentView.vue
index 94a2d3ec4..6f02bdfcc 100644
--- a/auth-web/src/views/pay/PaymentView.vue
+++ b/auth-web/src/views/pay/PaymentView.vue
@@ -1,6 +1,6 @@
 <template>
-  <div>
-    <v-container v-if="showLoading">
+  <div data-test="div-payment-view">
+    <v-container v-if="showLoading" data-test="div-payment-view-loading">
       <v-layout row flex-column justify-center align-center class="py-12">
         <v-progress-circular
           color="primary"
@@ -12,7 +12,7 @@
       </v-layout>
     </v-container>
     <div v-else>
-      <v-container v-if="errorMessage">
+      <v-container v-if="errorMessage" data-test="div-payment-view-error">
         <v-layout row justify-center align-center>
           <SbcSystemError
             v-on:continue-event="goToUrl(returnUrl)"
@@ -30,6 +30,7 @@
         </v-layout>
       </v-container>
       <v-container
+        data-test="div-payment-view-container"
         class="view-container"
         v-if="showOnlineBanking">
         <div class="payment-view-content">
@@ -114,9 +115,12 @@ export default class PaymentView extends Vue {
             // get account data to show in the UI
             const paymentDetails: OrgPaymentDetails = await this.getOrgPayments(accountSettings?.id)
             this.paymentCardData = {
-              totalBalanceDue: invoice?.total || 0,
+              totalBalanceDue: invoice?.total || 0, // to fix credit amount
               payeeName: ConfigHelper.getPaymentPayeeName(),
-              cfsAccountId: paymentDetails?.cfsAccount?.cfsAccountNumber || ''
+              cfsAccountId: paymentDetails?.cfsAccount?.cfsAccountNumber || '',
+              credit: paymentDetails?.credit,
+              paymentId: this.paymentId,
+              totalPaid: invoice?.paid || 0
             }
 
             this.showLoading = false
diff --git a/auth-web/tests/unit/components/PayWithCreditCard.spec.ts b/auth-web/tests/unit/components/PayWithCreditCard.spec.ts
new file mode 100644
index 000000000..9a6e62958
--- /dev/null
+++ b/auth-web/tests/unit/components/PayWithCreditCard.spec.ts
@@ -0,0 +1,39 @@
+import { createLocalVue, mount } from '@vue/test-utils'
+import PayWithCreditCard from '@/components/pay/PayWithCreditCard.vue'
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+import Vuetify from 'vuetify'
+import Vuex from 'vuex'
+
+Vue.use(Vuetify)
+Vue.use(VueRouter)
+
+describe('PayWithCreditCard.vue', () => {
+  let wrapper: any
+  beforeEach(() => {
+    const $t = () => ''
+    const localVue = createLocalVue()
+    localVue.use(Vuex)
+    const vuetify = new Vuetify({})
+    const store = new Vuex.Store({
+      state: {},
+      strict: false,
+      modules: {}
+    })
+
+    wrapper = mount(PayWithCreditCard, {
+      store,
+      localVue,
+      vuetify,
+      mocks: { $t }
+    })
+
+    jest.resetModules()
+    jest.clearAllMocks()
+  })
+
+  it('is a Vue instance', () => {
+    expect(wrapper.isVueInstance()).toBeTruthy()
+  })
+
+})
diff --git a/auth-web/tests/unit/components/PayWithOnlineBanking.spec.ts b/auth-web/tests/unit/components/PayWithOnlineBanking.spec.ts
new file mode 100644
index 000000000..f82d00823
--- /dev/null
+++ b/auth-web/tests/unit/components/PayWithOnlineBanking.spec.ts
@@ -0,0 +1,56 @@
+import { createLocalVue, mount } from '@vue/test-utils'
+import PayWithOnlineBanking from '@/components/pay/PayWithOnlineBanking.vue'
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+import Vuetify from 'vuetify'
+import Vuex from 'vuex'
+
+Vue.use(Vuetify)
+Vue.use(VueRouter)
+
+describe('PayWithOnlineBanking.vue', () => {
+  let wrapper: any
+  beforeEach(() => {
+    const localVue = createLocalVue()
+    localVue.use(Vuex)
+    const vuetify = new Vuetify({})
+
+    const store = new Vuex.Store({
+      state: {},
+      strict: false,
+      modules: {}
+    })
+    const onlineBankingData = {
+        totalBalanceDue: 10,
+        payeeName: 'BC Reg',
+        cfsAccountId: 1234,
+        overCredit: true,
+        partialCredit: false,
+        creditBalance: 6,
+        credit: 0
+      }
+
+
+    const $t = () => ''
+    wrapper = mount(PayWithOnlineBanking, {
+        propsData: {
+            onlineBankingData
+        },
+      store,
+      localVue,
+      vuetify,
+      mocks: { $t }
+    })
+
+    jest.resetModules()
+    jest.clearAllMocks()
+  })
+
+  it('is a Vue instance', () => {
+    expect(wrapper.isVueInstance()).toBeTruthy()
+  })
+
+  it('Should have Title section', () => {
+    expect(wrapper.find('.heading-info')).toBeTruthy()
+  })
+})
diff --git a/auth-web/tests/unit/components/PaymentCard.spec.ts b/auth-web/tests/unit/components/PaymentCard.spec.ts
new file mode 100644
index 000000000..25a029891
--- /dev/null
+++ b/auth-web/tests/unit/components/PaymentCard.spec.ts
@@ -0,0 +1,57 @@
+import { createLocalVue, mount } from '@vue/test-utils'
+import PaymentCard from '@/components/pay/PaymentCard.vue'
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+import Vuetify from 'vuetify'
+import Vuex from 'vuex'
+
+Vue.use(Vuetify)
+Vue.use(VueRouter)
+
+describe('PaymentCard.vue', () => {
+  let wrapper: any
+  beforeEach(() => {
+    const localVue = createLocalVue()
+    localVue.use(Vuex)
+    const vuetify = new Vuetify({})
+
+    const store = new Vuex.Store({
+      state: {},
+      strict: false,
+      modules: {}
+    })
+    const paymentCardData = {
+        totalBalanceDue: 50,
+        payeeName: 'BC Reg',
+        cfsAccountId: 1234,
+        overCredit: true,
+        partialCredit: false,
+        creditBalance: 6,
+        credit: 10,
+        paymentId: 1
+      }
+
+
+    const $t = () => ''
+    wrapper = mount(PaymentCard, {
+        propsData: {
+          paymentCardData
+        },
+      store,
+      localVue,
+      vuetify,
+      mocks: { $t }
+    })
+
+    jest.resetModules()
+    jest.clearAllMocks()
+  })
+
+  it('is a Vue instance', () => {
+    expect(wrapper.isVueInstance()).toBeTruthy()
+  })
+
+  it('Should Payment card div', () => {
+    expect(wrapper.find('[data-test="div-bcol-payment-card"]')).toBeTruthy()
+  })
+})
diff --git a/queue_services/account-mailer/src/account_mailer/enums.py b/queue_services/account-mailer/src/account_mailer/enums.py
index 2e62ea049..1bed8400e 100644
--- a/queue_services/account-mailer/src/account_mailer/enums.py
+++ b/queue_services/account-mailer/src/account_mailer/enums.py
@@ -31,7 +31,7 @@ class MessageType(Enum):
     ONLINE_BANKING_UNDER_PAYMENT = 'bc.registry.payment.UnderPaid'
     ONLINE_BANKING_PAYMENT = 'bc.registry.payment.Payment'
     PAD_SETUP_FAILED = 'bc.registry.payment.PadSetupFailed'
-    PAYMENT_PENDING = 'bc.registry.payment.paymentPending'
+    PAYMENT_PENDING = 'bc.registry.payment.ob.outstandingInvoice'
 
 
 class SubjectType(Enum):