无法读取未定义的属性"charge".带有 Angular 和 Nodejs 问题的条带结账

Question

我正在将 Stripe 结账集成到我的 Web 应用程序中。我已经在角度前端实现了条纹结帐，并且还创建了一个后端，该后端应该接收通过条纹结帐传递的令牌。我收到一个未定义值"charge"的错误，这是我为交易创建的模型。我在这里缺少什么来正确传递令牌？

这是我得到的确切错误。 navabar.component.ts 是我的结帐方法所在的地方。

TypeError: Cannot read property 'charge' of undefined
at TokenCallback.token [as fn] (navbar.component.ts:104)
at TokenCallback.trigger (checkout.js:3)
at TokenCallback.trigger (checkout.js:3)

这是我通过表单调用的结帐方法。

openCheckout() {
let total = (this.donation * 100);
let handler = (<any>window).StripeCheckout.configure({
key: 'key_test',
locale: 'auto',
token: function (token: any) {
const transaction = new Charge(total, token.id);
console.log('From navbar nonObject ' + token.id + ' ' + total);
console.log(transaction + ' From navbar');
this.keyService.charge(transaction);
}
});
handler.open({
name: 'Delaware March for Jesus',
description: 'Donation',
amount: total
});
this.donation = 0;
this.donationEmail = '';
}

这是我的服务代码，用于实现收费并将令牌传递到后端。

charge(transaction) {
const body = JSON.stringify(transaction);
const headers = new Headers();
headers.append('Content-type', 'application/json');
return this.http.post(this.keysUrlDev + '/charge', body, { headers: headers })
.map((response: Response) => response.json())
.catch((error: Response) => Observable.throw(error.json()));
}

我为交易构建的一个简单的角度模型。

export class Charge {
constructor(public amount: number,
public token: string) {}
}

我在nodejs上的POST路由采用令牌并通过条带库charge.create方法传递它。

router.post('/charge', function(req, res, next) {
var amount = req.body.amount;
var token = req.body.token;
stripe.charges.create({
amount: amount,
currency: 'usd',
description: 'Delaware March For Jesus Donation',
source: token
}, function(err, charge) {
if (err) {
console.log(req.body.amount + ' From POST' + req.body.token);
return res.status(500).json({
title: 'An error occured',
error: err
});
}
res.status(201).json({
message: 'Charged successfully',
obj: charge
});
});
});

我已经用谷歌搜索并尝试调试，但无法让代码正常工作。谁能确定我做错了什么？

我还想指出，所有变量都被正确定义为"keysUrlDev"等。实时密钥和测试密钥都正确放置在前端的结帐方法中，并在后端正确放置了密钥的条带库。

错误是由于在错误的上下文中造成的。请参阅下面的答案。

Answer 1

问题出在这里：

let handler = (<any>window).StripeCheckout.configure({
key: 'key_test',
locale: 'auto',
token: function (token: any) {
const transaction = new Charge(total, token.id);
console.log('From navbar nonObject ' + token.id + ' ' + total);
console.log(transaction + ' From navbar');
this.keyService.charge(transaction); // The issue is here!
}
});

您遇到的问题是您尝试在错误的上下文中访问"this"关键字。 您在此场景中访问的"this"是 token() 函数的"this"上下文，而不是组件本身的上下文。 改用箭头函数 ( () => {} ) 将适当的上下文绑定到函数。