Add Custom Payment with airSlate SignNow

Add custom payment

One of the most interesting things is when you come to your WooCommerce shop add a product, and you're able to actually go view it, then check if you need to update and proceed to checking out, fill in your order form, and then when you come to the part for payment, you choose your payment that is available and you place your order, and your order is received. But in many countries that are available we find that there is an issue with how most of these payments are received. Some countries don't accept credit cards, others don't have PayPal which are actually some on the commonest ways of managing your payments as comes by default to WooCommerce. So today I'm going to show you how to create your own WooCommerce payment plug-in, that you can hook in with your kind of payment that's acceptable in your own country. I'll teach you the basics, then you'll be able to apply those and make them better and even most able for use. When you're ready, please release that plug-in on the WordPress repo so that all other people can benefit from it. So let's jump into the code. I have created a small folder in my plugins folder, and I'm going to just drop it in my editor, and it's actually called "noob payment for WooCommerce", and that's what I will call my file so I'll just, notice I don't just say WooCommerce noob payment because there are actually restrictions and how you use this name which is WooCommerce because it's trademarked. So the first thing that I'm going to do here is actually open up PHP, and then I'll start my plugin, I have a little snippet that helps me start up these plugins, and so I'll call it "noob payment for WooCommerce", and then I'll add my author link which for now is just that, so now we are ready to actually jump in. So I'll save this and then I'll just go to my plugins section and then just activate it, then we can start seeing the difference of what's happened inside our plugin. So I'll just activate noob payment. Now first things first, the payment gateway system that you see is actually an extension of the Woo settings API, if you want to see this you'd need to come to WooCommerce and then just look at the developer section, that is WooCommerce for developers, then you would look up the payment gateways, so you look up something like custom payment gateways, and then you'd go to the payment gateway API, they showcase how you can start to build this, however it's a little bit complex, that's why I just want to break it down and give you a live demo. But when you go to the core gateways for example the cash on delivery that we see, you find out that your own class of the payment gateway is going to just be an extension of the Woo settings API. After setting up for our plug-in what we are going to do next is actually just activate our plug-in and we are good to go. So the first thing that we can do is to check if in our active plugins we have WooCommerce installed, for example right now I actually don't have WooCommerce installed actively, it's not activated, so we would check to see if that is available so that we end up not failing in the whole process. So we'll do an if statement and then when that passes, then we run some code, so we'll say if not in array, because all our installed plugins are actually saved in an array of form, so we're going to look for if in that array woocommerce/woocommerce.php is actually not in there, apply some filters. So we'll apply filters, which is a WordPress function, it actually requires for us to add a tag, and for us that tag is going to be "active plugins" so we are looking for the active_plugins. Now for the value we need to add something that says get the options, and we are getting the active plugins. So we are getting "get_options" sorry this is an underscore, so get options is a function, and then close it up of course, and we are going to look for active plugins. So we are looking for that. If this is not available for us, then what we are going to do is we're going to return, we will not allow the plug-in to actually process. We're going to start building our class for the gateway, but we'll have to check if some particular classes of WooCommerce actually exist. So the first thing that we're going to do is we're going to add an action, and this add action we are going to look for one thing, so we're going to hook into the plugins loaded, so if our plugins are loaded, then we're going to look for a function, and that function we were going to call "noob" to initialize the noob payment, then we just need to add a priority of 11, we're not passing any other arguments so that's good enough. So what we're going to do is create a function and call it "noob payment init" then we're going to check for our class and then instantiate that class. So we're going to look for if the class exists, and what class are we looking for? We are looking for the payment gateway class, so we're looking for the "WC payment gateway", and that's what we are looking for, so if that class exists, then we're going to do something, and that means we're going to create our new class, and it's going to be extending so it will extend, it extends WC pay payment gateway, it extends that class and then now we are going to begin to run it. So we save this and you won't see anything active per se, but we'll just test our plugin to see if it's still active. It should be get option, get option is actually running into our database to check, so make a correction, that's why it's always good to actually test. So I'm going to activate this, still active I'll just activate the WooCommerce to allow that to go through so that we have our function. So after extending that class the next thing we are going to do is we're going to start working on our gateway and we need to just instruct for it to have our construct method. Now while we are extending the classes, you're going to realize we're now working in what we call object-oriented programming. So the first thing we're going to do is add a public function that is accessible by all, and just say we're going to construct. So we add our construct method, and in this method we're just required to say since we are extending the payment gateway, some of these variables that we are going to be accessing are already there so we're going to get the ID simply which is the ID of the gateway, and the ID is going to be "noob payment" for now that will be good enough, semicolon to terminate it, we're going to get, the next thing that we need to do is we can add an icon; that is the small logo that you usually see when you're out on the checkout, and you're paying and you see a small icon right at the bottom that says use this payment to pay. So what we do is we apply apply filters to, it so apply filters, we'll use the "woocommerce_noob_icon" So the next thing that we need to do is pass in the value, so it will be stored in the plug-in somewhere, like we'll do plugins _url, put a comma there then append maybe assets, and then call it "icon.png". So we'll have to add that in our assets otherwise that will end up failing. And then we need to do it this, we're going to append has fields, now basically this is going to allow us to add fields inside our WooCommerce, for example when we come here we'll be able to, when we click setup we we shall be able to see those fields that we fill in for the details, maybe it's an API key we need to import, and so on, so this method is about that. So for now we'll say it's false and then we tap another method which is this, and then we're going to append the method title, so the method title for now we shall allow it to be translatable, and the method title we're going to call it noob payment. And we shall see where that applies physically, and for now we shall just give it a WC noob, oh our text domain is actually here "noob pay woo", so we don't need to create another one. The other thing that we need to do is we actually need to tap the this, and then we shall say method description, and the description we are going to have we are also going to have it translatable, and then what I'll do is just copy what we have here, and just say noob local payment system, that's a method description. So we're going to tap the other method that's open for us in the extension is the init form fields, and that's, we're going to add that inside our own class. So if I copy this, I'm going to add that fields, so copy this and then give it this is the new name for this, I'll leave this empty so that it doesn't fail, we need that method that's where we're going to describe our fields, and then I'll duplicate this and add another field that says init the settings, and that's going to allow us to actually initialize our settings. So we need to save this, give this a refresh, nothing is broken so we are still good. After adding that now we are going start adding some contents to our init form fields, and those are the fields that we are going to see when we come to add content to our fields. So what we're going to do here first of all we want to enable it, so we're going to say this class form fields that's what we need to tap the function, we're going to apply filters, that means we are going to basically just edit, so we add in a filter and we'll say this is going to be the woo noob pay fields, it can be anything because at one point we might want to tap into that and edit it. And we're going to have an array of actually fields that we're going to add, I'll terminate this with a semicolon so that I don't forget, and then the first thing we're going to do is we're going to say is it enabled, and then we'll add another array to this, so we're basically working with a multi-dimensional array, and then of course a coma at the end since we're going to add more fields, and then we'll add a title to this and say is it enabled enabled or disabled, so we'll allow this to also be translatable, so let me just copy this and paste it here, and then we shall say is it enabled, enable or disable. So if I save this, this is an error, so if I save this and come back and reload here, we don't see anything happen because we haven't yet announced to WooCommerce that we actually have a new payment gateway that's coming. So I'm actually going to do that right now so that we can start seeing some of the changes, so we're going to create a little function here and it's going to be a filter hook, and the hook we are jumping into is actually called WooCommerce payment gateways, we are actually going to get, we're going to add a function now, and we're going to call it noob payment gateway, which is a different function, so we'll delete, but let's make this a little more descriptive, so we add to woo the noob payment gateway, so this is a little more descriptive, so let's jump right down, so give it a function, add this, and then go for that function. And what we're going to do, this particular filter, remember filters just edit they don't write any new content, so it comes with a gateways argument, so this argument needs to be picked, and we need to also return it at the end of the day. So we pick it and then we return it, so gateways. If we don't do anything to it our program will still run, but we can also edit it and say we're getting the gateways array, we are going to append a new item to it. So terminate this, we're going to get our class that we've extended which is WC noob pay, and we are going to throw it in here. That's the name of the class, and let's see what happens when we reload here. You'll actually see that now we have our noob payment coming into our commerce which is our new field, we have a little bit of error here, and it's an error coming from when we were describing our plugin, so this is a function sorry, and then we're also will make some corrections to our noob payment, which is this here, we can see that we can actually enable it or disable it because of this field that we've added that is enabled, and then we can save changes to have it available, we see the description we added noob payment local content payment systems right here, and then we can actually, when we go to manage we see that it is saying yes, because we checked it before, and that's what this is doing, if we go back and we uncheck it and save, and we actually go to the setup, you'll see that it says no. And that means we are already a step ahead. So the next thing we're going to do is add a proper title, add a proper description, add instructions to our content area here. So we have have enabled this, and what we're going to do is we're going to make it better. So we're going to change its type, instead of having it as a normal field, we're actually going to have it as a checkbox, so I'll save this, reload, and we actually have it as a checkbox, that is much better you never know how people spell, but they never get this wrong. So WooCommerce has made a very good way of applying forms in the plug-in, so we just tap into that and we use it. We'll add a label, and the label we are going to also have it translatable for now, since we plan to use this plug-in in different places, so the label will be quite simple, we can just say enable or disable noob payments, and we are seeing that we're actually just working on one field, so next time you'll see this makes it easy, as we apply the other fields we will see that working out well. And we'll default it to let the shop owner activate this field, so we'll default it to "no". Save this, so everything works out well, you see this noob local payments which is here, we can always adjust it to make it a little more descriptive and better. The next thing that we need to do is I'll just duplicate this and then go into the title, in the title field we want to have a proper title, so we give it noob payments gateway, and then the title, the type is a text, we want to add and say add a new title, so we have a title here, in this place we won't have a label, we'll have a description, and the description will say add a new title for the noob payments gateway. So we have the description ready, default; we shall just add it as something that's translated already, we'll just copy this as the default, and then we'll add a description tooltip and say desc_tip and then we'll just add that as true and save. So let's see what that means, when we come here we have the noob payments gateway which is our title, and it's having that a default, this is the default text in there, and then we can add a title, now this is what, add a title for the noob pavements getaway that customers will see when they are in the checkout page. So essentially that's what this title is for, it's actually going to go to the end. We can't see this description but when we come here to this tooltip we're able to see what we are talking about, so that's a beauty of adding this description tooltip as true and then adding this description. So I can actually move this down so that they match together, and they make better sense that way in my code. So we have a title, we can have also the description, so we'll go for the description, we already saw a default description when we were at the payments place which is, this but as we set up we can just change all that away. So what we will do is we have the title, and we'll just say this description, leave it translatable, the next thing that we need to do is add a type, the type is a text area because it might be really long, description is given here, we'll leave the tooltip active, and then we shall just add a default "please remit your payment to the shop to allow for the delivery to be made", we can change this word the shop to whatever our shop name will be, so when we reload this here we actually see that it is available, the tooltip is given, and the users of the plugin can always come and actually make changes to this and they'll actually save. So we've done that description, if we need to have any special instructions, we can also add this, so instructions is the last argument that's available, and we can just say, so we have the instructions, we have a title, the title will be instructions, make it short, instructions it will be a text area, we'll allow description tooltip to be true, we'll have a description, and then in the description, we'll leave this empty, the description here; instructions that will be added to the Thank You page and order email. So you might want your clients to add a special message to the order email or to the Thank You page, and you make provision for this right here. So yeah we're good to go. If you wanted to add add a default you can say default instructions, and if we come back here and reload, they are that, nothing more. So this is one of the first steps we take into making our payment gateway. Now after doing this, we've added our form fields here, we also need to initialize our settings, and after doing that we're going to go for the next function that is very important in the WooCommerce payment gateway, and that is the process payment function. It's expected and we shall be adding that to our WooCommerce. So now let's actually work on our process payment function. So we're going to have a public function, and we're going to get the process_payments method and this is the one that actually deals with everything about the payments in terms of the open-end. So we're going to get the order ID, which is passed as an argument, and then when we get that order ID, in this case is going to be what we use, so we use WC get order, and then we pass in the order ID. So our process payments method actually offers us the order ID, we'll need this order ID to actually get which order we're talking about. This function WC get order requires to have the order ID, it will give us the kind of order that we are actually going to work with, which order are we going to pay for at the end of the day. So we get the order ID, the next thing we need to do is now get the order status, since we have the order now we just need to get its status, so we can actually append a method to that, which is update status, so we can immediately update the status of that order by saying let it go to on hold, and what we're going to do is I'll copy this translated string here, now when it's on hold we are going to throw and say awaiting noob payment, so immediately a customer orders, that order is actually sent to the on hold status inside, you've seen that when you got your orders for example I have some orders here and they're saying processing. So we have a number of statuses in our orders we have processing, we have on hold, we have completed, we have cancelled, refunded, you can also create your own methods available, so we can even just change this to pending payment, so that it has the right status altogether. Let's go back to our payment gateway, then we need to do this, we need to check on the stock and say we need to reduce the stock levels, the order stock depending on how much you bought with that order, we need to change the order stock, meaning we reduce it for the next customer so that we don't have a conflict with someone saying I booked my order and I paid for it and yet I don't have it, and someone will say ah sorry we ran out of stock because another client paid before you did. So we want to manage those issues with orders and the stock. Now we are going to go to the WooCommerce, get the general WooCommerce and say we're going to go to the cart and we're going to empty the cart, so we empty the cart after that payment, and then at the end of the day we are going to return a thank you, so we return an array and say thank you for purchasing blah blah blah... But of course in this array we have the result which is going to be the success, so when it is a success then we have a message that we bring and then we redirect, so we redirect the person to this class, and we get the get return URL, and that's the function we have and then we'll pass in the order. The reason I leave this open is because when we come to our plugins in WooCommerce and go to settings, we actually have a couple of things here that are advanced. So we have the different pages that are set as checkout and we don't want to conflict with how this actually works if the customer sets it up. Or if they use the filter of changing the return URL, we want to leave that as open as possible inside our payment gateway. Now you realize there are so many steps that are missing here, but we know that after we get our order we change the update status, we reorder the stock then we empty the cart, and then return a success. But in between here, we are able to add our own payment gateway by tapping into maybe an API, and adding a different function. So for example before we reduce the order, can we maybe tap into a function that clear payment with API and then do what is necessary to clear, and if this comes out right, if this passes in this particular function, so we'll have a public function, could even be private if we need to but we'll leave it as public, so clear with payment API, and then when that passes then we can reduce the order then clear they cart and then do what is needed. So we can add our own methods in here, and that will allow us to do whatever we need to do. That's how we create our payment gateway. So what I'm going to do now is actually go back and activate our payment, I'm going to go back to our settings and then I'm going to activate the noob payments gateway, let's try to go and make some orders. So cart, view cart, run to the checkout, fill in our pieces, we don't have our payment gateway, okay. So let's set that as on as managed that is saved, and let's come back to our checkout, reload this, and we'll now see that we have our payment which is noob. It has a broken image here which we set to go into the plugins folder and it's expected to be in there so we'll need to correct this very well, of course this expects an argument, that I didn't put, so let's correct this, then file and then take away this concatenation mark, let's reload this here, it is still broken, that is fine, but at least we know that it's going in the right plugin in the assets folder and the icon, so we can always have that here, so we'll open an assets folder, and then I'll jump into this and then I'll just drop this, and then rename this and call it icon.png, let's see So let's see how this works, if I reload you can see we have our small icon there, it's working out well, the only thing that we don't have here is the name of our plugin, which is the payment. So wondering what's happening. So let's save this, reload, it's not working, because we have not saved these variables, so what we're going to do is just come back here, and what we're going to do is we're going to get this class, then get the title, we're going to save it in our database and say this-get options, so we're getting this from the database in WooCommerce and we're going to get the title and pass it in. Title, I'll duplicate this for the different pieces, so have a title, we have a description, in order to clear up our issue that we are having we need to add an action which is going to update our payment gateway, so we come back to our construct function here which automatically runs when the class is executed, so we're going to add an action that's going to take the hook that we are tapping into, and the hook is "WooCommerce update options gateways" so the action is WooCommerce update options payment gateways, and then the next thing we do is actually we append to with the ID, so we look for the this, and then we get the ID, this ID which we saved here as noob payment, and then the next thing that we do is we add the array, which is the last, we're basically saying this is the is the method we want you to run, and we say this, it is a method inside this class and we shall say process admin options and save that. So we're going to come back here and try to make some changes to noob payment, delivery to be made, default instructions here, let's save this and we actually see that all our settings are actually saved. And if we come back to our checkout and reload we'll see that we now have our title showing up noob payments, we have our instructions showing up, and when we click order it says error processing out, after adding that action to allow us save our settings here, we need to add one more action that will allow us to say thank you in a proper way, so we'll add an action and that hook is the WooCommerce thank you and it also takes the same ID that we have here, so we're going to basically just append this to our thank you to make that, so it takes in the WooCommerce thank you then append the ID which is our noob payment, and then after the comma we're going to add the array to signify that we want to tap into our method here and say this, and then we shall add our method which is Thank You page, thank you _page, so this is the method that now we have to create, so let's go down where we create our functions and we'll just say public function, paste it here and then do some magic with it. So what we're going to do with our thank you function is we're going to say if, which is a conditioner then we will do something, so if this instructions, if it is true, if the instructions are true then what we're going to do is we're going to echo with WP auto paragraphs, and then we shall just say this instructions, then we'll pass them in, so let's try to save these changes and then go to try our check out then place the order, I think there's something wrong with our status so I'll just do this on hold and save this, let's try to place our order again after refreshing. We can now use this to pay for our goods and allow our customers to do so much more. So thank you for watching, I hope you enjoyed this video, if you have any questions please leave them in the comments. I'll just throw this code up on github and then you can follow along, and don't forget to like the video if you liked it, and then subscribe if you haven't considered yet. Cheers!