npm package: @monei-js/angular-components
Description: MONEI Angular components for accepting payments with CardInput, Bizum, PayPal, and PaymentRequest.
Author: MONEI
Latest version: 2.0.7

# @monei-js/angular-components

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

## Install

```bash
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

```typescript
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:

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

## Migrating from `.driver('angular')`

### Import changes

Before (`.driver()` API with NgModule):

```ts
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):

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

### submit() migration

Before (opaque `props` bag, no typed access):

```ts
@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()`):

```ts
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:

```html
<!-- 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:

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

## Documentation

Full API reference: [docs.monei.com/monei-js/reference](https://docs.monei.com/monei-js/reference/)

## License

MIT