It wouldn't be a real video platform if we couldn't also purchase one of the courses. And that's what we're going to start now in this video. My payment provider of choice is called Pedal, which is a little bit similar to Stripe, but the main big difference is that Pedal also handles taxes, which is very important, especially if you also want to sell to users inside Europe. The way we are going to integrate Pedal is by using a checkout overlay. And that's also what I'm using here on my personal learning platform, where when we're going to click the buy button, we're going to open up now a new overlay for purchasing the course. And this now all comes from Pedal itself.

the course. And this now all comes from Pedal itself. So this means we don't have to take care of this form ourselves. Then later after the purchase, we are going to receive a webhook request, and then we can make sure that we're going to create a new User, add the product to the User and all the other things which we're going to need. But it's a great way to start because you don't have to implement everything yourself. Okay, where do we start? Again, as always, we're going to start with a new test. But of course, we also have to think about what are we going to test.

Again, as always, we're going to start with a new test. But of course, we also have to think about what are we going to test. So since we're using now this checkout overlay button, we cannot test the checkout itself, what's happening inside the form. But what I can test is that we have a specific button here, which works as the checkout button. And then later, of course, we can make sure about testing that the webhook works as expected. But again, first, I want to make sure that we have such a button integrated on our course details page. And we have here a test already, PageCourseDetailsTest. And we already have here a few tests, it does not find unreleased course, it shows course

And we have here a test already, CourseDetailsTest. And we already have here a few tests, it does not find unreleased course, it shows course details, and it shows course video counts. All right, let's add a new one here. It includes pedal checkout button. All right, how are we going to do this now? We need, of course, a new Course. So let's create a new course factory. And we're going to create a new Course with some new specific data, which we need in order to create the checkout button.

And we're going to create a new course with some new specific data, which we need in order to create the checkout button. Here's a good idea to check out how the overlay checkout work. Here is the documentation for this. Here's again, what it will look like. And here also tells you what we need to enable this button. So first, we need to have a JavaScript library, then we need to set up this library by using the vendor account, which we'll use from pedal itself. And then later, we're going to make sure that we have a button with some specific data. It needs to have a specific class.

And then later, we're going to make sure that we have a button with some specific data. It needs to have a specific class. We need to have this data product with the product ID of myProduct. And this is also what we're going to test. Also, by the way, I can already show you here that this is my pedalSandbox account where I already have created the free product, which we're going to use inside our application. So this means now our course needs to be connected to pedal itself. And this is what we're going to do with a new field, pedalProductID. And we're just going to call this productID here. All right, and then similar to above here, we're going to start acting and asserting.

And we're just going to call this productId here. All right, and then similar to above here, we're going to start acting and asserting. We're making a request to our details page with the details of our created course. We're going to make sure that everything is OK. And now we want to see something. And here, I want to start by making sure that we see the JavaScript library, that this is included into the HTML, because without it, the button wouldn't work. So I'm going to copy the whole script here. And I'm just making sure that we see the whole script here inside our code. Then let's also think about what would be next before we're going to try this out.

And I'm just making sure that we see the whole script here inside our code. Then let's also think about what would be next before we're going to try this out. And we also want to make sure that we see that we set up pedal itself. So we've also seen this here. That's this part here. So I want to make sure that this is also included inside my code. And the vendor ID, we don't have yet, but let's tackle this later. And then the last thing to check is the button itself. Again, we're using the assertC method because we want to look for something inside the HTML, not the text.

Again, we're using the assertC method because we want to look for something inside the HTML, not the text. And here, again, I'm also going to copy now this whole link here. And let's take a look. It needs to have the pedal button and then the product ID. And this is the ID for the product which we are creating here. So here we should see product ID. And then let's keep it with by now for now. OK, let's start with our first assertion. We're going to check the library.

OK, let's start with our first assertion. We're going to check the library. And of course, we see a different error because we have no column named pedal_product_id. So let's go to our courses table. Again, we are still in development mode, so we don't have to create a new migration. I'm just adding it right here. And it's going to be a string and we're going to call it pedal_product_id. Let's run the test again. It's failed asserting that 200 is identical to 404. OK, let's see what this now is about.

It's failed asserting that 200 is identical to 404. OK, let's see what this now is about. Let's try this again. Why do we get a 404 back? I don't see it yet. Do you see it already? So we're making a request to the course details with our course. And I think maybe the course needs to be released. Yes, OK, that's the one thing we were missing. So let's make this a released one.

Yes, OK, that's the one thing we were missing. So let's make this a released one. Add it here before we create it. And now we should see a different error. Yeah, because we don't see the specific HTML for adding the library. And again, first, we need to add here for all those checks here where we're checking some HTML that we don't want to escape the markup. Let's try it again. And now we should see the right text. Yes, this is not given.

And now we should see the right text. Yes, this is not given. OK, and again, here we're checking that a JavaScript library script is included inside the code. And you probably think about it, is this really how we want to test this? And this is definitely something that I wouldn't test for every library. But especially here about the checkout button, which is very important to our page, because if we don't have this button, if this doesn't work, then we don't make any money. So I think this is very important.

any money. So I think this is very important. And that's why I also would want to test this here. All right, so we're going to start by adding this now to our course details page. And for now, we're just going to bring this in here. We don't think about now where we want to put this. We just want to have it on the page. Run the test again. And now we are missing this setup call for paddle with our window ID. So let's add this here as well.

And now we are missing this setup call for Paddle with our window ID. So let's add this here as well. Can we copy this again here? Yeah, I think we can. So after we have loaded the library, we want to make sure that we call the setup method with a specific ID. All right, so now this test would pass. And now the next one would fail. But still, we have to think about this window ID, because this is not a vendor ID of my sandbox account in Paddle.

But still, we have to think about this windowId, because this is not a vendorId of my sandbox account in Paddle. So this also means this is for sure something that we need to have inside our .env file. So let's open up this file. Where do we have it? Here, yes. And let's also get rid of the AWSM pusher settings, which we don't need. And let's add this new variable, paddleWindowId. Yes, and it's always a good idea to also add this now to the environment.

And let's add this new variable, paddleWindowId. Yes, and it's always a good idea to also add this now to the .env example file. And also a good idea every time you use an environment variable is to also add it to your configuration. So we have the services files inside your configuration, where already by default Laravel is calling some environment data here. So it's a good idea that we do this as well, because all the information that is inside here, inside this configuration, can also be cached, which is a good idea if you are live.

inside here, inside this configuration, can also be cached, which is a good idea if you are live. We're going to add here now a new key, paddle. And inside, we have a new key called vendor_id. And we're going to call this now from our .env file. And I think we already see it here. Yes, we do. PADDLE_VENDOR_ID. Okay, now let's add my vendor_id here. So now I have my real vendor_id from my sandbox account in that application.

Okay, now let's add my vendor ID here. So now I have my real vendor ID from my sandbox account in that application. But how are we going to do this now inside my test? Of course, I could now check if the real one is being used. Maybe let's start with this already. And now this should fail again. Because it doesn't contain now this new ID. And now inside our Blade file, we have to replace this with a call to our config. And here we already have it, services.paddle.vendor_id. Let's run the test again.

And here we already have it, services paddle vendor ID. Let's run the test again. And yes, the assertion was not working, because now we have added this here. But still, I'm not happy here, because let's go back here. I don't really want to work here with my real vendor ID when I'm testing. So what I want to do is I want to switch this out here at the start of my test. So I'm going to call the config helper. And before we start the test, I want to set the vendor ID to call it just vendor ID. So now this assertion should fail again. Yes, because here we already have vendor ID inside the markup.

So now this assertion should fail again. Yes, because here we already have vendorId inside the markup. And this means also here we're going to now make sure that we see vendorId when we check this. And now I think this is much better, because we're not using the real vendorId, we're using a fake one. OK, and now the last thing is to add the button to also our details page here. And let's add this one after the image, like this. Let's run the test. It will still fail because of the productId, which is the ID which we have.

Let's run the test. It will still fail because of the productId, which is the ID which we have provided for our test. So let's go back to the test here. Yeah, we don't see it yet, because we are looking for a productId, which we have set here for our new Course. So this means inside our details page, here we need to make sure that we now grab the productId from the course itself. So course, and now we don't have auto-completion yet. What is it called?

So course, and now we don't have auto-completion yet. What is it called? Pedal product ID. All right, and now the test is working. Let's check it out now together. Again, we are making sure that we are including the pedalCheckout button. We are making sure that inside our configuration, we're going to switch out the real vendorId with our fake one, this one here. Then we're creating a new course. It should be released.

Then we're creating a new course. It should be released. We are going to use here a specific productId. Then we're making a request to the details page with our course. We make sure everything is okay. We make sure that the JavaScript library is included, that we're calling the setup method, and also that the button is now included and also has the productId from the course which we have created in it.