Python for Entrepreneurs Transcripts
Chapter: Making money (credit cards and businesses)
Lecture: Demo: Adding checkout javascript
Login or
purchase this course
to watch this video and the rest of the course contents.
0:01
Let's add that Stripe checkout purchase dialog to our albums. If we look over here and we go to the albums page, I've already added this "buy" button.
0:12
Now if I click it you can see it doesn't do anything, this doesn't come from Stripe. I just want to have a place for it.
0:18
Now of course, this really should be a link that takes us to a details about the album
0:21
with reviews and all sorts of reviews, and from there we can buy it, but for now we are just going to have this button where we buy it directly,
0:30
because displaying albums isn't really the point of this web app. OK, so let's replace this placeholder Bootstrap button
0:38
with the Stripe checkout button that will let us do this. So in order to do that, we are going to need to take
0:49
the Stripe checkout code which is that, and let's go find that template file. So here this is out little button, and what we are going to do, notice,
1:02
that we're actually getting the price here from the album, remember we're looping up here, here is our tal:repeat,
1:11
we are looping over all the albums that were passed to this view, we'll name them "a", so down here if I want to get the price I can say $${a.price}
1:20
and I put another dollar sign there because I want the dollar sign to appear in front of the number to say
1:26
"buy it for a $9.99, rather than just buy 9.99 with no currency. OK, so this thing is out, but I am going to leave it there for just one second
1:37
and paste what we've got from there, I am going to do that because I want the style information here, so that it will like float and so on.
1:46
OK, let's just do that straight away, now here is a test code, we are going to replace that with our test code in just a second,
1:54
but let's just see what happens. Great, so now this is switched to pay with card,
2:00
one thing that you'll find is you don't have a lot of control over how this button looks,
2:04
that's unfortunate but as far as I can tell, you can't do much for that. Here when we click it you'll see it automatically pops up,
2:10
we can enter our email, credit card, the expiration date, CVC, this "remember me" I don't really take this, I am going to take that away,
2:19
but it could remember this information for you if you want, it's so simple, people don't buy stuff that frequently I am willing to let them type it in
2:28
once or twice, twice or three times, I guess. If they are going to come back and make a purchase.
2:33
Notice also two things, this is in test mode and this is powered by Stripe.
2:37
So this is where you might have noticed if you either recognize the style log, or you just saw this powered by Stripe.
2:44
OK, great, so how do we take our information and put it in here? First of all, let's look right at the top.
2:53
This /your-service-side-code, it sounds problematic, let's say what we have up here for our controller,
3:01
we have a "store" and then we had a "complete" is what I believe we had, let's verify that that is what it is.
3:09
StoreController, so /store and /complete. OK, great, so that's what we are going to have, so here we are going to post
3:17
to the correct thing to complete this, this is definitely good. Now it's really important that the site that serves this also is under HTTPS,
3:26
OK, if your site does not have an SSL certificate, and you put this on your page,
3:33
theoretically people could intercept the page and do various bad things to it so you can read the Stripe checkout docs about this
3:43
but basically you need your site to run over SSL so like if you look back over here, this is running over SSL.
3:50
So let's first of all start getting this code to be our code that came from our configuration file,
3:56
remember, this is just something I grabbed from Stripe. So over here in the albums controller, that's the controller rendering this page,
4:03
what I need to do is pass the extra information, so let's say we have the stripe_key,
4:09
this can be the public key, I'll just make it super obvious about that. And then, here I imported the credit card processor
4:16
and it has a Stripe public key, let me show you. As a Stripe public key as public but not the private key, right,
4:24
hiding that from everyone else as best I can. OK, so let's make this a little more legible, there, so we're going to put that where this key goes.
4:40
So you guys already know how to do that, dollar curly thing, and then we just put the value of the key, the amount here,
4:48
this is not going to be the amount, the amount is actually going to be the price of the album.
4:52
Now notice, this is in cents, US dollars, well, you've got to say the currency, so data-currency="USD" and then here, we want this to be in cents,
5:07
so we say a.price that's in dollars, so then we need times 100, and we probably don't want a float for cents, so we'll do something like that,
5:18
convert it to cents and then drop off any decimal point that might be there. Next, this is going to be the name of the company this comes from,
5:29
so like Talk Python this is that section up there, so this would be Blue / Yellow Rockets, this is not necessarily how it appears on your credit card,
5:43
you can kind of figure that on the user's credit card, you can configure that in your Stripe account.
5:48
This is going to be "Blue Yellow" and then we'll put something, what do we want, it's going to be the name of the album, and then album.
6:01
Here this is the little icon that shows up, in our example here it's this little store,
6:06
but over here notice it's this logo right there and that just comes out of like
6:11
/static/image/whatever, you can make that up long as you have a square image, you can stick it there and it will take on that shape, it's auto,
6:21
OK that's fine and do we want the zip code, that's true. I think we can also do this.
6:29
OK, let's go back and refresh, like it's got to rerun this code, refresh it, OK, pay with card, "remember me" - it's wrong,
6:45
I'll figure out how to do that in a second, here we go, what we are going to buy, Blue / Yellow Rockets,
6:50
maybe I should just drop this, because you only have a little bit of room to work with here,
6:54
so we have instead of this "Blue Yellow: album name" we'll just do it like that, here,
7:00
we can buy "Digital Age Boys and Girls" and we're going to pay 9.99 for that. Now that's the price of this one, this one is 12.99 that one 19.22,
7:10
whatever we made up, right? Here is the Year Of The Snake, so it would be nice if this little pay with card thing sort of set the price,
7:18
so let's go down here where is this pay with card. OK, I had to lookup what this was, it's data-label and oddly,
7:26
it's not in like the Stripe example and then "remember me" was allowed, actually you can come over here to checkout stripe.com/docs/checkout
7:37
and go to the reference and there is all sorts of stuff you can put in here, so like data image, data name, data look how and currency,
7:47
like they say the default is USD here is the data label, you can even pay with Bitcoin
7:54
if you want to actually receive Bitcoins, they won't auto convert Bitcoins for you,
8:00
things like that, so let's try again make sure it's saved, try again, now it says buy album, 9.99, buy album 19.22 and when I click it
8:08
the "remember me" thing is gone, that's cool, "Blue / Yellow Rockets: Year Of The Snake".
8:15
Maybe the last thing to do is we could like work with this here to get that picture changed
8:19
and then I'll call integrated, so here is the link to that Python image, why don't we just use that for now.
8:27
So we can go to image, we'll just say like so. So now let's try again, ta da, there is a little image, it's not perfect, right,
8:35
I mean this is not really our logo this is just the Python logo but whatever, right, our Blue / Yellow Rockets guys would pay some small amount
8:43
to have like some graphic artists do something for them, we'll talk later about actually how you might get that done really cheaply,
8:50
but we come up with some kind of logo, stick it there, we got our Blue / Yellow Rockets, that's the company,
8:55
this is the item you are buying, The Digital Age Boys And Girls album, putting your email address, and we'll actually be able to do this.
9:07
In test mode, this is really important, you can use 4242 sixteen times, as a test valid code,
9:19
in fact, there is actually a bunch of test card numbers here, like you can test Visa, you can test debit, Master Card, international ones,
9:29
you can test for specifically like invalid funds, expired cards, all sorts of stuff, credit card, address failures, so you can use this to test,
9:41
the one we're using is this top one, just a basic Visa. Now, as long as I put in something valid here,
9:48
and I put in something here and there we go, and look it passed, on Stripe it passed and then it went over to our store to complete it,
10:02
but of course, we haven't written this function, have we? So, it wasn't valid.
10:07
That's going to be our next thing, to write and implement the finalization of that, but when you noticed, that that turned green,
10:14
that actually did the processing on stripe.com. So if I come over here and I put in like if I leave this blank,
10:23
and I try to pay it will say no, no, no, if I put in like here I think I put that card number in wrong so that should fail,
10:33
notice this card number, there is a way to check with credit cards if the number itself,
10:37
it's like an integrity check on it, you can do that, but we can have a test like I can come over here and have some kind of failed payment, declined,
10:46
you guys are going to get really good at typing this by the way, so this card is actually going to be declined,
10:55
so I don't think it will even get pass this screen, yeah they are like "yeah, I don't think so".
11:02
I think the CVV has declined here, yeah, if I look back at this, this is going to decline with incorrect CVV,
11:09
this is going to decline with the processing error, so you get an error back from the server, error occurred while processing your card,
11:21
maybe try again, that's like the credit card equivalent of "did you reboot it?" OK, so you could see this is actually a really nice interface,
11:28
and the final thing we need to so is just handle that whole store/complete, you'll see that's actually quite simple.