Save Client Credit Card with airSlate SignNow

Save client credit card

hey how's it going welcome back we are welcoming you back to another developer office hours today we're going to do saving and reusing cards with SCA I see a few folks in chat good morning I guess it's it's a good morning here in Reno but likely around the world you're joining us for these developer office hours for SCA particularly because they're for folks that are in the EEA so today we're gonna do a live episode that centers around making one-time payments I'm sorry that we're going to do a around saving and reusing cards that are using the new SCA ready setup intent API jump in here you know as folks join us they will be able to go back and re-watch the beginning of this episode but we've got a pretty action-packed setup for you today in this hour so we want to jump in and get started so obviously with the quickly approaching deadline for SCA of September 14th we want to just jump in and help you integrate and store some card details to be charged later so again welcome back I'm CJ a developer support engineer and today I'm joined by Sophie another expert in SCA today from our business operations team here at stripe as a reminder we have a team of knowledgeable stripes standing by to answer your questions live in chat today so go ahead and ask away welcome Deana trium and Dinello greggio heath you know folks the folks that are in the chat welcome all and hopefully you find this useful so today's agenda we're going to talk about a quick overview of what SCA is and we're gonna do a live coding walkthrough and then at the end we'll save time for Q&A so yeah with that I'm going to hand it over to Sophie who's gonna tell us tell us some more about SCA hi I'm Sophie and I work on helping stripes users prepare for sch before we dive into the specifics of off session payments that CJ is going to present I wanted to give you a quick recap of SCA regulation and how the new requirements may impact your business so I'll begin with a quick overview of what SCA is and who is affected by it the first thing to know is what types of payments are impacted by SCA SCA applies to customer initiated online card payments next when businesses are impacted by SCA business is based in the European Economic Area or IEA accepting payments from customers also based in the EEA are in scope for this regulation you may see transactions between these two parties referred to as two leg transactions when do SCA rules take effect we expect customer banks to start enforcing SCA on September 14th and finally what authentication methods are used to comply with SCA 3-d secure is by far the most common method for card payments the good news is that not all payments in Europe are subject to these requirements there are a number of exemptions CJ can you please go to the next perfect all right so there's specific transaction types for which you'll be able to request request exemptions there are also some types of payments that will be outside the scope of SCA although being out of scope is legally different from being an exemption in practice in practice we need to request it just like any other exemption which should interest most of you because of the topic of these office hours are off session payments off session payments are payments processed all the customer is not currently using your application or website some common examples are subscription billing or unscheduled payments after the fact like no-show fees we designed our api's to make sure we can support the widest set of exemptions for our users and make exemption claiming and optimization as easy as possible it's important to note that when we request an exemption the customers Bank who will decide whether or not to accept the exemption or require authentication it's in a bank's interest to provide a smoother checkout experience for its card holders but it is important to remember that exemptions can still fail now I'll hand it back over to CJ to walk you through how to build an SCA ready integration that can handle off session card payments awesome thanks Sophie it's always helpful to kind of recenter ourselves and talk about what si is and why we need it so yeah with this new regulation we now have this extra step that we may or may not need to do when taking payments online so today we're going to go through how you might save guard card details and authenticate and then charge them later so today we're going to use PHP with the slim the slim web framework to demonstrate how to save card details and charge them later we're going to be using the stripe API version 2019 August 14 you can find your stripe API version under the dashboard if you go to slash developers if you're watching this later you'll find the code for this episode in other previous episodes on github in our striped samples organization again this episode centering on an SCA ready way to save the payment details without taking a payment upfront and then charging later checkout the stripe developer playlists for other SCA examples and code walkthroughs we're gonna have examples in other languages so Ruby Python will also have samples for other payment flows like billing so with that let's jump in to some code and before we get too far I wanted to just make a quick distinction between payment intents and setup intents so in the previous episode we did one time a one-time payment walkthrough where we collected payment using the payment intents API today we're going to be using the set up a tenth API and the main difference in the way that you can think of it is that a payment intent moves money so a payment intent is an intent to collect money a set up intent is purely for the auth in of those card details so that is just getting permission to charge the card later so a payment intent sort of wraps both of those things up and allows you to take one-time payments a set up intent is the separate abstraction that is purely for authenticating the payment so we're really going to start from scratch again here so I'm going to create another directory called reused cards and going to start with just some you know blank files okay this is what the the directory structure looks like so we have a simple client we have a server that has the language and the server file back here this is kind of the same structure that we use for all of our demos and this is going to have three steps to it so three separate pages for the demonstration so step one we're gonna have a page where we can save the customers card step two we're gonna have a way that you can charge the card later so this this step two you might actually implement this on your server and some cron job or some process that's going to run in the background to collect money the way that we're going to demonstrate it is through having an admin interface where you would theoretically have folks go and charge customers later and then finally step three is something that I really wanted to demo and that is how you might bring customers back on session if for some reason the off session payment failed because it needed authentication so this is a case that we really need to work with and consider and so we added this step three to just show you how that might work to bring the customer back on session to authenticate a payment the failed off session let's go ahead and get started but I'm going to require some dependencies here for our back-end and while that's loading I just wanted to say again welcome to folks that are here in the chat again we have tons of knowledgeable stripe standing by to answer your questions so if you have SCA related questions do ask away we're really excited to see folks on here from you know Spain New York Italy Berlin so yeah it's really really exciting to have all of you here with us and we're excited to answer your questions live okay so I've required some dependencies here we're gonna use striped PHP obviously the slim 3.2 web framework is a little requires a little bit less boilerplate and is a little faster to get going and then again this PHP dot n library that helps us manage environment variables that's just going to be for ya just for managing environment variables all right so before we get too far I want to set a couple of things up so composer here it set up a script that we can run and then sorry gonna slow down a little bit so I'm just adding a script here so that when we say start for composer we're gonna run a server a local server on 4 - 4 - that's going to serve up this index that PHP file which is going to hold all of our server code using the slim web framework ok in our index dot PHP file we're going to use F to manage our environment variables in the sample code that you'll find later there is a dot m dot example file that you can check out that will have you know the format of all the keys and where they belong and the name so they work with the demo when you pull down the demo repo you'll want to go in and change these keys to be your own keys ok the next thing we want to do is start up a slim map and when we when we get the root we actually just want to serve up this step one save card so I'm going to do that here one save card HTML and right now that's just a blank HTML file so we're gonna populate that now ok step one save card details all right before we get too much further start the server now that we have just really bare-bones HTML file just to make sure that we're able to load load this thing so if we go to localhost 4 - 4 - and refresh the page we're getting just our basic empty HTML file here ok so I wanted to walk through again the same way that we did with one-time payments and just show you how you can go through the guide and use the guide to implement saving card details without payment so when you get to this page you'll notice that there's five steps we're gonna create the setup intent pass its client secret to the client to collect the payment method details and then submit the card details to stripe from the client and then after that's all done we're gonna attach the payment method to the customer this is actually pretty close to the similar it's a very similar to flow to what we used for making one-time payments but this time we're not going to collect any payment one thing I wanted to point out is that this is for saving card details without a payment if you're in a situation where you're collecting payment upfront and you want to reuse card details then you'll want to check out this saving cards after a payment guide which is very similar to the the last episode that we did around one-time payments the big difference being that when you create the payment intent in the beginning you set the set up future usage to off session so we're not going to go through that today but you can check out the after a payment guide this again is going to be saving card details without a payment so we have these five steps and I'm gonna start by just making a comment here in the server about what steps we're gonna take so we're going to create a setup intent on the server and then we're gonna pass that client secret to the client collect the payment details and submit the submit the details to stripe so the first step happens on the server and then these next three steps happen on the client so I'm going to put those there okay all right so step one create a setup intent on the server alright so the way that this works is we're going to create an API endpoint that will create a new set up intent and return just a raw JSON of that setup intent so set up a few tenths and I'm just gonna create a new set up intent and return the JSON for that intent I want to test that out over here so I'm just gonna say curl localhost four to four to set up intense just to make sure that we're getting back a set up intent and I do see you know an ID there and some JSON for the set of intent so I expect this to be working fine okay and then let's go back to the guide quickly to make sure that we're staying on track so we've done this first step creating the setup intent on the server one thing to note with this first step is that the default for a set of intent is for off the usage to be off session this means that when we when we create a set up intent and authenticate these payment details we intend to use them off session when the customer is not on session with us so what we're doing what we're doing here is we're just relying on the default of creating the set up intent off session now if you wanted to save card details and you know that your customer is going to be on session every time that you use the card details later you could create a set up intent where the usage is on session and this this just means that when you go to create payment intents in the future if the customers on session if necessary they can go through that authentication flow with you on session all right step to pass the setup intents client secret to the client again in the guide here we're using some like templating language or server-side rendering to inject the client secret for the setup intent into the HTML we're not going to use this template instead we're going to request the setup intent through the API and then use the set of intent that we that were returning from the API and we're going to use the client secret from that set of intent but we still do want this HTML so that we have like a button and card element etcetera but we're not going to use the setup intent but we are going to use this card holder name and card input okay just adding some value there so don't have to type it every time okay and then this card input just gonna sit on its own here and we have this safe card and then one other thing that I'm going to add is for demonstration I'm going to add this card message div what we can use to just like put messages so that we don't have to look directly in the console and so I'm going to use a debug method so we can see what's going on this des bug method is very simple all it's doing is grabbing that card message div and then adding some text to it as we as we go through this process of setting things up alright so now we have some HTML we're gonna collect the card holder name and we're using this card element so we now need to fetch the setup intense client secret from the server so the way that we can do that is say let's say we're gonna fetch that's the setup intent now we're just going to store this in a in a variable here parity and simplicity also log out the response and then say that we fetched it okay alright and so this actually completes step 2 of the guide so now we have we are collecting the client secret for the set of intent because that will be fetched from our API endpoint here where we're creating a set up intend returning all the JSON for it ok so let's go on well I'll show you real real quick I'm going to jump over to the live screen and refresh the page so you can see what it looks like so here the first thing that's happening is we're fetching the setup intent so this debug thing is just adding the these messages at the bottom here and then the fetched set up intent this is the ID of the set up intent that we have fetched and if we look at the the set up intent that we got back you'll notice that the status is requires payment method so this is this is a set up intent that's ready to have a payment method attached to it and authenticated ok alright so this is what it looks like at this point we're going to go on to step 3 collect the payment method details on the client so we're going to use strike elements here to mount that card element and then we'll have something to work with so collect card details electing the payment method on the client we also needed stripe GS then so we're initializing a new striped object we're initializing a collection of elements creating a card element and then we're mounting that to the card element input that we created earlier so this is just gonna you know setup strike elements so that we can collect payment details at this point we're just allowing the user to enter those those payment details into the card element so nothing really has changed the the card input will have now it will be mounted so you'll see like the placeholders for the card number but not much has changed so let's go ahead and jump to this next step here okay submitting the card details to stripe from the client okay you can go back through and and read the guide but I'm gonna move a little bit quickly here apologize for switching around screens if that's if it's if it's moving a little quickly we've got quite a bit to get through so I just want to make sure that we have enough time here so okay I'll go through this line by line so we have the cardholder name this is the input the reference to the input where we're going to enter the cardholder name then we're grabbing a reference to the card button and next in the guide it's expecting again that the setup intense client secret was injected into that data attribute for the card button but instead of using the client secret here we're not we're not relying on this template and we're not relying on the the server injecting this into the HTML so what we're doing instead is we're going to rely on that setup intent that we fetched earlier okay coming down through this click handler so when the card button is clicked we're gonna handle card setup one thing I wanted to mention again is that you might want to prevent default here so that your click event doesn't bubble up to a form so if this element is inside of a form we don't want this click event to be submitting the forms you can say prevent default then we're calling handle card setup which is a method on the stripe stripe jeaious stripe object and we're passing in the setup intense clients secret so here we're gonna just use the client secret again that was returned to us from the API okay the second are the second argument here is the card element so handle card setup is going to do a lot of heavy lifting for us in terms of authentication so it takes in the client secret for that setup intent it takes in reference to the card element and then it combines or it will tokenize the card element the data that's in the card element and we'll walk through the authentication flow if necessary so this is the point at which the modal will open to walk you through the 3d secure authentication flow you can also pass some additional data here if you want to check out what you know what what other options are available you can go check out the stripe GS reference in the in the stripe docs to see what other arguments you can pass this payment method data and then finally once the handle card setup has resolved either the modal opened or the card didn't require authentication that will return a promise that's resolved with an object called result that has either an error property or a set of intent property so if it's an error we want to debug and say result or message otherwise we want to say you know the setup succeeded and we also want to see setup content a meant method is going to be ok so the setup intent once it has been authenticated will have this payment method property and this is going to be some string p.m. underscore and then some random string that's the tokenized reference to these card details that have been authenticated so this is really important and this is what we're going to use in the future when we when we charge later and when we attach the payment method to the customer so that we can use it later also just going to console that log of the result here so we have the full thing to look at if we'd like and for fun just saying that we're gonna handle card setup okay all right so that's the handle the click handler for our card button let's go back refresh the page and play around this a little bit so if we enter a card number that we know does not require authentication the Tres the old four two four two card and we click Save card we're gonna say handling setup setup succeeded here's the payment method for that setup intent that has been authenticated and is ready to be charged later now you'll notice that no modal was opened and that's because this car does not require 3d secure it's not you know it doesn't doesn't fall under the SCA requirements so if we refresh the page and try a different card this is the three one five five card I'll when we're back on the guide if you go to the very bottom of the guide you'll see a bunch of test cards that you can use for these regulatory flows and they'll allow you to trigger the SCA modal so this is one of those cards so if we click save card handling card setup we'll open the modal then you have the opportunity to either complete complete your authentication or fail authentication so if we complete and then that gives us back a setup intent payment method this payment method is referenced to an authenticated payment method that's ready to be attached to a customer and charge later cool it looks like there's some really great questions in chat again if you're watching this later I'd really encourage you to subscribe to the channel so that you get notified of upcoming developer office hours and you can participate to participate in the chat again we have tons of knowledgeable stripes and they're answering questions so thanks thanks everyone who's who's joined and also thanks everyone who's chipping in to to share their a CA knowledge alright back to the guide we scroll down there is just one more step in this flow and that is to attach the payment method to a customer after success so we have authenticated this payment method we've gotten permission from the customer to use it later but it turns out that we can't actually create an offset in payment intent with this payment method unless it's attached to a customer so what we're gonna do now is attach this payment method to a customer and the way that I'm gonna do that is by creating a new endpoint a new API endpoint that we can call on success of handle card setup so after we have authenticated the card and gotten permission to charge it then we'll make an API request to our back-end to create a new customer with this payment method now if you already have existing customers one option is to retrieve that the payment method that we just created and then you can call attach and attach it to an existing customer I don't have any existing customer so I'm going to create a new one alright so back over here okay let's start with the back end so the back end is going to be patched a payment method to the customer create customer just going to create a create customer endpoint that's going to return the Kazon of the customer and this is what its gonna look like okay so okay we are setting up a new route that accept post requests to the route slash create customer we're going to pull off some data from the body that's namely just going to be this payment method again this is going to be the string p.m. underscore or whatever where you do a little try catch block here just in case something fails when we're creating the customer and on the on the client we can handle handle that responds the same way and with the same pattern that we would these other errors okay also of note the the exception hierarchy for stripe PHP is being updated right now and overhauled so that it comes in line more with our other libraries so if you are heading down the path of implementing a bunch of concrete exception handling check out the strike PHP repo for updates on how version 7 of the striped PHP library will be handling exceptions and naming exceptions okay so that's attaching the payment method to the customer after success from the client what we want to do is when we have successfully authenticated this payment we're going to call a method that we're gonna define the function we're going to define here called create customer we're gonna pass in method okay I'm not sure why my syntax highlighting go off okay function create maybe a post request to create customer and that will look like this payment method method and then again let's just say like creating customer likes put ellipses right before I make an AJAX request if we get an error back will log out the error otherwise we're gonna say created customer ID and we'll just console.log call response I don't know why my syntax up okay did I miss a curly brace oh there it goes all right thank you then okay so now we're creating a customer passing in the payment method we have our create customer call we're create customer making a post request passing in the payment method that we just authenticated right so this setup intent has authenticated this payment method this is p.m. underscore some random string passing that in to create customer we're gonna call our back-end to create a customer if we succeed we're gonna log out that we created the customer and the customers ID so if there was an error we're gonna log out the error okay all right so I think that looks good so I'm gonna switch back over to the browser and show you how that might look in practice here refresh again card without authentication click Save Handling card setup we created the payment method now we created the customer at this point we are done saving card details for later ok we have permission to charge this card later we have attached this payment method to this customer if you wanted to check and see if the payment method was attached the customer one thing you can do with stripe CLI you can say stripe get payment methods and pass in the customer and the type and you'll see the list of payment methods that have been attached to that customer so Jenny Rosen has this payment method attached to them ok all right back to the browser all right so the next step here is that we want to create a way to charge the customer later so we're going to build an admin interface where you pass in the string for the payment method in the string for the customer obviously in your own system you would store reference to these IDs you want to store reference to the customer and store reference to the payment method so that you can charge these later so yeah one one thing to highlight is that customer when you're in the old world you could assign a source as the default source for a customer and then you could just use the customer when you're creating charges moving forward with payment methods we the API expects that you pass in the payment method explicitly so for every off session payment we're gonna want to send in both the payment method ID that we want to charge in the customer ok so moving on to our admin view so right now there is no page so let's go to our yeah so we'll start off by just creating a brand new HTML page here this is going to be step to purge okay and there is in within the guide we show you how you can create a payment intent off session but there is no walkthrough about how to create an interface for this because we expect that most folks will generally do this charging later as part of a background task or as part of you know fulfilling some other order process so this interface is going to be not something that's in the guide but I just wanted to show you how this might work okay so we're passing the customer input we're also going to have a payment method here and Method input and then finally just a button charge customer and again bird message are just like little debug window at the bottom third message okay so very simple HTML page just takes the customer input in the payment method input and then when we click on this charge card or charge customer button it'll make a request of the backend with the customer ID and the payment method ID will create a payment intent and then we'll show some details of that on the client ok so while we're here I grab reference to the customer and the payment method and the card button and what we're gonna do is we're going to say when the card button is clicked we're going to make a request to our back in on a new route called payment in tents we haven't created yet but we'll go create that and this is going to pass the payment method and the customer also dialogue their response if the response doctor and we want to log out the error message otherwise we're gonna say alright so later on we're gonna want to handle off session payment failures here and so we'll come back and do this after we have our back-end setup for creating payment intents creating a mint alright so when we click that card button again we're gonna create a post request to our back-end with the payment and to to create a payment intent we're gonna pass the payment method in the customer all right so it's very simple alright let's go back to the backend to create payment well we need a couple of things first we need a route that renders this admin page so I'm just going to call it slash admin and the HTML file is going to be step two all right okay and then the second thing we need is an endpoint for creating payment intents and it's going to look like this I'm actually gonna grab this from the guide I'll show you some more information about the payment intent that we're gonna create so from the guide we just completed you know saving card without payment now we're moving on to charging saved cards so if we click on charging saved cards there's actually two guides here one for charging on session in one for charging off session so this is going to be the example for charging off session so on session payments with saved cards again you create a payment intent pass it to the client and then if the client is there they can walk through the authentication flow to complete the payment for us in this case what we want to do is create off session payments with these safe cards so the first thing we want to do is create this payment intent with the payment method again this entry point in this step one might happen as part of a background task or as part of you know some other commands that you're running and so the way that we're gonna solve this is by adding this admin interface where you can pass the customer and payment method so we'll grab that and then I also while we're here I want to just talk briefly about step two and three because there isn't really much code in the guide but we're going to implement these so step two is to check the intent status the payment intent status if it's exceeded we know that the payment intent went through and we were able to collect money from the customer if the payment intent fails because it requires authentication then this means that we need to bring the customer back on session to have them authenticate now when they come back on session we might do two things we might either have them re-- authenticate or authenticate that payment intent that we created or allow them to enter new payment details that they can attach to that payment intent to complete the payment so today we're going to show how you would bring them back on session to just complete the authentication for that payment intent that was already created so again we're gonna start with this payment intent here all right okay so walking through the payment intent we have an amount and a currency so this amount that you're charging you this might be another thing that you can pass in from you know an admin interface or from some process this customer ID is something we want to replace with Graham's customer we're gonna pass it in and then the payment method is going to be params payment method now these final two pieces are very important so off session true this means that we want to complete this payment intent off session we expect that we have already authenticated this card and that we have permission to charge so we want to set off session to true we also want to confirm true this is going to do the confirmation step saying yes we have permission yes the user does want us to make this charge okay and then finally yeah just error handling and returning okay I think we're at a point where we can go ahead and give this a try so I'm going to jump back to the browser refresh the page and see if this works all right so again we're in our admin interface admin up here we have a customer and a payment method input so let's grab the customer and payment method from the previous step customer it's the payment method and we're gonna click charge customer so we're creating the payment intent that was passed to our back-end and the customer was charged so that is looking good okay that's looking good now what I'm going to do is use a test card that requires authentication so let's see what happens when we have an SCA test card so we're going to open the modal we complete the authentication and we say yes we do give permission to charge this card so now we have a payment method that we want to use and we have a customer that we want to use charge the customer creating the payment intent customer was charged okay so those are all working great we have gotten permission to charge the card both ways so first we showed that you know there was a card with no authentication quark required then we showed a card that had her authentication required finally what I want to do is show you a card where every single transaction requires authentication this is a test card but it's also a use case that we really need to cover because while we are able to you know request exemptions for charging off session there are certain scenarios where even if you have permission to charge a card and even if you are you have charged the card before charging off session might trigger a requirement for authentication so this is how we can test that is with this three one eight four card so we have our set up intent we're gonna say save the card handle setup we successfully complete authentication so we say yes I give permission to charge this card we grab the payment method bring it back over here grab the payment method and the customer we want to charge with nothing them in here and then we're gonna click a charge customer it's gonna create the cart the payment intent and say your card was declined because this transaction requires authentication all right so the test card three one eight for that test card requires authentication again for every single transaction so this transaction failed because it requires authentication this is a case that we need to to consider and to take into it's one of those things we need to build for okay so in this scenario what we want to do is bring the customer back on session so I'm going to show you how to do that ideally you have some ID that's referring to an order or to some product that's being purchased so that you can point the customer directly to a page and you can bring them back and have them re-- authenticate or enter card details because I'm not storing anything in the database we're going to make this really simple and what I'm gonna do is build a URL that we can send the customer to that will allow them to complete their authentication okay so on this page when authentication fails for requires authentication or when when processing the payment feels for requires authentication I'm just going to log out to the screen a URL that we can copy and paste that will allow us to you know send to the customer and they can click on the link and complete their authentication so this is going to be step 3 so we're gonna add another route here for step 3 step 3 complete ok and yeah so one other thing that we're gonna want with step 3 for completing this authentication is that when we bring the user back on session we want to tell them why their card failed so one thing that we're gonna do is that URL is going to have the payment intent ID and the payment method ID embedded in the query preamps and when the page loads I want to make sure we can fetch the payment intent and look at the error that was related to that payment intent and show that to the customer so I'm just going to make another route here called payment intents that is a get request different from the one above for a post request and it's just going to be retrieving a man intent using the ID that we're going to pass in okay very simple again payment intent or example here or in points are just returning when we make a get request we're gonna return those payment intents okay so the HTML for this complete page again this is going to be something we're sending to the customer and step this is step three authenticate and this is going to have we want a div to show them the card error we'll keep that you also want a button for them to authenticate and finally our trusty little card message the bug bang alright so the steps involved in authentication we're real thin Takai ting this payment this payment intent first we want to fetch payment intent so that we can show the error next we want to add a click handler to start the handle card payment process okay all right so these are the two things we want to do so we're gonna grab reference to the card error that reference to the card button and oh right okay so the other thing we want to do is we're gonna use the payment intent and payment method programs from the URL so those are going to be embedded in the URL and they say our payment content ID is programs that get I'll just shortened to P I and payment method ID yeah so we're gonna pass both of these things in the URL we're gonna say fetching payment in 10th if the new endpoint that we just created logout the response okay so that response is going to be the payment intent object if the payment intent has a last payment error okay so the last payment error is a property of payment intent if it has a last payment error we want to use that as our card error message so we're gonna say guard error that inner text is the message from that last payment error right okay and the other thing we want to do is we want to store reference to the payment account not just the ID but the whole payment intent because we need the client secret from the payment intent that we're fetching to go through that handle card payment process and we're storing that payment at 10:00 again on the respond earth that is the response that we're getting back from our server when we when we hit the fetch payment intense API okay next we want to add a click handler for this card button so bird button when the card button is clicked want to call handle card payment we're gonna pass in the payment intent client secret and some data the data here is going to be just the payment method that we have already authenticated initially and that we want to have the user re-authenticate this is going to be from the query parameter our payment again this is going to be very similar to the handle card setup where it's going to return a promise that is resolved with an object that either has an error property or a payment intent property I'm gonna say if the response had an error log that out otherwise we want to say a ment successful in link card payment all right okay at this point we are ready to go now we just need a URL that has a payment intent ID and a payment method ID in the query parameter instead the card button pulling the payment NID and method ID out of the query params we're fetching that payment intent so that we can show the error for the payment intent to the user and then we are adding a click handler so that when the user clicks the button we can pass the payment intents client secret in the payment method that that we attempted but failed earlier so we're passing these two things so that the user can now walk through that authentication flow and if they successfully go through that flow then we'll have you know successful payment otherwise they'll see some error likely with regard to if they failed to enter their authentication details correctly so we are at a point where we can attempt to try this but to make this a little easier one thing I want to do is go back to step 2 and log out a URL so I forgot this step we'll go back and go back and do this so in step 2 when we if we have this error remember we have it okay so we had it we had it to do all right so let's go let's go do this to do I know oftentimes we had to do in code and then never go back and do them but we're actually doing it today so I think that's positive if the error code is authentication acquired it's a special error code if there the error code when we attempt to charge this payment method off session is authentication required then what we want to do is email customer with this link okay how you pulled them back on session is actually up to you you could you know send a push notification or send them a text or send them an email what we're gonna do is send them a link with this URL gonna be a complete P I is going to be the response that error payment Content ID so that error is gonna have a reference to the payment intent and the payment method okay all right and this is going to be the payment method value that we entered all right so I think that should work all right before we go too much further I just wanted to show you some of the test cards so we can walk through this whole process so over here under saving cards again without payment if you go to the very bottom of the screen there is a test integration section that has cards that are specific to this SCA regulatory test cards alright so this is the three 155 the three 184 there are more test cards here if you open up the stripe Docs and go under payments if you go down to testing there's a huge list of different test cards one thing that most folks don't realize yet is that you can actually use the tokens directly so if you're writing some automated tests and you don't want to enter the test card number directly you can just use this tok visa as the result of like a successful tokenization same with payment methods again there's you know tons of different international tests for different reasons to simulate different situations so today again we're going to be using the test cards from the the testing your integration for SCA because these cards are specific to pushing through the SCA flow okay let's see just quickly checking the comments here right so one of the questions here from Garrett was if we're charging something up front and then collecting a monthly variable amount after am i correct and we need to set up intents API or can I just stick with payment intents so if you are collecting payment upfront you couldn't use a payment intent directly and you set up future usage there is a benefit to charging the same amount every month there's a special exemption for that that we help you with if you're using stripe billing but if you are using if you're kind of like collecting different amounts every month then you can you can use this a payment intent with set a future usage off session in the beginning if you are not collecting payment upfront you want to use setup intent so that later down the road you can charge those variable amounts okay cool jumping back over to the example here refreshing refreshing this okay so the card number the first one we're going to try is we want to walk through the process and just watch the four two four two cards I can show you kind of like what this looks like and you can test it so we're gonna save that card handling card setup we've got our payment method coming back over here refreshing finding our pin method in customer to our admin we're going to use to charge later clicking charge the customer great to pay payment intent in the paint the customer was charged okay so that that works successfully again we want to try this card that will always require authentication so the three one eight four card attempt to save the card we're going to use this card because this will help push us through to this last step or we need to bring the customer back on session so we're copying this payment method pasting it in here copying the customer kind of switching back and forth a little bit so now this customer again this payment method was you using the three one the I'm sorry the eight for what is the card three one eight four card and now we logged out that we want to email the customer of this link again you can construct this however you want you need to bring the customer back on session somehow and so we are constructing a link here that has the payment intent and the payment method embedded in the URL params this because we don't have a database for the demo you might instead pass like a link that has some token that refers to your order internally so for now we're just gonna copy that link and paste it into the URL and when we refresh the first thing we're going to do is fetch the payment intent and it looks like we got a 500 back that's great okay so fetching a payment intent failed that's because we're not passing it any IDs of what payment intend to fetch so let's go add that quickly step 3 fetch the payment intent and we're gonna pass the ID being payment content Peggy okay so we just updated it so that we're passing in the ID of the payment intent back to the browser refreshing and payment intent ID is not defined oh that's cuz I misspelled it alright great back to the browser refresh okay so now we have fetched the payment intent and we added the inner text for this card error to show the error for that payment intent which is again on this last payment error property of the payment intent object so your card was declined this transaction requires authentication so the user came back on session we sent them this link they came back on session they click authenticate we're going in to handle card payment and stripe is not defined great okay so we need to go to find straight all right page here okay so we're just initializing that stripe object that we're using down here for a handle stripe card payment stripe handle card payment so I hadn't initialized this yet and so I got this error that says stripe is not the fund refresh the page again all right now authenticate the user has come back on session to walk through and complete their authentication and now payment was successful so again today we went through this whole flow of collecting and saving card details which may require authentication upfront we're using a setup intent to go through and handle that authentication we're getting permission from the customer to charge them later then we showed in the admin view how to charge that card are the customer later you create this off session payment intent which again the payment intent is going to move money so we're creating this off session payment intent confirming it passing in the payment method that's been authenticated in the customer that we stored that payment method on and finally we're bringing the customer back on session in the off chance that that that off session payment required authentication so this has been you know quite a beast of a walkthrough I really appreciate your time and thank you for joining us we're gonna hang out for a little while longer here in chat to answer some more questions but yeah that is that kind of wraps up the code demo so I really hope you enjoyed that okay so let's see yeah we are reusing cards this is the kind of the guide that we went through today I also want to note that we have an overview for check out check out is another stripe product that you might be interested in that is SCA ready and specifically I wanted to mention that there is a new type of check out called setup mode to check out which is a check out offering where you don't actually need to collect money you can use it just for collecting card details or updating card details so that's one of the things that I wanted to point out also we have this migration guide for billing billing is going to be the next episode we plan on doing in this developer office hours series on going through these SCA migration guides cool okay let's see just quickly checking checking the comments here again really appreciate you guys joining us if you have questions later feel free to hit us up on IRC we're in freenode the stripe the pound stripe channel on freenode also again really if you subscribe to this channel we'll be doing other live demos helping you walk through and build your integration check out the docs if you have questions that are regarding your account directly you might be interested in reaching out to support at stripe comm some you know tons and tons of really helpful folks over there other things to mention we plan on having a you know these stripe demos in other languages down the line so we'll have you know Ruby Python node etc we started with PHP because we know lots of folks are using PHP these days but we're really excited to build in a few different languages yeah so again the the code for this demo will be up on the stripe samples github organization under the developer hours repo so feel free to check that out there's also a ton of really great stripe samples for other payment flows so if you're interested in checking out you know how to collect taxes or a few different payment flows and generally each of those demos that are in the stripe samples repo will kind of follow the same pattern in the same directory structure and the others will have you know examples in other languages so if you look in the server directory in those other stripe samples you'll see examples in Ruby and golang and dotnet etc cool awesome yeah again if you're looking for links to things we'll drop those in the show notes so yeah come back check out the show notes if you're interested again we're going to be hanging out online here answering your questions Sophie again thank you so much for joining us did you have anything else that you wanted to jump in and add um I can go ahead and just do a quick overview of some of the STA ready products we have perfect yeah that'd be great thank you all right um so just as a very quick recap stripe has sort of three main SCA ready product offerings the first is the payments API which you saw in action today that's sort of a most flexible solution if you want to be building a custom payments form we also as mentioned have strength checkout which is the fastest way to get up and running it's a hosted payment page that runs on payment intense under the hood and then finally we have stripe billing which is for businesses that accept recurring payments so it identifies which subscription charges require authentication and it can even trigger an email to subscribers if authentication is needed and so that'll actually be the topic of our next developer office hours we'll go through a straight billing integration awesome thanks so much thanks again Sophie for joining us it's always great to have tons of really knowledgeable folks here to to help out and answer questions yeah I see that it looks like folks are in chat here on YouTube are getting their questions answered pretty well again if you if you have follow-up questions that happen after this series reach out on IRC and we will we'll be happy to help you out okay we hang out in there most of the time so we've got folks around the world that are that are in their day to answer questions and and help you get your integration built okay so yeah I think we're gonna get we're gonna hang around and keep the stream on for a little while longer but yeah thanks again thanks again for joining us and thanks again for watching you