Applying a curl POST request with $http in angular

Question

I am reading from the Stripe documentation that I can charge an user with the following curl request:

Definition

POST https://api.stripe.com/v1/charges

Request

curl https://api.stripe.com/v1/charges \
   -u sk_test_PjPAEVD1LXfUuA6XylJPnQX4: \
   -d amount=400 \
   -d currency=eur \
   -d source=tok_16ffrPHW84OuTX9VFTYguruR \
   -d description="Charge for test@example.com"

In an Angular setting, I presume that I have to use $http. However, how do you pass on the parameters?

I tried the following

$http.post('https://api.stripe.com/v1/charges', result)
            .success(function(data, status, headers, config) {
              alert("success", data);
            })
            .error(function(data, status, headers, config) {
              alert("error", data);
            });

but received the error:

XMLHttpRequest cannot load https://api.stripe.com/v1/charges. No 'Access-Control-Allow-Origin' header is present on the requested resource.

Stripe has a javascript SDK ...use that to make initial token request and pass the response to your server — charlietfl, Oct 07 '15 at 12:57
I am sorry but nothing of that is clear to me. I have managed to retrieve the token request, but how do I handle the actual charge? That is why I tried to do it this way. See related question: http://stackoverflow.com/questions/32992249/how-to-make-the-actual-stripe-charge-in-angular/32992345#32992345 — WJA, Oct 07 '15 at 12:58
Once token is received from stripe you have to send that token to your server so you can create the charge there which you can do with your cURL code. Stripe also has SDK's for server side in most languages also — charlietfl, Oct 07 '15 at 13:02
Do you have a tutorial on that step? I am not sure what to do — WJA, Oct 07 '15 at 13:03
It's all outlined in their documentation https://stripe.com/docs/tutorials/forms — charlietfl, Oct 07 '15 at 13:06
The error you get may be because you need to "enable" CORS in your angular app. http://stackoverflow.com/a/31006662/108099 — glennanthonyb, Oct 07 '15 at 13:07
Yes I looked at those forms, but seriously I am not getting it. Where do you send the response to your server? What server? How do integrate it with Angular? — WJA, Oct 07 '15 at 13:09
@glennanthonyb Stripe is a payment gateway. There is no way that OP can set up CORS on their servers. Don't confuse the issue — charlietfl, Oct 07 '15 at 13:09
***STEP 3: Sending the form to your server*** Read the documentation thoroughly — charlietfl, Oct 07 '15 at 13:10
You need to have some code running *server-side* (perhaps using PHP, Ruby, Node.JS, ASP.NET, etc etc etc) that can send the token you generated in the browser/Javascript, and send it to `https://api.stripe.com/v1/charges`. You must not make that call from the front-end (browser) Javascript. — Shai, Oct 07 '15 at 13:15
The short answer is you must have your server make the charge request to stripe — charlietfl, Oct 07 '15 at 13:15
@charlietfl - I was attempting to address the AngularJS issue with calling API's across origin. I'm not familliar with Stripes SDK, but based on your original comment I assumed they had a client-side SDK, in which case the client would have no choice but to use CORS (or maybe JSONP), in which case the server must support it. It is specifically a Node SDK, not a JavaScript SDK - please be clear. — glennanthonyb, Oct 07 '15 at 13:23
@glennanthonyb they do have a client side sdk which is the only way to communicate with their servers from client. This has nothing to do with node — charlietfl, Oct 07 '15 at 13:27
@charlietfl so I could achieve that by transforming the curl request to a http request? on the url: https://api.stripe.com/v1/charges — WJA, Oct 07 '15 at 13:30

score 1 · Accepted Answer · answered Oct 07 '15 at 13:17

1

You need to have some code running server-side (perhaps using PHP, Ruby, Node.JS, ASP.NET, etc etc etc) that takes the token you generated in the browser/Javascript as input, and sends it to https://api.stripe.com/v1/charges to make the charge.

You must not make that call from the front-end (browser) Javascript/Angular. By doing so, you are putting your secret key out in public – your Stripe account would no longer be secure. The only key that should ever feature in your front-end code is the public key, which can only be used for making tokens.

Take a look here for instructions on generating the token and sending it to the server, and here for instructions on creating the charge server-side.

answered Oct 07 '15 at 13:17

Shai

7,159
3
19
22

Yeah I looked through it, but I still miss the link of having retrieved the token with checkout.js and then passing it to the server? Also, where do I setup the server. – WJA Oct 07 '15 at 13:21
@JohnAndrews the server you use for your site. Where are you serving your app from now? – charlietfl Oct 07 '15 at 13:23
Yeah I get that, but do you have any examples of how to setup that server to be able to accept such server calls? – WJA Oct 07 '15 at 13:25
@JohnAndrews you haven't answered charlietfl's question. Where are you serving your app from now? – Shai Oct 07 '15 at 13:26
Just in the cloud (c9.io) with a node.js server – WJA Oct 07 '15 at 13:27
1

@charlietfl, it looks like c9.io is a cloud-based IDE. So potentially isn't for hosting a server-side app. JohnAndrews, you need a server to run your code. – Shai Oct 07 '15 at 13:39
@JohnAndrews perfect, then between the c9.io docs and the Stripe docs (and maybe a beginner's guide to forms in Node.JS) you should have everything you need? – Shai Oct 07 '15 at 13:51
So the question becomes, how to execute a node.js script in angular? – WJA Oct 07 '15 at 21:51

Applying a curl POST request with $http in angular

1 Answers1