Installation
# using npm
npm install @metrifox/angular-sdk
# or pnpm
pnpm add @metrifox/angular-sdk
# or yarn
yarn add @metrifox/angular-sdk
Setup
1. Register Providers
Add provideMetrifox() to your application configuration (usually in app.config.ts for standalone applications).
import { ApplicationConfig } from '@angular/core';
import { provideMetrifox } from '@metrifox/angular-sdk';
export const appConfig: ApplicationConfig = {
providers: [
provideMetrifox(),
],
};
2. Initialize the SDK
Initialize the SDK once with your client key, typically in your root component (e.g., AppComponent).
import { Component, OnInit } from '@angular/core';
import { MetrifoxService } from '@metrifox/angular-sdk';
@Component({ ... })
export class AppComponent implements OnInit {
ngOnInit() {
MetrifoxService.initialize({
clientKey: "your-client-key",
});
}
}
Works with Angular 16+ (Standalone Components supported).
CustomerPortal
Displays a customizable customer dashboard with plans, subscriptions, billing, credits, and more.
Import CustomerPortalComponent in your component:
import { CustomerPortalComponent } from '@metrifox/angular-sdk';
@Component({
selector: 'app-my-portal',
standalone: true,
imports: [CustomerPortalComponent],
template: `
<metrifox-customer-portal
[customerKey]="'your-customer-key'"
[sectionsConfig]="sectionsConfig"
></metrifox-customer-portal>
`
})
export class MyPortalComponent {
sectionsConfig = [
{ key: "subscription" },
{ key: "billingHistory", hidden: true },
];
}
Section Configuration
The sectionsConfig input controls what appears in the portal.
| Property | Type | Description |
|---|
key | SectionKey | Unique key of the section (see list below) |
hidden | boolean | Hide this section when true |
Built-in Section Keys
| Key | Description |
|---|
upcomingInvoice | Displays next invoice details |
subscription | Active subscription overview |
walletBalance | Shows user wallet balance |
entitlementUsage | Displays resource usage |
paymentOverview | Payment summary and methods |
billingHistory | List of past transactions |
plan | Current plan details |
Pricing Table
Displays subscription plans and one-time purchases in a configurable pricing table component.
Import PricingTableComponent in your component:
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'"
></metrifox-pricing-table>
`
})
export class PricingPageComponent {}
The inputs control how the pricing table is configured.
| Input | Type | Required | Default | Description |
|---|
checkoutUsername | string | Yes | — | Unique username used for checkout. This can be found in Settings → Checkout. |
productKey | string | Yes | — | Unique product identifier. This can be found on the product page. |
plansOnly | boolean | No | false | Controls whether only subscription plans are rendered. |
singlePurchasesOnly | boolean | No | false | Controls whether only single purchases are rendered. |
showTabHeader | boolean | No | true | Controls whether the tab header for switching between offerings is rendered. |
If both plansOnly and singlePurchasesOnly are false or undefined, both plans and single purchases are displayed.
Styling
Import the SDK’s global styles into your global styles file (e.g., src/styles.css):
@import "@metrifox/angular-sdk/styles.css";
This is required for proper styling of all widgets.
Theming
The SDK accepts an optional theme object during initialization to match your brand styles.
MetrifoxService.initialize({
clientKey: "your-client-key",
theme: {
customerPortal: {
// ... theme configuration
}
}
});
MetrifoxService.updateTheme({
customerPortal: {
section: { background: "#000000" }
}
});
