Creating an Angular Shopping app and integrating payments using Rave
Tags: angular, flutterwave, rave, payments
Published: 2018-03-17 08:15:39

---
title: Creating an Angular Shopping app and integrating payments using Rave
published: true
description: 
tags: angular,flutterwave,rave,payments
---

## Outline

- <a href="#rave">What is Rave</a>
- <a href="#set-up">Setting Up and Folder structure</a>
- <a href="#ng-part">Angular part</a>
- <a href="#int-rave">Integrating rave payments</a>
- <a href="#bye">Conclusion</a>

### <a name="rave">What is Rave

[Rave](https://ravepay.co/) 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.

### <a name="set-up">Setting Up and Folder Structure

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

```sh
npm install --g @angular/cli
```

or if you have yarn

```sh
yarn add global @angular/cli
```

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

```sh
ng version
```

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

```sh
ng new shopping-app
```

This creates an angular application for us and installs the dependencies

After this, we run

```sh
cd shopping-app
ng serve --open
```

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

```html
<!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>
...
```

### <a name="ng-part">Angular Part

To simplify our app let's create two components

- A navbar component and
- A products component

We would run

```sh
ng generate component navbar
ng generate component products
```

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

```html
<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>
```

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

```css
nav {
  box-shadow: 0px 2px 15px 0px rgba(0, 0, 0, 0.2);
}
```

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

```ts
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
}
```

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

```html
<app-navbar></app-navbar>
```

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

```html
<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>
```

Next we would open up our `products.component.ts` file. We have an array of our available products and their prices in [this file](https://gist.github.com/ashinzekene/0e05b7ed44dc8f3c3f978b48a7101758). We would import it into our `products.component.ts` like so:

```ts
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() {
  }
}
```

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

```html
<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>
```

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

```html
<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>
```

We should see the products neatly listed on the homepage.

### <a name="int-rave">Integrating Rave Payments

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

```sh
npm install --save angular-rave
```

Add the `rave script` into your `index.html`

```html
<script src="//rave-api-v2.herokuapp.com/flwv3-pug/getpaidx/api/flwpbf-inline.js"></script>
```

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

```ts
import { AngularRaveModule } from 'angular-rave';

@NgModule({
  imports: [
   AngularRaveModule,
   ...
  ]
})
```

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:

```html
<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>
``` 
We have defined two functions to respond to payment success and failure. So we open up `products.component.ts` and write those functions

```ts

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
}

```
### <a name="bye">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