Payments and Plans

Managing subscription and one-time payments with data models

src/app/models/plan.model.ts

export interface Plan {
    id: number;
    label: string;
    price: number;
    type: 'monthly' | 'annually' | 'onetime';
    devise: string;
    stripePlanId: string;
    description: string;
    features: string[];
    popular: boolean;
    createdAt: Date;
    updatedAt: Date;
}

src/app/landing-page/components/pricing/pricing.component.html

<section>
  <!-- Container -->
  <div class="mx-auto max-w-7xl px-5 py-16 md:px-10 md:py-24 lg:py-32">
    <!-- Heading Container -->
    <div class="mx-auto mb-8 max-w-3xl text-center md:mb-12 lg:mb-16">
      <!-- Heading -->
      <h2 class="text-3xl font-bold md:text-5xl">Simple &amp; Affordable Pricing</h2>
      <!-- Subheading -->
      <p class="mt-4 text-sm text-[#636262] sm:text-base">Simple &amp; fixed pricing. 30 days money-back guarantee</p>
    </div>
    <!-- Price Container -->
    <div class="grid grid-cols-1 gap-8 sm:grid-cols-2 md:grid-cols-3 md:gap-4">
      <!-- Price  -->
      <div class="b mx-auto flex w-full max-w-md flex-col items-start rounded-md border border-purple-300 p-8"
            *ngFor="let subscription of subscriptions"
            [ngClass]="{'bg-[#f2f2f7]': subscription.popular }">
        <div class="mb-4 rounded-[4px] bg-purple-500 px-4 py-1.5">
          <p class="text-sm font-bold text-white sm:text-sm">{{ subscription.label | uppercase }}</p>
        </div>
        <p class="mb-6 text-base font-light text-[#636262] md:mb-10 lg:mb-12">
          {{ subscription.description }}
        </p>
        <h2 class="mb-5 text-3xl font-bold md:mb-6 md:text-5xl lg:mb-8">
          {{ subscription.devise }}{{ subscription.price }}<span class="text-sm font-light sm:text-sm">{{ subscription.type }}</span>
        </h2>
        <a routerLink="/auth/signup" [queryParams]="{subscriptionId: subscription.id}"
           class="mb-5 w-full rounded-md bg-purple-700 px-6 py-3 text-center font-semibold text-white md:mb-6 lg:mb-8">Get started</a>
        <div class="mt-2 flex items-center" *ngFor="let feature of subscription.features" >
          <img src="https://assets.website-files.com/6458c625291a94a195e6cf3a/6458c625291a94a84be6cf60_check-mark.svg" alt="mark icon" class="mr-2 inline-block w-4" />
          <p class="text-base">{{ feature }}</p>
        </div>
      </div>
    </div>
  </div>
</section>

src/app/dashboard/components/subscription/subscription.component.ts

  ...
  constructor(private subscriptionService: SubscriptionService,
              private authService: AuthService) {

  } 

  async onChangeSubscription(id: number) {
    const res: { paymentUrl: string, success: boolean } = await this.subscriptionService.onChangeSubscription(id);

    if  (res && res.paymentUrl) {
      window.location.href = res.paymentUrl;
    }
  }
  

Check subscriptions management from Admin dashboard here