Skip to main content

Angular

The @apolopay-sdk/angular package provides a native Angular component for the SmartPay payment button.

Installation​

npm install @apolopay-sdk/angular

Usage​

1. Import the Module​

In your component or module, import and register the SmartPay component:

// 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>Complete Your Purchase</h1>
    <payment-button
      [publicKey]="publicKey"
      [processId]="processId"
    ></payment-button>
  `,
})
export class CheckoutComponent implements OnInit {
  publicKey = 'YOUR_PUBLIC_KEY';
  processId = '';

  constructor(private http: HttpClient) {}

  ngOnInit() {
    // Call your backend to create a payment process
    this.http
      .post<{ processId: string }>('/api/create-payment', { amount: 25.5 })
      .subscribe((data) => {
        this.processId = data.processId;
      });
  }
}

Props​

PropTypeRequiredDescription
publicKeystring✅Your payment button's public key
processIdstring✅The process ID from your backend

Next Steps​