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

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

Requiere Angular 14 o posterior.

Componentes

Componente	Selector	Descripción
MoneiCardInput	monei-card-input	Entrada de tarjeta segura (iframe) con submit()
MoneiCardNumber / MoneiCardExpiry / MoneiCardCvc	monei-card-number / -expiry / -cvc	Campos de tarjeta montables individualmente, coordinados por MoneiCardGroupService
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

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

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

Consulta la Referencia de la API para ver todas las props de CardInput (estilo, placeholders, mensajes de error, callbacks de eventos).

Campos de tarjeta separados

Monta el número, la caducidad y el CVC como componentes separados en tu propio diseño. Provee MoneiCardGroupService en tu componente de checkout y crea el grupo en el constructor — debe existir antes de que se inicialice cualquier campo:

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>Número de tarjeta</label>
    <monei-card-number [group]="group" class="card-box" [onChange]="onNumberChange" />
    <div class="row">
      <div>
        <label>Caducidad</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()">Pagar</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; // el campo con error ya está resaltado
      return;
    }
    await confirmPayment({paymentId: this.paymentId, paymentToken: result.token});
  }
}

Estiliza esa caja con tu propio CSS — el class que pasas se aplica al mismo elemento en el que cada campo alterna monei-component--focus, --invalid, --empty y --complete, de modo que .card-box.monei-component--invalid {} coincide. Una referencia @ViewChild a un campo expone focus(), blur() y clear().

Consulta la referencia de la API para todas las opciones y detalles de comportamiento.

Bizum

El componente Bizum 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);
  };
}

PayPal

El componente PayPal 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);
  };
}

PaymentRequest (Apple Pay / Google Pay)

El componente PaymentRequest 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 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);
  };
}

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

info

Apple Pay no está disponible en el Modal de pago. Usa el componente PaymentRequest en su lugar.

Consulta Usar el Modal de pago para la guía de integración completa.

Próximos pasos

• Consulta la Referencia de la API para ver todas las opciones y métodos de los componentes
• Consulta la Guía de migración si estás actualizando desde la API .driver('angular')