@monei-js/angular-components

Angular components for MONEI payments. Standalone components with @Input() bindings, @ViewChild access to submit(), and idiomatic Angular API.

Install

npm install @monei-js/angular-components @monei-js/components

Components

| Component | Selector | Description | | --------------------- | ----------------------- | ------------------------------------------ | | MoneiCardInput | monei-card-input | Secure card input (iframe) with submit() | | MoneiBizum | monei-bizum | Bizum button + phone verification modal | | MoneiPayPal | monei-paypal | PayPal checkout button | | MoneiPaymentRequest | monei-payment-request | Apple Pay / browser Payment Request button |

All components are standalone — import them directly, no NgModule needed.

Quick Start

import {Component, ViewChild} from '@angular/core';
import {MoneiCardInput, confirmPayment} from '@monei-js/angular-components';

@Component({
  selector: 'app-payment',
  standalone: true,
  imports: [MoneiCardInput],
  template: `
    <monei-card-input #cardInput [paymentId]="paymentId"></monei-card-input>
    <button (click)="handleSubmit()">Pay</button>
  `
})
export class PaymentComponent {
  @ViewChild('cardInput') cardInput!: MoneiCardInput;
  paymentId = 'pay_...';

  async handleSubmit() {
    const {token, error} = await this.cardInput.submit();
    if (error) return console.error(error);
    await confirmPayment({paymentId: this.paymentId, paymentToken: token});
  }
}

API Re-exports

confirmPayment and api are re-exported from this package for convenience:

import {MoneiCardInput, MoneiBizum, confirmPayment, api} from '@monei-js/angular-components';

Migrating from .driver('angular')

Import changes

Before (.driver() API with NgModule):

import {CardInput, Bizum, PayPal, PaymentRequest} from '@monei-js/components';
import {Component, NgModule, ElementRef, NgZone, Inject} from '@angular/core';

const CardInputModule = CardInput.driver('angular', {
  Component,
  NgModule,
  ElementRef,
  NgZone,
  Inject
});
const BizumModule = Bizum.driver('angular', {Component, NgModule, ElementRef, NgZone, Inject});

After (standalone components):

import {
  MoneiCardInput,
  MoneiBizum,
  MoneiPayPal,
  MoneiPaymentRequest
} from '@monei-js/angular-components';

submit() migration

Before (opaque props bag, no typed access):

@Component({
  template: '<bridge-component [props]="cardProps"></bridge-component>',
  imports: [CardInputModule]
})
export class PaymentComponent {
  // No typed submit() — had to access internal bridge instance
}

After (standalone component with typed @Input() and public submit()):

import {Component, ViewChild} from '@angular/core';
import {MoneiCardInput} from '@monei-js/angular-components';

@Component({
  standalone: true,
  imports: [MoneiCardInput],
  template: `
    <monei-card-input #cardInput [paymentId]="paymentId" [onChange]="handleChange">
    </monei-card-input>
    <button (click)="handleSubmit()">Pay</button>
  `
})
export class PaymentComponent {
  @ViewChild('cardInput') cardInput!: MoneiCardInput;

  async handleSubmit() {
    const {token, error} = await this.cardInput.submit({cardholderName: 'John'});
    if (error) return;
    // use token with confirmPayment
  }
}

Typed inputs

The old driver used an opaque [props] bag with no type checking. The new components use individual @Input() bindings:

<!-- Old: untyped props bag -->
<bridge-component [props]="{paymentId: id, onChange: handler}"></bridge-component>

<!-- New: typed individual inputs -->
<monei-card-input
  [paymentId]="id"
  [accountId]="accountId"
  [onChange]="handler"
  [onFocus]="focusHandler"
  [style]="inputStyle">
</monei-card-input>

Standalone components

All components are standalone (no NgModule required). Works with Angular 14+ standalone API:

@Component({
  standalone: true,
  imports: [MoneiCardInput, MoneiBizum, MoneiPayPal, MoneiPaymentRequest],
  template: `...`
})

Documentation

Full API reference: docs.monei.com/monei-js/reference

License

MIT