我需要有PayPal开发经验的人的帮助。当我通过Sandbox付款时，我只收到总价的收据，而不是每件商品的价格。我需要得到通知，我的客户将购买什么商品。
cart.component.ts
import { Component, OnInit } from '@angular/core';
import { CardsModule } from 'angular-bootstrap-md';
//import { Server } from 'http';
import { CartService } from 'src/app/service/service.service';
import { CheckoutService } from 'src/app/service/checkout.service';
import { HttpClient } from '@angular/common/http';
import { switchMap } from 'rxjs/operators';
import { IPayPalConfig, ICreateOrderRequest } from 'ngx-paypal';
import {render} from 'creditcardpayments/creditCardPayments';
import emailjs, { EmailJSResponseStatus, init } from '@emailjs/browser';
import { isNgTemplate } from '@angular/compiler';
init("user ...");
@Component({
selector: 'app-cart',
templateUrl: './cart.component.html',
styleUrls: ['./cart.component.scss']
})
export class CartComponent implements OnInit {
public products : any = [];
public grandTotal !: number;
paymentHandler: any = null;
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;
console.log("total price (value) = " + myValue);
let text = JSON.stringify(this.cartService.cartItemList);
var jsonObj = JSON.parse(text);
for(var i = 0; i < jsonObj.length; i++)
{
// tracks the item name, quantity, price in console.log
const description = "quantity: " + jsonObj[i]['quantity'] + "ntitle: " + jsonObj[i]['title'] + "nn";
console.log("item name = " + description);
}
// I would like to find a way to put the item name, quanity, and price in render.
render(
{
id: "#myPaypalButtons",
currency: "USD",
value: myValue,
onApprove: (details) => {
alert("Payment Successful!");
this.emptycart();
}
}
);
}
cart.com.ponent.html
<!DOCTYPE html>
<html>
<head>
<script src="https://polyfill.io/v3/polyfill.min.js?version=3.52.1&features=fetch"></script>
</head>
<body>
<ng-container *ngIf="products.length !=0">
<div class="container">
<div class="card-table">
<div class="cart-product">
<table class="table table-responsive">
<thead>
<tr>
<th>Sr.No</th>
<th>Product Name</th>
<th>Product Image</th>
<th>Description</th>
<th>Price</th>
<th>Quantity</th>
<th>Total</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of products; let i = index">
<td>{{i+1}}</td>
<td>{{item.title}}</td>
<td><img style="width: 40px;" src="{{item.image}}" alt=""></td>
<td style="width: 25%;">{{item.description}}</td>
<th style="width: 12%;">{{item.price}}</th>
<td style="width: 12%;">{{item.quantity}}</td>
<td style="width: 12%;">{{item.price*item.quantity}}</td>
<td>
<button (click)="removeItem(item)" class="btn btn-danger"><i class="fas fa-trash-alt"></i></button>
</td>
</tr>
</tbody>
<p></p>
<br>
<tbody>
<tr>
<td colspan="4"></td>
<td class="a"><button (click)="emptycart()" class="btn btn-danger">Empty Cart</button></td>
<td class="b"><button routerLink="/products" class="btn btn-primary">Shop More</button></td>
<!--<td><button (click)="checkout()">Checkout</button></td>-->
<td class="c"><button (click)="checkout()" class="btn btn-success"> Submit </button></td>
<div id="error-message"></div>
<td class="d"><strong>Total Price = ${{grandTotal}}</strong></td>
</tr>
</tbody>
</table>
<p></p>
<br>
<table>
<div id="myPaypalButtons" class="a"></div>
</table>
</div>
</div>
</div>
<!-- PayPal pop-up, when the "Submit" button gets clicked -->
</ng-container>
<ng-container *ngIf="products.length ==0">
<div class="container">
<div class="card">
<h1 class="card-title">My Cart</h1>
</div>
<div class="center">
<img src="./assets/empty_cart-1200x900.jpg" alt="" style="max-width: 50%;">
<h3>Add item to it now</h3>
<button routerLink="/products" class="btn btn-primary">Shop Now</button>
</div>
</div>
</ng-container>
</body>
</html>
PayPal开发人员请求API(应显示行项目、数量、项目价格(
{
"additional_properties": "xxxxxx",
"body": {
"application_context": "xxxxxx",
"intent": "CAPTURE",
"purchase_units": [
{
"amount": {
"currency_code": "USD",
"value": 50
}
}
]
},
"header": {
...
PayPal开发人员响应API(应显示行项目、数量、项目价格(
...
"body": {
"create_time": "2022-03-30T14:02:17Z",
"id": "5NF87760A7316650M",
"intent": "CAPTURE",
"links": [
{
"href": "https://api.sandbox.paypal.com/v2/checkout/orders/5NF87760A7316650M",
"method": "GET",
"rel": "self"
},
{
"href": "https://www.sandbox.paypal.com/checkoutnow?token=5NF87760A7316650M",
"method": "GET",
"rel": "approve"
},
{
"href": "https://api.sandbox.paypal.com/v2/checkout/orders/5NF87760A7316650M",
"method": "PATCH",
"rel": "update"
},
{
"href": "https://api.sandbox.paypal.com/v2/checkout/orders/5NF87760A7316650M/capture",
"method": "POST",
"rel": "capture"
}
],
"purchase_units": [
{
"amount": {
"currency_code": "USD",
"value": "50.00"
},
"payee": {
"email_address": "*****",
"merchant_id": "D89E2QT2Q4MYU"
},
"reference_id": "default"
}
],
"status": "CREATED"
},
...
您没有显示在实现中PayPal订单的创建位置。这就是您需要在purchase_units中添加项目信息的地方。
您可以在Checkout集成指南中找到一个示例，"添加和修改代码"中的项目符号#6
{
"purchase_units": [{
"amount": {
"currency_code": "USD",
"value": "100",
"breakdown": {
"item_total": { /* Required when including the `items` array */
"currency_code": "USD",
"value": "100"
}
}
},
"items": [
{
"name": "First Product Name", /* Shows within upper-right dropdown during payment approval */
"description": "Optional descriptive text..", /* Item details will also be in the completed paypal.com transaction view */
"unit_amount": {
"currency_code": "USD",
"value": "50"
},
"quantity": "2"
},
]
}]
}