About the Download

Implementation Details:

n

    n

  • Allow User to Add Products into the cart
  • n

  • Allow User to Click on Checkout Button and redirect user to Checkout pagen
      n

    • Create Component ‘Checkout’ within ‘CartModule’
    • n

    • Add the route in cartmodule as ‘checkout’
    • n

    • Design the Checkout Component
    • n

    n

  • n

  • Integrate Paypal Payment for Testing
  • n

n

Changes Made:

n

    n

  • ‘Checkout’component created
  • n

  • Route added in cart module for checkout page file: cart.module.ts
  • n

  • nconst cartRoutes: Routes = [n {n path: ”,n children: [n {n path: ”,n component: CartComponentn },n {n path: ‘checkout’,n component: CheckoutComponentn }n ]n }n];n

     

    n

  • n

  • added paypal script, file index.html
  • n

  • nnn

     

    n

  • n

  • Show checkout button and allow user to make the payment, file: checkout.component.ts
  • n

  • nimport { Component, OnInit, ElementRef, ViewChild, AfterViewChecked, AfterViewInit, AfterContentChecked, AfterContentInit } from ‘@angular/core’;nimport { BreadCumb } from ‘src/app/shared/models/bredcumb.model’;nimport { Observable } from ‘rxjs’;nimport { ProductService } from ‘src/app/core/services/product.service’;nimport { Product } from ‘src/app/shared/models/product.model’;nimport * as _ from ‘lodash’;nimport { Store } from ‘@ngrx/store’;nimport { AppState } from ‘src/app/core/store/state/app.state’;nimport { selectCartProductList } from ‘src/app/core/store/selectors/cart.selectors’;nimport { withLatestFrom, map, subscribeOn } from ‘rxjs/operators’;nimport { selectAllProductsList } from ‘src/app/core/store/selectors/product.selectors’;ndeclare var paypal;nn@Component({n selector: ‘app-checkout’,n templateUrl: ‘./checkout.component.html’,n styleUrls: [‘./checkout.component.scss’]n})nexport class CheckoutComponent implements OnInit, AfterViewInit {nn breadcumb: BreadCumb;n cartProductsList: Observable;n @ViewChild(‘paypal’, { static: false }) paypalElement: ElementRef;nn products: any;nn paidFor = false;nn constructor(n private store: Store,n public productService: ProductServicen ) {n this.cartProductsList = this.productService.getProductsInCart();nnn this.productService.getProductsInCart().subscribe((pList: Product[]) => {n this.products = pList.map((prod) => {n const p: any = {};n p.description = prod.name;n p.amount = {n currency_code: ‘INR’,n value: prod.totalPricen };nn return p;n });n });nn this.breadcumb = {n title: ‘Please Make the Payment to Purchase These Amazing Products’,n path: [n {n name: ‘Dashboard’n },n {n name: ‘Cart’n },n {n name: ‘Checkout’n }n ]n };n }nn ngAfterViewInit() {n if (this.paypalElement && this.paypalElement.nativeElement &&this.products.length) {n paypal.Buttons({n createOrder: (data, actions) => {n return actions.order.create({n purchase_units: this.productsn });n },n onApprove: async (data, actions) => {n const order = await actions.order.capture();n this.paidFor = true;n console.log(order);n },n onError: err => {n console.log(err);n }n }).render(this.paypalElement.nativeElement);n }n }nn ngOnInit() {n }nn redirectToProductDetails(product: Product): void {n this.productService.redirectToProductDetails(product);n }nn}nn

     

    n

  • n

n

Thanks.

Types
Date Created
Licence
Support Time(in Minutes)
Support Details