Stripe Integration

bizmatch/src/app/app.config.ts

@@ -5,6 +5,7 @@ import { HTTP_INTERCEPTORS, provideHttpClient, withInterceptorsFromDi } from '@a
 import { provideAnimations } from '@angular/platform-browser/animations';
 import { KeycloakBearerInterceptor, KeycloakService } from 'keycloak-angular';
 import { provideQuillConfig } from 'ngx-quill';
+import { provideNgxStripe } from 'ngx-stripe';
 import { environment } from '../environments/environment';
 import { customKeycloakAdapter } from '../keycloak';
 import { routes } from './app.routes';
@@ -52,6 +53,7 @@ export const appConfig: ApplicationConfig = {
       }),
     ),
     provideAnimations(),
+    provideNgxStripe('pk_test_IlpbVQhxAXZypLgnCHOCqlj8'),
     provideQuillConfig({
       modules: {
         syntax: true,

bizmatch/src/app/app.routes.ts

@@ -2,6 +2,7 @@ import { Routes } from '@angular/router';
 import { LogoutComponent } from './components/logout/logout.component';
 import { NotFoundComponent } from './components/not-found/not-found.component';
 
+import { PaymentComponent } from './components/payment/payment.component';
 import { AuthGuard } from './guards/auth.guard';
 import { ListingCategoryGuard } from './guards/listing-category.guard';
 import { DetailsBusinessListingComponent } from './pages/details/details-business-listing/details-business-listing.component';
@@ -18,6 +19,7 @@ import { EditCommercialPropertyListingComponent } from './pages/subscription/edi
 import { EmailUsComponent } from './pages/subscription/email-us/email-us.component';
 import { FavoritesComponent } from './pages/subscription/favorites/favorites.component';
 import { MyListingComponent } from './pages/subscription/my-listing/my-listing.component';
+import { SuccessComponent } from './pages/success/success.component';
 
 export const routes: Routes = [
   {
@@ -132,5 +134,17 @@ export const routes: Routes = [
     path: 'pricing',
     component: PricingComponent,
   },
+  {
+    path: 'pricing/:id',
+    component: PricingComponent,
+  },
+  {
+    path: 'payment',
+    component: PaymentComponent,
+  },
+  {
+    path: 'success',
+    component: SuccessComponent,
+  },
   { path: '**', redirectTo: 'home' },
 ];

bizmatch/src/app/components/payment/payment.component.html

@@ -0,0 +1,161 @@
+<section class="bg-white py-8 antialiased dark:bg-gray-900 md:py-16">
+  <div class="mx-auto max-w-screen-xl px-4 2xl:px-0">
+    <div class="mx-auto max-w-5xl">
+      <h2 class="text-xl font-semibold text-gray-900 dark:text-white sm:text-2xl">Payment</h2>
+
+      <div class="mt-6 sm:mt-8 lg:flex lg:items-start lg:gap-12">
+        <form action="#" class="w-full rounded-lg border border-gray-200 bg-white p-4 shadow-sm dark:border-gray-700 dark:bg-gray-800 sm:p-6 lg:max-w-xl lg:p-8">
+          <div ngxStripeCardGroup class="mb-6 grid grid-cols-2 gap-4">
+            <div class="col-span-2 sm:col-span-1">
+              <label for="full_name" class="mb-2 block text-sm font-medium text-gray-900 dark:text-white"> Full name (as displayed on card)* </label>
+              <input
+                type="text"
+                id="full_name"
+                class="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder:text-gray-400 dark:focus:border-primary-500 dark:focus:ring-primary-500"
+                placeholder="Bonnie Green"
+                required
+              />
+            </div>
+
+            <!-- <ngx-stripe-card-expiry [options]="cardOptions"></ngx-stripe-card-expiry>
+            <ngx-stripe-card-cvc [options]="cardOptions"></ngx-stripe-card-cvc> -->
+            <div class="col-span-2 sm:col-span-1">
+              <label for="card-number-input" class="mb-2 block text-sm font-medium text-gray-900 dark:text-white"> Card number* </label>
+              <!-- <input
+                type="text"
+                id="card-number-input"
+                class="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 pe-10 text-sm text-gray-900 focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder:text-gray-400 dark:focus:border-primary-500 dark:focus:ring-primary-500"
+                placeholder="xxxx-xxxx-xxxx-xxxx"
+                pattern="^4[0-9]{12}(?:[0-9]{3})?$"
+                required
+              /> -->
+              <div
+                class="ngx-input block w-full rounded-lg border border-gray-300 bg-gray-50 text-sm text-gray-900 focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder:text-gray-400 dark:focus:border-primary-500 dark:focus:ring-primary-500"
+              >
+                <ngx-stripe-card-number [options]="numberOptions"></ngx-stripe-card-number>
+              </div>
+              <!-- <ngx-stripe-card [options]="cardOptions" /> -->
+            </div>
+
+            <div>
+              <label for="card-expiration-input" class="mb-2 block text-sm font-medium text-gray-900 dark:text-white">Card expiration* </label>
+              <!-- <div class="relative">
+                <div class="pointer-events-none absolute inset-y-0 start-0 flex items-center ps-3.5">
+                  <svg class="h-4 w-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
+                    <path
+                      fill-rule="evenodd"
+                      d="M5 5a1 1 0 0 0 1-1 1 1 0 1 1 2 0 1 1 0 0 0 1 1h1a1 1 0 0 0 1-1 1 1 0 1 1 2 0 1 1 0 0 0 1 1h1a1 1 0 0 0 1-1 1 1 0 1 1 2 0 1 1 0 0 0 1 1 2 2 0 0 1 2 2v1a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V7a2 2 0 0 1 2-2ZM3 19v-7a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Zm6.01-6a1 1 0 1 0-2 0 1 1 0 0 0 2 0Zm2 0a1 1 0 1 1 2 0 1 1 0 0 1-2 0Zm6 0a1 1 0 1 0-2 0 1 1 0 0 0 2 0Zm-10 4a1 1 0 1 1 2 0 1 1 0 0 1-2 0Zm6 0a1 1 0 1 0-2 0 1 1 0 0 0 2 0Zm2 0a1 1 0 1 1 2 0 1 1 0 0 1-2 0Z"
+                      clip-rule="evenodd"
+                    />
+                  </svg>
+                </div>
+                <input
+                  datepicker
+                  datepicker-format="mm/yy"
+                  id="card-expiration-input"
+                  type="text"
+                  class="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 ps-9 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder:text-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
+                  placeholder="12/23"
+                  required
+                />
+              </div> -->
+              <div
+                class="ngx-input block w-full rounded-lg border border-gray-300 bg-gray-50 text-sm text-gray-900 focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder:text-gray-400 dark:focus:border-primary-500 dark:focus:ring-primary-500"
+              >
+                <ngx-stripe-card-expiry [options]="cvcOptions"></ngx-stripe-card-expiry>
+              </div>
+            </div>
+            <div>
+              <label for="cvv-input" class="mb-2 flex items-center gap-1 text-sm font-medium text-gray-900 dark:text-white">
+                CVV*
+                <button data-tooltip-target="cvv-desc" data-tooltip-trigger="hover" class="text-gray-400 hover:text-gray-900 dark:text-gray-500 dark:hover:text-white">
+                  <svg class="h-4 w-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24">
+                    <path
+                      fill-rule="evenodd"
+                      d="M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10S2 17.523 2 12Zm9.408-5.5a1 1 0 1 0 0 2h.01a1 1 0 1 0 0-2h-.01ZM10 10a1 1 0 1 0 0 2h1v3h-1a1 1 0 1 0 0 2h4a1 1 0 1 0 0-2h-1v-4a1 1 0 0 0-1-1h-2Z"
+                      clip-rule="evenodd"
+                    />
+                  </svg>
+                </button>
+                <div
+                  id="cvv-desc"
+                  role="tooltip"
+                  class="tooltip invisible absolute z-10 inline-block rounded-lg bg-gray-900 px-3 py-2 text-sm font-medium text-white opacity-0 shadow-sm transition-opacity duration-300 dark:bg-gray-700"
+                >
+                  The last 3 or 4 digits on back of card
+                  <div class="tooltip-arrow" data-popper-arrow></div>
+                </div>
+              </label>
+              <!-- <input
+                type="number"
+                id="cvv-input"
+                aria-describedby="helper-text-explanation"
+                class="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder:text-gray-400 dark:focus:border-primary-500 dark:focus:ring-primary-500"
+                placeholder="•••"
+                required
+              /> -->
+              <div
+                class="ngx-input block w-full rounded-lg border border-gray-300 bg-gray-50 text-sm text-gray-900 focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder:text-gray-400 dark:focus:border-primary-500 dark:focus:ring-primary-500"
+              >
+                <ngx-stripe-card-cvc [options]="cvcOptions"></ngx-stripe-card-cvc>
+              </div>
+            </div>
+          </div>
+
+          <button
+            type="submit"
+            class="flex w-full items-center justify-center rounded-lg bg-primary-700 px-5 py-2.5 text-sm font-medium text-white hover:bg-primary-800 focus:outline-none focus:ring-4 focus:ring-primary-300 dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800"
+          >
+            Pay now
+          </button>
+        </form>
+
+        <div class="mt-6 grow sm:mt-8 lg:mt-0">
+          <div class="space-y-4 rounded-lg border border-gray-100 bg-gray-50 p-6 dark:border-gray-700 dark:bg-gray-800">
+            <div class="space-y-2">
+              <dl class="flex items-center justify-between gap-4">
+                <dt class="text-base font-normal text-gray-500 dark:text-gray-400">Subscription Price</dt>
+                <dd class="text-base font-medium text-gray-900 dark:text-white">$49.00</dd>
+              </dl>
+
+              <!-- <dl class="flex items-center justify-between gap-4">
+                <dt class="text-base font-normal text-gray-500 dark:text-gray-400">Savings</dt>
+                <dd class="text-base font-medium text-green-500">-$299.00</dd>
+              </dl>
+
+              <dl class="flex items-center justify-between gap-4">
+                <dt class="text-base font-normal text-gray-500 dark:text-gray-400">Store Pickup</dt>
+                <dd class="text-base font-medium text-gray-900 dark:text-white">$99</dd>
+              </dl> -->
+
+              <dl class="flex items-center justify-between gap-4">
+                <dt class="text-base font-normal text-gray-500 dark:text-gray-400">Tax</dt>
+                <dd class="text-base font-medium text-gray-900 dark:text-white">$1.43</dd>
+              </dl>
+            </div>
+
+            <dl class="flex items-center justify-between gap-4 border-t border-gray-200 pt-2 dark:border-gray-700">
+              <dt class="text-base font-bold text-gray-900 dark:text-white">Total</dt>
+              <dd class="text-base font-bold text-gray-900 dark:text-white">$50.43</dd>
+            </dl>
+          </div>
+
+          <div class="mt-6 flex items-center justify-center gap-8">
+            <!-- <img class="h-8 w-auto dark:hidden" src="https://flowbite.s3.amazonaws.com/blocks/e-commerce/brand-logos/paypal.svg" alt="" />
+            <img class="hidden h-8 w-auto dark:flex" src="https://flowbite.s3.amazonaws.com/blocks/e-commerce/brand-logos/paypal-dark.svg" alt="" /> -->
+            <img class="h-8 w-auto dark:hidden" src="https://flowbite.s3.amazonaws.com/blocks/e-commerce/brand-logos/visa.svg" alt="" />
+            <img class="hidden h-8 w-auto dark:flex" src="https://flowbite.s3.amazonaws.com/blocks/e-commerce/brand-logos/visa-dark.svg" alt="" />
+            <img class="h-8 w-auto dark:hidden" src="https://flowbite.s3.amazonaws.com/blocks/e-commerce/brand-logos/mastercard.svg" alt="" />
+            <img class="hidden h-8 w-auto dark:flex" src="https://flowbite.s3.amazonaws.com/blocks/e-commerce/brand-logos/mastercard-dark.svg" alt="" />
+          </div>
+        </div>
+      </div>
+
+      <p class="mt-6 text-center text-gray-500 dark:text-gray-400 sm:mt-8 lg:text-left">
+        Payment processed by <a href="#" title="" class="font-medium text-primary-700 underline hover:no-underline dark:text-primary-500">Stripe</a> for
+        <a href="#" title="" class="font-medium text-primary-700 underline hover:no-underline dark:text-primary-500">Bizmatch Inc.</a>
+        - United States Of America
+      </p>
+    </div>
+  </div>
+</section>

bizmatch/src/app/components/payment/payment.component.ts

@@ -0,0 +1,75 @@
+import { CommonModule } from '@angular/common';
+import { Component, inject, ViewChild } from '@angular/core';
+import { FormsModule, NgForm } from '@angular/forms';
+import { StripeCardCvcElementOptions, StripeCardNumberElementOptions, StripeElementsOptions } from '@stripe/stripe-js';
+import { injectStripe, StripeCardComponent, StripeCardCvcComponent, StripeCardExpiryComponent, StripeCardGroupDirective, StripeCardNumberComponent, StripeElementsDirective } from 'ngx-stripe';
+import { PaymentService } from './payment.service';
+
+@Component({
+  selector: 'app-payment-modal',
+  templateUrl: './payment.component.html',
+  standalone: true,
+  imports: [CommonModule, FormsModule, StripeCardNumberComponent, StripeCardExpiryComponent, StripeCardCvcComponent, StripeElementsDirective, StripeCardGroupDirective],
+  styles: `
+    .ngx-input{
+    padding:0.85rem
+    }
+  `,
+})
+export class PaymentComponent {
+  @ViewChild('cardElement') cardElement: StripeCardComponent;
+  stripe = injectStripe('your-stripe-publishable-key');
+  name: string;
+  constructor() {}
+  cvcOptions: StripeCardCvcElementOptions = {
+    style: {
+      base: {
+        iconColor: '#666EE8',
+        color: '#111827',
+        fontWeight: '300',
+        fontFamily: 'sans-serif',
+        fontSize: '14px',
+        '::placeholder': {
+          color: '#CFD7E0',
+          // color: '#6B7280',
+        },
+      },
+    },
+  };
+  numberOptions: StripeCardNumberElementOptions = {
+    showIcon: true,
+    style: {
+      base: {
+        iconColor: '#666EE8',
+        color: '#111827',
+        fontWeight: '300',
+        fontFamily: 'sans-serif',
+        fontSize: '14px',
+        '::placeholder': {
+          color: '#CFD7E0',
+          // color: '#6B7280',
+        },
+      },
+    },
+  };
+
+  elementsOptions: StripeElementsOptions = {
+    locale: 'en',
+  };
+
+  paymentService = inject(PaymentService);
+
+  onSubmit(form: NgForm) {
+    if (form.valid) {
+      this.stripe.createToken(this.cardElement.element, { name: this.name }).subscribe(result => {
+        if (result.token) {
+          this.paymentService.processPayment(result.token.id).subscribe(() => {
+            console.log('Payment successful');
+          });
+        } else if (result.error) {
+          console.error(result.error.message);
+        }
+      });
+    }
+  }
+}

bizmatch/src/app/components/payment/payment.service.ts

@@ -0,0 +1,32 @@
+// 1. Shared Service (modal.service.ts)
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { BehaviorSubject, Observable } from 'rxjs';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class PaymentService {
+  private modalVisibleSubject = new BehaviorSubject<boolean>(false);
+  modalVisible$: Observable<boolean> = this.modalVisibleSubject.asObservable();
+  private resolvePromise!: (value: boolean) => void;
+  constructor(private http: HttpClient) {}
+  openPaymentModal() {
+    this.modalVisibleSubject.next(true);
+    return new Promise<boolean>(resolve => {
+      this.resolvePromise = resolve;
+    });
+  }
+  accept(): void {
+    this.modalVisibleSubject.next(false);
+    this.resolvePromise(true);
+  }
+
+  reject(): void {
+    this.modalVisibleSubject.next(false);
+    this.resolvePromise(false);
+  }
+  processPayment(token: string): Observable<any> {
+    return this.http.post('/api/subscription', { token });
+  }
+}

bizmatch/src/app/pages/home/home.component.html

@@ -6,7 +6,7 @@
     } @else {
     <a routerLink="/pricing" class="text-gray-800">Pricing</a>
     <a (click)="login()" class="text-blue-600 border border-blue-600 px-3 py-2 rounded">Log In</a>
-    <a (click)="register()" class="text-white bg-blue-600 px-4 py-2 rounded">Register</a>
+    <a routerLink="/pricing" class="text-white bg-blue-600 px-4 py-2 rounded">Register</a>
     }
   </div>
   <button (click)="toggleMenu()" class="md:hidden text-gray-600">

bizmatch/src/app/pages/pricing/pricing.component.html

@@ -20,10 +20,6 @@
             <i class="fas fa-check text-green-500 mr-2"></i>
             Get early access to new listings
           </li>
-          <li class="mb-4 flex items-center">
-            <i class="fas fa-check text-green-500 mr-2"></i>
-            Professional/Broker trial period (3 month)
-          </li>
           <li class="mb-4 flex items-center">
             <i class="fas fa-check text-green-500 mr-2"></i>
             Extended search functionality
@@ -31,7 +27,7 @@
         </ul>
       </div>
       <div class="px-6 py-4 mt-auto">
-        <button class="w-full bg-blue-500 text-white rounded-full px-4 py-2 font-semibold hover:bg-blue-600 transition duration-300">Sign Up Now</button>
+        <button (click)="register()" class="w-full bg-blue-500 text-white rounded-full px-4 py-2 font-semibold hover:bg-blue-600 transition duration-300">Sign Up Now</button>
       </div>
     </div>
 
@@ -51,7 +47,7 @@
           </li>
           <li class="mb-4 flex items-center">
             <i class="fas fa-check text-green-500 mr-2"></i>
-            Extended public listings (3+ months)
+            3-Month Free Trial
           </li>
           <li class="mb-4 flex items-center">
             <i class="fas fa-check text-green-500 mr-2"></i>
@@ -76,7 +72,8 @@
         </ul>
       </div>
       <div class="px-6 py-4 mt-auto">
-        <button class="w-full bg-blue-500 text-white rounded-full px-4 py-2 font-semibold hover:bg-blue-600 transition duration-300">Get Started</button>
+        <!-- <button routerLink="/payment" class="w-full bg-blue-500 text-white rounded-full px-4 py-2 font-semibold hover:bg-blue-600 transition duration-300">Get Started</button> -->
+        <button (click)="register('price_1PpSkpDjmFBOcNBs9UDPgBos')" class="w-full bg-blue-500 text-white rounded-full px-4 py-2 font-semibold hover:bg-blue-600 transition duration-300">Get Started</button>
       </div>
     </div>
 
@@ -100,7 +97,7 @@
           </li>
           <li class="mb-4 flex items-center">
             <i class="fas fa-check text-green-500 mr-2"></i>
-            Extended public listings (3+ months)
+            3-Month Free Trial
           </li>
           <li class="mb-4 flex items-center">
             <i class="fas fa-check text-green-500 mr-2"></i>
@@ -125,7 +122,8 @@
         </ul>
       </div>
       <div class="px-6 py-4 mt-auto">
-        <button class="w-full bg-blue-500 text-white rounded-full px-4 py-2 font-semibold hover:bg-blue-600 transition duration-300">Start Listing Now</button>
+        <!-- <button routerLink="/payment" class="w-full bg-blue-500 text-white rounded-full px-4 py-2 font-semibold hover:bg-blue-600 transition duration-300">Start Listing Now</button> -->
+        <button (click)="register('price_1PpSmRDjmFBOcNBsaaSp2nk9')" class="w-full bg-blue-500 text-white rounded-full px-4 py-2 font-semibold hover:bg-blue-600 transition duration-300">Start Listing Now</button>
       </div>
     </div>
   </div>

bizmatch/src/app/pages/pricing/pricing.component.ts

@@ -1,5 +1,10 @@
+import { HttpClient } from '@angular/common/http';
 import { Component } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
 import { KeycloakService } from 'keycloak-angular';
+import { StripeService } from 'ngx-stripe';
+import { switchMap } from 'rxjs';
+import { environment } from '../../../environments/environment';
 import { SharedModule } from '../../shared/shared/shared.module';
 
 @Component({
@@ -10,8 +15,40 @@ import { SharedModule } from '../../shared/shared/shared.module';
   styleUrl: './pricing.component.scss',
 })
 export class PricingComponent {
-  constructor(public keycloakService: KeycloakService) {}
-  register() {
-    this.keycloakService.register({ redirectUri: `${window.location.origin}/account` });
+  private apiBaseUrl = environment.apiBaseUrl;
+  private id: string | undefined = this.activatedRoute.snapshot.params['id'] as string | undefined;
+  constructor(public keycloakService: KeycloakService, private http: HttpClient, private stripeService: StripeService, private activatedRoute: ActivatedRoute) {}
+
+  ngOnInit() {
+    if (this.id) {
+      this.checkout(atob(this.id));
+    }
+  }
+
+  register(priceId?: string) {
+    if (priceId) {
+      this.keycloakService.register({ redirectUri: `${window.location.origin}/pricing/${btoa(priceId)}` });
+    } else {
+      this.keycloakService.register({ redirectUri: `${window.location.origin}/account` });
+    }
+  }
+
+  checkout(priceId) {
+    // Check the server.js tab to see an example implementation
+    this.http
+      .post(`${this.apiBaseUrl}/bizmatch/payment/create-checkout-session`, { priceId })
+      .pipe(
+        switchMap((session: any) => {
+          return this.stripeService.redirectToCheckout({ sessionId: session.id });
+        }),
+      )
+      .subscribe(result => {
+        // If `redirectToCheckout` fails due to a browser or network
+        // error, you should display the localized error message to your
+        // customer using `error.message`.
+        if (result.error) {
+          alert(result.error.message);
+        }
+      });
   }
 }

bizmatch/src/app/pages/subscription/account/account.component.ts

@@ -133,7 +133,7 @@ export class AccountComponent {
       const confirmed = await this.confirmationService.showConfirmation({ message: 'Are you sure you want to switch to Buyer ? All your listings as well as all your professionals informations will be deleted' });
       if (confirmed) {
         const id = this.user.id;
-        this.user = createDefaultUser(this.user.email, this.user.firstname, this.user.lastname);
+        this.user = createDefaultUser(this.user.email, this.user.firstname, this.user.lastname, 'free');
         this.user.customerType = 'buyer';
         this.user.id = id;
         this.imageService.deleteLogoImagesByMail(this.user.email);

bizmatch/src/app/pages/success/success.component.html

@@ -0,0 +1,31 @@
+<div class="min-h-screen flex items-center justify-center">
+  <div class="bg-white p-6 rounded-lg shadow-lg max-w-md">
+    <div class="text-center">
+      @if(user && (user.subscriptionPlan==='professional' || user.subscriptionPlan==='broker')){
+      <svg class="mx-auto h-16 w-16 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"></path>
+      </svg>
+      <h2 class="text-2xl font-bold text-gray-800 mt-4">Subscription Successful!</h2>
+      <p class="text-gray-600 mt-2">Thank you for subscribing to our service.</p>
+      <p class="text-gray-600 mt-2">
+        You have successfully subscribed to the @if(user.subscriptionPlan==='professional'){
+        <span class="font-semibold text-gray-800">Professional (CPA, Attorney, Title Company) Plan</span>
+        } @if(user.subscriptionPlan==='broker'){
+        <span class="font-semibold text-gray-800">Business Broker Plan</span>. }
+      </p>
+      <p class="text-gray-600 mt-2">We are excited to have you on board!</p>
+
+      <div class="mt-6">
+        <a routerLink="/account" class="bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded-lg">Go to your Account</a>
+      </div>
+
+      <div class="mt-4 text-sm text-gray-500">
+        <p>If you have any questions, feel free to <a routerLink="/emailUs" class="text-blue-500 hover:underline">contact our support team</a>.</p>
+      </div>
+      } @else {
+      <p class="text-gray-600 mt-2">We are processing your subscription - Please be patient</p>
+      <div class="loader mt-8 mx-auto"></div>
+      }
+    </div>
+  </div>
+</div>

bizmatch/src/app/pages/success/success.component.scss

@@ -0,0 +1,33 @@
+/* HTML: <div class="loader"></div> */
+.loader {
+  width: 15px;
+  aspect-ratio: 1;
+  position: relative;
+}
+.loader::before,
+.loader::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  background: #000;
+}
+.loader::before {
+  box-shadow: -25px 0;
+  animation: l8-1 1s infinite linear;
+}
+.loader::after {
+  transform: rotate(0deg) translateX(25px);
+  animation: l8-2 1s infinite linear;
+}
+
+@keyframes l8-1 {
+  100% {
+    transform: translateX(25px);
+  }
+}
+@keyframes l8-2 {
+  100% {
+    transform: rotate(-180deg) translateX(25px);
+  }
+}

bizmatch/src/app/pages/success/success.component.ts

@@ -0,0 +1,62 @@
+import { CommonModule } from '@angular/common';
+import { Component } from '@angular/core';
+import { Router, RouterModule } from '@angular/router';
+import { KeycloakService } from 'keycloak-angular';
+import { User } from '../../../../../bizmatch-server/src/models/db.model';
+import { LogService } from '../../services/log.service';
+import { UserService } from '../../services/user.service';
+import { map2User } from '../../utils/utils';
+
+@Component({
+  selector: 'app-success',
+  standalone: true,
+  imports: [CommonModule, RouterModule],
+  templateUrl: './success.component.html',
+  styleUrl: './success.component.scss',
+})
+export class SuccessComponent {
+  user: User;
+  constructor(private keycloakService: KeycloakService, private userService: UserService, private logService: LogService, private router: Router) {}
+  async ngOnInit() {
+    let email = null;
+    try {
+      const token = await this.keycloakService.getToken();
+      const keycloakUser = map2User(token);
+      email = keycloakUser.email;
+      this.user = await this.userService.getByMail(email);
+      this.checkSubscriptionPlan(email);
+    } catch (e) {
+      this.checkSubscriptionPlan(email, e.message);
+    }
+  }
+  async checkSubscriptionPlan(email: string, error?: string) {
+    if (!email) {
+      this.logService.log({ severity: 'error', text: `Unauthorized Access to Success Page ${error}` });
+      this.router.navigate(['home']);
+      return;
+    }
+
+    let attempts = 0;
+    const maxAttempts = 5;
+    const interval = 5000; // 5 Sekunden
+
+    const intervalId = setInterval(async () => {
+      if (attempts >= maxAttempts) {
+        clearInterval(intervalId);
+        console.error('Max attempts reached');
+        return;
+      }
+
+      attempts++;
+
+      this.user = await this.userService.getByMail(email);
+
+      if (this.user && this.user.subscriptionPlan) {
+        clearInterval(intervalId);
+        console.log('Subscription plan is set:', this.user.subscriptionPlan);
+      } else {
+        console.log(`Attempt ${attempts}: Subscription plan is not set yet.`);
+      }
+    }, interval);
+  }
+}