Skip to content
Pdirect

Angular — installation

The Angular SDK ships as @mms/pdirect-pay on npm. Build with ng-packagr, supports Angular 17–21.

Requirements

Section titled “Requirements”
Angular^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0 || ^21.0.0
RxJS^7.8.0
TypeScript~5.9.0
NodeLTS (20.x or 22.x)

The package is sideEffects: false, so tree-shaking works out of the box.

Add the dependency

Section titled “Add the dependency”
Terminal window
npm install @mms/pdirect-pay

Or pin a specific major version in package.json:

{
  "dependencies": {
    "@mms/pdirect-pay": "^1.2.0"
  }
}

See Versioning for the SDK version policy. Angular v2.0.0 is the next major and will close the Auth-v3 parity gap.

Verify the install

Section titled “Verify the install”
Terminal window
npm ls @mms/pdirect-pay
# my-app@1.0.0 /path/to/app
# └── @mms/pdirect-pay@1.2.2

Two integration patterns

Section titled “Two integration patterns”

The SDK supports both module-based and standalone-component integrations. Pick whichever your app uses.

Section titled “Standalone (recommended for new apps)”

Import the components and types you use directly:

import { Component } from "@angular/core";
import {
  PdirectPayCheckoutComponent,
  PdirectPayConfig,
  PdirectPaymentBody,
} from "@mms/pdirect-pay";


@Component({
  selector: "app-checkout",
  standalone: true,
  imports: [PdirectPayCheckoutComponent],
  template: `<pdirect-pay-checkout [configs]="configs" [paymentBody]="paymentBody" />`,
})
export class CheckoutComponent {
  configs: PdirectPayConfig = { token: "...", isProduction: false };
  paymentBody: PdirectPaymentBody = { /* ... */ };
}

Module-based

Section titled “Module-based”

Import PdirectPayModule.forRoot(...) once at the root:

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


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

forRoot registers the PDIRECT_ENV_CONFIG and PDIRECT_PAY_CONFIG injection tokens with the values you pass.

Verify it imports

Section titled “Verify it imports”
// ng new pdirect-demo --standalone
// then in app.component.ts:
import { Component, signal } from "@angular/core";
import { PdirectPayApiResponseCodeInfo } from "@mms/pdirect-pay";


@Component({
  selector: "app-root",
  standalone: true,
  template: `<p>SDK ready: {{ ready() }}</p>`,
})
export class AppComponent {
  ready = signal(PdirectPayApiResponseCodeInfo.getMessage("LOK000" as any) === "Success");
}

ng serve should print SDK ready: true.

Browser compatibility

Section titled “Browser compatibility”

Same as Angular 17+ itself: evergreen Chromium, Firefox, Safari, and Edge. The SDK has no IE polyfills and won’t run in IE 11.

Next steps

Section titled “Next steps”
  1. Configure the SDK — modules, tokens, and forRoot options.
  2. Read the quickstart for an end-to-end checkout.
  3. Skim the API reference for every public symbol.
  4. Read version compatibility if you’re on Angular 17 or 18 (some signals-based features are Angular 19+).