Angular 2 Shopping Cart – Angular 2 & Express Framework & NodeJS & MongoDB & PayPal Payment

Introduction

In this tutorial, we will be building a complete e-commerce application using Angular 2, Express, Node.js, MongoDB, and PayPal payment gateway. We will cover the basics of setting up the environment, building the Angular 2 application, creating a RESTful API using Node.js and Express, designing the database using MongoDB, and implementing PayPal payment integration.

Angular 2 Shopping Cart Tutorial

Step 1: Set up the Environment

• Install Node.js and MongoDB on your machine.
• Create a new project folder and navigate to it.
• Initialize a new Angular 2 project using the Angular CLI:

  ng new angular-shopping-cart

• Install the required dependencies:

  npm install express mongoose body-parser paypal-rest-sdk

  Step 2: Create the Angular 2 Application

• Create a new component for the shopping cart:

  ng generate component shopping-cart

• Open the shopping-cart.component.ts file and add the following code:

  
  import { Component } from '@angular/core';
  import { Product } from './product.model';

@Component({ selector: 'app-shopping-cart', templateUrl: './shopping-cart.component.html', styleUrls: ['./shopping-cart.component.css'] }) export class ShoppingCartComponent { products: Product[]; total: number;

constructor() { this.products = []; this.total = 0; }

addProduct(product: Product) { this.products.push(product); this.calculateTotal(); }

removeProduct(product: Product) { this.products.splice(this.products.indexOf(product), 1); this.calculateTotal(); }

calculateTotal() { this.total = this.products.reduce((acc, product) => acc + product.price, 0); } }

* Create a new component for the product:

ng generate component product

* Open the `product.component.ts` file and add the following code:

import { Component } from '@angular/core'; import { Product } from './product.model';

@Component({ selector: 'app-product', templateUrl: './product.component.html', styleUrls: ['./product.component.css'] }) export class ProductComponent { product: Product;

constructor() { this.product = new Product(); } }

* Create a new model for the product:

ng generate model product

* Open the `product.model.ts` file and add the following code:

export class Product { id: string; name: string; price: number;

constructor(id: string, name: string, price: number) { this.id = id; this.name = name; this.price = price; } }

### Step 3: Create the RESTful API using Node.js and Express

* Create a new file `server.js` and add the following code:

const express = require('express'); const mongoose = require('mongoose'); const bodyParser = require('body-parser'); const paypal = require('paypal-rest-sdk');

mongoose.connect('mongodb://localhost/angular-shopping-cart', { useNewUrlParser: true, useUnifiedTopology: true });

const app = express(); app.use(bodyParser.json());

const productSchema = new mongoose.Schema({ id: String, name: String, price: Number });

const Product = mongoose.model('Product', productSchema);

app.get('/api/products', async (req, res) => { const products = await Product.find().exec(); res.json(products); });

app.post('/api/products', async (req, res) => { const product = new Product(req.body); await product.save(); res.json(product); });

app.get('/api/products/:id', async (req, res) => { const product = await Product.findById(req.params.id).exec(); res.json(product); });

app.put('/api/products/:id', async (req, res) => { const product = await Product.findByIdAndUpdate(req.params.id, req.body, { new: true }); res.json(product); });

app.delete('/api/products/:id', async (req, res) => { await Product.findByIdAndRemove(req.params.id); res.json({ message: 'Product deleted successfully' }); });

paypal.configure({ 'mode': 'sandbox', // sandbox or live 'client_id': 'YOUR_CLIENT_ID', 'client_secret': 'YOUR_CLIENT_SECRET' });

app.post('/api/payments', async (req, res) => { const payment = await paypal.payment.create({ 'transactions': [{ 'amount': { 'currency': 'USD', 'total': req.body.total } }] }); res.json(payment); });

app.listen(3000, () => { console.log('Server started on port 3000'); });

* Replace `YOUR_CLIENT_ID` and `YOUR_CLIENT_SECRET` with your PayPal sandbox client ID and secret.

### Step 4: Design the Database using MongoDB

* Create a new MongoDB database named `angular-shopping-cart`.
* Create a new collection named `products` with the following schema:

{ "_id" : ObjectId, "id" : String, "name" : String, "price" : Number }

### Step 5: Implement PayPal Payment Integration

* Create a new component for the payment:

ng generate component payment

* Open the `payment.component.ts` file and add the following code:

import { Component } from '@angular/core'; import { Payment } from './payment.model';

@Component({ selector: 'app-payment', templateUrl: './payment.component.html', styleUrls: ['./payment.component.css'] }) export class PaymentComponent { payment: Payment;

constructor() { this.payment = new Payment(); }

pay() { // Send the payment request to the server fetch('/api/payments', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(this.payment) }) .then(response => response.json()) .then(payment => console.log(payment)) .catch(error => console.error(error)); } }

* Create a new model for the payment:

ng generate model payment

* Open the `payment.model.ts` file and add the following code:

export class Payment { id: string; total: number;

constructor(id: string, total: number) { this.id = id; this.total = total; } }

### Step 6: Connect the Angular 2 Application to the RESTful API

* Open the `app.module.ts` file and add the following code:

import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { HttpModule } from '@angular/http'; import { FormsModule } from '@angular/forms'; import { AppComponent } from './app.component'; import { ShoppingCartComponent } from './shopping-cart/shopping-cart.component'; import { ProductComponent } from './product/product.component'; import { PaymentComponent } from './payment/payment.component';

@NgModule({ declarations: [AppComponent, ShoppingCartComponent, ProductComponent, PaymentComponent], imports: [BrowserModule, HttpModule, FormsModule], providers: [], bootstrap: [AppComponent] }) export class AppModule {}

* Open the `app.component.ts` file and add the following code:

import { Component } from '@angular/core'; import { ShoppingCartComponent } from './shopping-cart/shopping-cart.component'; import { ProductComponent } from './product/product.component'; import { PaymentComponent } from './payment/payment.component';

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

constructor() {}

ngAfterViewInit() { // Get the products from the API fetch('/api/products') .then(response => response.json()) .then(products => this.products = products) .catch(error => console.error(error)); } }

* Open the `app.component.html` file and add the following code: