CODEWITHSUNDEEP
javascriptangularjshttpcurlstripe-payments
WJA
WJA

Reputation: 7004

Applying a curl POST request with $http in angular

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 [email protected]"

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.

Upvotes: 1

Views: 2061

Answers (1)

Shai
Shai

Reputation: 7315

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.

Upvotes: 1

Related Questions