Thursday, 18 May 2017

Cannot read property 'charge' of undefined ... Stripe checkout with Angular and Nodejs issues

I'm integrating the Stripe checkout in my web app. I've implemented Stripe checkout on the angular front end and have also created a backend that is supposed to receive the token passed by stripe checkout. I'm getting an error of an undefined value 'charge' which is a model I created for transactions. What am I missing here to properly pass the token?

Here is the exact error I am getting. navabar.component.ts is where my checkout method is.

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)

Here is my checkout method invoked by a form.

 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 = '';
  }

Here is my Service code that implements the charge and passes the token to the backend.

 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()));
  }

A simple angular model I constructed for transactions.

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

And my POST route on nodejs that takes the token and passes it through the stripe library charge.create method.

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
    });
  });
});

I've googled around and have tried to debug but cannot get the code to work properly. Can anyone identify what I am doing wrong?

I'd also like to note that all variables are properly defined as 'keysUrlDev' and etc. And both live and test keys are correctly placed in the checkout method on frontend and with the stripe library for the secret key on backend.



via Jonathan Corrin

No comments:

Post a Comment