Angular — configuration

The Angular SDK has two configuration tiers, similar to the Flutter SDK but with framework-specific bindings:

• App-wide via PdirectPayModule.forRoot(config) (or standalone providers + injection tokens).
• Per-checkout via the PdirectPayConfig and PdirectPaymentBody inputs on <pdirect-pay-checkout>.

App-wide

Module-based

import { NgModule } from "@angular/core";
import { PdirectPayModule } from "@mms/pdirect-pay";

@NgModule({
  imports: [
    PdirectPayModule.forRoot({
      env: {
        baseUrl: "https://app.api.gtwy.pdirect.com",
        appKey: "merchant-app-key",
      },
      defaultConfig: {
        isProduction: false,
        acceptLanguage: "en",
      },
    }),
  ],
})
export class AppModule {}

forRoot registers two injection tokens:

Token	Type	Purpose
PDIRECT_ENV_CONFIG	PdirectEnvConfig	The base URL + default app key.
PDIRECT_PAY_CONFIG	PdirectPayConfig	Defaults applied to every <pdirect-pay-checkout> unless overridden.

Standalone

If you don’t have an AppModule, register the tokens manually in your bootstrap providers:

import { bootstrapApplication } from "@angular/platform-browser";
import { provideHttpClient } from "@angular/common/http";
import {
  PDIRECT_ENV_CONFIG,
  PDIRECT_PAY_CONFIG,
} from "@mms/pdirect-pay";
import { AppComponent } from "./app/app.component";

bootstrapApplication(AppComponent, {
  providers: [
    provideHttpClient(),
    { provide: PDIRECT_ENV_CONFIG, useValue: {
      baseUrl: "https://app.api.gtwy.pdirect.com",
      appKey: "merchant-app-key",
    } },
    { provide: PDIRECT_PAY_CONFIG, useValue: {
      isProduction: false,
      acceptLanguage: "en",
    } },
  ],
});

Per-checkout

<pdirect-pay-checkout> reads two inputs:

<pdirect-pay-checkout
  [configs]="configs"
  [paymentBody]="paymentBody"
  [themeConfig]="themeConfig"
  [language]="'en'"
  [enableHapticFeedback]="true"
  (response)="onResponse($event)"
  (error)="onError($event)"
  (closed)="onClose()" />

PdirectPayConfig

interface PdirectPayConfig {
  token: string;            // Auth-v2 (legacy) — your merchant app key
  isProduction?: boolean;   // false → sandbox, true → production
  customApiUrl?: string;    // override the base URL (e.g. for staging)
  timeout?: number;         // request timeout in ms
  acceptLanguage?: string;  // ISO 639-1, defaults to 'fr'
}

`token` is the merchant app-key, not a session token

Until Angular v2.0.0, the SDK is on Auth-v2: the token you pass is the merchant’s app_key, used directly in the app-key HTTP header. There is no session-mint flow, no body binding, no device fingerprint.

Read the SDK overview for the security implications and the recommended mitigations.

PdirectPayThemeConfig

interface PdirectPayThemeConfig {
  primaryColor?: string;
  secondaryColor?: string;
  tertiaryColor?: string;
  accentColor?: string;        // @deprecated — use tertiaryColor
  backgroundColor?: string;
  surfaceColor?: string;
  textColor?: string;
  secondaryTextColor?: string;
  borderColor?: string;
  errorColor?: string;
  successColor?: string;
  warningColor?: string;
  borderRadius?: string;
  fontFamily?: string;
}

The component sets these as scoped CSS custom properties on its host element — overrides cannot leak into the host app.

Status colours (success / error / warning) render in semantic green / red / amber regardless of theming, the same way the Flutter SDK behaves.

PdirectPaymentBody

The collect-payment request body. Same shape as the Flutter SDK’s PdirectPaymentBody. See Payment methods for the conditional field table.

PdirectPayLanguage

Six languages: en, fr, es, ru, zh, ln. Pass to the language input or set PdirectPayConfig.acceptLanguage.

HTTP client configuration

Direct service callers can configure the underlying PdirectHttpClientService:

import { Component, OnInit, inject } from "@angular/core";
import { PdirectHttpClientService } from "@mms/pdirect-pay";

@Component({ /* ... */ })
export class CustomFlowComponent implements OnInit {
  private http = inject(PdirectHttpClientService);

  ngOnInit() {
    this.http.configure({
      appKey: "merchant-app-key",
      acceptLanguage: "en",
      customHeaders: {
        // Until v2 wires it automatically:
        "Idempotency-Key": crypto.randomUUID(),
      },
    });
  }
}

configure is callable as many times as you need — settings are merged.

See also

• Quickstart — a complete app
• API reference — every public symbol
• Version compatibility — Angular 17–21 differences