@zahlen/checkout-angular

🚀 Installation

npm install @zahlen/checkout-angular @zahlen/checkout
# or
yarn add @zahlen/checkout-angular @zahlen/checkout

📖 Quick Start

Step 1: Import the Module

// app.module.ts
import { ZahlenModule } from '@zahlen/checkout-angular';

@NgModule({
  imports: [
    ZahlenModule.forRoot({
      apiKey: 'pk_live_your_api_key',
      theme: 'dark'
    })
  ]
})
export class AppModule {}

Step 2: Use in Your Component

Option 1: Button Component (Easiest)

<!-- product.component.html -->
<zahlen-button
  [amount]="499900"
  [currency]="'NGN'"
  [description]="'Premium Plan'"
  (success)="onPaymentSuccess($event)"
  (error)="onPaymentError($event)"
>
  💳 Pay ₦4,999
</zahlen-button>

// product.component.ts
import { PaymentResult, PaymentError } from '@zahlen/checkout-angular';

@Component({ ... })
export class ProductComponent {
  onPaymentSuccess(result: PaymentResult) {
    console.log('Payment successful!', result);
    this.router.navigate(['/success']);
  }

  onPaymentError(error: PaymentError) {
    console.error('Payment failed:', error);
    this.toast.error(error.message);
  }
}

Option 2: Directive (Any Element)

<!-- Attach checkout to any element -->
<button
  zahlenCheckout
  [zahlenAmount]="499900"
  [zahlenCurrency]="'NGN'"
  [zahlenDescription]="'Premium Plan'"
  (zahlenSuccess)="onSuccess($event)"
  (zahlenError)="onError($event)"
  class="my-custom-button"
>
  Buy Now
</button>

Option 3: Service (Programmatic)

// product.component.ts
import { ZahlenService, PaymentResult } from '@zahlen/checkout-angular';

@Component({ ... })
export class ProductComponent {
  constructor(private zahlenService: ZahlenService) {}

  async checkout() {
    try {
      const result: PaymentResult = await this.zahlenService.openCheckout({
        amount: 499900,     // ₦4,999 in kobo
        currency: 'NGN',
        description: 'Premium Plan',
        customerEmail: '[email protected]'
      });
      
      console.log('Payment successful!', result);
      this.router.navigate(['/success']);
    } catch (error) {
      console.error('Payment failed:', error);
    }
  }
}

📚 API Reference

ZahlenModule.forRoot(config)

Configure the module in your app's root module.

interface ZahlenConfig {
  apiKey: string;              // Required
  theme?: 'dark' | 'light' | 'auto';  // Default: 'dark'
}

ZahlenService

Injectable service for programmatic control.

| Method | Returns | Description | |--------|---------|-------------| | init(config) | void | Initialize SDK (auto-called by forRoot) | | openCheckout(options) | Promise<PaymentResult> | Open checkout and await result | | checkout(options, onSuccess, onError, onClose?) | void | Open checkout with callbacks | | closeCheckout() | void | Close the modal | | setTheme(theme) | void | Change theme | | isInitialized | boolean | Check if SDK is ready |

<zahlen-button>

Pre-styled checkout button component.

| Input | Type | Required | Description | |-------|------|----------|-------------| | amount | number | ✅ | Amount in smallest unit | | currency | string | | Currency code (default: 'NGN') | | description | string | | Payment description | | customerEmail | string | | Customer email | | metadata | object | | Custom metadata | | className | string | | Additional CSS class | | disabled | boolean | | Disable button |

| Output | Type | Description | |--------|------|-------------| | success | PaymentResult | Emitted on successful payment | | error | PaymentError | Emitted on payment error | | closed | void | Emitted when modal closes |

[zahlenCheckout]

Directive to attach checkout behavior to any element.

| Input | Type | Description | |-------|------|-------------| | zahlenAmount | number | Amount in smallest unit | | zahlenCurrency | string | Currency code | | zahlenDescription | string | Payment description | | zahlenEmail | string | Customer email | | zahlenMetadata | object | Custom metadata |

| Output | Type | Description | |--------|------|-------------| | zahlenSuccess | PaymentResult | Emitted on success | | zahlenError | PaymentError | Emitted on error | | zahlenClose | void | Emitted on close |

🎨 Customization

Customize via the core SDK:

// main.ts or app.component.ts
import { Zahlen } from '@zahlen/checkout';

Zahlen.init({
  apiKey: 'pk_live_xxx',
  customStyles: {
    '--zahlen-primary': '#FF6B6B',
    '--zahlen-bg': '#1A1A2E',
  }
});

⚡ Standalone Components (Angular 17+)

All components are standalone and can be imported directly:

import { ZahlenButtonComponent, ZahlenCheckoutDirective } from '@zahlen/checkout-angular';

@Component({
  standalone: true,
  imports: [ZahlenButtonComponent, ZahlenCheckoutDirective],
  template: `<zahlen-button [amount]="4999" (success)="onPaid($event)"/>`
})
export class ProductComponent {}

📄 License

MIT © Zahlen