API Monetization with the Kong Developer Portal, Stripe, and Moesif

foreignMatt here with mosif to show you how toget API monetization rolling with Kongstripe and Motif now what we're going todo is we're actually going to use theKong developer portal to createdeveloper accounts we'll then generateKeys those keys will then be used toaccess the APIwhat will happen really in thebackground is each of those keys willthen be linked to usage over inmosifemotive billing meter which we'll createwill then tally up that usage and passthat usage over to Stripes so that thatcustomer can be billed for that APIusage now as you can see I'm alreadylogged in to the Kong developer portalI'm running Conga locally on my machinethrough Docker however you're running itmay change exactly how you do things buteverything should be relatively similarnow there's a few things for us todiscuss before we get startedthere are a few things that are expectedor prerequisites that we have in mindhere which are you should have a runninginstance of Kong with an endpoint and aroute created as you can see I have aslash test service path to my httb binroute the next is that you have key offenabled for your endpoints now on mineI've enabled this globally you also needto make sure that you've enabled theKong developer portal you'll also haveto have an active stripe account you'llneed an active Motif account as well andyou also should have the Kong mosifplugin configured as wellnow when all of that is done and there'splenty of documentation and videos onhow to do thatthen we can get started withmonetizationso the first thing that we'll do is I'vealready created a few prices in stripeso let me come over here a few productsand pricesthe specific one we'll be looking athere will be this my API if we wanted toadd a new product we could do that herebut let me show you exactly what thislooks like so you can have roughly thesame configuration so as you can seeI've created this my API product withthat I've created a priceand what you'll see when you'reconfiguring your prices the usage typeneeds to be metered usage theaggregation mode should be some acrossall usage records during period currencycan be whatever you'd like intervalmonthly and then you can set this stuffas you need toonce you've done that then you'll have aproduct that we can then use in Motifand essentially in Kong as well so we'llcome over to our Kong manager againwhich is our user interface for actuallyinteracting with our Kong Gatewayand over on the side here you should seeDev portal if you don't that means youprobably haven't enabled it yet makesure that the dev portal is enabled andthen come down to editor and we're goingto do two things herewe're going to create a monetization.jsfileand then we're also going to overridethe defaultkong.auth.js so that when a user iscreated the user is created in Kong it'screated in stripe and it's also createdin motifto do that we'll come down here tothemes base assets Jsthird party and under third party wewill do new file and the file type willbe themes because that's where it'sgoing to be sittingand the path to that is going to be baseslashassets slash JS slash third partyslash monetization dot Js and thisshould create our new file for us sowe'll click create fileyou'll see that this then comes upwe'll get rid of the default thereand then what we're going to do is we'regoing to add a little bit of code hereto actually get this startedso the first thing that we're going todo in this monetization.js is create acredentials objectand you can pause the video I meanactually copy and paste from thecompanion blogso that it runs a bit quicker for youbut feel free to pause the video andthen play as you need toso we're going to do this with acredentials object it will have a stripeAPI key and it will have a motif app IDlet's get both of those values right nowso if we come back into stripe we cometo Developersand we come to API keysI'm going to grab my secret key hereyou can do this with a restricted key aswell if you'd like to I'm going to clickto copycome back over to my Dev portaland in front of Bearerwe will paste our keyn for the most ifID make sure that you've logged intomosif and then what you'll do is youwill come downto the settings menu herewe'll go to API keys and here you cansee your collector application ID foryour account we'll copy thatcome back over hereand we will paste thatand that gives us our credentials thatwe're going to need to access these apisour next step is going to be to writesome code here to create our stripecustomer again I'm going to copy andpaste this from our companion blog whichI'll link in the details for this videobut I will go through it line by lineso we're going to create a create stripecustomer function that function is goingto take a full name and an emailobviously you could pass more stuff intoit if you wanted to our form is going tobe relatively basic for that developeronboardingand then what we'll do is we're going todo an Ajax call the type will be postthe URL is going to be the stripe API soapi.stripe.com V1 customers and thisendpoint is going to allow us to createa customerin the headers you'll see we have anauthorization header and we're usingthat credentials.stripe API key againyou could hard code this in here if youwanted to this just makes it a littleeasier to useand then the data that we're going topass will be right here we'll have emailand name and we'll pass the variablesthat we've passed into the functionon success what we'll do is we willassign the stripe customer ID that'sgoing to be held in data.id which is thereturned payloadand as you can see up here we've alreadycreated thisthen if we'll put our error clause inhere as well our error functionand lastly once this is run we will dostripe customer ID and we'll return thatnow you'll also see that I have asyncequal to false the reason why I've donethis is because I want this function torun in a synchronous fashion so I wantto create a stripe customerthen I want to create the subscriptionthen I want to create the user in motifof course you probably could do thisasync as well but I did find that therewere some issues so I've said that theasync is false if you're wondering why Ihave that Chunk in the codeso I've created this create stripecustomeras I mentioned the next thing that we'regoing to want to do is create the stripesubscriptionand for that we will create anotherfunction just underneath this onelike thislet me just switch over to code viewherenow we have another function calledcreate stripe subscription it will takea stripe customer ID and it will take astripe price key because when you createa subscription that subscription iscreated based on a stripe price againyou could hard code these things butthis just makes it a little more modularso we've created a stripe subscriptionID variable up here setting it asundefinedthen same thing as before type as postURL is going to be slash V1subscriptions this time we'll call thesubscriptions endpoint again async isfalsewe've added our authorization header inhereand then we have data that we're goingto pass and if you actually want to seewhat this data could look like you cango to the stripe API docs which areactually really really well done for ourpurposes here we're going to do the bareminimum which is we need to pass acustomer ID and that's going to be in acustomer field and then we can pass anarray of items that we want on thesubscription for this specific one we'rejust going to pass the stripe price keythat we've passed into this methodon success we'll get the subscription IDthat will pull out of the data in the IVfield that comes back in itand we have our error function as welllastly we're going to return stripesubscription ID here now the last thingthat we want to do here is create themosif user so we've created the stripecustomer we've subscribed them tosomething now we want to do is weactually want to make this so that mosifis able to essentially full circle thatpath so that we can have someone createan API keythen they can use that that usage willgo into motifand then most of will be able to linkthat usage over to stripeto do that we need to associate thisuser correctly in Motif so to do thatwhat we'll do is create another functionand that function is going to be calledcreate most diffuserthis function here will take an emailthe full name parameter and a stripesubscription IDthen we'll do another post this timeinstead of going to the stripe API we'regoing to call api.mossif.netslash V1 users and this is our user'sendpointagain async is false and we have acouple of things here to pass in theheaders so we'll pass an accept headerand then we'll also pass the xmosphapplication ID which is where we willpass our mosif app ID that we created uphere that we got from our app that'sgoing to associate this specific APIcall with that microsif accountin the data field what we'll do I'mgoing to json.stringify it so that itworks correctly with the APIbut I'm going to pass a user IDa company ID and some metadata so theuser ID is going to be the emailthe company ID is going to be the stripesubscription ID and in metadata we'rejust going to pass the full name youdon't have to do this part but I justwant to show you that we do have somecustomization that we can do in terms ofwhat we're going to put into mosif underthat user's accounton success we're just going toconsole.log the data and on error wewill run this function so that createsour file now let's save these changesso you've saved thoseagain if you want to go to the blog theblog has all this code kind of end toendso we've got our monetization filecreated now let's actually use this andto do that we'll come back over to Kongthe kong.auth.jsand what you'll see is I'm going to comedown to this window.con.auth.registerand we can we don't have to worry aboutany of this stuff here what we'll do ison the new promise that's created herein the successwe will add a little bit of code so whatwe're going to do is we'll call ourstripe create user or create customerour stripe create subscription andcreate the user in Motif what we'll dois run a few lines of code it's actuallyonly three lines of code since we'vetaken that and made it bundle it upnicely and that monetization.js fileI'm just going to format this quicklythere we goand what you'll see in this first lineis we get the customer ID by callingthis create stripe customerwe passfields.meta DOT full name so this thisis actually going to come from the formfield that we'll be using in theregistration and then we'll also grabthe email from that as wellthe next thing we'll do is create thesubscription in stripefor that we'll pass the customer IDwhich we got from creating the stripecustomer and a price keynow if we come back over to mosifand we come over to productsmy APIthis is the price key we're going to useso this is the 10 cents USD per unitthere could be multiple price Keys hereas well but we'll just take this oneandwe'll paste it here again as you playaround more with this setup there areways that you could probably build adrop down in so that people could managetheir subscriptions through here youcould also use the stripe portal to beable to do that as well there's a lot offlexibility when it comes tomonetization I mean it's a blessing anda curse the fact that there's lots ofways to do it discovering each of thoseways is you know a little tricky sowe've got this plugged in we've got ourcustomer ID that we created from thestripe customer and our price and thenwe've got our create motive user whichtakes Fields dot emailin the email space so if I hover overthis you would have seen that it takesan email takes a full name and asubscription ID or grabbing that herethen just like we did before we'regrabbing from fields.meta.full nameand then we're passing the subscriptionID that we created herethat's all we have to do in this filehere so let's do uh saveour issue being that we actually don'thave the monetization included in ourwebsite yet and to do that what we'll dois we'll come down toand within themes baseand then partialswe'll go to themeand then required Scriptsnow our script is specifically dependenton jQuery so we definitely need to makesure we do it underneath here and sincewe're using it in kong.auth.js we wantto make sure that it's included beforethat so to add that in what we'll do iswe will add a script tag which points towhereour monetization.js is so it's underassets slash JS third party slashmonetization.jsand we're going to save thisand at this pointwe should be able to use the dev portalto create an account so I'm going toexit out of editor modecome down to overview this is our Devportal link here obviously you don'thave to go this way if you don't want toan open link a new tabyou'll see this is our Dev portal I'mgoing to click sign upfull name I'll do matte testdude matthew.comand we'll just do a password here I'mgoing to click create accountand you'll see here that it's moved meover into the dashboard of the developerportal let's go make sure thateverything worked correctly in a stripeso if we come back here we come tocustomerswe can see Matt test was created I'mgoing to click on this hereyou'll see that I've been subscribed tothe my API price so we know this parthas worked correctlywhat we can do now is in our Dev portalwe can do create API credentialcreate API credentialnow we'll see here is an API keynow if I bring up PostmanI already have this service which is uhlocalhost 8000.that's what I have it running on slashtest servicedepending on how you have your API keyset upyou know configured in Kong mine the keyis going to be API with a uppercase Kand then ey so API key I'm going topaste my API key in here click Send I'llsend three times one two three and yousee that the request went throughwe should also see that pop up here inthe Kong usagewhich we can see this Spike here with afew requestsnow what I want to do is come back tomosifandjust quickly check our live event log soyou see I clicked plus new live eventlogand you'll see here Matt mosiffand then sub which is the subscriptionthat would have been created so thismeans that we're working and to end ourlast thing that we want to do isactually set up a billing meter in mosifto do this we'll come back into Motifand we'll go to billing metersyou'll see that I've already got quite afew set up but let's set up a new onehere so we'll do add billing meter nowfrom here call thisKong test meter you can call it whateveryou'd likeI'll then grab my stripe billingprovider stuff come over to productI've created a product before called myAPI you can see I've got a few thingsthat I've set up here I'll select my APIand I'll select the price that I wantthis usage to go towardsthis should this price here should theprice ID should link up with the priceID that you've hard coded into your Kongportal codeso got that set up now what we'll do isI want to actually monetize my slashtest service endpointso we'll do request URI routeistest service now this will automaticallypopulate with any available routes nowif you haven't put any calls through yetyou can actually type it in as welland then press enter and it will add ityou can click this here as well so I'llclick test serviceand I also want to make sure that I'monly monetizing calls where the responsestatus code is equal to 200.we could pick some different metricshere we could pick event count uniqueusers sessions latency request bodycount response body count or create acustom metric what I'm going to do iscreate one with event count so everysingle event that comes through our APIcall is going to be counted towardsusage I've got this set up it's all Ineed to do I need to click createbilling meternow what will pop up is building metersuccessfully created the meter Kong testmeter was created now let's test theend-to-end flow with stripe to ensureit's working so I'll do continuethe first step is it's going to makesure that stripe is enabled and then ourKong test meter is enabled as well thenwe'll click nextso you can see that I've alreadyhave some usage over here so it mightpick up on some of the requests that yousent through and those initial ones thatwe sent so if you haven't created asubscription yet what you need to do isyou need to go through and you need togo through the Kong registration like wedid before so if we come back here whatwe did sign up you need to run throughthis if you have an issue which whoknows you may you should be able to seeit in the developer console as well soif you have an issue this issue isdefaulted by the portalum but if you have let's just saysomething's wrong with your JavaScriptyou'll be able to see it in the consolehere same way that you would when you'redebugging a regular JavaScriptapplicationnowwhat we'll do is we willcome back to this hereonce you've had a subscription that'sreceived so this may take a few minutesthen you'll see subscriptions receivedthis is what you want to see thatensures that subscriptions are beingcreated correctly for this meterif you click nextthe next screen will come to you will bepart two which is make API calls for thecreated subscriptions let's go last hourwhat you'll see is is that we want tosend some more API requests and I'llbring my Postman back up here send acouple throughand we should see these calls comethrough herenow you can see that I've already havesome that have been received becauseI've used this configuration before butif you haven't used it before likelyit'll say that it's waiting there's ourfour that we just sent so we sent fourthrough you'll see them pop up here onceyou've done that you can click nextand this part is the part that may takea few minutesso what this will do is this is going tosync usage over to stripe and thenstripe will then through that web hookthat we created bring that back intomosif this is going to make sure thatour billing meter and stripe all oursubscription stuff is working correctlythis may take a little bit of time so mynext sync is expected at 5 pmif I were to wait until after 5 PMthis will be populated and you know I'llshow you in another billing meter thatI've already createdwhat that looks likeso the Kong test meter is created butlet me show you what that last steplooks like from one that's alreadyreceived it so if I come up to testmeter on this oneand I come through to createsubscription send API calls and come toverify resultswhat you will see isyou'll see a company ID subscription IDand then you'll see a metric valueof course this meter hasn't been usedfor a bit so I don't have any metricshere but generally it would show youwhat reported usage you would report forthat period now let's head backtoour meter here and now that we havethings activelet me just send a couple more requeststhroughand what you'll eventually see in stripewhen you come back to stripeif you come to customersand I'll go to one again that I alreadyhave some usage that's been built toyou come into the customer profile clickon the subscription that you're billingtoand thenif you do view usageyou'll be able to see the units used andthis should match up with the meteringin Motif as welland you know what it's going to happenhere is at the end of this billing cyclethis customer will then get a bill andthen they can pay it all through strikeand that's how you do end-to-endmonetization with the Kong developerportal mosif and stripe thanks forjoining and if you want to check outmore monetization content and differentsolutions for monetization check out ourwebsite mosiff.comthank you