# Componentes Angular

Usa `@monei-js/angular-components` para añadir componentes de pago de MONEI a tu aplicación Angular. Cada componente es standalone con bindings `@Input()` tipados y acceso `@ViewChild` a `submit()`.

<!-- -->

## Instalación[​](#instalación "Enlace directo al Instalación")

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

Requiere Angular 14 o posterior.

## Componentes[​](#componentes "Enlace directo al Componentes")

| Componente            | Selector                | Descripción                                         |
| --------------------- | ----------------------- | --------------------------------------------------- |
| `MoneiCardInput`      | `monei-card-input`      | Entrada de tarjeta segura (iframe) con `submit()`   |
| `MoneiBizum`          | `monei-bizum`           | Botón de Bizum + modal de verificación por teléfono |
| `MoneiPayPal`         | `monei-paypal`          | Botón de checkout de PayPal                         |
| `MoneiPaymentRequest` | `monei-payment-request` | Botón de Apple Pay / Google Pay                     |

Todos los componentes son standalone — impórtalos directamente, sin necesidad de NgModule.

## Card Input[​](#card-input "Enlace directo al Card Input")

El componente Card Input recopila el número de tarjeta, la fecha de caducidad y el CVC en un único iframe seguro. Usa `@ViewChild` para llamar a `submit()` y obtener un token de pago.

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

  }

}
```

Abrir en CodeSandbox

Consulta la [Referencia de la API](https://docs.monei.com/es/es/monei-js/reference/.md#componente-cardinput) para ver todas las props de CardInput (estilo, placeholders, mensajes de error, callbacks de eventos).

## Bizum[​](#bizum "Enlace directo al Bizum")

El componente [Bizum](https://docs.monei.com/es/es/payment-methods/bizum/.md) muestra un botón de pago Bizum. Cuando el cliente hace clic, se abre un modal de verificación por teléfono para completar el pago.

```
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);

  };

}
```

Abrir en CodeSandbox

## PayPal[​](#paypal "Enlace directo al PayPal")

El componente [PayPal](https://docs.monei.com/es/es/payment-methods/paypal/.md) muestra un botón de checkout de PayPal. Cuando el cliente aprueba, recibes un token para confirmar el pago.

```
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);

  };

}
```

Abrir en CodeSandbox

## PaymentRequest (Apple Pay / Google Pay)[​](#paymentrequest-apple-pay--google-pay "Enlace directo al PaymentRequest (Apple Pay / Google Pay)")

El componente [PaymentRequest](https://docs.monei.com/es/es/payment-methods/apple-pay/.md) muestra un botón de Apple Pay o Google Pay según el navegador y el dispositivo del cliente.

nota

Apple Pay requiere [verificación de dominio](https://docs.monei.com/es/es/payment-methods/apple-pay/.md#registra-tu-dominio-con-apple-pay) tanto en desarrollo como en producción.

```
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);

  };

}
```

Abrir en CodeSandbox

## Modal de pago[​](#modal-de-pago "Enlace directo al Modal de pago")

Llamar a `confirmPayment()` **sin** un `paymentToken` abre el Modal de pago de MONEI — un checkout completo en la página donde el cliente puede seleccionar un método de pago y completar el pago.

```
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 no está disponible en el Modal de pago. Usa el componente [PaymentRequest](#paymentrequest-apple-pay--google-pay) en su lugar.

Consulta [Usar el Modal de pago](https://docs.monei.com/es/es/integrations/use-payment-modal/.md) para la guía de integración completa.

## Próximos pasos[​](#próximos-pasos "Enlace directo al Próximos pasos")

* Consulta la [Referencia de la API](https://docs.monei.com/es/es/monei-js/reference/.md) para ver todas las opciones y métodos de los componentes
* Consulta la [Guía de migración](https://docs.monei.com/es/es/monei-js/migration/.md) si estás actualizando desde la API `.driver('angular')`