DEV Community

Ashinze Ekene
Ashinze Ekene

Posted on

Creating an Angular Shopping app and integrating payments using Rave

#angular #flutterwave #rave #payments

Outline

What is Rave

Rave provide safe, easy and secure payment solutions for businesses. Its free and easy to get started. We would cover how to accept payments from your Angular application using this technology.

We would be building a simple shopping application using Angular, where users can easily buy items on sale.

Setting Up and Folder Structure

We would first start by installing Node (if not present). It is available at the download page. Node comes with its package manager, NPM (Node Package Manager). We'd now run

npm install --g @angular/cli
Enter fullscreen mode Exit fullscreen mode

or if you have yarn

yarn add global @angular/cli
Enter fullscreen mode Exit fullscreen mode

This installs the angular cli used for creating new Angular applications, components, modules, pipes etc. We might need to run as system administrator for this to work. After installation, we can verify that everything went well by running

ng version
Enter fullscreen mode Exit fullscreen mode

We can now create our angular application. We would do this by running

ng new shopping-app
Enter fullscreen mode Exit fullscreen mode

This creates an angular application for us and installs the dependencies

After this, we run

cd shopping-app
ng serve --open
Enter fullscreen mode Exit fullscreen mode

This serves our app and opens it in the browser. Next we open our index.html and insert bootstrap from the CDN

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Shopping App</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
...
Enter fullscreen mode Exit fullscreen mode

Angular Part

To simplify our app let's create two components

  • A navbar component and
  • A products component

We would run

ng generate component navbar
ng generate component products
Enter fullscreen mode Exit fullscreen mode

This command creates the two components for us. Now open up navbar.component.html and insert this

<nav class="navbar navbar-expand-sm navbar-light bg-white py-3">
  <a class="navbar-brand pr-2">Shopping App</a>
  <button class="navbar-toggler navbar-toggler-left" type="button" (click)="navbarCollapsed = !navbarCollapsed" [attr.aria-expanded]="!navbarCollapsed"
    aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
</nav>
Enter fullscreen mode Exit fullscreen mode

To add a shadow we will add this to our styles in navbar.component.css

nav {
  box-shadow: 0px 2px 15px 0px rgba(0, 0, 0, 0.2);
}
Enter fullscreen mode Exit fullscreen mode

We will also open our navbar.component.ts and add this

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

@Component({
  selector: 'app-navbar',
  templateUrl: './navbar.component.html',
  styleUrls: ['./navbar.component.css']
})
export class NavbarComponent {
  title = 'app';
  > navbarCollapsed: boolean = true
}
Enter fullscreen mode Exit fullscreen mode

We have added a navbar using Bootstrap's template. In our navbar.component.html, we added a property; navbarCollapsed: boolean = true to toggle the navbar collapse

In our app.component.html. We would import the navbar like so

<app-navbar></app-navbar>
Enter fullscreen mode Exit fullscreen mode

When we visit the site on the browser, we should see the navbar displayed.
Next, we would add a hero content to our app.conponent.html like so

<app-navbar></app-navbar>
<div class="hero d-flex justify-content-center align-items-center bg-primary" style="height:80vh;">
  <div class="flex-child text-white text-center">
    <div class="display-3 p-3">The Shopping App</div>
    <div class="lead font-italic">Quality items at affordable prices...</div>
  </div>
</div>
Enter fullscreen mode Exit fullscreen mode

Next we would open up our products.component.ts file. We have an array of our available products and their prices in this file. We would import it into our products.component.ts like so:

import { Component, OnInit } from '@angular/core';
import { products } from '../data/data';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
  public allProducts = products

  constructor() { }

  ngOnInit() {
  }
}
Enter fullscreen mode Exit fullscreen mode

Now we have our product list available on the products component. We would open up our products.component.html and do this

<div class="products row mx-2 p-3 d-flex justify-content-center">
  <div *ngFor="let product of allProducts" class="card m-2" style="width: 18rem;">
    <img class="card-img-top" [src]="product.img_url" [alt]="product.name">
    <div class="card-body">
      <h3>{{ product.name }} <div *ngIf="product.is_new" class="badge badge-success"></div> </h3>
      <p class="card-text">{{ product.description }}</p>
      <button class="btn btn-primary">Buy for &#x20a6;{{ product.price }}</button>
    </div>
  </div>
</div>
Enter fullscreen mode Exit fullscreen mode

Next we import our products component into the app.component.html like so:

<app-navbar></app-navbar>
<div class="hero d-flex justify-content-center align-items-center bg-primary" style="height:80vh;">
  <div class="flex-child text-white text-center">
    <div class="display-3 p-3">The Shopping App</div>
    <div class="lead font-italic">Quality items at affordable prices...</div>
  </div>
</div>
<app-products></app-products>
Enter fullscreen mode Exit fullscreen mode

We should see the products neatly listed on the homepage.

Integrating Rave Payments

Next up is accepting payment in our app. we would use the angular-rave module. Run

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

Add the rave script into your index.html

<script src="//rave-api-v2.herokuapp.com/flwv3-pug/getpaidx/api/flwpbf-inline.js"></script>
Enter fullscreen mode Exit fullscreen mode

Then open up the app.module.ts and import the angular-rave module

import { AngularRaveModule } from 'angular-rave';

@NgModule({
  imports: [
   AngularRaveModule,
   ...
  ]
})
Enter fullscreen mode Exit fullscreen mode

Before we can integrate rave into our application, we first need to get a Public key. We would do that by heading to http://rave.frontendpwc.com and creating an account. On the dashboard we would copy out our Public Key which we would need in our app. Now we can use angular-rave in our app. We would add the angular-rave directive to our payment buttons and other import parameters like so:

<div class="products row mx-2 p-3 d-flex justify-content-center">
  <div *ngFor="let product of allProducts" class="card m-2" style="width: 18rem;">
    <img class="card-img-top" [src]="product.img_url" [alt]="product.name">
    <div class="card-body">
      <h3>{{ product.name }} <div *ngIf="product.is_new" class="badge badge-success"></div> </h3>
      <p class="card-text">{{ product.description }}</p>
      <button
        angular-rave
        [PBFPubKey] = "FLWPUBK-XXXXXXXXXXXX"
        [customer_email] = "'user@example.com'"
        [amount]="product.price"
        [custom_title]="product.name"
        [txref]="product.name + Date.now()"
        (callback)="paymentSuccess($event)"
        (close)="paymentFailure()"
        class="btn btn-primary">Buy for &#x20a6;{{ product.price }}</button>
    </div>
  </div>
</div>
Enter fullscreen mode Exit fullscreen mode

We have defined two functions to respond to payment success and failure. So we open up products.component.ts and write those functions


paymentSuccess(res) {
    console.log("Payment successfull")
    // On a real app, we must first perform validation on the server by sending a request to rave to verify the transaction before anything else
    // this.serverService.verifyTransaction(res)
}

paymentFailure(){
    // Handle payment failure
}
Enter fullscreen mode Exit fullscreen mode

Conclusion

Our app is ready now. Once a user clicks on the pay button, the rave popup shows up and viola, we can receive payments on our app

Top comments (2)

Collapse
 
nilapatham profile image
Nilapatham •

Can we pass values by script in ts file instead of button? means after clicked pay button can we call to function....payoption(){..passing values...} is it possible?

Collapse
 
chpraveen profile image
chpraveen •

Thank you! you help me a lot.

Read next

moh_moh701 profile image

Angular Fundamentals: Setting Up Your Angular Development Environment Using Command Prompt

mohamed Tayel -

krivanek06 profile image

Deep Dive Into Angular Pipes Implementation

Eduard Krivanek -

michelestieven profile image

Angular LAB: let's create a Visibility Directive

Michele Stieven -

michelestieven profile image

How I structure my Angular components with Signals

Michele Stieven -