Series: Building a Shopping Cart

Shopping Cart Part 3-Checkout and Payment with Stripe

Published on Sep 06, 2016

If you're selling something, you need a way to get paid... and Stripe Checkout provides a (relatively) easy way of accomplishing this. And, as a bonus, the credit card number never touches your server- making security a lot easier.

In this video we walk through using the ember-cli-stripe addon, all the way to where we hand off the credit card token to the server.


Links

Code

$ ember install ember-cli-stripe
$ ember install ember-ajax
//config/environment.js
module.exports = function(environment) {
  if (environment === 'development') {
    ENV.stripe = {
      key: "pk_test_dtuooENyrtlMoeqdMFNpJ7ks"
    };
  }
}
//templates/checkout.hbs
//...
{{stripe-checkout
  name="Cute Monsters Inc."
  description="Buy cute monster plushies."
  amount=cart.centsTotal
  action="processStripeToken"
}}
//controllers/checkout.js
import Ember from 'ember';
import ENV from 'ember-2-0-frontend/config/environment';

export default Ember.Controller.extend({
    //...
    ajax: Ember.inject.service(),
    processStripeToken({card, email, id}){
      return this.get('ajax').request(`${ENV.host}/purchase`, {
        method: 'POST',
        data: {card, email, id}
      }).then(()=>{

      }).catch(()=>{

      })
    }
})
//services/cart.js
  centsTotal: Ember.computed('total', function(){
    return this.get('total') * 100;
  })

Transcript

Our cart setup is pretty awesome now, but it’s missing one thing, the ability to actually check out and buy everything in the cart. So to do that, we’re going to use the ember-cli-stripe addon. Now to use this, first you need to have a stripe account. You can either create a new stripe account, or if you already have an account, then create a new account. Then in that account, we’ll go to our menu and to the account settings, and then we’ll get the API keys. And here we’ll be using the test keys. The live keys are for your actual production version.

Now let’s install the addon. After installing it, we’ll set up the addon by going into the environment.js file, and then under development, we’ll give the stripe key for development. And here we will take away their version and put in our version. Copying and pasting is great. Make sure you don’t get anything extraneous.

Next we’ll go ahead and grab this basic usage of the component. So we’ll go into our checkout page and paste that in and see what it gives us. So we can see that it gives us a button that says ‘Pay with card’, and then it gives us this checkout form. There are already some pretty cool things about this. So it’ll detect what type of cart it is, it’ll recognize when things aren’t working out right. So if you don’t have an email, go ahead and put an email in there. If the card doesn’t work right or if there isn’t a CVC code... So here it’s only complaining about the card now, now that everything else is correct.

So this stuff is already there for you, and that’s pretty cool. Let’s do some basic customization. So first we’ll get rid of the image because it’s currently broken. You can add in your own image if you want, but we’re going to get rid of it. Then we’ll change the name. The name we’ll call Cute Monsters Inc.. That’s what’s going to show at the top of the checkout form and the description will show up right below it, we'll say Buy cute monster plushies.

Then the amount is how much you’re paying. So initially you’ll think, oh, we’ll just do cart.total, but let’s see what that gives us. So the cart total is $16, right? Well, this thinks it’s 16 cents. By the way, check out stuff we’ve changed... Anyway 16 cents, that is not what we want to charge. Our business would go broke very quickly. So we’re going to need to create something called centsTotal. And here that’s pretty easy to do. It’s just taking the total and then multiplying it by 100, easy simple computed property. And then when we go to the checkout, it’ll say $16 correctly.

Now the only thing left to do is call processStripeToken. So that’s an action that we’ll put in checkout. And what we’ll do in this action is we’ll call out to the server. We’re going to do that with the ajax service. The ajax service will go ahead and inject it, but to be able to inject it we have to install the ember ajax addon. Alright, so we’ll call request from the ajax service, and the first argument is going to be a string which is the url. And we’ll be sending it to the purchase route, but to make sure we send it to the right place, we have to specify the host. So we’ll get that from the environment, and we’ll import the environment from /config/environment.

The next argument will be an array, and this array it can take many things, but the two we’ll be dealing with are method and data. So the method here will be POST. Other available ones are get, that’s the default, put, delete, that sort of thing. And then the data will also be an array. Now this data we’ll be getting from the first argument to processStripeToken which will be a hash, and then because of the hash destructuring in ES6, we can just specify what we want from the hash. And here we’ll want the card, the email, and the id. Then the data that we want to send up is also the card, the email, and the id. And the reason we can type it like this instead of the more traditional version of this is because of another ES6 feature, this one called enhanced object literals. Then your server does its thing and you can call .then and .catche, and do whatever you want to do there. This is mostly left as an exercise up to the reader, but I would recommend doing an isProcessingStripe variable that you can turn to true or false. That’ll make it show a spinner or something like that.

And of course you can’t forget to do stuff on the server. That’s very important that you do stuff on the server. There are good libraries available for Ruby, Python, PHP, Java, Node, and Go, built by the Stripe team, and I’m sure that there are ways to do it in other languages as well. They’re just not quite as convenient.

I do want to make another point before we go. That’s that when you’re sending stuff off to the server, what you’re sending is not the actual card. This is some information we’ve gotten from the card, but it’s just returning a token. The credit card number is never ever sent to your server. That gets you out of a lot of security and regulatory problems.

And that is how we add a payment button to our checkout page. I hope that’s helpful to you, and that you’ll be able to start making money on your site soon. In the next episode, we’ll be going over how to add multiple instances of one type of item to our cart. I’ll see you then.

Building a Shopping Cart

Subscribe to our mailing list