Payment Integration Made Easy: Paystack With Angular 17
Published: 2024-04-24 14:31:22

by [Ugo Chukwuebuka](https://blog.openreplay.com/authors/ugo-chukwuebuka)



<blockquote><em>
If you've ever shopped online and noticed that the website uses a third-party system like [Flutterwave](https://flutterwave.com/ng/) or [Paystack](https://paystack.com/) to handle payments, you might be curious about how they set it up. Suppose you're interested in learning how to create a similar payment system using [Angular 17](https://angular.dev/). In that case, you're just in the right place because this article will show how to integrate a Paystack payment system with Angular 17.
</em></blockquote>




Integrating payment gateways into web applications is vital for supporting secure and easy online transactions. With payment gateways, businesses can accept various payment methods, increasing customer ease and happiness. When payment gateways are integrated, the checkout process becomes smoother, which means fewer people will leave their shopping carts without completing what they bought, which in turn will help increase sales for businesses. Lastly, this integration builds trust between businesses and customers, establishing long-term relationships and increasing overall growth.

## Introduction to the Paystack Payment System 
[Paystack](https://paystack.com/) is one of the various payment systems we have that makes it easy for businesses in Africa to receive online payments from their customers from anywhere in the world. These customers can pay through channels like USSD (Unstructured Supplementary Service Data), cards, mobile money, bank transfers, and a lot more. 

### Features of the Paystack Payment System
Due to its numerous attractive features, Paystack has emerged as one of the most popular payment systems in the African market. Paystack offers businesses a stress-free solution for accepting online payments, resulting in increased growth and better customer payment experiences.

Below are some of its features:
* Well-documented APIs: Paystack APIs contain clear instructions for developers to easily integrate Paystack payment gateways into their websites.
* Easy Payment Experience: Paystack offers businesses the opportunity to get paid through channels like Visa QR (Quick Response) codes, bank transfers, USSD, and POS, making it easy for customers to checkout with no stress.
* Transaction Success Rates: Paystack allows you to experience high success rates with your transactions. They ensure your payments go through smoothly by choosing the best channels to process them, which means you'll have fewer problems completing transactions.

### Benefits of Using the Paystack Payment System for Online Payments
Using Paystack for online payments provides businesses safe transactions and quicker checkout processes. In this part, we'll examine some key benefits of using Paystack's payment gateway for online transactions.

Below are some benefits of using the Paystack payment system:
* Paystack enables businesses to easily accept customer payments, whether a one-time purchase or a recurring subscription.
* With Paystack, businesses can see exactly what their customers are buying and when they're buying it. Plus, Paystack makes it easy to organize and understand all this information, which helps with keeping track of sales and ensuring everything adds up correctly.
* Paystack enhances security by ensuring that transactions are conducted with authenticated users, reducing the risk of fraudulent activities and enhancing trust in the payment process.

## Integrating the Paystack Payment System into an Existing Application
Here, we'll see, in practical terms, how we can integrate the Paystack payment system into an application. [Here](https://github.com/UgoEbuka09/PaystackWithAngularUI) is a repository containing an existing application we'll use in this article. 

So, scaffold the project, and let's get into the fun part.

Here is what our application looks like without Paystack system integration:

<video autoplay loop muted playsinline src="https://res.cloudinary.com/dvofaxqpf/video/upload/c_fit,h_600,w_730/v1710888675/paystack001_kf29pl.mp4" type="video/mp4"></video>

### Set up your Paystack Account and Get your API Keys

Now, to integrate, we first need to open a free account with [Paystack's website](https://paystack.com/); then, we can get our test keys, which will be used to authenticate our requests to the Paystack API (Application Programming Interface). 

To get them, in your dashboard on the sidebar, click on "Get Started," scroll below, and then you'll see your test keys at the bottom of the page, as follows:

![paystack002 (2)](https://blog.openreplay.com/images/payment-integration-made-easy--paystack-with-angular-17/images/image.png)

### Getting Started: Integrate a Paystack Payment Gateway into an Existing Application 

Here, we'll see how to integrate the Paystack system into the existing application.

Install the `angular4-paystack` module to use Paystack in our application, as follows:

```bash
npm install --save angular4-paystack
```

In `app.module.ts`, enter the following code:

```typescript
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";

import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";
import { PaystackComponent } from "./paystack/paystack.component";
import { Angular4PaystackModule } from "angular4-paystack";

@NgModule({
  declarations: [AppComponent, PaystackComponent],
  imports: [
    BrowserModule,
    AppRoutingModule,
    Angular4PaystackModule.forRoot("Enter_your_public_key_here"),
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}
```

Code breakdown:
* We imported `PaystackComponent` and added it to the `declarations` array because that's where the content of our application is.
* We added `Angular4PaystackModule` to the `imports` array because it integrates with the Paystack payment gateway in Angular applications. So, we provide our public key to authenticate our application with the Paystack API.

Update `paystack.component.html` with the code snippet below:

```html
<section>
  <div>
    <nav class="p-4">
      <p>Stells Collections</p>
      <div>
        <i class="bi bi-search"></i>
        <i class="bi bi-cart4"></i>
      </div>
    </nav>
  </div>
  @if (!show) {
  <main class="grid mt-5 p-4">
    @for (item of data; track item.id) {
    <div>
      <img class="bagImage" src="{{ item.image }}" alt="bag img" />
      <p class="mt-3 fw-bold">{{ item.name }}</p>
      <p class="fs-5">Price: NGN{{ item.price }}</p>
      <button (click)="getBagDetailById(item.id)" class="fs-5 fw-semibold">
        See More
      </button>
    </div>
    }
  </main>

  }

  <!-- individual bag detail -->
  <section>
    @if (show) {
    <div class="mt-3 d-flex">
      @for (item of bagDetail; track item.id) {
      <img class="indBagImage" src="{{ item.image }}" alt="bag img" />
      <div class="ms-4 mt-5">
        <p class="mt-3 fw-bold">{{ item.name }}</p>
        <div>
          <button class="d-flex buttn justify-content-between">
            <i class="bi bi-dash"></i>
            <p>1</p>
            <i class="bi bi-plus"></i>
          </button>
        </div>
        <p class="fs-5 mt-3">Price: NGN{{ item.price }}</p>

        <angular4-paystack
          [paystackOptions]="options"
          [class]="'btn btn-primary'"
          (paymentInit)="paymentInit()"
          (onClose)="paymentFailed()"
          (callback)="paymentSuccess($event)"
        >
          Pay with Paystack
        </angular4-paystack>
      </div>
      }
    </div>
    }
  </section>
</section>
```

<CTA_Middle_Cloud />



Code breakdown:
* The code `[paystackOptions]="options"` is an input binding that passes the `options` object to the `paystackOptions` property. The `options` object contains configuration settings for the Paystack payment gateway, such as email, channels, amount, etc. We defined this object in `paystack.component.ts`, which we'll look at later.
* The code `(paymentInit)="paymentInit()"` triggers the `paymentInit()` method in the component class, which therefore initializes or starts the payment.
* When the event `(onClose)="paymentFailed()"` occurs, it means the payment dialog is closed and then will call the `paymentFailed()` function in the component class.
* When the payment is completed, the event `(callback)="paymentSuccess($event)"` occurs, which in turn calls the `paymentSuccess($event)` function in the component class.

Update `paystack.component.ts` as follows:

```typescript
import { Component } from "@angular/core";
import { BagDetails } from "./interface";
import { PaystackOptions } from "angular4-paystack";

@Component({
  selector: "app-paystack",
  templateUrl: "./paystack.component.html",
  styleUrl: "./paystack.component.css",
})
export class PaystackComponent {
  bagDetail: any;
  price!: number;
  show: boolean = false;
  message!: string;
  reference: string = "";

  data: BagDetails[] = [
    {
      id: 1,
      name: "Ella Purse",
      image: "./assets/bag01.jpg",
      price: 5000,
    },
    {
      id: 2,
      name: "Crystal 2in1 Bag",
      image: "./assets/bag02.jpg",
      price: 20000,
    },
    {
      id: 3,
      name: "holloids 3in1 Bag",
      image: "./assets/bag03.jpg",
      price: 14000,
    },
    {
      id: 4,
      name: "Jasmine Bag",
      image: "./assets/bag04.jpg",
      price: 35007,
    },
  ];

  options: PaystackOptions = {
    amount: 0,
    email: "Your Paystack account email here",
    ref: `${Math.ceil(Math.random() * 10e10)}`,
    channels: ["USSD", "bank", "card"],
    quantity: 1,
    currency: "NGN",
  };

  constructor() {}

  ngOnInit(): void {
    console.log(this.data);
    this.reference = `ref-${Math.ceil(Math.random() * 10e13)}`;
  }
  getBagDetailById(id: number) {
    console.log(id);
    this.bagDetail = this.data.filter((item) => {
      return item.id === id;
    });
    this.price = this.bagDetail[0].price;
    this.options.amount = this.price;
    console.log(this.price);

    if (this.bagDetail) {
      this.show = true;
    }
    console.log(this.bagDetail);
    console.log(this.show);
  }

  paymentInit() {
    console.log("Payment is Initialized");
  }

  paymentSuccess(ref: any) {
    this.message = "Payment is successful";
    console.log(this.message, ref);
  }

  paymentFailed() {
    console.log("Payment Failed");
  }
}
```

The object `options`, which is of type `PaystackOptions`, takes in properties like:
* `amount`: This specifies the amount to be charged in the transaction. We initialized it to `0` but will change it in the `getBagDetailById(id: number)` method, depending on the price of the selected bag.
* `email`: This represents your email address associated with your Paystack account.
* `ref`: This is an identifier for the transaction. When a transaction happens, Paystack assigns a `ref` value. With the `ref` value, your transaction can be quickly tracked or identified.
* `channels`: These are ways a transaction can be made. So, you can make a transaction through a bank transfer, USSD, or card.
* `quantity`: This refers to the number of items you purchase.
* `currency`: This specifies the currency used for the transaction. In this case, we set it to `NGN`, the Nigerian currency.

Explanation of methods to handle payment responses:

* The `paymentInit()` method is called when you want to start a transaction.
* The `paymentSuccess()` method is called when a transaction is successful. So, a message will be logged on your console showing that the payment transaction was completed successfully, coupled with a `ref` object containing transaction-related details such as `message`, `redirecturl`, `status`, `reference`, etc.
* The `paymentFailed()` method is called when a transaction fails or is canceled.

We've completed integrating the Paystack payment system into our application. Here is our final result:

<video autoplay loop muted playsinline src="https://res.cloudinary.com/dvofaxqpf/video/upload/c_fit,h_600,w_730/v1711621022/paystack007_hymin4.mp4" type="video/mp4"></video>


## Conclusion
This was a short but interesting walk-through on how a Paystack payment system can be integrated into an Angular application. There are other methods for performing this integration. You'll notice we were in test mode, but you can change it to production mode when you want to deploy live. If you're deploying live, remember to use your secret key rather than the public key. 

You can also learn how to integrate Paystack with [React](https://blog.openreplay.com/allow-paystack-payments-in-your-react-app/), [Flutter](https://blog.openreplay.com/integrating-the-paystack-payment-gateway-in-your-Flutter-app/), and [React Native](https://blog.openreplay.com/integrate-paystack-and-react-native/).

Here is the [Github repository](https://github.com/UgoEbuka09/PaystackWithAngular.git) for the completed application. Enjoy!