diff --git a/auth-web/src/components/auth/account-settings/payment/AccountPaymentMethods.vue b/auth-web/src/components/auth/account-settings/payment/AccountPaymentMethods.vue
index b4835f651b..d3a1da5f21 100644
--- a/auth-web/src/components/auth/account-settings/payment/AccountPaymentMethods.vue
+++ b/auth-web/src/components/auth/account-settings/payment/AccountPaymentMethods.vue
@@ -118,6 +118,12 @@ export default defineComponent({
     PaymentMethods,
     ModalDialog
   },
+  props: {
+    hasPaymentChanged: {
+      type: Boolean,
+      default: false
+    }
+  },
   emits: ['emit-bcol-info'],
   setup (props, { emit, root }) {
     const orgStore = useOrgStore()
@@ -127,7 +133,7 @@ export default defineComponent({
       savedOrganizationType: '',
       selectedPaymentMethod: '',
       padInfo: {} as PADInfo,
-      isBtnSaved: false,
+      isBtnSaved: props.hasPaymentChanged,
       disableSaveBtn: false,
       errorMessage: '',
       errorTitle: 'Payment Update Failed',
@@ -136,7 +142,7 @@ export default defineComponent({
       isLoading: false,
       padValid: false,
       ejvValid: false,
-      paymentMethodChanged: false,
+      paymentMethodChanged: props.hasPaymentChanged,
       isFuturePaymentMethodAvailable: false, // set true if in between 3 days cooling period
       isTOSandAcknowledgeCompleted: false // set true if TOS already accepted
     })
diff --git a/auth-web/src/components/auth/common/PADInfoForm.vue b/auth-web/src/components/auth/common/PADInfoForm.vue
index 06918d8bb8..96ad8af50f 100644
--- a/auth-web/src/components/auth/common/PADInfoForm.vue
+++ b/auth-web/src/components/auth/common/PADInfoForm.vue
@@ -123,7 +123,7 @@
               @change="emitPreAuthDebitInfo"
             >
               <template #label>
-                {{ acknowledgementLabel }}
+                <span :class="acknowledgeColor">{{ acknowledgementLabel }}</span>
               </template>
             </v-checkbox>
           </v-col>
@@ -136,6 +136,7 @@
             <div class="terms-container">
               <TermsOfUseDialog
                 :isAlreadyAccepted="isTOSAccepted"
+                :checkErrors="checkErrors"
                 :tosText="'terms and conditions'"
                 :tosType="'termsofuse_pad'"
                 :tosHeading="'Business Pre-Authorized Debit Terms and Conditions Agreement BC Registries and Online Services'"
@@ -170,7 +171,9 @@ interface PADInfoFormState {
   transitNumber: string,
   showPremiumPADInfo: ComputedRef<boolean>,
   acknowledgementLabel: ComputedRef<string>,
-  padInfoSubtitle: ComputedRef<string>
+  padInfoSubtitle: ComputedRef<string>,
+  acknowledgeColor: ComputedRef<string>,
+  accountNumberRules: ComputedRef<((v: any) => true | string)[]>
 }
 
 export default defineComponent({
@@ -183,7 +186,8 @@ export default defineComponent({
     isInitialAcknowledged: { type: Boolean, default: false },
     isInitialTOSAccepted: { type: Boolean, default: false },
     isTOSNeeded: { type: Boolean, default: true },
-    padInformation: { default: () => { return {} as PADInfo } }
+    padInformation: { default: () => { return {} as PADInfo } },
+    checkErrors: { type: Boolean, default: false }
   },
   emits: ['emit-pre-auth-debit-info', 'is-pre-auth-debit-form-valid', 'is-pad-info-touched'],
   setup (props, { emit }) {
@@ -227,20 +231,20 @@ export default defineComponent({
           ' (3) day confirmation period has ended.'
           : 'This account will not be able to perform any transactions until the mandatory' +
           ' (3) day confirmation period has ended.'
+      }),
+      acknowledgeColor: computed((): string => props.checkErrors && !state.isAcknowledged ? 'error--text' : ''),
+      accountNumberRules: computed((): ((v: any) => true | string)[] => {
+        const rules: ((v: any) => true | string)[] = [
+          v => !!v || 'Account Number is required',
+          v => (v.length >= 7 && v.length <= 12) || 'Account Number should be between 7 to 12 digits'
+        ]
+        if (state.isTouched) {
+          rules.push(v => (!v.includes('X') || 'Edited payment information should not contain masked digits (i.e. XXX)'))
+        }
+        return rules
       })
     }) as unknown) as PADInfoFormState
 
-    const accountNumberRules = computed((): ((v: any) => true | string)[] => {
-      const rules: ((v: any) => true | string)[] = [
-        v => !!v || 'Account Number is required',
-        v => (v.length >= 7 && v.length <= 12) || 'Account Number should be between 7 to 12 digits'
-      ]
-      if (state.isTouched) {
-        rules.push(v => (!v.includes('X') || 'Edited payment information should not contain masked digits (i.e. XXX)'))
-      }
-      return rules
-    })
-
     // emits
     const emitIsPreAuthDebitFormValid = () => {
       const acknowledge = (props.isAcknowledgeNeeded) ? state.isAcknowledged : true
@@ -298,7 +302,6 @@ export default defineComponent({
 
     return {
       accountMask,
-      accountNumberRules,
       institutionNumberRules,
       transitNumberRules,
       ...toRefs(state),
@@ -334,4 +337,8 @@ export default defineComponent({
   .help-btn {
     margin-top: -2px;
   }
+
+  .error--text ::v-deep .v-icon {
+    color: var(--v-error-base) !important;
+  }
 </style>
diff --git a/auth-web/src/components/auth/common/PaymentMethods.vue b/auth-web/src/components/auth/common/PaymentMethods.vue
index 5cb3a2c229..477d16e065 100644
--- a/auth-web/src/components/auth/common/PaymentMethods.vue
+++ b/auth-web/src/components/auth/common/PaymentMethods.vue
@@ -17,7 +17,6 @@
         class="payment-card py-8 px-8 mb-4 elevation-1"
         :class="{'selected': isPaymentSelected(payment)}"
         :data-test="`div-payment-${payment.type}`"
-        @click="paymentMethodSelected(payment)"
       >
         <div>
           <header class="d-flex align-center">
@@ -340,8 +339,27 @@ export default defineComponent({
       }
     }
 
-    const paymentMethodSelected = (payment, isTouch = true) => {
-      if (payment.type === PaymentTypes.BCOL && isTouch && selectedPaymentMethod.value !== PaymentTypes.BCOL) {
+    const hasBalanceOwing = async () => {
+      try {
+        const responseData = await getStatementsSummary(props.currentOrganization.id)
+        return responseData?.totalDue || responseData?.totalInvoiceDue
+      } catch (error) {
+        console.log(error)
+      }
+    }
+
+    const paymentMethodSelected = async (payment, isTouch = true) => {
+      const isFromEFT = props.currentOrgPaymentType === PaymentTypes.EFT
+      if (payment.type === PaymentTypes.PAD && isFromEFT) {
+        const hasOutstandingBalance = await hasBalanceOwing()
+        if (hasOutstandingBalance) {
+          await root.$router.push({
+            name: Pages.PAY_OUTSTANDING_BALANCE,
+            params: { orgId: props.currentOrganization.id },
+            query: { changePaymentType: payment.type }
+          })
+        }
+      } else if (payment.type === PaymentTypes.BCOL && isTouch && selectedPaymentMethod.value !== PaymentTypes.BCOL) {
         bcOnlineDialog.value.open()
       } else {
         state.bcOnlineWarningMessage = 'This payment method will soon be retired.'
@@ -381,15 +399,6 @@ export default defineComponent({
       selectedPaymentMethod.value = ''
     }
 
-    const hasBalanceOwing = async () => {
-      try {
-        const responseData = await getStatementsSummary(props.currentOrganization.id)
-        return responseData?.totalDue || responseData?.totalInvoiceDue
-      } catch (error) {
-        console.log(error)
-      }
-    }
-
     const continueModal = async () => {
       const hasOutstandingBalance = await hasBalanceOwing()
       const isFromEFT = props.currentOrgPaymentType === PaymentTypes.EFT
diff --git a/auth-web/src/components/auth/common/TermsOfUseDialog.vue b/auth-web/src/components/auth/common/TermsOfUseDialog.vue
index d92e538e9c..7bf6847aea 100644
--- a/auth-web/src/components/auth/common/TermsOfUseDialog.vue
+++ b/auth-web/src/components/auth/common/TermsOfUseDialog.vue
@@ -12,14 +12,13 @@
       v-model="termsAccepted"
       color="primary"
       class="terms-checkbox align-checkbox-label--top ma-0 pa-0"
-      hide-details
       :disabled="!canCheckTerms"
       required
       data-test="check-termsAccepted"
       @change="emitTermsAcceptanceStatus"
     >
       <template #label>
-        <span>I have read, understood and agree to the
+        <span :class="termsColor">I have read, understood and agree to the
           <strong
             class="faux-link"
             role="button"
@@ -105,7 +104,8 @@ export default defineComponent({
     tosCheckBoxLabelAppend: { type: String, default: '' },
     tosText: { type: String, default: '' },
     isUserTOS: { type: Boolean, default: false },
-    isAlreadyAccepted: { type: Boolean, default: false }
+    isAlreadyAccepted: { type: Boolean, default: false },
+    checkErrors: { type: Boolean, default: false }
   },
   setup (props, { emit }) {
     const userStore = useUserStore()
@@ -116,6 +116,7 @@ export default defineComponent({
     const atBottom = ref(false)
 
     const tooltipTxt = computed(() => 'Please read and agree to the Terms Of Use')
+    const termsColor = computed(() => !termsAccepted.value && props.checkErrors ? 'error--text' : '')
 
     onMounted(() => {
       termsDialog.value = false
@@ -163,6 +164,7 @@ export default defineComponent({
     }
 
     return {
+      termsColor,
       termsDialog,
       termsAccepted,
       canCheckTerms,
@@ -274,5 +276,4 @@ h2 {
 .agree-btn {
   font-weight: 600;
 }
-
 </style>
diff --git a/auth-web/src/components/pay/CompletePaymentDetails.vue b/auth-web/src/components/pay/CompletePaymentDetails.vue
index 85dc311710..e36723c79f 100644
--- a/auth-web/src/components/pay/CompletePaymentDetails.vue
+++ b/auth-web/src/components/pay/CompletePaymentDetails.vue
@@ -36,6 +36,30 @@
         data-test="bcol-warning"
       />
     </template>
+    <template v-else-if="changePaymentType === paymentTypes.PAD">
+      <h3 class="mb-2 payment-type-header">
+        <v-icon
+          class="pr-1"
+        >
+          mdi-bank-outline
+        </v-icon>
+        Pre-authorized Debit
+      </h3>
+      <div class="mt-2 mb-8">
+        <span>Automatically debit a bank account when payments are due.</span>
+      </div>
+
+      <v-divider />
+      <PADInfoForm
+        :isChangeView="isChangeView"
+        :isAcknowledgeNeeded="isAcknowledgeNeeded"
+        :isInitialTOSAccepted="isInitialTOSAccepted"
+        :isInitialAcknowledged="isInitialAcknowledged"
+        :checkErrors="checkErrors"
+        @is-pre-auth-debit-form-valid="isPADValid"
+        @emit-pre-auth-debit-info="getPADInfo($event)"
+      />
+    </template>
     <template v-else>
       <p
         class="mb-10"
@@ -77,17 +101,19 @@
           depressed
           class="secondary-btn"
           data-test="btn-stepper-back"
+          :loading="isLoading"
           @click="cancel"
         >
-          <span>Cancel</span>
+          <span>{{ cancelButtonText }}</span>
         </v-btn>
         <v-spacer />
         <v-btn
           large
           color="primary"
+          :loading="isLoading"
           @click="complete"
         >
-          <span>Complete</span>
+          <span>{{ nextButtonText }}</span>
           <v-icon class="ml-2">
             mdi-arrow-right
           </v-icon>
@@ -98,16 +124,18 @@
 </template>
 
 <script lang="ts">
+import { CreateRequestBody, PADInfo, PADInfoValidation } from '@/models/Organization'
 import { Pages, PaymentTypes } from '@/util/constants'
-import { PropType, defineComponent, reactive, toRefs } from '@vue/composition-api'
+import { PropType, computed, defineComponent, reactive, toRefs } from '@vue/composition-api'
 import { BcolProfile } from '@/models/bcol'
 import CautionBox from '@/components/auth/common/CautionBox.vue'
 import LinkedBCOLBanner from '@/components/auth/common/LinkedBCOLBanner.vue'
+import PADInfoForm from '@/components/auth/common/PADInfoForm.vue'
 import { useOrgStore } from '@/stores'
 
 export default defineComponent({
   name: 'CompletePaymentDetails',
-  components: { CautionBox, LinkedBCOLBanner },
+  components: { CautionBox, LinkedBCOLBanner, PADInfoForm },
   props: {
     orgId: {
       type: String as PropType<string>,
@@ -120,6 +148,11 @@ export default defineComponent({
     changePaymentType: {
       type: String as PropType<string>,
       default: ''
+    },
+    stepJumpTo: {
+      type: Function as PropType<(number) => void>,
+      required: false,
+      default: undefined
     }
   },
   emits: ['step-forward'],
@@ -128,7 +161,18 @@ export default defineComponent({
     const paymentTypes = PaymentTypes
     const state = reactive({
       bcolInfo: {} as BcolProfile,
-      errorMessage: undefined
+      errorMessage: undefined,
+      padInfo: {} as PADInfo,
+      isChangeView: false,
+      isAcknowledgeNeeded: true,
+      isInitialTOSAccepted: true,
+      isInitialAcknowledged: false,
+      checkErrors: false,
+      padValid: false,
+      isPaymentChanged: false,
+      isLoading: false,
+      cancelButtonText: computed((): string => props.changePaymentType === PaymentTypes.PAD ? 'Back' : 'Cancel'),
+      nextButtonText: computed((): string => props.changePaymentType === PaymentTypes.PAD ? 'Next' : 'Complete')
     })
 
     function setBcolInfo (bcolProfile: BcolProfile) {
@@ -142,41 +186,106 @@ export default defineComponent({
     }
 
     function goToPaymentOptions () {
-      root.$router.push(`${Pages.ACCOUNT_SETTINGS}/${Pages.PAYMENT_OPTION}`)
+      root.$router?.push({
+        name: Pages.PAYMENT_OPTION,
+        params: { hasPaymentChanged: state.isPaymentChanged }
+      })
     }
 
     function cancel () {
       goToPaymentOptions()
     }
 
-    const complete = async () => {
+    function isPADValid (isValid) {
+      state.padValid = isValid
+    }
+
+    async function verifyPAD () {
+      const verifyPad: PADInfoValidation = await orgStore.validatePADInfo()
+      if (!verifyPad || verifyPad?.isValid) {
+        // proceed to update payment even if the response is empty or valid account info
+        return true
+      } else {
+        state.errorMessage = 'Bank information validation failed'
+        if (verifyPad?.message?.length) {
+          let msgList = ''
+          verifyPad.message.forEach((msg) => {
+            msgList += `${msg}`
+          })
+          state.errorMessage = `${msgList}`
+        }
+        return false
+      }
+    }
+
+    async function getCreateRequestBody () {
+      let isValid = false
+      let createRequestBody: CreateRequestBody
+
+      if (props.changePaymentType === PaymentTypes.BCOL) {
+        isValid = !!(state.bcolInfo.userId && state.bcolInfo.password)
+        if (!isValid) {
+          state.errorMessage = 'Missing User ID and Password for BC Online.'
+          return
+        }
+        createRequestBody = {
+          paymentInfo: {
+            paymentMethod: PaymentTypes.BCOL
+          },
+          bcOnlineCredential: state.bcolInfo
+        }
+      } else if (props.changePaymentType === PaymentTypes.PAD && state.padValid) {
+        isValid = await verifyPAD()
+        createRequestBody = {
+          paymentInfo: {
+            paymentMethod: PaymentTypes.PAD,
+            bankTransitNumber: state.padInfo.bankTransitNumber,
+            bankInstitutionNumber: state.padInfo.bankInstitutionNumber,
+            bankAccountNumber: state.padInfo.bankAccountNumber
+          }
+        }
+      }
+      return { isValid, createRequestBody }
+    }
+
+    function getPADInfo (padInfoValue: PADInfo) {
+      state.padInfo = padInfoValue
+    }
+
+    async function complete () {
+      state.isLoading = true
+      state.checkErrors = true
+      state.isInitialTOSAccepted = true
       state.errorMessage = ''
       if (props.changePaymentType === PaymentTypes.BCOL) {
         const isValid = !!(state.bcolInfo.userId && state.bcolInfo.password)
         if (!isValid) {
           state.errorMessage = 'Missing User ID and Password for BC Online.'
+          state.isLoading = false
           return
         }
       }
-      const createRequestBody = {
-        paymentInfo: {
-          paymentMethod: PaymentTypes.BCOL
-        },
-        bcOnlineCredential: state.bcolInfo
-      }
-      try {
-        await orgStore.updateOrg(createRequestBody)
-        goToPaymentOptions()
-      } catch (error) {
-        switch (error.response.status) {
-          case 400:
-          case 409:
-            state.errorMessage = error.response.data.message
-            break
-          default:
-            state.errorMessage = 'An error occurred while attempting to create your account.'
+      const { isValid, createRequestBody } = await getCreateRequestBody()
+
+      if (isValid) {
+        try {
+          await orgStore.updateOrg(createRequestBody)
+          orgStore.setCurrentOrganizationPaymentType(props.changePaymentType)
+          state.isPaymentChanged = true
+          goToPaymentOptions()
+        } catch (error) {
+          switch (error.response.status) {
+            case 400:
+            case 409:
+              state.errorMessage = error.response.data.message
+              state.isLoading = false
+              break
+            default:
+              state.errorMessage = 'An error occurred while attempting to create your account.'
+          }
         }
       }
+      state.isLoading = false
     }
 
     return {
@@ -185,7 +294,9 @@ export default defineComponent({
       paymentTypes,
       setBcolInfo,
       warningMessage,
-      cancel
+      cancel,
+      getPADInfo,
+      isPADValid
     }
   }
 })
diff --git a/auth-web/src/components/pay/OutstandingBalances.vue b/auth-web/src/components/pay/OutstandingBalances.vue
index d374cff34a..1f83e4d34d 100644
--- a/auth-web/src/components/pay/OutstandingBalances.vue
+++ b/auth-web/src/components/pay/OutstandingBalances.vue
@@ -102,9 +102,11 @@
     >
       <v-card-text class="payment-method-card-text py-2 d-flex">
         <input
+          v-model="selectedPaymentMethod"
           type="radio"
           class="payment-method-radio ml-8 mr-8 d-flex"
           name="payment-method"
+          value="cc"
           checked
         >
         <div class="payment-method-description d-flex">
@@ -125,6 +127,41 @@
         </div>
       </v-card-text>
     </v-card>
+
+    <v-card
+      v-if="enableEFTBalanceByPADFeature"
+      outlined
+      flat
+      class="payment-method-card mb-8 mt-8"
+      data-test="pad-payment-card"
+    >
+      <v-card-text class="payment-method-card-text py-2 d-flex">
+        <input
+          v-model="selectedPaymentMethod"
+          type="radio"
+          class="payment-method-radio ml-8 mr-8 d-flex"
+          name="payment-method"
+          value="pad"
+        >
+        <div class="payment-method-description d-flex">
+          <div class="payment-type-label d-flex">
+            <v-icon
+              class="payment-type-icon pr-2"
+              large
+            >
+              mdi-bank-outline
+            </v-icon>
+            <div class="payment-type-description">
+              Pre-authorized Debit
+            </div>
+          </div>
+          <div class="payment-method-description pt-1 d-flex">
+            To pay using your Pre-Authorized Debit Account, please note that the Canadian Payment
+            Association requires a confirmation period of 3 days before deducting funds.
+          </div>
+        </div>
+      </v-card-text>
+    </v-card>
     <v-divider />
     <v-row>
       <v-col
@@ -191,7 +228,13 @@ export default defineComponent({
     statementSummary: {
       type: Object,
       default: () => ({})
-    }
+    },
+    stepForward: {
+      type: Function as PropType<() => void>,
+      required: false,
+      default: undefined
+    },
+    enableEFTBalanceByPADFeature: { type: Boolean, default: false }
   },
   emits: ['step-forward'],
   setup (props, { root }) {
@@ -202,7 +245,8 @@ export default defineComponent({
       invoicesOwing: 0,
       loading: false,
       handlingPayment: false,
-      statementOwingError: false
+      statementOwingError: false,
+      selectedPaymentMethod: 'cc'
     })
 
     const handlePayment = async () => {
@@ -214,7 +258,7 @@ export default defineComponent({
       const encodedUrl = encodeURIComponent(returnUrl)
 
       // redirect to make payment UI
-      await root.$router.push(`${Pages.MAKE_PAD_PAYMENT}${payment.id}/transactions/${encodedUrl}`)
+      await root.$router.push(`${Pages.MAKE_CC_PAYMENT}${payment.id}/transactions/${encodedUrl}`)
       state.handlingPayment = false
     }
 
@@ -223,7 +267,11 @@ export default defineComponent({
     }
 
     function goNext () {
-      handlePayment()
+      if (state.selectedPaymentMethod === 'pad') {
+        props.stepForward()
+      } else {
+        handlePayment()
+      }
     }
 
     async function getStatementsOwing () {
diff --git a/auth-web/src/routes/router.ts b/auth-web/src/routes/router.ts
index b50a39d9f7..acc97fe023 100644
--- a/auth-web/src/routes/router.ts
+++ b/auth-web/src/routes/router.ts
@@ -314,7 +314,8 @@ export function getRoutes (): RouteConfig[] {
         {
           path: 'payment-option',
           name: 'payment-option',
-          component: accountPaymentOption
+          component: accountPaymentOption,
+          props: true
         },
         {
           path: 'transactions',
diff --git a/auth-web/src/util/constants.ts b/auth-web/src/util/constants.ts
index 97d05b73ff..91ecc03e52 100644
--- a/auth-web/src/util/constants.ts
+++ b/auth-web/src/util/constants.ts
@@ -100,7 +100,7 @@ export enum Pages {
     STAFF_DASHBOARD_INVITATIONS = '/staff/dashboard/invitations',
     STAFF_DASHBOARD_SUSPENDED = '/staff/dashboard/suspended',
     STAFF_DASHBOARD_INACTIVE = '/staff/dashboard/inactive',
-    MAKE_PAD_PAYMENT = '/make-cc-payment/',
+    MAKE_CC_PAYMENT = '/make-cc-payment/',
     STAFF_GOVM_SETUP_ACCOUNT = '/staff-govm-setup-account',
     SETUP_GOVM_ACCOUNT_SUCCESS='setup-govm-account-success',
     DUPLICATE_ACCOUNT_WARNING='/duplicate-account-warning',
@@ -478,7 +478,8 @@ export enum LDFlags {
     AllowableBusinessSearchTypes = 'allowable-business-search-types',
     AllowableBusinessPasscodeTypes = 'allowable-business-passcode-types',
     EnableAffiliationDelegation = 'enable-affiliation-delegation',
-    EnableCreditCardPremium = 'enable-credit-card-premium'
+    EnableCreditCardPremium = 'enable-credit-card-premium',
+    EnableEFTBalanceByPAD = 'enable-eft-balance-by-pad',
 }
 
 export enum DateFilterCodes {
diff --git a/auth-web/src/views/auth/account-freeze/AccountFreezeUnlockView.vue b/auth-web/src/views/auth/account-freeze/AccountFreezeUnlockView.vue
index b4d0ec490f..157546d54e 100644
--- a/auth-web/src/views/auth/account-freeze/AccountFreezeUnlockView.vue
+++ b/auth-web/src/views/auth/account-freeze/AccountFreezeUnlockView.vue
@@ -190,7 +190,7 @@ export default defineComponent({
       const returnUrl = `${baseUrl}/${Pages.ACCOUNT_UNLOCK_SUCCESS}`
       const encodedUrl = encodeURIComponent(returnUrl)
       // redirect to make payment UI
-      await root.$router.push(`${Pages.MAKE_PAD_PAYMENT}${payment.id}/transactions/${encodedUrl}`)
+      await root.$router.push(`${Pages.MAKE_CC_PAYMENT}${payment.id}/transactions/${encodedUrl}`)
     }
 
     async function checkPaymentMethods () {
diff --git a/auth-web/src/views/pay/PayOutstandingBalanceView.vue b/auth-web/src/views/pay/PayOutstandingBalanceView.vue
index a45859f57a..ec3f505395 100644
--- a/auth-web/src/views/pay/PayOutstandingBalanceView.vue
+++ b/auth-web/src/views/pay/PayOutstandingBalanceView.vue
@@ -2,6 +2,17 @@
   <v-container
     class="view-container"
   >
+    <div
+      v-if="changePaymentType !== ''"
+      class="view-header flex-column"
+    >
+      <h1
+        class="view-header__title"
+        data-test="account-settings-title"
+      >
+        Changing Payment Method to {{ getPaymentTypeText }}
+      </h1>
+    </div>
     <v-card flat>
       <Stepper
         ref="stepper"
@@ -17,10 +28,11 @@
 </template>
 
 <script lang="ts">
-
-import { PropType, defineComponent, onMounted, ref } from '@vue/composition-api'
+import { LDFlags, PaymentTypes } from '@/util/constants'
+import { PropType, computed, defineComponent, onMounted, ref } from '@vue/composition-api'
 import Stepper, { StepConfiguration } from '@/components/auth/common/stepper/Stepper.vue'
 import CompletePaymentDetails from '@/components/pay/CompletePaymentDetails.vue'
+import LaunchDarklyService from 'sbc-common-components/src/services/launchdarkly.services'
 import OutstandingBalances from '@/components/pay/OutstandingBalances.vue'
 import { useOrgStore } from '@/stores'
 
@@ -52,6 +64,9 @@ export default defineComponent({
     const isLoading = ref(false)
     const statementSummary = ref(null)
     const stepper = ref(null)
+    const enableEFTBalanceByPADFeature = computed(() => {
+      return LaunchDarklyService.getFlag(LDFlags.EnableEFTBalanceByPAD) || false
+    })
     const stepperConfig: StepConfiguration[] = [
       {
         title: 'Outstanding Balances',
@@ -60,7 +75,9 @@ export default defineComponent({
         componentProps: {
           orgId: props.orgId,
           changePaymentType: props.changePaymentType,
-          statementSummary: statementSummary
+          statementSummary: statementSummary,
+          stepForward: handleStepForward,
+          enableEFTBalanceByPADFeature: enableEFTBalanceByPADFeature.value
         }
       },
       {
@@ -70,7 +87,9 @@ export default defineComponent({
         componentProps: {
           orgId: props.orgId,
           paymentId: props.paymentId,
-          changePaymentType: props.changePaymentType
+          changePaymentType: props.changePaymentType,
+          stepJumpTo: handleStepJumpTo,
+          enableEFTBalanceByPADFeature: enableEFTBalanceByPADFeature.value
         }
       }
     ]
@@ -98,20 +117,35 @@ export default defineComponent({
       }
     })
 
-    const handleStepForward = () => {
+    function handleStepForward () {
       stepper.value.stepForward()
     }
 
-    const handleStepBack = () => {
+    function handleStepBack () {
       stepper.value.stepBack()
     }
 
+    function handleStepJumpTo (num) {
+      stepper.value.jumpToStep(num)
+    }
+
+    const getPaymentTypeText = computed(() => {
+      if (props.changePaymentType === PaymentTypes.BCOL) {
+        return 'BC Online'
+      } else if (props.changePaymentType === PaymentTypes.PAD) {
+        return 'Pre-authorized Debit'
+      }
+      return ''
+    })
+
     return {
       isLoading,
       stepper,
       stepperConfig,
       handleStepForward,
-      handleStepBack
+      handleStepBack,
+      getPaymentTypeText,
+      enableEFTBalanceByPADFeature
     }
   }
 })
diff --git a/auth-web/tests/unit/components/CompletePaymentDetails.spec.ts b/auth-web/tests/unit/components/CompletePaymentDetails.spec.ts
index 3599c6b7e0..59b21cd875 100644
--- a/auth-web/tests/unit/components/CompletePaymentDetails.spec.ts
+++ b/auth-web/tests/unit/components/CompletePaymentDetails.spec.ts
@@ -14,6 +14,7 @@ describe('CompletePaymentDetails.vue', () => {
   const localVue = createLocalVue()
   localVue.directive('can', can)
   const vuetify = new Vuetify({})
+  const $t = () => ''
 
   beforeEach(async () => {
     wrapper = mount(CompletePaymentDetails, {
@@ -36,6 +37,20 @@ describe('CompletePaymentDetails.vue', () => {
     vi.clearAllMocks()
   })
 
+  const mountComponent = (paymentType: string) => {
+    return mount(CompletePaymentDetails, {
+      propsData: {
+        orgId: '1234',
+        paymentId: '1234',
+        changePaymentType: paymentType,
+        stepJumpTo: vi.fn()
+      },
+      localVue,
+      vuetify,
+      mocks: { $t }
+    })
+  }
+
   it('is a Vue instance', () => {
     const $t = () => ''
     wrapper = mount(CompletePaymentDetails, {
@@ -47,10 +62,21 @@ describe('CompletePaymentDetails.vue', () => {
     expect(wrapper.vm).toBeTruthy()
   })
 
-  it('Renders elements', async () => {
+  it('Renders BCOL elements', async () => {
+    wrapper = mountComponent(PaymentTypes.BCOL)
+    await wrapper.vm.$nextTick()
     expect(wrapper.find('.balance-paid').exists()).toBe(true)
     expect(wrapper.find('[data-test="bcol-form"]').exists()).toBe(true)
     expect(wrapper.find('[data-test="bcol-warning"]').exists()).toBe(true)
     expect(wrapper.find('[data-test="error-payment-method"]').exists()).toBe(false)
   })
+
+  it('Renders PAD elements', async () => {
+    wrapper = mountComponent(PaymentTypes.PAD)
+    await wrapper.vm.$nextTick()
+
+    expect(wrapper.find('.balance-paid').exists()).toBe(true)
+    expect(wrapper.find('h3').text()).toContain('Pre-authorized Debit')
+    expect(wrapper.find('[data-test="error-payment-method"]').exists()).toBe(false)
+  })
 })