Angular

El paquete @apolopay-sdk/angular proporciona un componente nativo de Angular para el botón de pago SmartPay.

Instalación

npm install @apolopay-sdk/angular

Uso

1. Importar el Módulo

En tu componente o módulo, importa y registra el componente SmartPay:

// checkout.component.ts
import { Component, OnInit } from '@angular/core';
import { PaymentButtonComponent } from '@apolopay-sdk/angular';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-checkout',
  standalone: true,
  imports: [PaymentButtonComponent],
  template: `
    <h1>Completa tu Compra</h1>
    <payment-button
      [publicKey]="publicKey"
      [processId]="processId"
    ></payment-button>
  `,
})
export class CheckoutComponent implements OnInit {
  publicKey = 'TU_LLAVE_PUBLICA';
  processId = '';

  constructor(private http: HttpClient) {}

  ngOnInit() {
    // Llama a tu backend para crear un proceso de pago
    this.http
      .post<{ processId: string }>('/api/create-payment', { amount: 25.5 })
      .subscribe((data) => {
        this.processId = data.processId;
      });
  }
}

Propiedades (Props)

Propiedad	Tipo	Requerido	Descripción
publicKey	string	✅	La llave pública de tu botón de pago
processId	string	✅	El process ID desde tu backend

Siguientes Pasos

• Integración Backend → — Configura la llamada a la API de preorden
• Webhooks → — Recibe notificaciones cuando los pagos se completen