# 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[​](#install "Direct link to Install")

* npm
* yarn
* pnpm

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

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

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

Requires Angular 14 or later.

## Components[​](#components "Direct link to 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[​](#card-input "Direct link to 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});

  }

}
```

Open in CodeSandbox

See the [API Reference](https://docs.monei.com/monei-js/reference/.md#cardinput-component) for all CardInput props (style, placeholders, error messages, event callbacks).

## Split card fields[​](#split-card-fields "Direct link to 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});

  }

}
```

Open in CodeSandbox

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](https://docs.monei.com/monei-js/reference/.md#card-part-components) for all options and behavior details.

## Bizum[​](#bizum "Direct link to Bizum")

The [Bizum](https://docs.monei.com/payment-methods/bizum/.md) 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);

  };

}
```

Open in CodeSandbox

## PayPal[​](#paypal "Direct link to PayPal")

The [PayPal](https://docs.monei.com/payment-methods/paypal/.md) 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);

  };

}
```

Open in CodeSandbox

## PaymentRequest (Apple Pay / Google Pay)[​](#paymentrequest-apple-pay--google-pay "Direct link to PaymentRequest (Apple Pay / Google Pay)")

The [PaymentRequest](https://docs.monei.com/payment-methods/apple-pay/.md) component renders an Apple Pay or Google Pay button depending on the customer's browser and device.

note

Apple Pay requires [domain verification](https://docs.monei.com/payment-methods/apple-pay/.md#register-your-domain-with-apple-pay) 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);

  };

}
```

Open in CodeSandbox

## Payment modal[​](#payment-modal "Direct link to 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](#paymentrequest-apple-pay--google-pay) component instead.

See [Use Payment Modal](https://docs.monei.com/integrations/use-payment-modal/.md) for the full integration guide.

## Next steps[​](#next-steps "Direct link to Next steps")

* Check the [API Reference](https://docs.monei.com/monei-js/reference/.md) for all component options and methods
* See the [Migration Guide](https://docs.monei.com/monei-js/migration/.md) if you're upgrading from the `.driver('angular')` API