Stripe Payments with PHP

1. Introduction: welcome to this class on integrating strike payments with PHP. Well covered secure customer authentication, recurring payments, one off payments, digital wallets on more to get started. You want to download that set of instructions and make sure you've got PHP winning locally and then download the example code that will go through as we go through this class. Let's get started. 2. How does Stripe work?: in this lesson will look an overview of how stripe works, so you're probably familiar with stripe already. But they're one of the world's largest payment processes. Allows you to take credit and debit cards and over payment methods on your website. It's available in North America, Europe, some of East Asia, and they're continuing to expand. And it's used by websites including booking dot com on drama, slack delivery, UNICEF, loads of major international companies and strike providers with a bunch of tools for our website. So they've got the A p I, which we interact with on the back end. They've got strike check out, which is entirely hosted. Check out solution on their platform. So you just send them off to stripe and then they come back got strike Js, which is the Java script front end library that makes all the magic happen. And then we've got stripe elements which are pre built components that you can slot into your website to make your life easier on. We're gonna look at all of these throughout this course, so there's two main flows that you would use will start the first is a track outflow and then in this case. What happens is we build a session containing our shopping cart. So everything on our basket we bundle in on, we send a message to stripe saying We're going to send you a customer who's got all of these things in the basket. Then we use stripes Java script to actually send the user to that page on striped website to complete, putting their card details incomplete and then strike redirects the use of back to our website after the payment is complete. So think of this is how papal works. When you want to make a payment, you send the user over to PayPal. They make the payment that come back. Everything is hosted by stripe, so there's very little for us to do. It's easy and quick to get set up on all of the new features striper rolling out the automatically relating to the check out. Now the second flow, which I've called the stripe jazz flow. Although we actually used the strike Javascript library in both flows. But in this one everything is hosted on our website. So how do we do that without making our website PC? I compliant because it all happens with the Java scripts of the user inserts that credit card details into what is our Web page but that never gets posted to the back end that gets sent via Java script to stripe servers to make the payment. So the flow here is that we build a checkup page on our own website on. We'd probably put a credit card field in there using stripe elements of pre built, really nice looking things that will get to later. And then when the user puts their credit card details in the stripe, Js library sends their credit card details to stripe servers to say, Here is the card details. We want to make a payment here, at which Point stripe will authorize that card and send us back a token. This is just a string of numbers and letters that we can then use to process that payment. So once we've got that token back, then we can submit the user payment form on our own website. Disregarding that credit card details were never saving those to our server because we don't want the PC I compliance hassle. All we need is that token than when the user gets back to our back end, We then send to strike a P I A request on our back end saying this is how much we want to build the user. And here is our token to say which credit card We wanted to build those the two flows available on, and we're gonna look at both of them in this course, starting with check out and then moving on to the deeper integration, so let's get started. 3. Cloning the git repo: for this project. I've created some sample code fear. So this will get you started and you can easily clone this. So it's on. Get hope on its called Bookshop PHP. I'll put this u R l in the resources section, but you just need to go here and even grab the git clone. Or you could also download the zip. If that's easy for you on their and somewhere on your computer, you just want to get blown pasty. You are really in on that will download all of the sample code that you need once you've gone, that we need to do is run a composer install and I'll just take a moment on that land store . All the dependency we need, just like a normal Petri project. Once we've done that, then we have everything we need to get started and assuming we've got the symphony cli we can get from Symphony Service start and this will start up symphonies, internal Web server. It looks good on. Then we can go Teoh local host 8000 And here we've got the sample project of from running. So we've got all these books we can add bookstore basket they appear of here, got a little basket. We can empty that and give back to the home for age. We can start adding books again. Who got the basic system? And on top of this, we can build our check out and payment processing. So get the sample code downloaded. Get from running on, then we'll move on to the next lesson. 4. Registering a Stripe account: The next thing you want to do is ready self. A stripe account said. To do that, just get a strike. But come on and hit the start now button and then just fill in all of your details. You can even set up as a company if you have registered company objects. As an individual, you technically don't need a stripe account. If you're setting this up for someone else's behalf, you could use their stripe account, and you don't even need access as long as they'll give you the right keys. But it definitely helps toe have one, because then you can verify everything we're doing and seeing the transactions going through in stripe. Once you've got nothing scallop, you should get to the dashboard on. That's everything we need for now. So let's cover everything else in the next lesson. 5. Accessing your API keys: Once you're into your stripe account, then you will need to get your A P I keys out on to do that. We can go down to this Developers on a P I keys here. This is our public key right here That will include on the front end. And we've also got the secret key that Egypt's hit this reveal button on that will give you a private key that we use on the back end. Now, when doing this, you want to make sure that you've toggled this viewing task data because we will want to use our life keys in life, obviously. But for development purposes, tol hours to know, actually process any payments and use the strike test Guards will want to be using the test data, so make sure that you grab those test a P I keys. If you are using someone else's stripe account, you can just get them to pull these out for you. By this, I recommend having your own account he contest with because and you can see the transactions coming through 6. Installing the Stripe library: to make use off the stripe. AP I will need to actually get the stripe A p I code Onda we can easily get up from package ist. It's just going to strike slash stripe PHP? No. In the sample code I've given you here, it's already included. So if we go down to the packages, we've already got the straight library installed. But if you're working on your new project, your own project, he just need to deal with composer install off this strike PHP package and that will give you or the A p I functionality that we're gonna be using throughout this course. 7. Stripe test cards: something else that would be super useful toe have as we go through this course is some test cards. So when we're testing the payments, we don't want to use our real credit cards on strike provider. Siri's off test cards, which we just Google strike test cards, is the easiest way to find it. On Under this testing section, we've got loads of different cards. So here's a bunch of examples from all the different card providers also got international cards, and when we get on to see a payments, there are cards for testing that as well. So it's great to have these documents toe handy. Also, if you using any kind off card management system, even your browser or your password manager, you could even install one of these cards in. That's what I do. And then I just allow that to fill it out every time, any to use that as cards. So just keep this page handy. Just know that these cards are available. Could we will be using them later on 8. Using the example code: as we go through will be creating all the code we need together. But if you prefer to just watch the videos and then code later and don't want to have to be constantly pausing the video and typing a little bit, or just you get to the end of a project and something's not quite working, then all of the code that we're gonna create is already in the get repo you've given. So we go to the root here. In this Examples folder, you can find all the controller's helpers and templates that we're gonna create together already in their finished form. So if you get something and it doesn't work, then a good place to go star is just compare it to what's in the examples. Once you've cloned them, those will be available locally as well. So in the examples, something's not quite working. Just bring up the code, and you can compare it to what you've done on D. C. Hopefully troubleshoot and see where the problem is 9. Stripe Checkout: in this module. We're going to integrate with striped check out. So just Teoh recap What strike check out is all about is it's a check out page hosted by Stripes or similar to PayPal. We are going to send the user off to stripe with a bunch of variables to tell them how much we want to charge. They're gonna take payment for the customer and then send them back. If you want to go right into a full integration with strike wherever things kept on our website, then feel free to skip this module. But if you want to see how this works first, then to continue so the flow is we're gonna build a session containing the users basket on . We're going to send that off to stripe in the back end. We're then gonna get token back from stripe and use that to redirect the user to the check out page on stripes so that strike knows who they are and what we should be displaying to them. Strike will then take the payment and redirect the user back to our Web site, at which point we can say some kind of order complete page. So let's start implementing this 10. Creating a checkout session: Let's make a start on creating this check out so we can steal this code from basket controller and create a new controller called Check out Control. And we'll have this check out function mapped. Teoh the check out your all and we're gonna need to bring in some of the stripe libraries here. So we're gonna use the CO on and we're gonna use the check out session as well. When we use this further down on, let's get rid of this existing code. Okay, great. So now we can start writing our coat. The first thing that we're going to need to do is set our private Que Let's do that. So the FBI key, we're gonna pull this out of an invariable that we're going to coal stripe Private key. We'll set this up. It's already half set up in a minute, but we'll go back and set up in the next lesson, and then we start building our session objects that the way we're going to do it is create a session object to of all the data in on. We're then gonna send over to stripe. So when the user lands on the striped website they know what they need. So this is gonna be object on Let's tell stripe that we want the used to pay by card. We'll create empty array for line items because will populate that of it. Further down. I didn't have success. You are also This is where the user will be redirected back to on one of the things that strike gives us is the ability to should be session I D or senders the session I d back so we can put Lane is a placeholder, and strike will know what to do that on. Let's also have a council your else if they use it's cancel. I want them to go back to the basket screen that we care. So the next thing we want to do is we need to actually tell stripe what products were in. So to do that when a loop through the basket items, please take each book out on what's added into the line items, we're gonna add a new object here, say the name. Listen as a book title description that's passing the author's name, the amount. So when they do something a little different here and we'll take the price which is stored in our little database as a decimal price. So, for example, 99 ongoing times it by 100 because whenever we pass an amount to stripe, it needs to be in the lowest denominator. So in us dollars, we're talking sent something with euros with pounds. We're talking about sending over in pennies. So if you've got something proud priced $9.99 we need to send over 999 hens were going to say the price stored in our database and times it by 100 and passed the currency in. In this case, we're going to use pounds on finally quantity, and that's gonna be set toe one. So we've developed this session data, and additionally, we built up all the list off products as well on. Finally, we've got all the information we need. And so this point, we can call a stripe FBI to create the session on day. We're gonna render this to a template on. The only thing we need to pass down into this template is the session I d that we get from stripe. Okay, that looks good. So we've now got our controller, but we need to get a template and we need to solve these keys as well 11. Installing the API keys: in the check out controller. We use this environmental variable to get are private stripe key on. We're going to do a similar thing on the front end in our template. In fact, that's already wired up, ready to be used. So we need to set that because that will be different for each of us when the dot m file have already created these variables here. But because we don't want these keys committed toe, I get repo because they'll be different per environment on secret. So maybe we don't Everyone having access to them we want to do is create a dot m dot local file and we need to do in Here is this is a comment line on copy and paste these two lines here and then just paste your actual keys after them into here on assumes you do that, they'll be ready and available to use like this so created dot m dot local pastry keys in and you don't 12. Redirecting to checkout: with great our controller. But now we need to create this template that we're going to actually render out the redirects. Let's do that. Now Do that when you're going to use the templates directory. I was like to copy and paste code to make it easier, but would really all of this on We call this check out and first thing we're gonna do is include the stripe Js code so you can copy and paste this from strike website. But it is pretty simple. The girl and we're going to go ahead on create script block where we're gonna put our code in a couple of things we do here is create stripe Instance on here I need to put ah stripe for but Kian which we created as an environmental variable. So this is our public key on the control earthy code that the user doesn't see there were using a private key. Don't mix those two up and then all we're gonna do is call the redirect function. Andi here we just need to pass in the session I d that we rendered in our controller and that's literally or we need to do for that check out, redirect. So let's save that as a template on. There we go. Let's run it and see what happens. 13. Running the journey: we're almost ready to run this journey. We've grated so last little thing, we need to do it. He has renamed this controller, which I missed out earlier. Once we've done that, we can get our symphony service died. So I've already got my morning here. But if no, it's just symphony space server colon start and that will get upper morning on local host 8000. You should be also access it here. Onda. We can create baskets. I've already got two books in mind, but we could go and had some different ones. That's at this one and this one that's have a couple of Steinback books on. Now when we go to check out, we should be redirected to stripe. Okay, Perfect. Great. And we've got our books down here listed with Price and the offer. So let's fill in some details. Let's take a strike test card. This case it's a MasterCard and we can use any dates with it and just make up some numbers . We could make a proposed get as well hit pay, and hopefully this should charges and send us back to the success page that we've just creating a little bookshop Okay, great. So there we have. It's certainly centers back. Has it done the transaction? Well, let's have a look. Let's go up to our strike dashboard. We've got tested too turned on and would refresh the page. Yeah, and then we get 18 98. She is the transaction we just made. We've successfully made a payment on. At this point, we've successfully integrated with Stripe Jack out, which is great. If you want a simple integration than it's already done in future modules will look at some of the more advanced integrations that we can do. 14. Stripe.js & API: this module, We're gonna look a deeper integration with stripe in which we build our own check out page in our own website and use strike Js and strike a p I to integrate that. And we use both of these things on the check out journey as well. But we're going to use them a lot. Mawr here with this deep integration. So everything is gonna be on our website. But because we don't want our website Teoh have to be PC, I comply in. We're going to send the credit card details off to stripe with their strike jets. JavaScript library on the flow will look something like this. So we build that check up page on our own website will drop in a credit card form from stripe elements on when the use that fills out those credit card details that stripe Js will send those credit card details to stripe servers without them having to be processed by our server. All happens on the front end in javascript strike. Then send us back a payment authorization token which will then send to our back end. So all we've got is a token and then we make a call to striped AP I to say I'm going to charge you use of this much and here's my token to say the user has given me authorization to use this credit card, and strike will then charge. The payment will know that they've done that and therefore we can show them to the order success page without the user ever having to leave our website. So let's make a start integrating this. 15. Creating a skeleton checkout: in this module we're gonna create check out that's completely integrated into our website. So to begin with, let's start by creating a skeleton for that select Take our existing controller on. Let's call this one local. Check out Controller on. We're still going to need stripes stripe, but here, we're gonna use stripe charge instead. Still gonna want Teoh. In fact, we're going to get rid of all of this code for now. Language. It's going to go ahead and register out what's going This local dash check out All this controller is going to do is Bridget is render out this template between them. The controller as well. Okay. Looks good to May on then. Same thing here. Let's create I local check out template. The one that we're referencing here. Andi, you say that in template. Okay, great. Still go check out. Let's get rid of this code. So now if we get a local check out, we've got a skeleton page where we can start integrating. I would check out 16. Stripe Elements: even though we're creating the whole payment process on our own website was still gonna get strike to do some of the heavy lifting for us in terms of creating the actual little form where people put their card details in. And to do this, we're going to use stripe elements which you can see from their website here. This just gives us some pre built forms that really nice and easy to fill out, so people just put their card number in it, will recognize the card. It'll just by their correct icon, hear it lasts them to put their postal code or zip code in, and it really just makes it super easy. So you look at this, for example, it's in the rial number, but as we import that recognizes it's a visa. It recognizes the U. S. Guards who asked us for the zip and it also handle some of the more advanced, really secure stuff we're gonna do later. So it's a super useful component, and this is really the way strike for asking people to integrate now is by using these pre built elements. So let's take this and drop it into our webpage 17. Adding Stripe Elements: Let's go ahead and drop strike elements into Ah, check out. So we've got around to check out page here and for a minute, the code, our template here. And we just start by creating we're not going to use an actually needs a method on of create some pre built CSS, so we'll have the check out class. You can check that out in app dot CSS Just a little thing to make it look a bit prettier when we get started. When we give it an I d to and inside the form, we're gonna find that place older element will call card element. Yeah, looks nice on. We're gonna create a big burn myself. Submit payment. Great. We've already got our script here on Let's bring in that code that initialize is stripe the A P I as well. And then we're gonna go ahead on initialize this So we're gonna say far elements equals and then we're gonna create card on. Once I was go elements create God. And then finally, we just gonna mount that onto our card element. I d. Okay, lovely stuff. So, to recap, we create a little form with this placeholder element. We've initialized a stripey FBI called the Elements a p I on with great discard element. And now, if you refresh the page for Lucky, we've got this nice pre built stripe elements on a big submit payment button. It doesn't do anything yet, so let's wire that up. 18. Validating the input: the next thing we want to do is handle errors. So if something's wrong here, we want to be able to display that to the user. So let's go. And at that now festival, that's add another a placeholder element. Collis card errors. And then let's go wire this up. So take our card element will add an event listener monitor for change. Then inside here, we'll get our card errors objects. And if there's an error event, set the content of this to display the ever and if not, let's make sure we clear any error because, for example, they could have been an error and then the user is fixing it, so we don't want to continue to display the era. Great. So now whenever there's a change that will check out those narrow and if so, will populate this little box to display the Arab below. Now let's move on to actually getting this payment 19. Creating a token: has discussed the way we take payment with stripe is we ask the stripe a p i for a token and exalted on the client side so that the credit card information never has to touch our server. And so we don't need to be PC I compliant. Let's go ahead. And why this up now? So we select our form element. We called payment form up at the top. We're gonna add an event listener here on this one is for submit. So this would be called when the user hits that submit payment, prevent the default action, and then we're gonna call the stripe ap I So we're gonna call, create token, pass it the card object when the first thing we'll do is check if there's an error. If there is, we'll reuse our card errors through a wide. This up now is if we get the error message, it will stick it into their assumes. The user starts typing and editing it. Then it can get rid of it, which is the code we did previously. But if not, then we're all good on. That means we have got token. And so we wanna handle that gay looks good to The last thing we need here is to write this function that will handle the token. Should we receive a successful one to do that on the take? When creating element, you're gonna be a type input market as hidden given name off token. Pass it the token I d and we're gonna upend it. Teoh form. And then finally, we never submit form. So we're doing here. Is we get this token back as a result within create hidden input on this form here that we add our token inter so that would be sent through when the form is posted on DWI. Then post the form on now get sent to the back end and in the next lesson, we're gonna process what happens on the back end. 20. Testing our token: We've wired up our code to ask for a token from strike. But has it worked? Well, let's find out. So refresh the page. If you haven't already, just to make sure you've got the less one on. Then open up your developer console. I'm gonna go over to the network tap. Now it's going to submit the form if it's successful, and we don't want it to do that. So let's turn preserve log on so we can see the previous requests on. Let's go ahead and take some test card details on. Put them in in, Make up that on and and he is. It could, I know is nine and they went out and let's go ahead and clear that down and then submit the payment. Great. So it did successfully post to local check out. Let's see if we can find that There we go. There's our request on and in the form data. It sent our token, and we can now use this token to make a payment on the back end. So let's go do that 21. Processing payments with tokens: Now that we've got our token, let's use it to take a payment. So we're gonna go into a local check out on and here we're gonna check if the request is a post. So he is Method post, and if so, then we'll know that we're trying to process the payment. So let's start by grubbing Ah, strike property. We'll stick that in there. And we also want to get the token after our quest. Fact, let's do that first. Okay, Annexing will need is a basket on and we could leap through it to calculate the price. But what's gonna be easier is if we use this basket helpful. I've created So a listers is we pass in our session variable and it gives us some health, a method like getting the total price get in the raw price which remember we need to times everything by 100. Because if the price of 9 99 we need to send 999 to stripe, and it will also condensed down the list of books into one string. So we give us a nice description as well. So we dio back into local check out We're passing the session data in on that will give us these help of efforts, and then we're going to create a charge. So before we do that, let's tidy this up. Just make sure we're importing that, and then we'll go back. I'm OK. This charge. So we're gonna call the charge class, which we already brought in. Appear on we're gonna say, create and pass it on object. Great. Okay. And then populate this. So for the amount, it was called out. Nice. Get raw rice. Helping effort. Currency orders. Hard cut. £2 for now. Description again. You call that nice? Help him. Effort, Andi. Finally, we're gonna use our token, which we have to pass us. Source. We'll call up token gank of losing. So let's Once this has been successful, let's clear out the basket. Because once they use ball, the books probably don't want to buy them again. And then we'll redirect to the same success page that we sent the user to on check out. Okay, that looks good to me. Let's continue in the next lesson. 22. Running the journey: Now we've wired up our check out so that it uses token to charge stripe. Let's go ahead and check that it works. So let's start by adding some bookstore basket that's take Cannery Row in 1984 Onda, change this jacket buttons so it now goes to a new local check out page. But you could also just type in the well on. Let's go ahead on pump these tests card details in hit submit payment and we've got the success page. Great, that's going to stripe as well and check the payments Come through here on here we go 1984 and Cannery Row. The payment has bean process successfully. So if you're following along congratulations, you've now successfully integrated strike payments into your local website. 23. Secure Customer Authentication (SCA): in this module. We're gonna look at S EA payments. What exactly are they? Is a good place to start, which stands for secure customer authentication and its European Union initiative to try and cut fraud. So it's introduced in 2019 and it's gradually rolling out. Now, as with most things in banking, they take a lot of time to come in and multi factor authentication. So you might have seen Freedy secure where when you go for a check out, you get redirected to your bank to insert a little password or increasingly now, especially with S E A, you get a special code sent texted to use into your mobile, and you have to enter that into the website. So you went to all your card details. You try and process the payment. Your bank landsend's you attack saying make sure this is you and you have to enter that into the website before you can complete the transaction. Now, if you don't implement S e A payments than it's up to the bank, whether they accept or decline Andi over time, they're going to start declining more and more. So right now it's quite relaxed some payments you can get through without this. But as time goes on, the likely did decline more and more transactions. This isn't a problem for North America at the moment. It's specifically for Europe, but that includes all countries in the Ain objects in the European Union. On DSO, if you do think you'll have customers in Europe than it's worth, implementing this and it's entirely backwards compatible with everyone else as well. So it's better to do it this way, then, is to do it the simpler way, in my opinion, because there's not much added complexity to do this on. If I see a rolls up to North America and elsewhere in the world, then you'll be future proofing yourself, so let's look at how to do it. 24. Creating a SCA checkout page: Let's go ahead on and transform our basic implementation into something That's s e a ready . So we've got our local control here. Let's go ahead and create a copy of this. We'll call it S C H. I count controller on what changes you ill to see a check out as well. And that was Ask it to render this SCH check out file again. We'll take its local check out, Michael. Just make a copy of it. It's called S E A. Say that there. And then in our baskets. There it is. Let's change that Greats that's are working it still wired up as a basic integration, of course. But now let's go ahead and transform it into a nasty a compliant implementation. 25. PaymentIntent API: Let's open up. Ah, SC A check out Controller Andi, when no longer going to be used, The charge ap I instead, we're going to use the payment in 10 AP. I on with payment intent with doing everything up front. So we're gonna need to rearrange things along. First of all, going in the basket around here on, we're gonna need to set the strap. A p I as well on will ignore this book for now. And down here, what we're gonna do is we're gonna create a payment intent. Yeah, and we're gonna use much same help him efforts. So we say, basket, get Royal Price sent the currency again. We're gonna set the description on down here. This is gonna give orders Any token. It's called client Secret. So we've already outlined what the payment is, and we've sent up to strike here, and then we're going to render that to the job script, which means when the user actually submits the form, then all the work has been done and the payments been processed so we can get rid of this charge. And instead, if it is a post, we can just clear the basket on redirect the user to this vest page straight away, so that looks like everything we need to do here. Now it's going to the front end on modify the JavaScript. 26. Using the PaymentIntent API: in this lesson will modify the front and JavaScript code to be S e a complaint. So it's open up our SCH check out page, and most of this is going to stay the same. Just a couple of things we're gonna change. So we don't need this handle token function anymore, and we are no longer going to use the create token. Instead, we're gonna use something called confirm card payment. And the first argument we're gonna pass in is that token that we got when we create the payment intent and we're gonna pass it some options as well going to say payment method, we're gonna pass it card on. This refers to this card object here on then all we need to do is handle the result. So we'll take the event again. Won't say if that would be result. Makes more sense. Andi, If it's a success, we need to do a little bit of extra tracking payment intent because it can take a while. Then again, we're gonna submit a form if you remember all we do when we submit the form is clear down the basket and redirect to this excess page because we creating a token with stripe here for what we want to charge. And then on the front end, the user enters their card details, and that goes along with the token we've created to say what payment we want on the orders off the stripes have at the same time. So hopefully that's everything we need to do. Don't let's go and test it. 27. Running the journey: we've rewritten. I've check out to B S E a compliant using stripes payment in 10 FBI. So now let's make sure it all works. So let's start by checking just a regular card and making sure we haven't broken anything. Got booking a basket go free to check out on will just take the same test card we've been using. OK, perfect. I went for you. Let's go through the process again. So we'll add some more books to the basket and we'll go back to check out. And if we go to this stripe scarred pages weaken, see further down. We have these cards that represent things we contest with, See? A So in this case is gonna ask for verification. So we'll see what that means again. Just fill out the card. Um uh, some payment this time. The bank has asked the used to verify it, So this might be asking them to insert password. It might send a one time pass code to that phone on. They'd have to enter that all of that is handled by stripe here. So instead of just a big complete off vindication, but and it might just be that but it might be something more complicated, but the user would do that themselves and then just complete authentication on bank. We've got success there too. So great. Now, any time that the bank wants additional authorization wants this S e a secure customer authentication will handle that as well. Perfect. 28. Digital wallets: in this module. We're going to integrate digital wallets into application. But if you're not clear what digital wallets are, it's things like Apple pay Google pay we chap a visa, check out master pass these kind of virtual ways to pay that just happened in the browser or on your mobile device. So we're not talking about real world transactions here, but we are talking about without a physical card. So, for example, Apple pay. You can go onto websites. Just hit that pay with Apple Babe on and in a desktop, you get a little pop up like what we're seeing on this Mac and on a mobile device, you'd get a little pop up as in on the right. And it's the same thing with Google pay and a lot of these digital wallets. The way stripe does this is it gives us one unified button, so we insert this button into our check out process, and when he used hits that they will get the relevant little pop up. So if they're on safari that get apple, pay their on chrome, they get Google pay. Whatever their device supports, it will pop up that little window. So let's look at how to integrate it 29. Creating a digtal wallet controller: Let's start by creating a controller for our digital wallet, so we'll start with our CH check out controller that will make a good base. That's copy and paste that save, it asked. Did your wallet controller on the flu? For this is pretty much the same as an S e a payment using payment in turn, AP I. So there's only a couple of tweaks we need to make, and that is to send some of the description fruit. Because rather than sending the information to that payment processor for that credit card statement, we also need to tell them what's happening when they get the notification on their phone or device to say that making a payment. So that's in these variables to the front end. We'll use our basket helper. I will send a description through. We'll send the tell price for you as well, and that's the only change we need to make to the controller. Next, we can go to the front end on make are changes. There 30. Mounting a payment request button: Now that we've got our digital wallet controller, we can go ahead and make the front end changes. So let's take the CIA. Check out template on Just save the eyes. Digital wallet Template on and let's get to our controller on. Changed out to you. Register out The digital wallet on that has changed. You are Ella's well, and then finally in basket. Let's change it to a digital wallet and then we can start making changes here, and there's quite a lot of changes here. So instead of having a cardinal in our button, which it's gonna put this payment request button in, we don't need that CSS Eva Stunning. The card errors still need to bring in stripe, but there's lots of changes to remain here, so the first thing we're going to do is create a payment request and the country here you want to pass in the two digit ice eso country code. It needs to be in capital letters or love the time like currency. We hinges, plus in lower case, but we have this country code. It needs to be passed in in capitals and for the Territo label, we're going to use that description property that we fast food and we're also gonna press the amount through top price. We called it and we Andi, let's request some information from the A P I as well. So if we want to use their name and email has registered on the device, we can. And once we've create ah payment request object, then we need to bring in striped elements that we've got a pair haven't wait, and then we want to create payment request button so we'll do element create They last for the payment request button and the payment request will be that payment request object that we've just created next. We want to check if it works. So a lot of browsers and devices just won't have a digital wallet set up. And there's an A p I for that so we can call, can make payment missile tellers Wever it is available or not. So we can say if true, then we're gonna mount that Putin. So this is the empty element we get a pair of payment across Putin were saying if the user has that support in their bows of or device, then show it and if not. Let's give them a message that says Sorry now in a full system. What we do here is to fall back to a regular check out here. So if they can load the payment request button, we would show that if no, then we just give them a traditional form style. But for the purposes of debugging here, I want us to see when it's not working. Hence why we're including the sorry message. But normally you could just give them an old school check out with a card input here. That's chips. Get rid of this code that we don't need. So so far we've mounted the bullet, are given them a message. If not, let's in the next lesson. Let's look at how we actually make this payment. 31. Processing payments with the button: we mounted our payment born in the u I. But now we need to actually handle He's a clicking on it and making a payment. So let's do that now. We'll start by adding a listener that's listening out for payment method. Well, right, Call back to handle that. It's gonna call confirmed card payment, and we need to pass a bond your options into this. So first of all, we're gonna pass in that client secret that we generate from the controller on the back end so that the user can't mess with anything. Then we're gonna set payment method based on the object we got on. Finally, we're gonna set this option call handle actions equals false on. The reason that we're setting it to false is that we're going to write our own code to handle what's going on here. So we don't want the default strike code to do anything because we're going to write the code right now. This is the code we need never call back. We gonna take this confirmed result which will get back from calling this If there's an era , then when a mark this payment request as complete, but a fail and that will tell the browser Teoh, take them back to the payment screen because the payment has failed and if not mark as a success, and that will tell the browser to proceed because everything has gone fine. And then if it's a success, then at that point we need to call confirmed card payment again, because at this point we're gonna let Stripe actually take the money in this time, when we need to do is pass in that client secret again, and then it just becomes like a regular payment. So say if there's an era, we'll get the card errors, which is the same one we've been using this whole time imprint on the message, and if not, then we'll submit the form. So let's go over that. So at this point, if the payment trusted requested, we're calling this with the So we're calling the stripe a P I with this confirmed card payment, and this is like, for example, on your phone, the little window pops up saying, Do you want to make a payment on that lever work or it won't if it doesn't work initially. Then, for example, the payments failed on the device and so the user could retry. It needs to try a different card or needs to fill something out, in which case will tell the device that failed at that stage. If so, we can market is complete and hide the little pop up on the device. But just because we've done that doesn't mean we've actually taken the payment. We then need to contact the strike Baby. I again to say the device has accepted this payment, and so now we want to try and charge them. It could then go to the bank and they could reject it, in which case will put the error message up. But if not, then everything should be fine. So that's the theory behind it. Let's see if it works. Let's load a website sounded book. Get a basket and get it. Check out on. We've got nothing. So let's debug this in the next lesson. 32. Serving over HTTPS: we ran our job script code for our digital wallet. It didn't work initially because I saved the file. But now the half. And if you're following along, you should get this message saying, sorry. Your browser does not support digital wallets. Now it depends what browser and device you're on. But I'm on chrome right here. And so it should. So what's going on here? Well, the problem is that digital wallets only work over hate T t p s which we're not running here, which is running regular http. Luckily, symphony has a bill in solution for this, And we could just go a symphony server, see a install, and this will install a local certificate for us so that we can have valid, hopefully to be s over local host. If you're not running in the symphony, start you can use something called M K, sir, which will do a similar thing. But it's a bit more of a pain to configure. So hopefully you're following along with Symphony stack. And then all we need to do is if we restart our server. If we refresh it sued, redirect is automatically. Yep. So you've got the padlock we're gonna hit you to be asked on the button has appeared perfect. So we've now got our payment button. Let's test it in the next lesson. 33. Testing your digital wallet in Chrome: Now that we've got our button working, let's give it a test. And the easiest way to do that is in chrome. If we just go to preferences on going to come down here to payment methods and widgets can add a new one. Andi, we're gonna take some off the stripe test cards again. Let's take this must guard hit. Save now back on. Check out page. We gotta pay. Now we get the Google pay on, we can choose this test card that we just created. So here we can see we've got a book, Blue color price. And we've got ah, payment method. That's it. Pay can hit any CVC here on. Will it confirm? Okay, great. We've got our hardest successful page. It seems to have paid through Google pay. Let's go into stripe Refresher dust board. Yep. On there we go. We've got on you payment Mefford. It's automatically taking our email address. It's got the description. Price is fine as well. So if successfully integrated digital wallets into art, check out process 34. Additional steps for Apple Pay: Well, we've done so far. Gives us a digital wallet for a variety off different ones. So Microsoft pay Google pay Master pass the only one It doesn't work for his Apple Bay because Apple like to be difficult. So to get apple pay working, we need to do everything we've done so far. But there's some additional configuration as well. And this happens in our stripe dashboards that we're going to go down, hit two settings, we're gonna get payment methods. And hey, we've got apple pay. I'm going to go to this configure, and we have apple pay. We need to white list all of the domains were using. So we go appear to at domain on will put alive or a test domain into here. And we need to do this for each of the domains we want to use. The next thing we need to do is get this verification file. So this is you just click here and the file downloads on this needs to be available on the website in this location. So just download the file and stick it in to your public directory. So let's go do that now. Needs to be in this dot Well known sometimes finder or file manager, wherever braking system using were funny about a direct weaver dot in. So if you do get that problem, we can Easily, Egypt's go to the command line on will go into the public directory, and we'll make it our electrical well known fact already done that in this case. So if we hadn't of done that, just give it to that. And then we just wanna make direct, too. Well, now and then we've got Apple developer file. Unless jets move that into directory, it was going to there and check. It's there. Okay, great. Yeah. And that's just fix that problem as well. Okay, great. So the files there, it's in our public directory. We need to do that for each of the domains were putting on here on those of the additional steps you need to do to get apple pay working 35. Creating a book club: in this module. We're going to create a book club that people can subscribe to make recurring payments to Andi To start, Let's chips create quick skeleton. So let's take our S e a controller because this is the closest thing Teoh what we need to dio on. Let's just rename it to some prescription controller. We're not gonna need the basket so we can get rid of the session there on and it's changed this year. Al to subscription. Well, coming. This could out for now. And then we'll render a page that's just called a subscription. Set us to know for now. Okay, looks good. Now let's go create a basic template. It's not. It's open if I see a check out more copy and paste this into a perpetual subscription on Let's change this to say but club subscription and we'll get rid of all of this card for the moment. And that's just great little form that allows the user to enter some details. So ask their name. Well, that's for that email address. The man is a type email, so it does the tie printing on mobile. Call it email as well. Ah, outside Hidden variable. Say what's going on? So creating customer on Finally a big button says, Join the club. Okay, great. Let's check what's rendering. Okay. And the answer is No. I've got the template name Wrong. Okay, lets troubleshoot this in the next lesson. 36. SetupIntent API: so looks like I made a small spelling mistake here. Since we correct that, we've now got a lovely form. So let's go handle what happened. When the user submits, that's we're going to go into our subscription controller on what would not do is create a method to handle creating a customer. There we go. So the way this is gonna work is that we're gonna tell stripe to create custom object. We have the data we've got and then we're gonna take the payment method that we're off rising and we're gonna attach it to that customer so that we can build that customer whenever we need toe and here, connect strip A p I k. I'm saying custom at create on person the values. So we're here, Let's changes. So we're gonna use customer on. We're gonna use stripe set up intent. Talk about this in a minute. So here we've created a customer object, and at this point, we can create a Nintendo. Now we could create a payment intent here, and that would allow us to build a customer straight away and mark them as a customer for recurring billing. But in cases where we don't want to build them straight away. We want to build them when their subscription starts. We can use the set up in 10 instead, which is very similar FBI. But it means we don't need to build them right now. We're gonna take the customer object Wicket here. We're gonna take the I d. We're gonna say, attach this payment in term that we're making its up in turn in this case to this customer . We have said that it's card. Okay, lovely stuff. And then we're gonna hopefully spell it correctly this time nearly on this time, we do have a client secret because we've just created that intent. Now all we need to do is actually call this function. So let's go up to here. It's cut back in. We don't need this intent anymore. When the sigh If we get action. Oh, type, create customer. Then we're gonna returns. Pass a request through. Now it's gonna happen. Is when the user's submits the form it'll hit this. It will get this great customer and it will render out the template with this client secret sin lots going. Modify the template to handle that 37. Confirming card setup: we've done our back end changes. So let's modify the front end to handle this kind of step two. But that's a logic in to say, if we have a client secret. Yeah, and if not, then we'll render Step one of the journey. And here we mostly want to put a classic check out in. So let's start by just taking this girl from the essay check out and then we'll modify as and he did. So you put an extra that very born here just to make it clear what's going on. God, submit payment card. Erica is fine. Still need to call the stripe. FBI set our code handle errors, but then we will need to modify this bet. So instead of this confirmed card payment, we need to do something a little different. So we're gonna call that confirmed card set up Mefford. We're gonna pass the plant secrets that most code is still gonna look very similar. And then that's handle the result from this card set up. So again, probably just copy and paste this into here. Get rid of this. So if we get a result, ask Burt before we're gonna put the result into this card Arrows box on will change. This carried a little bit too. So we'll say looking a settlement in response Satis we want to take that succeeded. If so, we're not submit the form. Let's continue this in the next lesson. 38. Running the journey: when final change we need to make is once the users submit the payment, we need to do something on the back end in this case will redirect to this excess page checks. Action again. Could have done that more gracefully in a switch. But well on will say, If that happened, then do the old redirect. Great. So let's go test what happens. That's point. Some customer details hit, joined. Flip on and great. Now we've got a card payment. That's copy and paste in the task are details hit, submit payment and we've got the success page. Okay, that looks good. Now let's go to our stripe dashboard on What we should have is a customer. Okay, great. And go in and they've got a card attached to their account. So it's great. So we can now go in and add a payment via the dashboard over here and FBI or we could have them onto a subscription plan as well. So if we want Teoh recurring bill them. However, we want to do that, we now got them as a customer set up with a card that we can charge any time 39. Final thoughts: well done on making it to the end of this class. Hopefully you've been following along ever now built a stripe integration post the details of the link or the sample code in the project. Section on Let everyone see what you've done. See you soon.