npm package: @monri-payments/monri-js
Description: Load Monri.js as an ES module with full TypeScript types
Latest version: 1.0.4

# @monri-payments/monri-js

TypeScript wrapper around the Monri.js SDK. Loads the SDK script dynamically and provides full type safety.

**Official components documentation:** https://ipg.monri.com/en/documentation/components

## Installation

```bash
npm install @monri-payments/monri-js
```

## Usage

```typescript
import { loadMonri } from '@monri-payments/monri-js';

const monri = await loadMonri(
  'your-authenticity-token',
  { locale: 'en' },
  'production' // 'production' | 'test' | 'dev'
);

const factory = monri.components({ clientSecret: 'your-client-secret' });

const googlePay = factory.create('google-pay', {
  trx_token: 'trx-token',
  environment: 'production',
  buttonStyle: 'black',
  buttonType: 'pay',
});

googlePay.mount('google-pay-element');
```

## Environments

| Value | SDK URL |
|-------|---------|
| `production` | `https://ipg.monri.com/dist/components.js` |
| `test` | `https://ipgtest.monri.com/dist/components.js` |
| `dev` | `https://ipgdev.monri.com/dist/components.js` |

## Supported component types

Pass any of these strings to `factory.create(type, options)`:

`card`, `google-pay`, `apple-pay`, `keks-pay`, `air-cash`, `flik-pay`, `ips-rs`, `ips-otp`

## Component methods

Every component returned by `create()` implements:

```typescript
component.mount(elementId: string): void
component.setLanguage(lang: string): void
component.toggleTheme(isDark: boolean): void
component.onChange(callback: (event) => void): void
```

---

## Angular integration

Because `@monri-payments/monri-js` is a plain TypeScript package (not compiled with `ng-packagr`), the recommended Angular integration is a **local service** compiled by the app's own Angular compiler.

**1. Create `src/app/monri/monri.service.ts`**

```typescript
import { Inject, Injectable, InjectionToken } from '@angular/core';
import { loadMonri } from '@monri-payments/monri-js';
import type { ComponentOptions, ComponentsFactory, IMonri, MonriEnvironment } from '@monri-payments/monri-js';

export interface MonriAngularConfig {
  authenticityToken: string;
  locale?: string;
  env?: MonriEnvironment;
}

export const MONRI_CONFIG = new InjectionToken<MonriAngularConfig>('MONRI_CONFIG');

@Injectable()
export class MonriService {
  private monri: IMonri | null = null;
  private factory: ComponentsFactory | null = null;

  constructor(@Inject(MONRI_CONFIG) private readonly config: MonriAngularConfig) {}

  async initialize(clientSecret: string): Promise<void> {
    if (!this.monri) {
      this.monri = await loadMonri(
        this.config.authenticityToken,
        { locale: this.config.locale ?? 'en' },
        this.config.env ?? 'production'
      );
    }
    this.factory = this.monri.components({ clientSecret });
  }

  create(type: string, options?: ComponentOptions) {
    if (!this.factory) throw new Error('MonriService not initialized.');
    return this.factory.create(type, options);
  }
}
```

**2. Create `src/app/monri/monri.module.ts`**

```typescript
import { ModuleWithProviders, NgModule } from '@angular/core';
import { MONRI_CONFIG, MonriAngularConfig, MonriService } from './monri.service';

@NgModule({})
export class MonriModule {
  static forRoot(config: MonriAngularConfig): ModuleWithProviders<MonriModule> {
    return {
      ngModule: MonriModule,
      providers: [{ provide: MONRI_CONFIG, useValue: config }, MonriService],
    };
  }
}
```

**3. Register in `AppModule`**

```typescript
import { MonriModule } from './monri/monri.module';
import { environment } from '../environments/environment';

@NgModule({
  imports: [
    MonriModule.forRoot({
      authenticityToken: 'your-authenticity-token',
      locale: 'en',
      env: environment.monriEnv, // 'production' | 'test' | 'dev'
    }),
  ],
})
export class AppModule {}
```

**4. Use in a component**

```typescript
import type { Component as MonriComponent } from '@monri-payments/monri-js';

@Component({ ... })
export class GooglePayComponent implements OnInit {
  private component: MonriComponent | undefined;

  constructor(private monriService: MonriService) {}

  async ngOnInit() {
    await this.monriService.initialize('client-secret');
    this.component = this.monriService.create('google-pay', {
      trx_token: 'trx-token',
      environment: 'production',
    });
    this.component.mount('google-pay-element');
  }
}
```