Saltar al contenido principal

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

Requiere Angular 14 o posterior.

Componentes​

ComponenteSelectorDescripción
MoneiCardInputmonei-card-inputEntrada de tarjeta segura (iframe) con submit()
MoneiBizummonei-bizumBotón de Bizum + modal de verificación por teléfono
MoneiPayPalmonei-paypalBotón de checkout de PayPal
MoneiPaymentRequestmonei-payment-requestBotó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 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});
  }
}

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

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

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 en su lugar.

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

Próximos pasos​