Stripe Issuing

today we're excited to demo how creating cards through the API can be just as effortless as accepting them with stripe welcome back to stripe developer office hours I'm CJ developer support engineer and as a reminder we have knowledgeable stripes that are standing by in chat ready to answer your questions so ask away stripe issuing is an API for creating credit cards and it really is enabling new business models stripe issuing it's like it's an end-to-end platform for quickly like creating and distributing and managing virtual cards but also physical cards and these are allow you to do things like create like a employee expense cards with dynamic spending limits or generate virtual cards that your marketplace couriers can pay with their phones at specific merchants so you might create a virtual card and then use a push API to send that virtual card directly to your couriers phone and they can walk into a merchant and pay directly with that virtual card which is really really exciting and you know traditionally card issuance has involved tons of dev time and there's all these requirements and long-term contracts and lots of fees that are up front but with stripe issuing a lot of that complexity is abstracted away so you can start creating cards faster and scale more efficiently so stripe issuing right now is still us only and invite-only so if you wanted to get an invite head over to stripe issuing stripe calm slash issuing and then scroll to the bottom and you can fill out this form to request access to the beta this is really just kind of a fun end of end of the year episode where we wanted to show you how you might quickly get up and running to take payments I'm sorry to create cards with stripe issuing so today what we're going to do is we're going to use the API and we're going to build a quick rails app and we're going to create card holders and cards we're going to handle authorizations with a web hook Handler and then we're gonna list transactions and I'll show you what all of that looks like and so this is what kind of the final product will look like we'll have a list of card holders and right now this is just their IDs and you can click on a card holder and see like the just the raw JSON output of that card holder and you can see links to all the different cards so we'll say create card it'll generate another card for us and here's kind of just the ID of the card but we can drill in and we can see the virtual card number directly and we can see you know the expiration dates and the CBC's for those cards we can also see all the details about about the cards directly here in the JSON that's included so we see that it's a virtual card and then it's active and so this today and then we'll demonstrate you know that you can take this card number and go use it in a checkout process so that's what we're gonna build today and we're really excited to get started so let's head over to to the console here and jump right in so just completely remove that demo that we were watching just now and start completely fresh okay so rails new issuing demo I'm gonna skip tests and I'm gonna skip get and while this is firing up I'm gonna go grab my API key because I will need to enter that into my stripe credentials here so rails is still firing up all of its new front-end special front-end things and while that is going we will get started here so you can actually create cards and card holders directly through the dashboard we're not going to show that today because you know it's really just kind of like in the UI and you can you can easily do that what I wanted to show you is how exciting and how quick it is to set up issuing with just a few lines of code so the first thing I want to do is edit my credentials and I'm gonna enter the stripe key here the clipboard and then the next thing I'm going to do is update my gem file and that will install the stripe ruby gem which we're going to use to interact with the stripe API today okay and then for this demo I'm not actually going to save anything to the database at all we're just gonna directly use the API to fetch the data that we're going to display on the screen there's one other piece of what other change that you'll need to make in your dashboard before you are able to use issuing that is to switch to manual payouts so from your dashboard settings here I'll show you back in the browser yeah so from your dashboard settings you'll go into settings and then bank accounts and scheduling and select manual here the the next thing that you'll need to do is add some money to you or bank account I'm sorry to your stripe accountant so one way that you can do that in tests is to create a charge so I'm using the stripe CLI here and we'll add a link to that in in the description and you can kind of see this a little bit so I am using the stripe see all I'm saying striped charges create I'm passing the source let's see I'm passing the source token by pass if you pass the source toke bypass pending that will bypass the the the pending window where a charge is pending before it hits your balance so this when you create this charge it will immediately be available and your balance and you'll be able to use those funds for testing out stripe issuing by using those funds to spend money on issued cards so first thing they need to do is update your payouts to manual the second thing you need to do is add some funds to your balance by creating some charges with this toke bypass pending now in practice as charges are happening through maybe another form of business you're adding those those funds directly to your stripe account from money that you're collecting from customers then you can turn around and issue cards that can draw money from those balances so okay so we have we have created a big charge here with a thousand dollars USD and that is bypassing pending we'll just make a couple of those so we have plenty of funds here in our and our balance that we can use with our freshly issued issued cards okay so the next step that I want to do is I actually just want to generate a couple of controllers that we're going to use to show things on the page and then we'll update our routes so the first controller is going to be a card holders controller and that'll have the index the index page for card holders will just be kind of like the route route for the entire application we're just gonna show a list of the card holders that we have in our stripe account we also want to wait to create new card holders and to show card holders so I will create the card holders controller with each of those views so index new and show and then I will create another controller for cards and finally a controller for webhooks because we want to build a web hook handler that will be able to process incoming web hooks for authorization requests and those authorization requests will be either approved or declined in our web hook Handler I'm not sure where that is hanging sometimes for some reason spring causes issues so let's try that again rails generate controller card holders index and let's see okay there we go so that created the the three views that we're looking for okay the next controller will create is one four cards and this will just need a show for now I think and that should be good and finally we'll create a web hooks controller and that's just gonna have a create action so we have no view for it we're just gonna render back some JSON when we receive a post request from stripe and we have a whole episode about web hooks and so we'll link to it above and okay so let's see so I'm going to now jump into my routes and just define some of these so root is gonna go to card holders index and then I'm gonna have holders and resource cards web links the first one we're gonna work on is our card holders controller and in the index we're gonna create an instance variable called card holders that will have the list of card holders and we're gonna fetch those again directly from the API so here just gonna say stripe issuing card holder list okay and that should give us back a list of card holders and foreshow will say stripe issuing a card holder dot retrieve and so for the show route it's gonna look something like this it'll be like card holders slash and then we're gonna have the ID of the card holder here so I forget what that actually looks like so it's I CH and then a random string and this i CH is going to be the stripe ID the stripe token for the card holder so that'll be passed to us as params ID so we're just going to take that params ID and forward it on to the retrieve method of card holder and and get back the the card holder instance from the API that is exposed through the stripe Ruby Jim as in class a card called a cardholder class that we can access methods on so also with the cardholder show page I want to show the list of cards for that cardholder so I'm going to say at cards here I'm going to say card that lists and pass in cardholder and pass the ID of that card folder so we're going to get back in this case a list of all the cards that we have issued to that cardholder now okay I think we're getting pretty close we also want to make a create method here for creating a new card holder and before I go too far what I want to do is show you the stripe guide that I'm gonna follow here so if you got a straight comm slash Docs you'll find the issuing section of the docs on the left-hand nav and we're gonna go through the section called issuing cards and really there's just two steps creating the card holder and creating the card for that card holder so the step for creating the card holder here looks like this we're going to copy this code and paste it in our create action for creating a card holder you'll notice that it takes in email and phone number status and whether it's an individual or a business and then also the billing address that is really kind of like all you need the more information you pass the better because we're gonna run or stripe is going to run through some fraud checks against that that name just to make sure that you know we're following the regulatory and legal guidelines regarding issuing cards to card holders so the more information that you can collect the better as part of you know making sure that folks aren't making fraudulent purchases etc so again I'm just gonna copy that jump back over to the code here and paste that in so we're gonna create a card holder and the name that we're gonna receive is I'm actually gonna pass in first name and last name separately params email same with on the status is going to be active and the tyke is going to be an individual for this demo we're not going to demo how to build a business it's alright I'm sorry how to do it with a business it's very similar so that's that's where we're gonna start it's just with an individual that is active okay let's pass here and we'll take in the address as line one and then we'll take in the city as Lam's City and the state and postal code just like that in the country I'm actually gonna leave the country just as US because right now we're only issuing in the US so the create action is gonna or we're gonna build a form that will accept the name email phone and address of our cardholder and when that form is submitted we're going to make a post request to this card holders controller passing all this information in here to create a cardholder then we're simply going to redirect to cardholder ID we're gonna redirect to the show page before that cardholder when we're done creating that through the API obviously you won't you'll want to wrap this in some error handling and support other cases and collection and verification or like data validation on your own end but really just trying to keep the demo simple so this is how we're going to create a cardholder okay so before we go too far when we fire up our rails server and make sure that that is actually working here okay so let's bring up the browser and if I go to localhost 3000 I see no API key provided set your API key like like so you can generate the keys from striped web interface so I've already got my my API key in the credentials but you know what I forgot to put it in the in an initializer striped RB something to fire up a new initializer here stripe the API key is rails the application dot credentials dig I'm passing in stripe and then I'm passing in secret key all right a little visitor here for a second ok so now we've set the API key and I'm saying rails server so I'm going to fire up the real server and now I'm gonna refresh the page in the browser so that is refreshing okay card holders index that's what the index page looks like and that is what we expect to see okay so let's go back to our code I'm just going to drop in so CSS but things look nice this is from some CSS from previous demos and then we can head over to ok that's really just a to make it look nice here so all right so our list of card holders is going to look something like this we'll have a ul and we'll have an Li that's going to print out linked to our leader dot ID or an older path or an older ID and again that's going to be the stripe ID so for each cardholder we're gonna iterate over and print out these allies that have nuts in them and that's really going to be kind of the extent of our client so this is what it looks like we're hitting the stripe API and fetching our card holders and bringing those back so let's we can add a little bit more detail here we can say put out the ID but also print out maybe print out the C so now if we go back to our browser you'll see the name is there with it so we have just like a little bit more information ok let's also add a link to create a new card holder holders ad card okay fresh we have this ad cardholder link okay so now let's go build our form for creating a new card holder it's gonna be in card holders new so we're gonna have the name now we're gonna have a first name first and then I think we want like the address information so we'll say line one and city postal code okay we're gonna we're hard-coding the country but otherwise you you might accept the country there okay so let's go back to our browser and refresh and now we have this full input where we can populate this with information about our cardholder we'll call it now Jenny demo instead of Jenny frozen and then when we click create card holder that should send a post request to our server and it is now we're getting not a valid phone number that's because we did not put in a phone number there let's actually leave out the phone number completely okay for now because we're not actually validating the phone number we're gonna we're gonna remove that okay an initialized constant stripe issuing car whole er I misspelled card over there so pull back up the card holders controller here we're going to skip over phone number for now and this needs to be create cardholder fantastic so now we have a new ID card holder okay sorry that's let me show you what that looks like okay so Jenny demo to demo to create card holder and you'll notice that we have a new card holder ID here in the browser that we can use and that's going to be params ID for card holders show so now we can fetch the card holder or we've already fetched the card holder and now which one implement the show page here we're going to print out all the data of the cardholder list the cards and allow creating new cards so if we go to cardholder show and here actually inside of that tag we can print out the card holders name and down here I'm gonna make a pre tag it's just gonna hold the JSON the output of the cardholder that we received back just so that we can see kind of like the all the output of the cardholder and then I also want to show like the cards the list of cards here so I'm gonna say let's make another UL ID card path okay so let's see what that looks like over here and refresh card holder dot name for nill class so back to our code let's go back to our controller and make sure we are fetching the card holder as expected get back to the browser I had a misspelled the instance variable name there okay so now we see Jenny demo too and we see cards which is just a no there's actually no cards yet but there will be a list of cards here shortly as soon as we create a card so now I'm gonna add just like a big button here that says create card and we're gonna generate a brand new card for that card holder and that is the step two in this guide create a card so I'm gonna copy this for later and you'll notice that we're gonna create a virtual card but if you're gonna create a physical card you want to set the shipping address where the the physical card should be sent to so here we're gonna we're gonna create a card the other thing that we need to do too is eventually activate the cards you can you can set the card to active by default when you create it and that's not here included directly in this this demo snippet so instead you can it says when you create the card you can set the status to active so we're going to pass it status active so that our cards are active right off the bat just like our card holders so if we go back here let's go back to the code that is all looking good go to our cards controller make a new card and set the status to active and then we will redirect back and the thing that we want to pass here is the ID of the card holder so our cards controller is quite simple it has a create actions is going to receive the post request with the data including our our card holder that we're going to use to create this new card that we're gonna issue to that card holder and when we go to the card show page we want to show details about the card so we're gonna show you know the credit card number it's expiration and the CBC which we can retrieve from the API using the special details endpoint for the stripe issuing card API so that you can either call retrieve here with the card ID or you can call details when you call retrieve that retrieves all of the non sensitive details of the card so you can see last for the ID of the card expiration I'm actually not sure if you can see expiration but you can see last for things like that with details when you pass the ID of the card to details you're gonna get the full details of that virtual card so this is a little bit gonna be a little bit more careful when calling card details because you're getting back the real details of the car so this is this is really sensitive here on our show page we're gonna just like print the card all the card details so that we can use it as part of demoing through checkout but it's something that you want to take into consideration as you're implementing this I'm just gonna fetch the entire card and then the other thing I want to add here is the transactions so for each card that you issue every time that it's used there will be a new transaction that is logged for that card and those transactions you can fetch the list of those transactions associated with that card by passing the ID of the card to this stripe issuing transaction a API endpoint okay let's head over to our let's go back to our cardholder bill page and let's make a button here that will it's actually going to be a an entire form but it'll look just like the button to create card so we're gonna send a post request with a hidden input that has the cardholder so when we're on the cardholder show page that would just be a button that says create card and we're gonna create a virtual card that is already active and is assigned to that cardholder and then we'll see it added to the list of cards for that cardholder okay great so let's let's go back to the browser and see what this looks like so we head back over here we go back to her okay so we have this giant button now for creating a card so go click click create card and there it is so now we have we have a new card if we click on on that card we'll see the card show page for that we haven't implemented this yet but we'll dig in and show you how that should look okay so I'm gonna go back to our code and here under cards show when I wanted to demonstrate is showing the first thing I want to do is just show you that you can see the card number expiration in CBC and all that and we can just print it out and show that directly to the user here again sensitive information you want to be careful with this for demo purposes I'm going to show you that we can just put it on the page be easy to copy and paste and walk through the checkout flow okay so we want to do this yeah sure so we're gonna say card number and at card number let's see the expiration okay and then similar to the others we'll just put the the full free or the full JSON in a little pre here just so we can see the raw data of the card that is retrieved when you call details when you use the details endpoint from the API okay so I don't go to the browser refresh our page and here we see this is the brand-new card that was created it has this this card number in this expiration and the CBC this is a test card it's in live mode false but we do see that it is a real card so what I want to do now is I have a little check out a little check out implementation here that is using the same account the same demo account so I'm going to copy that card number I'm gonna walk through checkout to buy some pins with this card that we just created so I'm going to enter in that card number the expiration is 1122 the CBC is 1 2 3 test customer 8 9 4 3 6 whatever okay and then we're gonna click pay and right now there are no there's no authorization request webhook setup so the authorization request is going to run through the rules that we have set in our dashboard and right now I don't have any rules set up for issuing in my dashboard so we see this is Jenny demo 2 this is the card that we just issued to Jenny demo 2 then we're gonna attempt to use and there are no authorization control setup but we could we could add those if we wanted so you can just click Edit and then you can add specific categories that are allowed or you can add spending limits per category per month very very handy little controls that you can do directly from the dashboard and you'll notice that these categories are the MCC codes just like built directly into the - bored which is pretty nice so right now we don't have any restrictions so when I click pay because they don't have a web hook set up and I don't have any restrictions this should just go through successfully and it did ok so we saw that successful successfully process we'll go back to the dashboard here refresh the paid the page here for Jenny demo and you'll see at the bottom there is this transaction for nine dollars and our merchant is this demo merchant with that card that we just issued so that's pretty exciting let's head back over to our page and if we refresh this oh right okay so the next step that I wanted to do is add the list of transactions here below that line jump back over to our code and show ya so let's say actions sorry step back table TR the head is going to be ID you were gonna have the amount that was paid and then let's just show like the merchant okay and then merchant data is going to be where the name of the merchant lives so for each of the transactions and the list of transactions that we've just fetched from the API in our controller action we're going to print out those results here let's go back to the browser and refresh and see if that worked okay I said transactions actions okay cool and now we see that that one transaction there so that is super exciting we've already processed the payment and here we are you know just a few minutes in we have we're creating card holders we're creating virtual cards we're accepting payments with those virtual cards so really cool stuff already so that is that is the first step of our agenda we want to create card holders and create cards we've actually used our virtual card already to process a payment one other thing that I wanted to point out before we get too far is underneath the issuing docs if you go down to I believe it's managing cards where is it here issuing cards I want to make sure that oh yeah okay so under digital wallets we give you instructions for how to provision cards so you can create a virtual card through stripe issuing and then you can add it directly to Apple Wallet or to to Google pay and so we have some instructions here for how you might set that up very cool stuff essentially you can have a process where you're issuing virtual cards to your couriers sending that card directly to their phone they don't even see the card number and then they can use the card and cut you know go to the merchant pay for for some service that is maybe connected to your business in some way so the process is maybe you have like a food delivery service and you can have a driver or you know the courier sign up for your food delivery service and you can issue them a card that only works at the merchant where they are supposed to collect or to pick up the food that needs to be delivered and you can use the funds that the that the the person buying the food sent you directly through your strife account so it's really really exciting stuff so I wanted to talk just to point out that we have guides on how to use iOS in Android provisioning to push those card details directly to those digital wallets so that's pretty pretty handy and pretty exciting stuff okay so the next step in in the process here is I wanted to show you how we can build a web hook handler that will receive a post request when the card is is used and that post request will tell us some information about the authorization that's being requested and at that point we can decide whether or not we want to approve or decline that authorization so okay so we're going to do this in our web hook Handler okay so let's go controller okay well hooks controller again we have a whole episode about web hooks the thing that's unique about authorization web hooks is that you can only have one web hook endpoint that is listening for issuing authorization requests and the reason is that we need one source of truth that is deciding whether or not you approve or decline this transaction so that is a that is a little bit nuanced but the the web hook endpoint that you want to listen for is issuing authorization dot request and so we're going to show just how to do that and this is you know in place of setting up those controls directly in your dashboard which you can totally do instead of building a web hook handler if that if that's how you wanted to go so in our web hook handler we need to first skip the CSRF check because we're receiving the post request directly from stripe here and give me more than I wanted okay so in this create method what we're going to do is we're gonna fire up an event that is stripe events from json.parse so this is just gonna like create an event object we're not doing any signature verification obviously you you'll want to go through that web hooks episode in the web hooks best practices there are a number of guides on on stripe about how to about how to handle all of all the best practices and how to handle web hooks signing and verification today we're just going to take the shortcut and construct the event and then handle just the authorization request here so event case on CA the case dot type when it is make sure I get this right issuing authorization at request okay so here this is the point where we need to decide whether we're going to approve or decline the authorization request so approve and/or decline so to demo this what I want to do is I'm gonna say if so the the authorization is going to be stored inside of event data object and if the authorization let's see what is that called if the authorization is pending authorized amount is less than or equal to $50 then we'll approve it otherwise we'll decline it and the way that you approve is you pass the ID of the authorization you want to approve and the way you decline is the same but you're passing it to the decline method and then in addition to passing the ID you can pass other other options here the one I'm going to pass now is just some metadata maybe the reason why I approved this so less less than or equal to the 50s that's how you might do that similarly you can do the same thing with decline you can pass metadata that you might have maybe the reason in more than 50 okay so with previous episodes and with other products it's quite easy to test your webhook handler with the stripe CLI in this case we need a specific webhook endpoint that is listening for this specific event type so it's a little trickier to test with the CLI and I want to make sure that we show you how to test within grok so I actually already have an in grok server running and listening so what I need to do now is in rails I need to add hosts I need to add this in grok domain to the hosts that we want to support okay so we should be able to receive requests from there we need to restart that okay so end rock is a popular tool for forwarding requests that are to a public URL to your local machine so that you can test things so it creates a tunnel where you can then receive requests and so what we're gonna do is go to our stripe dashboard and set up a new a brand-new web hook handler that will pass our events for issuing authorization requests directly to our new and grok endpoint here and we're gonna send those to web books slash web hooks and we want to pick the specific event authorization request at the endpoint okay so now every time I try to charge that card I will be receiving a web hook notification - this - to my local my local host 3000 webhook handler that is being tunneled through and rock and those requests will will enter our web hook handler and either be approved or declined based on how much that item costs or how much that authorization was so let's let's give this a spin I think we need to okay we're gonna restart the real server come back over here to the browser and let's grab our card number again go through a check out okay this is a nine dollar item we expect this to pass okay hey alright it looks like that was successful let's go back to our console so it it looks like we did not receive any requests there so what is going on issuing authorization requests we're in test mode that is the web hook URL issuing authorization request and we restarted the server and okay let's just go back through this entire thing from the top and make sure that we are receiving okay so we're going to add a card holder and three create the cardholder create a card for Jenny demo three go over to that card we'll copy that card number click buy pins go through the process of buying pins and click Buy okay so now if we look at our console we see that we did receive this type issuing authorization request web pop notification and the browser we're back to our success URL so that successfully processed now if we look in the dashboard under issuing we can find that card holder and we can see that we have an authorization here which is successful and the reason metadata is here and we see that that went through successfully that's cool okay so now what I want to do is before we get too far let's go and edit our little test here and say the quantity now is 30 so now we want to buy 30 of those pins this should push push us beyond our limit okay so I'm gonna restart that little test server and go back to the browser and now let's go through this flow again with the same card and now we expect that this should get declined by our web hook handler because it is more than 50 dollars okay pay $90 processing and your card has been declined okay that's great so now if we go back to the dashboard refresh and view our cardholder we see this authorization and we see that it was declined if we drill in there we should see the reason being more than $50 that's the metadata that we passed and so that is how we can pass and set specific metadata and how we can build a web hook handler to process those authorization requests which is really neat because you can look at the merchant you can look at the specifics about the merchant and maybe you only want to allow transactions that happen at gas stations or maybe you only want to allow you know purchasing software or you can you can set dollar amounts for you know per month or per week per day really really exciting things that you can do because in your webhook handler you can decide the logic for approving or declining those issuing authorization requests which is pretty neat okay let me just check here right okay let's go back to the browser in make sure that now if we refresh the page great okay so we're seeing the transactions there that's fantastic okay so now what we're going to do is we're going to pause for a little bit of Q&A so if you have any questions please just drop those in the chat we'd be more than happy to to answer those if you haven't had your question already answered today yeah I think we'd be more than happy to answer those I know that we've had a couple of questions come in already and those look like we've been answering them directly in chat fantastic okay cool okay yeah you know I just really just wanted to say thanks again for joining us for this week's office hours your engagement in in the live chat and your questions are always great to see we hope you found this useful and exciting and if you're interested again you'll want to go out and grab an invite over there at stripe comm slash issuing and if you enjoyed this episode and you want to see other live demos and other stripe office hours we'd love for you to and turn on the notifications there with the Bell we also have a monthly newsletter that we're putting out called the dev digest which you can access and sign up for on most of the pages and the stripe Doc's if you scroll all the way to the bottom you'll see a place where you can enter your email and sign up for that and we promise not to spam to spam that email it's really just for the dev digest and it's a it's a great place where you can learn about new features invites to in-person workshops we talked about the API and the SDK and client library updates that we're doing and often share a lot of fun stuff like the the stripe CLI no additions that are happening to the stripe CLI we have some really cool new additions to our front-end libraries coming out soon and so we will be announcing those in the dev digest so if you sign up there that's the great the best place to stay in the know in the description below we'll have links if you want to go through this guide yourself on github we always share the code from these demos directly on github so you can go check that out and see what that feels like and you know we're always constantly trying to strive to improve these office hours and one of the ways that you can really help us is by submitting that form down below to provide your feedback and let us know you know what you thought of this episode and what you might like in other episodes you know and one of the thing that I'd love to see is if you have a chance just just leave a comment below and tell us what you might build with stripe issuing you know it's such a new exciting API that is so simple to create cards I'd love to hear what what business models you're thinking of and what what new ideas that that are going to come out of this is really exciting API so yeah I think with that I'm just gonna jump over here back to ya signing off all right have a good one we'll see you next time

Channel: Stripe Developers

Views: 6,198

Keywords: stripe, payments, stripe issuing, issuing, Issue Credit Cards, Issuing cards to your users, How to issue a credit card, Issuing cards using Stripe, Issuing cards with Stripe, Issuing cardholders, Stripe issuing

Id: knBWhYMqLds

Length: 52min 18sec (3138 seconds)

Published: Tue Dec 24 2019