loading...

Creating an Angular Shopping app and integrating payments using Rave

ashinzekene profile image Ashinze Ekene ・5 min read

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

or if you have yarn

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

ng version

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

ng new shopping-app

This creates an angular application for us and installs the dependencies

After this, we run

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

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

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

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>

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);
}

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
}

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>

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>

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

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>

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>

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

Add the rave script into your index.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

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:

<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


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
}

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

Posted on by:

ashinzekene profile

Ashinze Ekene

@ashinzekene

I'm a software developer passionate about building world class software solutions

Discussion

pic
Editor guide
 

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?

 

Thank you! you help me a lot.