DEV Community

Cover image for Integrating SeerBit Payments in Angular
SeerBit Developers profile image FOLASAYO SAMUEL OLAYEMI
FOLASAYO SAMUEL OLAYEMI for SeerBit Developers

Posted on

Integrating SeerBit Payments in Angular

#webdev #programming #angular #javascript

SeerBit offers a powerful Angular library (seerbit-angular) that makes adding secure payment modals super easy. You can integrate as either a Component or Directive, depending on your design preference and styling needs.

Prerequisites

Make sure you have:

SeerBit merchant API

Step 1: Install the Library 

npm install --save seerbit-angular
Enter fullscreen mode Exit fullscreen mode

Step 2: Import the Module

In your AppModule:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { NgSeerBitModule } from 'seerbit-angular';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, NgSeerBitModule],
  bootstrap: [AppComponent]
})
export class AppModule {}
Enter fullscreen mode Exit fullscreen mode

This makes SeerBit’s component and directive available in your templates.

Quick Tip: Need app.module.ts? Create a Module-Based Project

If you've noticed your project is missing app.module.ts, it's likely because you're using Angular 17+, where standalone components are the default. You can switch to a module-based structure by running:

ng new my-app --no-standalone --routing --ssr=false
Enter fullscreen mode Exit fullscreen mode

This creates a traditional setup with app.module.ts and app-routing.module.ts, letting you copy over any existing code into a familiar module architecture. There’s no automatic way to convert, so if AppModule is missing and you haven’t written much code yet, this is the simplest route.

Step 3: Set Up Your Component Logic

In app.component.ts:

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'seerbit-angular-integration';

  options = {
    tranref: Date.now(),
    currency: 'NGN',
    description: 'Test payment',
    country: 'NG',
    email: '[email protected]',
    mobile_no: '08012345678',
    full_name: 'Jane Doe',
    amount: 5000,
    setAmountByCustomer: false,
    close_prompt: false,
    close_on_success: false,
    callbackurl: 'https://yourapp.com/payment-callback',
    public_key: 'YOUR_PUBLIC_KEY_HERE',
    customization: {
      theme: { border_color: '#000', background_color: '#004C64', button_color: '#0084A0' },
      payment_method: ['card', 'transfer', 'wallet', 'ussd'],
      display_fee: true,
      logo: 'your_logo_url_or_base64'
    },
    tokenize: false,
    planId: ''
  };

  PaymentDone(res: any) {
    console.log('Payment done:', res.response);
    res.closeModal();
  }

  PaymentCancel(res: any) {
    console.log('Payment cancelled:', res);
  }
}
Enter fullscreen mode Exit fullscreen mode

Customize the options object with your merchant key and shopper info.

Step 4: Add the UI

As a Component

In app.component.html:

<main>
  <div class="content">
    <h1>SeerBit Angular Payment</h1>
    <seerbit-ng
      class="btn-pay"
      [options]="options"
      (callback)="PaymentDone($event)"
      (close)="PaymentCancel($event)">
      Pay Now
    </seerbit-ng>
  </div>
</main>
Enter fullscreen mode Exit fullscreen mode

As a Directive 

<main>
  <div class="content">
    <h1>Pay with SeerBit</h1>
    <button
      class="btn-pay"
      seerbit-ng
      [options]="options"
      (callback)="PaymentDone($event)"
      (close)="PaymentCancel($event)">
      Pay via SeerBit
    </button>
  </div>
</main>
Enter fullscreen mode Exit fullscreen mode

Component vs directive is up to your styling preferences. Just ensure CSS is global if you need to style the custom element.

Step 5: Add Some Basic CSS

In styles.css (global):

.btn-pay {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  background-color: #0084A0;
  color: white;
  border: none;
  border-radius: 0.25rem;
  font-size: 1rem;
  cursor: pointer;
  text-align: center;
}

.btn-pay:hover {
  background-color: #006f88;
}
Enter fullscreen mode Exit fullscreen mode

Component-scoped CSS won’t apply to seerbit-ng, so use global styles for classes used on it.

Step 6: Run & Test

Start your app:

ng serve
Enter fullscreen mode Exit fullscreen mode

Navigate to http://localhost:4200/, click your button, and test the payment flow. Check your console logs for PaymentDone or PaymentCancel.

Pay with SeerBit

Angular Pay With SeerBit

Bonus: Shopping Cart Demo

The SeerBit GitHub repo includes a full shopping cart example: both directive and component versions integrated within a cart UI. It’s a great reference for real‑world use.

Summary

Integration Type Tag Used Good For
Component <seerbit-ng> When you want modal style
Directive seerbit-ng on <button> For custom buttons / styling

Download the source code here

Thanks for reading...
Happy Coding!

Top comments (2)

Collapse
 
nevodavid profile image
Nevo David •

Pretty cool setup here, super clear and actually makes me wanna try it out just to see the flow in action.

Collapse
 
dotallio profile image
Dotallio •

Super clear guide! Really appreciate the heads up about standalone vs module setup in newer Angular - have you run into any gotchas with SeerBit and SSR or dynamic component loading?