@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

npm install @monri-payments/monri-js

Usage

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:

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

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

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

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

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');
  }
}