Angular

npm install @metrifox/angular-sdk
# or
pnpm add @metrifox/angular-sdk
# or
yarn add @metrifox/angular-sdk

import { ApplicationConfig } from "@angular/core";
import { provideMetrifox } from "@metrifox/angular-sdk";

export const appConfig: ApplicationConfig = {
  providers: [provideMetrifox()],
};

import { MetrifoxService } from "@metrifox/angular-sdk";

MetrifoxService.initialize({
  clientKey: "your-metrifox-client-key",
});

{
  "styles": ["src/styles.css", "node_modules/@metrifox/angular-sdk/styles.css"]
}

@import "@metrifox/angular-sdk/styles.css";

import { Component } from "@angular/core";
import { CustomerPortalComponent, SectionConfig } from "@metrifox/angular-sdk";

@Component({
  selector: "app-billing",
  standalone: true,
  imports: [CustomerPortalComponent],
  template: `
    <metrifox-customer-portal
      [customerKey]="'your-customer-key'"
      [sectionsConfig]="sections"
      [theme]="portalTheme"
    />
  `,
})
export class BillingComponent {
  sections: SectionConfig[] = [
    { key: "subscription" },
    { key: "plan" },
    { key: "billingHistory", hidden: true },
  ];

  portalTheme = { general: { linkColor: "#2563eb" } };
}

import { Component } from "@angular/core";
import { PricingTableComponent } from "@metrifox/angular-sdk";

@Component({
  selector: "app-pricing",
  standalone: true,
  imports: [PricingTableComponent],
  template: `
    <metrifox-pricing-table
      [checkoutUsername]="'your-checkout-username'"
      [productKey]="'your-product-key'"
      [theme]="pricingTheme"
    />
  `,
})
export class PricingComponent {
  pricingTheme = { plans: { planCards: { background: "#ffffff" } } };
}

MetrifoxService.initialize({
  clientKey: "your-client-key",
  theme: {
    customerPortal?: CustomerPortalTheme;
    pricingTable?: PricingTableTheme;
  },
});

import { MetrifoxService } from "@metrifox/angular-sdk";

const next = {
  ...MetrifoxService.getTheme(),
  customerPortal: {
    ...MetrifoxService.getTheme()?.customerPortal,
    general: { linkColor: "#1d4ed8" },
  },
};
MetrifoxService.updateTheme(next);