I am facing an issue with my e-commerce website where the receipt only displays the total payment of the items purchased. I have searched for an SDK that supports Angular or TypeScript PayPal integration, but could only find one for JavaScript which did not work for my Angular code. How can I add a shipping cost, for example $5.00, to the Angular PayPal integration?
import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
import { CartService } from 'src/app/service/service.service';
import { HttpClient } from '@angular/common/http';
import { IPayPalConfig, ICreateOrderRequest, IOnShippingChangeData } from 'ngx-paypal';
import emailjs, { EmailJSResponseStatus, init } from '@emailjs/browser';
init("user_66nwzX6xZ5j1WCaDKBM51");
@Component({
selector: 'app-cart',
templateUrl: './cart.component.html',
styleUrls: ['./cart.component.scss']
})
export class CartComponent implements OnInit {
public payPalConfig ? : IPayPalConfig;
public products : any = [];
public grandTotal !: number;
paymentHandler: any = null;
showSuccess: boolean | undefined;
constructor(private cartService : CartService, private http: HttpClient) { }
ngOnInit(): void {
this.cartService.getProducts()
.subscribe(res=>{
this.products = res;
this.grandTotal = this.cartService.getTotalPrice();
})
}
totalItemPayment(quantity: number, price: number){
return quantity * price;
}
removeItem(item: any){
this.cartService.removeCartItem(item);
}
emptycart(){
this.cartService.removeAllCart();
}
checkout(){
const myValue: any = this.grandTotal.toFixed(2);
console.log("total price (value) = " + myValue);
let text = JSON.stringify(this.cartService.cartItemList);
const jsonObj = JSON.parse(text);
for(var i = 0; i < jsonObj.length; i++)
{
const description = "quantity: " + jsonObj[i]['quantity'] + "\ntitle: " + jsonObj[i]['title'] + "\n\n";
}
const title: string[] = [];
for(var i = 0; i < jsonObj.length; i++){
title.push(jsonObj[i]['quantity'] + " " + jsonObj[i]['title']);
}
var moo = JSON.stringify(title);
console.log(moo);
this.payPalConfig = {
currency: 'USD',
clientId: "[type in your client-id]",
//@ts-ignore
createOrderOnClient: (data) => <ICreateOrderRequest>{
intent: 'CAPTURE',
purchase_units: [{
amount: {
currency_code: 'USD',
value: myValue,
breakdown: {
item_total: {
currency_code: 'USD',
value: myValue
},
shipping: {
currency_code: 'USD',
value: '5.00'
}
},
},
description: moo,
}]
},
advanced: {
commit: 'true'
},
style: {
label: 'paypal',
layout: 'vertical'
},
onApprove: (data, actions) => {
console.log('onApprove - transaction was approved, but not authorized', data, actions);
actions.order.get().then((details: any) => {
console.log('onApprove - you can get full order details inside onApprove: ', details);
});
},
onClientAuthorization: (data) => {
console.log('onClientAuthorization - you should probably inform your server about completed transaction at this point', data);
this.showSuccess = true;
// empties cart after user purchases
this.emptycart();
},
onCancel: (data, actions) => {
console.log('OnCancel', data, actions);
},
onError: err => {
console.log('OnError', err);
},
onClick: (data, actions) => {
console.log('onClick', data, actions);
},
onShippingChange: (data, actions) => {
return actions.resolve() // or .reject()
},
};
}
}