Mathias Samyn Mathias Samyn - 6 months ago 21
AngularJS Question

req.body.stripeToken is undefined

I'm trying to use $http to post a form to my nodejs server. When I do the post, I will go to my server and try to get the variable stripeToken using req.body.stripeToken, but this returns undefined.

When I try the post request using the method="post" and action="http://localhost:3000/api/posts" attributes on the form in my html file, it works like a charm. This is my reason to believe that my server side code is OK, but that there is something wrong with my $http request.

I've read several posts about this problem, but I have yet to see a working solution for me.

solutions from other posts:


  • define configurations before you define your routes in the server file.

  • add the body-parser middleware in the server file.

  • define headers for your http request.



I have tried these solutions, but none worked. Ofcourse I can use the method that works, but since I'm using AngularJS I would like to do it using $http.

$http post request:

$http({
method: 'POST',
url: 'http://localhost:3000/api/posts',
data: form.get(0),
headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
}).
then(function (response) {
console.log(response.data);
});


What I'm trying to send (form.get(0)):

<form id="payment-form" ng-controller="paymentController" class="ng-pristine ng-valid ng-scope">
<span class="payment-errors"></span>

<div class="form-row">
<label>
<span>Card Number</span>
<input type="text" size="20" data-stripe="number">
</label>
</div>

<div class="form-row">
<label>
<span>Expiration (MM/YY)</span>
<input type="text" size="2" data-stripe="exp_month">
</label>
<span> / </span>
<input type="text" size="2" data-stripe="exp_year">
</div>

<div class="form-row">
<label>
<span>CVC</span>
<input type="text" size="4" data-stripe="cvc">
</label>
</div>

<button type="submit" ng-click="generateToken()" disabled="">Buy Now</button>
<input type="hidden" name="stripeToken" value="tok_18G8jbEFG6WB0FQNYyIbXJWF"></form>


Server code:

var express = require("express");
var bodyparser = require("body-parser");
var stripe = require("stripe")("secret code");


var app = express();

app.use(bodyparser.json());
app.use(bodyparser.urlencoded({ extended: true }));

app.use(function (req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
next();
});

app.listen(3000);

app.post("/api/posts", function (req, res) {
console.log('in post--server');
var stripeToken = req.body.stripeToken;
console.log(stripeToken);
var charge = stripe.charges.create({
amount: 1000, // amount in cents
currency: "eur",
source: stripeToken,
description: "Example charge"
}, function (err, charge) {
if (err && err.type === 'StripeCardError') {
res.send("the card has been declined");
} else res.send("transaction completed");
});
});


console.log(req.body); gives the following answer:

{ '{"0":{},"1":{},"2":{},"3":{},"4":{"jQuery221039077944120836341":{"events":{"click":': { '{"type":"click","origType":"click","guid":3,"namespace":""}': { '{"type":"$destroy","origType":"$destroy","guid":1,"namespace":""},{"type":"$destroy","origType":"$destroy","guid":2,"namespace":""}': '' } } }


I really tried looking for an answer, but found none. So please forgive me if this is a duplicate question.

Answer

Below implementation should work, form.get(0) returns jQuery event, not form values

$http({
    method: 'POST',
    url: 'http://localhost:3000/api/posts',
    data: $('#payment-form').serialize(),
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
}).then(function (response) {
        console.log(response.data);
});
Comments