Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.metrifox.com/llms.txt

Use this file to discover all available pages before exploring further.

Unified theme API from v2.0.0
@metrifox/angular-sdk v2.0.0 and later use one theme object on MetrifoxService.initialize({ theme }) with customerPortal and pricingTable. Root-level pricingTableTheme and the older flat / legacy theme shapes are removed and are not supported on 2.x. Releases before v2.0.0 used the previous theme model—upgrade to 2.0.0+ and migrate theme objects to the grouped structure. See SDK changelog and Styling.
Use the live playground to preview Customer Portal and Pricing Table before integrating the SDK into your application: Angular SDK Playground.

​
Installation

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

​
Setup

​
1. Provide the SDK

Register providers (standalone apps typically use app.config.ts): 
import { ApplicationConfig } from "@angular/core";
import { provideMetrifox } from "@metrifox/angular-sdk";

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

​
2. Initialize once

Call initialize with your client key before using components (for example in APP_INITIALIZER, root component ngOnInit, or a dedicated setup service). 
import { MetrifoxService } from "@metrifox/angular-sdk";

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

​
3. Global styles

Add SDK styles in angular.json: 
{
  "styles": ["src/styles.css", "node_modules/@metrifox/angular-sdk/styles.css"]
}
Or in global CSS: 
@import "@metrifox/angular-sdk/styles.css";
Targets Angular 17, 18, and 19. Components are standalone (no NgModule required).

​
Widgets

​
CustomerPortal

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" } };
}
Optional [theme] input: partial CustomerPortalTheme, merged with MetrifoxService.initialize theme for this component instance.

​
Section configuration

PropertyTypeDescription
keySectionKeySection identifier
hiddenbooleanHide when true
componentType<any>Custom section component
propsRecord<string, unknown>Inputs / data for the section

​
Built-in section keys

KeyDescription
upcomingInvoiceNext invoice details
subscriptionActive subscription overview
creditBalanceWallet / credit balance
entitlementUsageUsage meters
paymentOverviewPayment summary and methods
billingHistoryPast transactions
planCurrent plan

​
Section anchors

Anchor IDSection key
#upcoming-invoiceupcomingInvoice
#subscriptionsubscription
#credit-balancecreditBalance
#entitlement-usageentitlementUsage
#payment-overviewpaymentOverview
#billing-historybillingHistory
#planplan

​
PricingTable

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" } } };
}

​
Inputs

InputTypeRequiredDefaultDescription
checkoutUsernamestringYes—From Settings → Checkout
productKeystringYes—Product identifier
plansOnlybooleanNofalseOnly plans
singlePurchasesOnlybooleanNofalseOnly one-time purchases
showTabHeaderbooleanNotruePlans vs purchases tabs
themePricingTableThemeNo—Merged with global theme.pricingTable
If both plansOnly and singlePurchasesOnly are false or omitted, both plans and single purchases render.

​
Styling

Global CSS import is required (see setup step 3). Without it, layout and components will not match the design system.

​
Theme configuration (supported shape)

MetrifoxService.initialize({
  clientKey: "your-client-key",
  theme: {
    customerPortal?: CustomerPortalTheme;
    pricingTable?: PricingTableTheme;
  },
});
Not supported on v2.0.0+: pricingTableTheme at the root of the config object, or the legacy flat customer portal / pricing table theme shapes from releases before 2.0.0. The Angular theme types mirror the React SDK: use the same grouping (general, tabs, sections, buttons, lineItems, tables, modals, plans for portal; plans, tabs, checkoutBar for pricing table). See the React SDK styling reference for field-level tables and copy/paste examples—the object shapes are intentionally aligned.

​
Updating theme at runtime

MetrifoxService.updateTheme replaces the entire theme on the stored config. To adjust one area, merge with the previous value: 
import { MetrifoxService } from "@metrifox/angular-sdk";

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

​
React ↔ Angular quick map

ReactAngular
metrifoxInit()MetrifoxService.initialize()
<CustomerPortal /><metrifox-customer-portal>
<PricingTable /><metrifox-pricing-table>
customerKey prop[customerKey]
theme prop[theme]
onPlanSelect callback(planSelected) output

​
Changelog and support

SDK changelog — version history and breaking changes.
npm: @metrifox/angular-sdk.
Product docs: docs.metrifox.com.