@sablepay/angular-sablepay-js

Minimal integration guide for using the SablePay Angular SDK in another application.

Compatibility

Angular 13+

1. Install

npm install @sablepay/angular-sablepay-js

2. Initialize once (app startup)

import { SablePay } from '@sablepay/angular-sablepay-js';

SablePay.initialize({
  apiKey: 'sable_sk_sand_...',
  merchantId: '00000000-0000-0000-0000-000000000000',
  enableLogging: false,
});

3. Create payment + show QR + poll status

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import {
  SablePay,
  QrCodeGenerator,
  PaymentPoller,
  isCompleted,
  isExpired,
} from '@sablepay/angular-sablepay-js';

@Component({
  selector: 'app-checkout',
  standalone: true,
  imports: [CommonModule],
  template: `
    <button (click)="pay()" [disabled]="loading">Pay $10.50</button>
    <img *ngIf="qrUrl" [src]="qrUrl" alt="Scan to pay" width="300" height="300" />
    <p *ngIf="status">Status: {{ status }}</p>
  `,
})
export class CheckoutComponent {
  loading = false;
  qrUrl = '';
  status = '';

  async pay() {
    this.loading = true;

    const sdk = SablePay.getInstance();
    const payment = await sdk.createPayment({ amount: 10.5 });

    const qr = new QrCodeGenerator();
    this.qrUrl = (await qr.generatePaymentQr(payment)) || '';

    const poller = new PaymentPoller((id) => sdk.getPaymentStatus(id));
    poller.startPolling(payment.paymentId, (result) => {
      if (!result.success) {
        this.status = 'FAILED';
        this.loading = false;
        return;
      }

      this.status = result.data.status;
      if (isCompleted(result.data.status) || isExpired(result.data.status)) {
        this.loading = false;
        poller.stopPolling();
      }
    });
  }
}

Optional: Environment values

export const environment = {
  production: false,
  sablepayApiKey: 'sable_sk_sand_...',
  sablepayMerchantId: '00000000-0000-0000-0000-000000000000',
};

License

MIT