diff --git a/auth-web/.eslintrc.js b/auth-web/.eslintrc.js
index e9e266381a..bdf58c9675 100644
--- a/auth-web/.eslintrc.js
+++ b/auth-web/.eslintrc.js
@@ -47,7 +47,7 @@ module.exports = {
     '@typescript-eslint/no-use-before-define': ['error', { 'functions': false, 'classes': true, 'variables': true }],
     'no-unused-expressions': 'off',
     '@typescript-eslint/no-unused-expressions': ['error', { 'allowShortCircuit': true, 'allowTernary': true }],
-    'vue/multi-word-component-names': ['error', { 'ignores': ['Transactions'] }],
+    'vue/multi-word-component-names': ['error', { 'ignores': ['Transactions', 'Product'] }],
     'vue/component-name-in-template-casing': ['error', 'PascalCase'],
     // Not ideal but shallowOnly option isn't working for this, so leaving it off for now.
     // https://eslint.vuejs.org/rules/no-mutating-props.html
diff --git a/auth-web/package-lock.json b/auth-web/package-lock.json
index b638d680cb..2f05aa20f5 100644
--- a/auth-web/package-lock.json
+++ b/auth-web/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "auth-web",
-  "version": "2.6.128",
+  "version": "2.7.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "auth-web",
-      "version": "2.6.128",
+      "version": "2.7.0",
       "dependencies": {
         "@bcrs-shared-components/base-address": "2.0.3",
         "@bcrs-shared-components/bread-crumb": "1.0.8",
diff --git a/auth-web/package.json b/auth-web/package.json
index 055cbdc517..7fb6a9b0f4 100644
--- a/auth-web/package.json
+++ b/auth-web/package.json
@@ -1,6 +1,6 @@
 {
   "name": "auth-web",
-  "version": "2.6.128",
+  "version": "2.7.0",
   "appName": "Auth Web",
   "sbcName": "SBC Common Components",
   "private": true,
diff --git a/auth-web/src/components/auth/common/Product.vue b/auth-web/src/components/auth/common/Product.vue
index fb9ddb4183..4784e20450 100644
--- a/auth-web/src/components/auth/common/Product.vue
+++ b/auth-web/src/components/auth/common/Product.vue
@@ -142,7 +142,6 @@
             >mdi-chevron-down</v-icon></span>
           </v-btn>
         </header>
-
         <div class="product-card-contents ml-9">
           <!-- Product Content Slot -->
           <slot name="productContentSlot" />
@@ -182,6 +181,20 @@
                   @save:saveProductFee="saveProductFee"
                 />
               </div>
+              <v-label class="theme--light">
+                <P class="mt-2">
+                  Supported payment method:
+                </P>
+                <v-chip
+                  v-for="method in paymentMethods"
+                  :key="method"
+                  small
+                  label
+                  class="mr-2 font-weight-bold"
+                >
+                  <v-icon>{{ paymentTypeIcon[method] }}</v-icon>{{ paymentTypeLabel[method] }}
+                </v-chip>
+              </v-label>
             </div>
           </v-expand-transition>
         </div>
@@ -193,193 +206,202 @@
 
 <script lang="ts">
 import { AccountFee, OrgProduct, OrgProductFeeCode } from '@/models/Organization'
-import { Component, Emit, Mixins, Prop, Watch } from 'vue-property-decorator'
 import { DisplayModeValues, Product as ProductEnum, ProductStatus } from '@/util/constants'
-import AccountMixin from '@/components/auth/mixins/AccountMixin.vue'
+import { PropType, computed, defineComponent, onMounted, reactive, toRefs, watch } from '@vue/composition-api'
+import { paymentTypeIcon, paymentTypeLabel } from '@/resources/display-mappers'
 import LaunchDarklyService from 'sbc-common-components/src/services/launchdarkly.services'
 import ProductFee from '@/components/auth/common/ProductFeeViewEdit.vue'
 import ProductTos from '@/components/auth/common/ProductTOS.vue'
 
 const TOS_NEEDED_PRODUCT = ['VS']
 
-@Component({
+export default defineComponent({
+  name: 'Product',
   components: {
     ProductTos,
     ProductFee
-  }
-})
-export default class Product extends Mixins(AccountMixin) {
-  @Prop({ default: undefined }) productDetails: OrgProduct
-  @Prop({ default: undefined }) activeSubProduct: OrgProduct
-  @Prop({ default: undefined }) orgProduct: AccountFee // product available for orgs
-  @Prop({ default: undefined }) orgProductFeeCodes: OrgProductFeeCode // product
-  @Prop({ default: false }) isProductActionLoading: boolean // loading
-  @Prop({ default: false }) isProductActionCompleted: boolean // loading
-
-  @Prop({ default: '' }) userName: string
-  @Prop({ default: '' }) orgName: string
-  @Prop({ default: false }) isSelected: boolean
-  @Prop({ default: false }) isexpandedView: boolean
-  @Prop({ default: false }) isAccountSettingsView: boolean // to confirm if the rendering is from AccountSettings view
-  @Prop({ default: false }) isBasicAccount: boolean // to confirm if the current organization is basic and the product instance is premium only
-  @Prop({ default: false }) canManageProductFee: boolean
-
-  private termsAccepted: boolean = false
-  public productSelected:boolean = false
-  viewOnly = DisplayModeValues.VIEW_ONLY
-
-  $refs: {
-    tosForm: HTMLFormElement
-  }
-
-  @Watch('isSelected')
-  onisSelectedChange (newValue:boolean) {
-    // setting check box
-    this.productSelected = newValue
-  }
-  get showProductFee () {
-    return this.canManageProductFee && this.orgProduct && this.orgProduct.product
-  }
-
-  get productLabel () {
-    // this is mapping product code with lang file.
-    // lang file have subtitle and description with product code prefix.
-    // eg: pprCodeSubtitle, pprCodeDescription
-    // Also, returns check box icon and color if the product has been reviewed.
-    let { code } = this.productDetails
-    let subTitle = `${code?.toLowerCase()}CodeSubtitle`
-    let details = `${code?.toLowerCase()}CodeDescription`
-    let note = `${code?.toLowerCase()}CodeNote`
-    let decisionMadeIcon = null
-    let decisionMadeColorCode = null
-
-    if (this.isAccountSettingsView) {
-      const status = this.productDetails.subscriptionStatus
-      switch (status) {
-        case ProductStatus.ACTIVE: {
-          subTitle = `${code?.toLowerCase()}CodeActiveSubtitle`
-          decisionMadeIcon = 'mdi-check-circle'
-          decisionMadeColorCode = 'success'
-          break
-        }
-        case ProductStatus.REJECTED: {
-          subTitle = `${code?.toLowerCase()}CodeRejectedSubtitle`
-          decisionMadeIcon = 'mdi-close-circle'
-          decisionMadeColorCode = 'error'
-          break
+  },
+  props: {
+    productDetails: { default: null as OrgProduct },
+    activeSubProduct: { default: null as OrgProduct },
+    orgProduct: { default: null as AccountFee },
+    orgProductFeeCodes: { type: Array as PropType<OrgProductFeeCode[]>, default: () => [] },
+    isProductActionLoading: { type: Boolean, default: false },
+    isProductActionCompleted: { type: Boolean, default: false },
+    userName: { type: String, default: '' },
+    orgName: { type: String, default: '' },
+    isSelected: { type: Boolean, default: false },
+    isexpandedView: { type: Boolean, default: false },
+    isAccountSettingsView: { type: Boolean, default: false },
+    isBasicAccount: { type: Boolean, default: false },
+    canManageProductFee: { type: Boolean, default: false },
+    paymentMethods: { type: Array as PropType<string[]>, default: () => [] }
+  },
+  setup (props, { emit }) {
+    const state = reactive({
+      count: 0,
+      termsAccepted: false,
+      productSelected: props.isSelected,
+      viewOnly: DisplayModeValues.VIEW_ONLY,
+      showProductFee: computed(() => {
+        return props.canManageProductFee && props.orgProduct && props.orgProduct.product
+      }),
+      isTOSNeeded: computed(() => {
+        return TOS_NEEDED_PRODUCT.includes(props.productDetails.code)
+      })
+    })
+
+    onMounted(() => {
+      state.productSelected = props.isSelected
+    })
+
+    watch(() => props.isSelected, (newValue) => {
+      state.productSelected = newValue
+    })
+
+    const isBasicAccountAndPremiumProduct = computed(() => {
+      return props.isBasicAccount && props.productDetails.premiumOnly
+    })
+
+    const productLabel = computed(() => {
+      let { code } = props.productDetails
+      let subTitle = `${code?.toLowerCase()}CodeSubtitle`
+      let details = `${code?.toLowerCase()}CodeDescription`
+      let note = `${code?.toLowerCase()}CodeNote`
+      let decisionMadeIcon = null
+      let decisionMadeColorCode = null
+
+      if (props.isAccountSettingsView) {
+        const status = props.productDetails.subscriptionStatus
+        switch (status) {
+          case ProductStatus.ACTIVE: {
+            subTitle = `${code?.toLowerCase()}CodeActiveSubtitle`
+            decisionMadeIcon = 'mdi-check-circle'
+            decisionMadeColorCode = 'success'
+            break
+          }
+          case ProductStatus.REJECTED: {
+            subTitle = `${code?.toLowerCase()}CodeRejectedSubtitle`
+            decisionMadeIcon = 'mdi-close-circle'
+            decisionMadeColorCode = 'error'
+            break
+          }
+          case ProductStatus.PENDING_STAFF_REVIEW: {
+            subTitle = 'productPendingSubtitle'
+            decisionMadeIcon = 'mdi-clock-outline'
+            break
+          }
+          default: {
+            break
+          }
         }
-        case ProductStatus.PENDING_STAFF_REVIEW: {
-          subTitle = 'productPendingSubtitle'
-          decisionMadeIcon = 'mdi-clock-outline'
-          break
+        if (isBasicAccountAndPremiumProduct.value) {
+          subTitle = `${code?.toLowerCase()}CodeUnselectableSubtitle`
+          decisionMadeIcon = 'mdi-minus-box'
         }
-        default: {
-          break
+        // Swap subtitle and details for sub-product specific content
+        if (props.productDetails.code === ProductEnum.MHR && props.activeSubProduct?.subscriptionStatus === ProductStatus.ACTIVE) {
+          subTitle = `mhrQsCodeActiveSubtitle`
+          details = `${props.activeSubProduct.code?.toLowerCase()}CodeDescription`
+          note = ''
         }
       }
-      if (this.isBasicAccountAndPremiumProduct) {
-        subTitle = `${code?.toLowerCase()}CodeUnselectableSubtitle`
-        decisionMadeIcon = 'mdi-minus-box'
+      return { subTitle, details, decisionMadeIcon, decisionMadeColorCode, note }
+    })
+
+    const hasDecisionNotBeenMade = computed(() => {
+      // returns true if create account flow
+      if (!props.isAccountSettingsView) {
+        return true
       }
-      // Swap subtitle and details for sub-product specific content
-      if (this.productDetails.code === ProductEnum.MHR && this.activeSubProduct?.subscriptionStatus === ProductStatus.ACTIVE) {
-        subTitle = `mhrQsCodeActiveSubtitle`
-        details = `${this.activeSubProduct.code?.toLowerCase()}CodeDescription`
-        note = ''
+      if (([ProductStatus.NOT_SUBSCRIBED] as Array<string>).includes(props.productDetails.subscriptionStatus)) {
+        return true
       }
-    }
-    return { subTitle, details, decisionMadeIcon, decisionMadeColorCode, note }
-  }
-
-  get isTOSNeeded () {
-    // check tos needed for product
-    return TOS_NEEDED_PRODUCT.includes(this.productDetails.code)
-  }
+      return false
+    })
 
-  get isBasicAccountAndPremiumProduct () {
-    return this.isBasicAccount && this.productDetails.premiumOnly
-  }
+    // Untested.
+    watch(() => hasDecisionNotBeenMade.value, (newValue) => {
+      if (!newValue) {
+        state.termsAccepted = true
+      }
+    })
 
-  get hasDecisionNotBeenMade () {
-    // returns true if create account flow
-    if (!this.isAccountSettingsView) {
-      return true
+    function expand () {
+      const productCode = props.isexpandedView ? '' : props.productDetails.code
+      // emit selected product code to controll expand all product
+      emit('toggle-product-details', productCode)
+      return productCode
     }
-    // returns true if product subscription status is unsubscribed and in account settings view
-    if (([ProductStatus.NOT_SUBSCRIBED] as Array<string>).includes(this.productDetails.subscriptionStatus)) {
-      return true
+
+    function selecThisProduct (event, emitFromTos = false) {
+      let forceRemove = false
+      // expand if tos needed
+      // as per new requirment, show expanded when user tries to click checkbox and not accepted TOS.
+      // need to collapse on uncheck. Since both are using same function emitFromTos will be true when
+      // click happend from TOS check box. then no need to collapse
+      if (state.isTOSNeeded && !state.termsAccepted) {
+        if (!emitFromTos) { // expand and collapse on click if click is not coming from TOS
+          expand()
+        }
+        state.productSelected = false
+        // wait till user approve TOS or remove product selection from array if tos not accepted
+        forceRemove = true
+      }
+      emit('set-selected-product', { ...props.productDetails, forceRemove })
     }
-    this.termsAccepted = true
-    return false
-  }
 
-  public mounted () {
-    this.productSelected = this.isSelected
-  }
+    function saveProductFee (data) {
+      emit('save:saveProductFee', data)
+    }
 
-  @Emit('toggle-product-details')
-  public expand () {
-    // emit selected product code to controll expand all product
-    return this.isexpandedView ? '' : this.productDetails.code
-  }
+    function tosChanged (termsAccepted: boolean) {
+      state.count++
+      state.termsAccepted = termsAccepted
+      // force select when tos accept
+      selecThisProduct(undefined, true)// no need to collaps on TOS accept
+    }
 
-  public tosChanged (termsAccepted:boolean) {
-    this.termsAccepted = termsAccepted
-    // force select when tos accept
-    this.selecThisProduct(undefined, true)// no need to collaps on TOS accept
-  }
-  // // this function will only used when we have to show TOS (in product and service dashboard)
+    // if TOS needed will inject component
+    // in future can use different components for different product
+    const productFooter = computed(() => {
+      return {
+        id: 'tos',
+        component: ProductTos,
+        props: {
+          userName: props.userName,
+          orgName: props.orgName,
+          isTOSAlreadyAccepted: state.termsAccepted
+        },
+        events: { 'tos-status-changed': tosChanged },
+        ref: 'tosForm'
+      }
+    })
 
-  // since event is first argument, we are using second to set emitFromTos
-  @Emit('set-selected-product')
-  // eslint-disable-next-line
-  public selecThisProduct (event, emitFromTos:boolean = false) {
+    function productBadge (code: string) {
+      return LaunchDarklyService.getFlag(`product-${code}-status`)
+    }
 
-    let forceRemove = false
-    // expand if tos needed
-    // as per new requirment, show expanded when user tries to click checkbox and not accepted TOS.
-    // need to collapse on uncheck. Since both are using same function emitFromTos will be true when
-    // click happend from TOS check box. then no need to collapse
-    if (this.isTOSNeeded && !this.termsAccepted) {
-      if (!emitFromTos) { // expand and collapse on click if click is not coming from TOS
-        this.expand()
-      }
-      this.productSelected = false
-      // wait till user approve TOS or remove product selection from array if tos not accepted
-      forceRemove = true
+    function productPremTooltipText (code: string) {
+      return LaunchDarklyService.getFlag(`product-${code}-prem-tooltip`)
     }
-    return { ...this.productDetails, forceRemove }
-  }
 
-  // if TOS needed will inject component
-  // in future can use different components for different product
-  get productFooter () {
     return {
-      id: 'tos',
-      component: ProductTos,
-      props: {
-        userName: this.userName,
-        orgName: this.orgName,
-        isTOSAlreadyAccepted: this.termsAccepted
-      },
-      events: { 'tos-status-changed': this.tosChanged },
-      ref: 'tosForm'
+      ...toRefs(state),
+      productLabel,
+      paymentTypeIcon,
+      isBasicAccountAndPremiumProduct,
+      expand,
+      selecThisProduct,
+      productBadge,
+      productPremTooltipText,
+      productFooter,
+      saveProductFee,
+      hasDecisionNotBeenMade,
+      paymentTypeLabel
     }
   }
-
-  @Emit('save:saveProductFee')
-  saveProductFee (data) {
-    return data
-  }
-
-  public productBadge (code: string) {
-    return LaunchDarklyService.getFlag(`product-${code}-status`)
-  }
-
-  public productPremTooltipText (code: string) {
-    return LaunchDarklyService.getFlag(`product-${code}-prem-tooltip`)
-  }
-}
+})
 </script>
 
 <style lang="scss" scoped>
diff --git a/auth-web/src/components/auth/create-account/SelectProductService.vue b/auth-web/src/components/auth/create-account/SelectProductService.vue
index 0423e759de..7ae7094e07 100644
--- a/auth-web/src/components/auth/create-account/SelectProductService.vue
+++ b/auth-web/src/components/auth/create-account/SelectProductService.vue
@@ -4,14 +4,6 @@
     lazy-validation
     data-test="form-profile"
   >
-    <div class="view-header flex-column mb-6">
-      <p
-        v-if="isStepperView"
-        class="mb-9"
-      >
-        To access our digitial registries services, select multiple product and services you require.
-      </p>
-    </div>
     <template v-if="isLoading">
       <div class="loading-inner-container">
         <v-progress-circular
@@ -34,6 +26,7 @@
             :productDetails="product"
             :isexpandedView="product.code === expandedProductCode"
             :isSelected="currentSelectedProducts.includes(product.code)"
+            :paymentMethods="productPaymentMethods[product.code === 'BUSINESS_SEARCH' ? 'BUSINESSSearch' : product.code] || []"
             @set-selected-product="setSelectedProduct"
             @toggle-product-details="toggleProductDetails"
           />
@@ -55,7 +48,7 @@
           depressed
           color="default"
           data-test="btn-back"
-          @click="goBack"
+          @click="stepBack"
         >
           <v-icon
             left
@@ -92,103 +85,99 @@
 </template>
 
 <script lang="ts">
-import { Action, State } from 'pinia-class'
-import { Component, Mixins, Prop } from 'vue-property-decorator'
-import { OrgProduct, Organization } from '@/models/Organization'
+import { computed, defineComponent, onMounted, reactive, ref, toRefs } from '@vue/composition-api'
 import ConfirmCancelButton from '@/components/auth/common/ConfirmCancelButton.vue'
-import { KCUserProfile } from 'sbc-common-components/src/models/KCUserProfile'
-import NextPageMixin from '@/components/auth/mixins/NextPageMixin.vue'
+import NextPageMixin from '../mixins/NextPageMixin.vue'
 import Product from '@/components/auth/common/Product.vue'
-
 import Steppable from '@/components/auth/common/stepper/Steppable.vue'
-
 import { useOrgStore } from '@/stores/org'
-import { useUserStore } from '@/stores/user'
 
-@Component({
+export default defineComponent({
+  name: 'SelectProductService',
   components: {
     ConfirmCancelButton,
     Product
-  }
-})
-export default class SelectProductService extends Mixins(NextPageMixin, Steppable) {
-  @Prop({ default: false }) isStepperView: boolean
-  @Prop({ default: false }) noBackButton: boolean
-  @Prop({ default: false }) readOnly: boolean
-  @Prop({ default: undefined }) orgId: number
-
-  @State(useOrgStore) public currentOrganization!: Organization
-  @State(useUserStore) public currentUser!: KCUserProfile
-  @State(useOrgStore) public productList!: OrgProduct[]
-  @State(useOrgStore) public currentSelectedProducts!: []
-
-  @Action(useOrgStore) public getProductList!:() =>Promise<OrgProduct>
-  @Action(useOrgStore) public addToCurrentSelectedProducts!:(productCode:any) =>Promise<void>
-  @Action(useOrgStore) public resetoCurrentSelectedProducts!:() =>Promise<void>
-  @Action(useOrgStore) public getOrgProducts!:(orgId: number) =>Promise<OrgProduct>
-  @Action(useOrgStore) public setSubscribedProducts!:() =>Promise<OrgProduct>
-
-  @Action(useOrgStore) private setResetAccountTypeOnSetupAccount!: (resetAccountTypeOnSetupAccount: boolean) => void
-
-  public isLoading: boolean = false
-  public expandedProductCode: string = ''
-
-  $refs: {
-    form: HTMLFormElement
-  }
-  private async setup () {
-    this.isLoading = true
-    if (this.readOnly) {
-      await this.getOrgProducts(this.orgId)
-      this.setSubscribedProducts()
-    } else {
-      await this.getProductList()
+  },
+  mixins: [NextPageMixin, Steppable],
+  props: {
+    isStepperView: { type: Boolean, default: false },
+    noBackButton: { type: Boolean, default: false },
+    readOnly: { type: Boolean, default: false },
+    orgId: { type: Number, default: undefined }
+  },
+  setup (props, { root }) {
+    const form = ref(null)
+    const orgStore = useOrgStore()
+
+    const state = reactive({
+      isLoading: false,
+      expandedProductCode: '',
+      productList: computed(() => orgStore.productList),
+      productPaymentMethods: computed(() => orgStore.productPaymentMethods),
+      currentSelectedProducts: computed(() => orgStore.currentSelectedProducts),
+      isFormValid: computed(() => state.currentSelectedProducts && state.currentSelectedProducts.length > 0)
+    })
+
+    async function setup () {
+      state.isLoading = true
+      if (props.readOnly) {
+        await orgStore.getOrgProducts(props.orgId)
+        orgStore.setSubscribedProducts()
+      } else {
+        await orgStore.getProductList()
+      }
+      await orgStore.getProductPaymentMethods()
+      state.isLoading = false
     }
 
-    this.isLoading = false
-  }
+    function setSelectedProduct (productDetails) {
+      const productCode = productDetails.code
+      const forceRemove = productDetails.forceRemove
+      if (productCode) {
+        orgStore.addToCurrentSelectedProducts({ productCode, forceRemove })
+      }
+    }
 
-  public async mounted () {
-    // this.setAccountChangedHandler(this.setup)
-    await this.setup()
-  }
+    function toggleProductDetails (productCode) {
+      state.expandedProductCode = productCode
+    }
 
-  get isFormValid () {
-    return this.currentSelectedProducts && this.currentSelectedProducts.length > 0
-  }
+    function goBack () {
+      // Vue 3 - get rid of MIXINS and use the composition-api instead.
+      (props as any).stepBack()
+    }
 
-  public setSelectedProduct (productDetails) {
-    const productCode = productDetails.code
-    const forceRemove = productDetails.forceRemove
-    // adding to store and submit on final click
-    if (productCode) {
-      this.addToCurrentSelectedProducts({ productCode: productCode, forceRemove })
+    function next () {
+      console.log('next')
+      orgStore.setResetAccountTypeOnSetupAccount(true)
+      ;(props as any).stepForward()
     }
-  }
 
-  public toggleProductDetails (productCode) {
-    // controll product expand here to collapse all other product
-    this.expandedProductCode = productCode
-  }
+    function cancel () {
+      root.$router.push('/')
+    }
 
-  public goBack () {
-    this.stepBack()
-  }
-  public next () {
-    this.setResetAccountTypeOnSetupAccount(true)
-    this.stepForward()
-  }
-  cancel () {
-    this.$router.push('/')
+    onMounted(async () => {
+      await setup()
+    })
+
+    return {
+      ...toRefs(state),
+      form,
+      setSelectedProduct,
+      toggleProductDetails,
+      goBack,
+      next,
+      cancel
+    }
   }
-}
+})
 </script>
 
 <style lang="scss" scoped>
 @import '$assets/scss/theme.scss';
-.loading-inner-container{
+.loading-inner-container {
   display: flex;
   justify-content: center;
 }
-
 </style>
diff --git a/auth-web/src/resources/display-mappers/payment-type-display.ts b/auth-web/src/resources/display-mappers/payment-type-display.ts
index 52dcec782a..2d355e5931 100644
--- a/auth-web/src/resources/display-mappers/payment-type-display.ts
+++ b/auth-web/src/resources/display-mappers/payment-type-display.ts
@@ -14,3 +14,33 @@ export const paymentTypeDisplay = {
   [PaymentTypes.PAD]: 'Pre-Authorized Debit',
   [PaymentTypes.CREDIT]: 'Account Credit'
 }
+
+export const paymentTypeLabel = {
+  [PaymentTypes.BCOL]: 'BC ONLINE',
+  [PaymentTypes.CASH]: 'CASH',
+  [PaymentTypes.CHEQUE]: 'CHEQUE',
+  [PaymentTypes.CREDIT_CARD]: 'CREDIT CARD',
+  [PaymentTypes.DIRECT_PAY]: 'DIRECT PAY',
+  [PaymentTypes.EFT]: 'ELECTRONIC FUNDS TRANSFER',
+  [PaymentTypes.EJV]: 'ELECTRONIC JOURNAL VOUCHER',
+  [PaymentTypes.INTERNAL]: 'ROUTING SLIP',
+  [PaymentTypes.NO_FEE]: 'NO FEE',
+  [PaymentTypes.ONLINE_BANKING]: 'ONLINE BANKING',
+  [PaymentTypes.PAD]: 'PRE-AUTHORIZED DEBIT',
+  [PaymentTypes.CREDIT]: 'ACCOUNT CREDIT'
+}
+
+export const paymentTypeIcon = {
+  [PaymentTypes.BCOL]: 'mdi-link-variant',
+  [PaymentTypes.CASH]: '',
+  [PaymentTypes.CHEQUE]: '',
+  [PaymentTypes.CREDIT_CARD]: 'mdi-credit-card-outline',
+  [PaymentTypes.DIRECT_PAY]: '',
+  [PaymentTypes.EFT]: 'mdi-arrow-right-circle-outline',
+  [PaymentTypes.EJV]: '',
+  [PaymentTypes.INTERNAL]: '',
+  [PaymentTypes.NO_FEE]: '',
+  [PaymentTypes.ONLINE_BANKING]: 'mdi-bank-outline',
+  [PaymentTypes.PAD]: 'mdi-bank-outline',
+  [PaymentTypes.CREDIT]: 'ACCOUNT CREDIT'
+}
diff --git a/auth-web/src/services/codes.service.ts b/auth-web/src/services/codes.service.ts
index 95acd2a428..8a85e7f54d 100644
--- a/auth-web/src/services/codes.service.ts
+++ b/auth-web/src/services/codes.service.ts
@@ -7,4 +7,11 @@ export default class CodesService {
   public static async getCodes (codeType: string): Promise<AxiosResponse<Code[]>> {
     return axios.get(`${ConfigHelper.getAuthAPIUrl()}/codes/${codeType}`)
   }
+
+  public static async getPaymentMethods (productCode?: string): Promise<AxiosResponse<{[key: string]: string[]}>> {
+    const url = productCode
+      ? `${ConfigHelper.getPayAPIURL()}/codes/valid_payment_methods/${productCode}`
+      : `${ConfigHelper.getPayAPIURL()}/codes/valid_payment_methods`
+    return axios.get(url)
+  }
 }
diff --git a/auth-web/src/stores/org.ts b/auth-web/src/stores/org.ts
index e0f2ec87d7..a75fcbd845 100644
--- a/auth-web/src/stores/org.ts
+++ b/auth-web/src/stores/org.ts
@@ -45,6 +45,7 @@ import { AccountSettings } from '@/models/account-settings'
 import { Address } from '@/models/address'
 import { AutoCompleteResponse } from '@/models/AutoComplete'
 import BcolService from '@/services/bcol.services'
+import CodesService from '@/services/codes.service'
 import CommonUtils from '@/util/common-util'
 import ConfigHelper from '@/util/config-helper'
 import { EmptyResponse } from '@/models/global'
@@ -87,6 +88,7 @@ export const useOrgStore = defineStore('org', () => {
     memberLoginOption: '' as string,
     currentOrgGLInfo: undefined as GLInfo,
     productList: [] as OrgProduct[], // list of all products
+    productPaymentMethods: {} as {[key: string]: string[]},
     currentSelectedProducts: [] as any, // selected product list code in array
     currentStatementNotificationSettings: {} as StatementNotificationSettings,
     statementSettings: {} as StatementSettings,
@@ -889,6 +891,17 @@ export const useOrgStore = defineStore('org', () => {
     return []
   }
 
+  async function getProductPaymentMethods (productCode?: string | undefined): Promise<any> {
+    const response: any = await CodesService.getPaymentMethods(productCode || undefined)
+    if (response?.data && response.status === 200) {
+      const result = response.data
+      state.productPaymentMethods = result
+      return result
+    }
+    state.productPaymentMethods = {}
+    return {}
+  }
+
   async function addToCurrentSelectedProducts ({ productCode, forceRemove = false }): Promise<any> {
     const currentSelectedProducts = state.currentSelectedProducts
     const isAlreadySelected = currentSelectedProducts.includes(productCode)
@@ -1145,6 +1158,7 @@ export const useOrgStore = defineStore('org', () => {
     getOrgProducts,
     addOrgProducts,
     getProductList,
+    getProductPaymentMethods,
     addToCurrentSelectedProducts,
     resetoCurrentSelectedProducts,
     refundInvoice,
diff --git a/auth-web/src/views/auth/create-account/AccountSetupView.vue b/auth-web/src/views/auth/create-account/AccountSetupView.vue
index 7356437783..0d30b762c3 100644
--- a/auth-web/src/views/auth/create-account/AccountSetupView.vue
+++ b/auth-web/src/views/auth/create-account/AccountSetupView.vue
@@ -156,8 +156,8 @@ export default class AccountSetupView extends Vue {
   private stepperConfig: Array<StepConfiguration> =
     [
       {
-        title: 'Select Product and Services',
-        stepName: 'Products and Services',
+        title: 'Select Products and Services',
+        stepName: 'Products and Payment',
         component: SelectProductService,
         componentProps: {
           isStepperView: true,
diff --git a/auth-web/src/views/auth/create-account/non-bcsc/NonBcscAccountSetupView.vue b/auth-web/src/views/auth/create-account/non-bcsc/NonBcscAccountSetupView.vue
index e039fd016b..8f8d5dbab1 100644
--- a/auth-web/src/views/auth/create-account/non-bcsc/NonBcscAccountSetupView.vue
+++ b/auth-web/src/views/auth/create-account/non-bcsc/NonBcscAccountSetupView.vue
@@ -150,8 +150,8 @@ export default class NonBcscAccountSetupView extends Vue {
   private accountStepperConfig: Array<StepConfiguration> =
     [
       {
-        title: 'Select Product and Services',
-        stepName: 'Products and Services',
+        title: 'Select Products and Services',
+        stepName: 'Products and Payment',
         component: SelectProductService,
         componentProps: {
           isStepperView: true,