How to make the actual Stripe charge in Angular (stripeToken already known)?

Question

I am using the Angular-Stripe-Checkout library to create a stripeToken like in this example . Some highlights are shown below.

Like in many angular-stripe libraries and examples, it only shows how to create the stripeToken.

However, it is unclear to me how to actually charge the user after having retrieved the stripeToken?

On Stripe they have instructions on how to charge the user with node.js. But it is unclear to me how to setup this and make it compatible with the Angular.

---

Highlights of the code

html

<button ng-click="product.doCheckout()">Buy</button>

js

// note: StripeCheckout is injected in the controller
product.doCheckout = function(token, args) {

        // You should configure a handler when the view is loaded,
        // just as you would if you were using checkout.js directly.
        //
        // Unlike a vanilla Stripe Checkout handler, this one can be
        // reused as many times as you like.
        var handler = StripeCheckout.configure({
          name: "Custom Example",
          token: function(token, args) {
              console.log(token.id)
            //$log.debug("Got stripe token: " + token.id);
          }
        });

        var options = {
          description: "Ten dollahs!",
          amount: 10000
        };

        // The default handler API is enhanced by having open()
        // return a promise. This promise can be used in lieu of or
        // in addition to the token callback (or you can just ignore
        // it if you like the default API).
        //
        // The rejection callback doesn't work in IE6-7.
        handler.open(options)
          .then(function(result) {
            alert("Got Stripe token: " + result[0].id);
            console.log(result);

            var stripe = window.Stripe;
            var stripeToken = result[0].id;

            //
            // what next?

          },function() {
            alert("Stripe Checkout closed without making a sale :(");
          }
        );
    };

Answer 1

The short answer is: don't do it.

The long answer: this stripe token that you've received is a transaction ID. It is public, in that it itself poses no risk. Think of it as a lookup key to the card you want to process charges on.

To process the transaction, however, you need a private/secret element: your secret key. In order to process it client-side, you'd need to leak this secret to the client, which means that this value would be visible to anybody.

I don't think it's smart to do that, especially as the secret key in question is your API key to stripe.

I also had a brief check, their API doesn't broadcast CORS headers, so no matter what, you're stuck using a backend of some sort to perform the request.

The backend request to create the charge is actually pretty straightforward. In practice, the HTTP call is similar to this:

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

• sk_test_BQokikJOvBiI2HlWgH4olfQ2 is the API key
• you're charging 400 USD with that
• the source is the stripe token you've received
• the description is the payment description

If you can replicate a call like this on any server-side environment, you're golden.

(This came straight from their API doc at https://stripe.com/docs/api#create_charge )