将变量传递给贝宝结帐中的项目
Posted
技术标签:
【中文标题】将变量传递给贝宝结帐中的项目【英文标题】：Pass variable to item in paypal-checkout 【发布时间】：2020-08-19 08:42:45 【问题描述】：我几乎在一周前就开始使用 Angular。为了让事情变得简单，我正在尝试实施贝宝结帐。
只要我只通过总金额，结帐就可以正常工作。但我想将几个项目传递给贝宝。
我是这样尝试的：
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);
但我得到的回应是：未定义项目。
我的 paypalItem 的 console.log 看起来不错 - 它似乎是一个对象数组，就像它应该的那样。
但是我如何让它将该对象传递给项目或项目？
顺便问一下：是哪一个？物品或物品？几个小时的谷歌搜索得到所有不同的答案，让你怀疑任何事情:-)
提前非常感谢！
更新
我尝试声明 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);
还有其他想法吗？
另一个更新：
完整代码在codesandbox
【问题讨论】：
配合您尝试访问 this.paypalItem。它从来没有在类级别的某个地方声明过，那么你想如何获得对它的引用？ 【参考方案1】：在类中没有看到声明为 paypalItem 的变量。声明一个名为paypalItem 的变量，然后在方法declareItem() 中将paypalItem 数组分配给您之前声明的类级别paypalItem。
declareItem()
...
this.paypalItem = paypalItem;
更新
这是您的模型绑定错误。当您添加项目时，Paypal 创建订单需要具有不同所需属性的模型。我在代码中添加了一个示例模型。您可以将您的值映射到您的模型并在那里替换它。
为了进行测试，请在沙箱中将此代码 sn-p 替换为您的代码。可以正常工作。
参考这个。 api documentation for create (items array)
paypal
.Buttons(
createOrder: (data, actions) =>
// This function sets up the details of the transaction, including the amount and line item details.
return actions.order.create(
intent: "CAPTURE",
purchase_units: [
amount:
currency_code: "EUR",
value: "0.02",
breakdown:
item_total:
currency_code: "EUR",
value: "0.02"
,
items: [
name: "item1",
unit_amount:
currency_code: "EUR",
value: "0.01"
,
quantity: "1"
,
name: "item2",
unit_amount:
currency_code: "EUR",
value: "0.01"
,
quantity: "1"
]
]
);
,
onApprove: function(data, actions)
// This function captures the funds from the transaction.
return actions.order.capture().then(function(details)
// This function shows a transaction success message to your buyer.
alert("Transaction completed by " + details.payer.name.given_name);
);
)
.render(this.paypalElement.nativeElement);
【讨论】：
我试过了，但结果还是一样...没有定义项目，尽管 console.log 显示了对象。 将this.paypalItem = paypalItem; 移出 for 循环。 console.log("StackOverFow", paypalItem ) 会记录数组吗？
否则在 declare() 中删除 declaringlet paypalItem = [] 和 this.paypalItem = paypalItem;。改用this.paypalItem.push()
非常感谢您的回答...我尝试了您的所有建议，但错误仍然存在。我不确定是导致错误的内置数组还是其他原因。如果我尝试 this.paypalItem.push()，paypal 按钮甚至不会显示在页面上。如果我将 this.paypalItem = paypalItem 移出循环，this.paypalItem 的 console.log 将返回 Object => Object0 =>Amount[Object] =>Quantity, Name。所有这些都具有正确的键和值......我现在完全迷失了......
如果你能把你的代码上传到stackblitz.com就能帮你:)以上是关于将变量传递给贝宝结帐中的项目的主要内容，如果未能解决你的问题，请参考以下文章
如何计算贝宝费用，2.9% +0.30 不适用于某些情况下结帐方法中的变量 FEEMT 不匹配
当用户选择贝宝付款方式时，在结帐表单中禁用 WooCommerce 中的帐单地址