Tip:
Highlight text to annotate it
X
PETE LEPAGE: Hey, everybody, and welcome to another Chrome
Apps Office Hours.
This week, I'm going to be talking about the new in-app
payment system that's available for the new Chrome
packaged app platform.
If you've used Chrome apps before, you know that there
was a model where you could sell an app with a one-time
payment up front in the store, or you could allow the user to
get the app for free.
Well, with Chrome packaged apps, now you can use the
in-app payment system.
The in-app payment system uses the same similar set of APIs
that are used by the Google Wallet digital service system,
and it allows us to just quickly and easily charge our
users for digital goods.
So let's get started and take a look at our code--
or take a look at some slides.
We can switch to the slides, perfect.
So there's effectively five steps that we need to walk
through in order to use the in-app
payments in a Chrome app.
So step one, obvious, pretty easy.
We need to go set up our merchant account.
You can set that up either in the production or sandbox
environment.
Today I'm going to be using one in the sandbox
environment.
And we'll be using the sandbox environment
through this whole thing.
The second thing we need to do is create something called a
JSON web token, or a JWT, that identifies each individual
item that we want to sell.
So if we want to sell a gold star or later I'm going to be
selling some sad pandas, if you want to sell those, you
need to have a JWT for each individual item.
Third thing we need to do is include a buy.js file in our
Chrome packaged app application.
Because of content security policy rules, we can't include
files from outside resources.
So we need to include that buy.js file in our Chrome
packaged app.
Finally, or almost finally, we need to go and add our success
and failure callbacks to our packaged app.
These are the functions that are called when the
application has completed the purchase or failed to complete
the purchase.
And then finally, the last and most easy step, hooking up the
buy API to a button or to whatever event we want to have
the user click on that.
Let's take a look at how the flow works within the app and
for a user.
So I've got my app up, and the user says, hey, I want to go
buy something.
So they go and click on that buy button.
And we make an API call that goes and kicks off the in-app
payment service.
That in-app payment service tosses up a dialogue that
allows the user to enter their name and credit card
information.
And then it sends that back up to the Google servers to go
and actually bill their credit card.
So it goes and checks to see.
It'll then potentially do an HTTP post
request to your service.
This is an optional thing and something that I highly
recommend you do so that you can use later to verify
whether the purchase was made successfully or not.
As long as the Google service gets back a 200 OK from your
servers, it then does a callback into your application
saying, hey, all right, great.
The user's purchased that app or purchase that digital good,
whatever it happens to be, a sad panda.
And you get the call back.
Now like I said, optionally, you can have your server
register and say, hey, yup, OK, I
acknowledge this purchase.
You can also do a validation from the app to your server to
say, hey, did this user actually make this purchase,
so that you can have sort of a second line of verification,
making sure that it did actually happen.
So the API to call to actually make the purchase is a
relatively simple API.
It's google.payments.inapp.buy.
And we provide a JSON object.
And in that JSON object, we need to
specify a couple of things.
Parameters is one.
Today--
or if you don't specify the parameters as env sandbox or
env prod, it's going to use the sandbox by default.
So if you want to make sure that you're using the
production environment, you need to make sure that you set
the env parameter to prod.
The JWT, which is a rather long file, we'll see what one
of those looks like in a sec, that specifies the item.
And then the two callbacks that get called after the
purchase has finished.
So when we start to think about that JWT, well, what's a
JWT stand for?
JWT stands for Java Web Token.
But it's signed and encoded, so that when it's sent to the
server, we can verify that yes, this is
actually what it is.
And the user can't go and change the price on whatever
they're going to buy.
So in its raw form, before we've signed in and coded it,
you can see a couple important things here.
We have that issue line here that you see specifies the
seller name.
And that's the seller ID that we get back when we sign up
for our Google Wallet merchant account for the first time.
We can then specify the price, whatever we want to give it
for a name.
We have to set a creation time and an expiry time for this
particular object.
And that's what the exp and iat are for. iat for issued
at, and exp, expired at.
those are a number of seconds after the epoch, so if you're
familiar with that.
And then finally, that type just defines
the particular type.
There are two types of JWTs that we can use to sell
product within our apps.
One is just a single, one-time item, just like you see here.
But the other one is a subscription service.
And with a subscription service, you can bill the user
on a regular basis.
They can be billed every month, and you charge them
$0.99 every month, or maybe it's $1.99, or whatever you
want to charge on a monthly, regular recurring schedule.
So there's a bunch of libraries that are available
to take this JSON and package it on down.
Once you've gone and packaged it all down, you've signed it
with your key, this is what it looks like.
It's a really long, ugly string.
And there's a link there at the bottom that you can see.
And all of these links will be available in the sample that
I've got, as well.
But that link there links to a Python JWT library to allow
you to create and sign these.
And the sample that we've got going shows you how
to do that as well.
So let's do it.
Let's give it a try.
The sample that I'm about to show you is a Chrome packaged
app that's available in the GitHub repository.
So if you go to that URL, you can go grab it.
And there's two components to it.
So let's just pop out of here, and let me bring up--