Send http request in Ionic with Angular http

Question

I have an ionic app that I am trying to send my Stripe token to, for payment processing. When I send the request to the node server with curl it is receiving the request. However, when I try to send the request via Angular's http module, it isn't registering at all. All of this is currently being tested locally, so that might be part of the issue?

HTML

<button (click)="testPost()" ion-button full>TEST POST</button>

cart.ts

...
import {Http, Headers, RequestOptions} from '@angular/http';
import { Stripe } from '@ionic-native/stripe';

@Component({
 selector: 'page-cart',
 templateUrl: 'cart.html',
})
export class Cart {

  constructor(
    ...
    private http: Http,
    private stripe: Stripe
    ) {
      //
    });    
  }

  testPost() {
    var headers = new Headers();
    headers.append("Accept", 'application/json');
    headers.append('Content-Type', 'application/json' );
    let options = new RequestOptions({ headers: headers });

    let postParams = {
      body: {
        token: 'axqrexample123tokenbasdflkjo3',
        amount: 225
      }
    }

    this.http.post("http://11.1.1.7:3100/charge", postParams, options)
      .subscribe(data => {
        console.log(data['_body']);
       }, error => {
        console.log(error);// Error getting the data
      });  
  }

}

NODE SERVER

var express = require('express');
var app = express();
var bodyParser = require('body-parser');
var stripe = require("stripe")("sk_test_abcTAdefgn1oDexamplex");

app.use(bodyParser.json());

app.post('/charge', function (req, res) {

  var token = req.body.token;
  var amount = req.body.amount;
  stripe.charges.create({
    amount: amount,
    currency: "usd",
    source: token, // obtained with Stripe.js 
    description: "Charge for [email protected]"
  }, function(err, charge) {
    // asynchronously called
  });
  res.send('Hello World!')
});


app.listen(3100, function () {
  console.log('Example app listening on port 3100!')
})

Sachila Ranawaka · Accepted Answer · 2017-06-06 18:52:08Z

1

I think you need to map the request before subscribing to the request

this.http.post("http://11.1.1.7:3100/charge", postParams, options)
      .map(res => res.json())
      .subscribe(data => {
        console.log(data['_body']);
       }, error => {
        console.log(error);// Error getting the data
      });

also, import the rxjs

import 'rxjs/Rx';

answered Jun 6, 2017 at 18:52

Sachila Ranawaka

41.6k8 gold badges62 silver badges87 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

floatingLomas · Accepted Answer · 2017-06-06 20:50:38Z

0

I would try this in the stripe.charges.create callback and see what happens:

}, function(err, charge) {
  if (err) throw err;

  console.log('Charge ID:', charge.id); 

  res.send('Hello World!');
});

answered Jun 6, 2017 at 20:50

floatingLomas

8,7722 gold badges23 silver badges28 bronze badges

2 Comments

maudulus Over a year ago

the error message is coming from cart.ts, which won't make the request...it isn't reaching the Node Server. The Node Server itself functions correclty.

floatingLomas Over a year ago

What is the error message? Your post didn't include an error message.

Collectives™ on Stack Overflow

Send http request in Ionic with Angular http

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related