Skip to main content

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 install @monei-js/angular-components @monei-js/components

Requires Angular 14 or later.

Components​

ComponentSelectorDescription
MoneiCardInputmonei-card-inputSecure card input (iframe) with submit()
MoneiBizummonei-bizumBizum button + phone verification modal
MoneiPayPalmonei-paypalPayPal checkout button
MoneiPaymentRequestmonei-payment-requestApple 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 CVC in a single secure iframe. Use @ViewChild to call submit() and get a payment token.

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).

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

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​