Я начал работать с angular почти целую неделю go. И чтобы упростить задачу, я пытаюсь реализовать PayPal-checkout.
Checkout работает нормально, пока я передаю только общую сумму. Но я хотел бы передать несколько пунктов в PayPal.
Я пробовал вот так:
import {
Component,
OnInit,
ViewChild,
Input,
ElementRef,
Output,
EventEmitter
} from "@angular/core";
declare var paypal;
@Component({
selector: "app-payme",
templateUrl: "./payme.component.html",
styleUrls: ["./payme.component.scss"]
})
export class PaymeComponent implements OnInit {
@ViewChild("paypal", { static: true }) paypalElement: ElementRef;
@Input() total: number;
@Input() cart: [];
//payCart: [];
@Output() isPaidFor: EventEmitter<boolean> = new EventEmitter();
paidFor = false;
constructor() {}
cartInConsole() {
console.log("PayPalTotal", this.total);
}
declareItem() {
let paypalItem = [];
for (let i =0 ; i< this.cart.length; i++) {
let currency = "EUR";
let quantity = this.cart[i].selectedSize;
let name = this.cart[i].name;
let amount = this.cart[i].selectedPrice;
console.log("DeclareFunction rennt");
//let pushItem = {"quantity": quantity};
paypalItem.push({"unit_amount": {"currency_code": "EUR","value": currency, "amount": amount},"quantity": quantity,"name": name});
console.log("Declare", paypalItem)
return paypalItem
}
console.log("StackOverFow", paypalItem )
};
ngOnInit() {
console.log("PayPalCart", this.cart);
this.declareItem();
paypal
.Buttons({
createOrder: (data, actions) => {
return actions.order.create(
{
purchase_units: [{
amount: {
currency_code: 'EUR',
value: this.total,
}
},
items: this.paypalItem
}]
},
onApprove: async (data, actions) => {
const order = await actions.order.capture();
this.paidFor = true;
this.isPaidFor.emit(this.paidFor);
console.log("Order", order);
}
})
.render(this.paypalElement.nativeElement);
}
}
Но все, что я получаю в качестве ответа: items is not defined.
console.log моего paypalItem выглядит нормально - похоже, это массив объектов, как и должно быть.
Но как мне заставить его передать этот объект элементу или элементу?
Кстати: какой именно? Товар или предметы? Несколько часов поиска в Google и получение разных ответов заставят вас сомневаться ни в чем: -)
Заранее большое спасибо!
ОБНОВЛЕНИЕ
I попробовал объявить paypalItem, а затем установить в функции declareItem. К сожалению, с тем же результатом ...
Теперь код выглядит так:
import {
Component,
OnInit,
ViewChild,
Input,
ElementRef,
Output,
EventEmitter
} from "@angular/core";
declare var paypal;
@Component({
selector: "app-payme",
templateUrl: "./payme.component.html",
styleUrls: ["./payme.component.scss"]
})
export class PaymeComponent implements OnInit {
@ViewChild("paypal", { static: true }) paypalElement: ElementRef;
@Input() total: number;
@Input() cart: [];
paypalItem: [];
//payCart: [];
@Output() isPaidFor: EventEmitter<boolean> = new EventEmitter();
paidFor = false;
constructor() {}
cartInConsole() {
console.log("PayPalTotal", this.total);
}
declareItem() {
let paypalItem = [];
for (let i =0 ; i< this.cart.length; i++) {
let currency = "EUR";
let quantity = this.cart[i].selectedSize;
let name = this.cart[i].name;
let amount = this.cart[i].selectedPrice;
console.log("DeclareFunction rennt");
//let pushItem = {"quantity": quantity};
paypalItem.push({"unit_amount": {"currency_code": "EUR","value": currency, "amount": amount},"quantity": quantity,"name": name});
console.log("Declare", paypalItem)
this.paypalItem = paypalItem;
}
console.log("StackOverFow", paypalItem )
};
ngOnInit() {
console.log("PayPalCart", this.cart);
this.declareItem();
paypal
.Buttons({
createOrder: (data, actions) => {
return actions.order.create(
{
purchase_units: [{
amount: {
currency_code: 'EUR',
value: this.total,
}
},
items: this.paypalItem
}]
},
onApprove: async (data, actions) => {
const order = await actions.order.capture();
this.paidFor = true;
this.isPaidFor.emit(this.paidFor);
console.log("Order", order);
}
})
.render(this.paypalElement.nativeElement);
}
}
Есть другие идеи?
Еще одно обновление:
Полный код на коды и ящик