@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. Collect Payment (one line)

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SablePay } from '@sablepay/angular-sablepay-js';

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

  pay() {
    this.loading = true;

    // Launch payment — handles QR, polling, and result automatically
    SablePay.launchPayment(10.50, {
      onPaymentCreated: (response, qrDataUrl) => {
        this.qrUrl = qrDataUrl;
      },
      onSuccess: (status) => {
        this.status = 'Payment complete! TX: ' + status.transactionId;
        this.loading = false;
      },
      onFailure: (error) => {
        this.status = 'Failed: ' + error.message;
        this.loading = false;
      },
    });
  }
}

Cancel / Cleanup

SablePay.cancelPayment();  // Cancel active payment
SablePay.release();        // Clear credentials (on logout)

Optional: Environment values

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

License

MIT