Angular Components

Use @monei-js/angular-components to add MONEI payment components to your Angular app. Each component is standalone with typed @Input() bindings and @ViewChild access to submit().

Install

npm

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

yarn

yarn add @monei-js/angular-components @monei-js/components

pnpm

pnpm add @monei-js/angular-components @monei-js/components

Requires Angular 14 or later.

Components

Component	Selector	Description
MoneiCardInput	monei-card-input	Secure card input (iframe) with submit()
MoneiCardNumber / MoneiCardExpiry / MoneiCardCvc	monei-card-number / -expiry / -cvc	Individually mountable card fields, coordinated by MoneiCardGroupService
MoneiBizum	monei-bizum	Bizum button + phone verification modal
MoneiPayPal	monei-paypal	PayPal checkout button
MoneiPaymentRequest	monei-payment-request	Apple Pay / Google Pay button

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

Card input

The Card Input component collects card number, expiry, and in a single secure iframe. Use @ViewChild to call submit() and get a .

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

@Component({
  selector: 'app-payment',
  standalone: true,
  imports: [MoneiCardInput, NgIf],
  template: `
    <monei-card-input #cardInput [paymentId]="paymentId" [onChange]="handleChange">
    </monei-card-input>
    <button (click)="handleSubmit()">Pay</button>
    <p *ngIf="error">{{ error }}</p>
  `
})
export class PaymentComponent {
  @ViewChild('cardInput') cardInput!: MoneiCardInput;
  paymentId = ''; // Set from your backend
  error = '';

  handleChange = ({error}: {error?: string}) => {
    this.error = error ?? '';
  };

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

See the API Reference for all CardInput props (style, placeholders, error messages, event callbacks).

Split card fields

Mount the number, expiry and CVC as separate components in your own layout. Provide MoneiCardGroupService on your checkout component and create the group in the constructor — it must exist before any part initializes:

import {Component, inject} from '@angular/core';
import {
  MoneiCardNumber,
  MoneiCardExpiry,
  MoneiCardCvc,
  MoneiCardGroupService,
  confirmPayment
} from '@monei-js/angular-components';

@Component({
  selector: 'app-split-payment',
  standalone: true,
  imports: [MoneiCardNumber, MoneiCardExpiry, MoneiCardCvc],
  providers: [MoneiCardGroupService],
  template: `
    <label>Card number</label>
    <monei-card-number [group]="group" class="card-box" [onChange]="onNumberChange" />
    <div class="row">
      <div>
        <label>Expiry</label>
        <monei-card-expiry [group]="group" class="card-box" />
      </div>
      <div>
        <label>CVC</label>
        <monei-card-cvc [group]="group" class="card-box" />
      </div>
    </div>
    <button [disabled]="!complete" (click)="handleSubmit()">Pay</button>
    <p *ngIf="error">{{ error }}</p>
  `
})
export class SplitPaymentComponent {
  private cardGroup = inject(MoneiCardGroupService);
  paymentId = '...';
  group = this.cardGroup.create({paymentId: this.paymentId});
  complete = false;
  error = '';

  onNumberChange = (e: {complete: boolean}) => (this.complete = e.complete);

  async handleSubmit() {
    const result = await this.cardGroup.submit();
    if (result.error) {
      this.error = result.error; // the offending field is already highlighted
      return;
    }
    await confirmPayment({paymentId: this.paymentId, paymentToken: result.token});
  }
}

Style that box in your own CSS — the class you pass is set on the very element each part toggles monei-component--focus, --invalid, --empty and --complete on, so .card-box.monei-component--invalid {} matches. A @ViewChild reference to a part exposes focus(), blur() and clear().

See the API Reference for all options and behavior details.

Bizum

The Bizum component renders a Bizum payment button. When the customer clicks it, a phone verification modal opens to complete the payment.

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

@Component({
  selector: 'app-bizum-payment',
  standalone: true,
  imports: [MoneiBizum],
  template: `
    <monei-bizum [paymentId]="paymentId" [onSubmit]="handleSubmit" [onError]="handleError">
    </monei-bizum>
  `
})
export class BizumPaymentComponent {
  paymentId = ''; // Set from your backend

  handleSubmit = async (result: {token?: string}) => {
    if (result.token) {
      await confirmPayment({paymentId: this.paymentId, paymentToken: result.token});
    }
  };

  handleError = (error: string) => {
    console.error(error);
  };
}

PayPal

The PayPal component renders a PayPal checkout button. When the customer approves, you receive a token to confirm the payment.

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

@Component({
  selector: 'app-paypal-payment',
  standalone: true,
  imports: [MoneiPayPal],
  template: `
    <monei-paypal [paymentId]="paymentId" [onSubmit]="handleSubmit" [onError]="handleError">
    </monei-paypal>
  `
})
export class PayPalPaymentComponent {
  paymentId = ''; // Set from your backend

  handleSubmit = async (result: {token?: string}) => {
    if (result.token) {
      await confirmPayment({paymentId: this.paymentId, paymentToken: result.token});
    }
  };

  handleError = (error: string) => {
    console.error(error);
  };
}

PaymentRequest (Apple Pay / Google Pay)

The PaymentRequest component renders an Apple Pay or Google Pay button depending on the customer's browser and device.

note

Apple Pay requires domain verification in both development and production.

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

@Component({
  selector: 'app-payment-request',
  standalone: true,
  imports: [MoneiPaymentRequest],
  template: `
    <monei-payment-request
      [paymentId]="paymentId"
      [onSubmit]="handleSubmit"
      [onError]="handleError"
    >
    </monei-payment-request>
  `
})
export class PaymentRequestComponent {
  paymentId = ''; // Set from your backend

  handleSubmit = async (result: {token?: string}) => {
    if (result.token) {
      await confirmPayment({paymentId: this.paymentId, paymentToken: result.token});
    }
  };

  handleError = (error: string) => {
    console.error(error);
  };
}

Payment modal

Calling confirmPayment() without a paymentToken opens the MONEI Payment Modal — a full in-page checkout where the customer can select a payment method and complete the payment.

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

@Component({
  selector: 'app-pay-with-modal',
  standalone: true,
  template: `<button (click)="handleClick()">Pay</button>`
})
export class PayWithModalComponent {
  paymentId = ''; // Set from your backend

  async handleClick() {
    const result = await confirmPayment({paymentId: this.paymentId});
    // Payment completed — check result.status
    console.log(result);
  }
}

info

Apple Pay is not available in the Payment Modal. Use the PaymentRequest component instead.

See Use Payment Modal for the full integration guide.

Next steps

• Check the API Reference for all component options and methods
• See the Migration Guide if you're upgrading from the .driver('angular') API