1 files changed, 17 insertions, 1 deletions
diff --git a/app/assets/javascripts/vue_shared/new_namespace/new_namespace_page.vue b/app/assets/javascripts/vue_shared/new_namespace/new_namespace_page.vue
index 114f60c96ee..f67e590e2ce 100644
--- a/app/assets/javascripts/vue_shared/new_namespace/new_namespace_page.vue
+++ b/app/assets/javascripts/vue_shared/new_namespace/new_namespace_page.vue
@@ -10,10 +10,17 @@ export default {
     GlIcon,
     WelcomePage,
     LegacyContainer,
+    CreditCardVerification: () =>
+      import('ee_component/pages/groups/new/components/credit_card_verification.vue'),
   },
   directives: {
     SafeHtml,
   },
+  inject: {
+    verificationRequired: {
+      default: false,
+    },
+  },
   props: {
     title: {
       type: String,
@@ -41,6 +48,7 @@ export default {
   data() {
     return {
       activePanelName: null,
+      verificationCompleted: false,
     };
   },
 
@@ -67,6 +75,10 @@ export default {
         { text: this.activePanel.title, href: `#${this.activePanel.name}` },
       ];
     },
+
+    shouldVerify() {
+      return this.verificationRequired && !this.verificationCompleted;
+    },
   },
 
   created() {
@@ -93,12 +105,16 @@ export default {
         localStorage.setItem(this.persistenceKey, this.activePanelName);
       }
     },
+    onVerified() {
+      this.verificationCompleted = true;
+    },
   },
 };
 </script>
 
 <template>
-  <welcome-page v-if="!activePanelName" :panels="panels" :title="title">
+  <credit-card-verification v-if="shouldVerify" @verified="onVerified" />
+  <welcome-page v-else-if="!activePanelName" :panels="panels" :title="title">
     <template #footer>
       <slot name="welcome-footer"> </slot>
     </template>