How to Create a WooCommerce Payment Gateway Plugin?

How to Create a WooCommerce Payment Gateway Plugin?

Do you want to create your own custom woocommerce payment gateway plugin that allows you to accept your payments? Then you are at the right place. In this tutorial, we will learn how we can create woocommerce payment gateway and you add this code snippet into the functions.php file or you can create a custom plugin.

As you know woocommerce is a very popular eCommerce platform to build an online store. You can build an eCommerce website with WordPress and woocommerce, and can sell your products online or whatever you want to sell.

There are many payment gateway plugins that you can install and integrate with woocommerce plugin. They all work fine and accept payment from customers.

But something is that you want to improve or enhance the functionality, so it would be a great step if you are thinking to create a custom woocommerce payment gateway. So in this tutorial, I will briefly explain to you step by step how you can create a woocommerce payment gateway plugin by extending the woocommerce payment class.

So let’s start to build the woocommerce payment gateway plugin.

Create WooCommerce Payment Gateway Plugin

As I said you can add the code snippet of this tutorial directly in your child theme’s functions.php file or you can create a plugin using the code snippet.

So in this tutorial, we are going to create a custom new plugin from scratch and integrate it with woocommerce to accept payments from your customers.

WooComemrce provides us many useful classes that we can use to enhance the functionality. So we will use the woocommerce class that is WC_Payment_Gateway.

WC_Payment_Gateway Class

The WC_Payment_Gateway class gives us the skeleton of the payment class and its functions. And we can use it for different purposes like if we want to get order totals, title, description.

You can also specify the custom thank you page feature that allows customers to land on a specific page after order successfully placed. So we will extend this class to build a custom payment gateway.

Every woocommerce payment gateway plugin has this class extended to use their functions and built their own custom plugin.

So, Let’s begin with creating a simple plugin and step-by-step guide to create a custom woocommerce payment gateway.

1. Creating a Plugin with Basic Structure

First, we create a simple WordPress plugin that has a basic structure of comments lines which tells WordPress this is a plugin.

To create a WordPress plugin you just need to create a file and add code snippets in that file. You can make separate folders for each asset and link them into the main file.

So, If you think your plugin will have a single file then create a new file inside the /plugins folder. But I would recommend to you create a new separate folder for the plugin and then create a new file inside that folder. Make sure folder and file name should be the same as follow ybc-gateway/ybc-gateway.php.

See the following example code of the plugin.

Add the above code in the ybc-gateway.php file and save it. Now you will see a new plugin showing in the plugin list in your admin area. You can activate it but nothing will happen.

WooCommerce Payment Gateway Plugin Activate

2. Build Custom Payment Class

Now, we will build our own payment class by extending the WC_Payment_Gateway class. So we will create a function and will use the plugins_loaded hook to load that function which has a payment gateway class.

Before loading the payment gateway class, we have to ensure that woocommerce plugin is active. If it is not active then it will return the fatal error because our plugin will not find the WC_Payment_Gateway core class of woocommerce.

To check the woocommerce plugin is active or not then you have to add the following code line at the beginning of the plugin code.

Now we can extend the woocommerce payment class in our plugin to build a payment gateway. Use the following code to load the custom payment class.

As you can see in the above code we created the WC_YBC_Gateway class and extend the WC_Payment_Gateway class. Now your all code will be inside this class. There are in-built core functions inside this class which we will cover later in this tutorial. You can see the full structure of woocommerce payment gateway class here.

3. Construct the Gateway Class

Now we will make a __construct() function to define the class properties like method name, gateway ID, description, etc. And all the plugin settings fields that we need in the backend. It is required that the __construct() function have these variables to define the properties value.

See the following required properties for the payment gateway.

  • $this->id
  • $this->icon
  • $this->has_fields
  • $this->method_title
  • $this->method_description

We have to define these properties’ values in the __construct() function. Have a look at the following code to assign the properties values and load the plugin setting fields.

As you can see in the above code, we define the gateway required variables and also define the payment gateway load setting fields and then initialize the setting fields.

We also defined an action hook to save the value of all setting fields and second action to load the custom javascript to get a token. We will cover this later in this tutorial.

4. Initialize the Form Fields

After constructing the class properties and plugin setting fields, now we will make backend setting fields to save the values in the backend.

We will go with enabled/disabled, title, description, and keys fields. But you can make these fields according to your requirements and depending on the payment processor that you will use.

Use the following code snippet to create plugin setting fields at the backend.

After adding both the above functions __construct() and init_form_fields(), you will see your custom payment method showing in the Payment setting tab in the woocommerce settings. Before checking it you have to register the custom payment gateway class see step 8.

See the following image of the listed custom woocommerce payment method. And you will see all setting fields working and saving the values respectively.

WooCommerce Payment Gateway List

You can see the plugin setting fields inside this payment gateway, so click on it to see the fields and also check with input values to save.

5. Initialize Payment Form Fields

Let’s make payment method fields that will accept the payment from customers through the credit card form on the checkout page.

So we will make a credit card form that has the credit card number, expiry date, and CVC form fields. We will also validate these fields in the next step.

This step is only for those who want to process the payment on the checkout page. If you want to process the payment on a payment processor’s website like PayPal then you can skip this step.

Now if you check on your checkout page then you will see the credit card form like the following image. But it will not work yet because we also have to add a function to process the payment and get a token.

WooCommerce Payment Gateway Checkout Fields

You can see our custom credit card payment method is active and showing on the checkout page. There will be a list of all active payment methods. If you want to hide some payment method based on the conditions then check this tutorial.

6. Enqueue Custom Payment Scripts

If you see above in the __construct() function of 3rd step, we already added an action hook that will load our custom javascript code.

We will enqueue the payment processor javascript code that will provide us a token to process the payment. We will also enqueue our custom javascript code that will get a token from the processor.

And see the following javascript code snippet to play around with the payment processor token js file and get a token at our end.

token-script.js

Now we are ready to process the payments. So let’s have a look next step for a code example of payment processing when the user clicks on the place order button on the checkout page.

7. Validate Fields and Process the Payments

In this step, we will take care of payment if the customer successfully has paid or not. And then change the order status based on the response.

But before processing the payment, we will validate our checkout form fields. If the required form fields are blank then not allowed to process the payment.

Validate Checkout Fields

We will check the field that is required to process the payment. It is depending on the payment processor what fields they need to process the payment.

process_payment( $order_id )

This file will handle all the transactions and return the response based on the payment status. If payment was successful then it will return the success message and on the failed payment return failed response.

The payment process by process_payment($order_id) function has an order id and the default form field have the following fields are credit card number, card CVC, and card expiry.

Explanation on Capture Payment and Set the Order Stauts

In the above code of processing payment, we will look over the payments. We will capture the payments with API and based on the response will set the order status.

When you get the order object using the wc_get_order() function then you can use the methods to get the order details. Like if you want to get billing first name, last name, email, country, address then use these methods get_billing_first_name(), get_billing_last_name(), get_billing_email(), get_billing_country(), and get_billing_address1() respectively.

There are more methods related to shipping and billing details, which you can find in the includes/class-wc-order.php file in woocommerce plugin. Or you can check the tutorial on how to get order details?

We process the payments on our website checkout page and use the wp_remote_post() function with the gateway processor endpoint to get the response. But if you want the customer to process the payment on the gateway website then use the add_query_arg() function instead.

If the response returns the responseCode as Approved then we completed the order details using the payment_complete() function.

You can add the customer note and private note to order using the add_order_note() function. The customer note will appear on the customer’s dashboard and the private note will be shown on the order edit page.

8. Register Custom WooCommerce Payment Gateway

This is the last step to register the payment gateway and it will appear in the Payment setting tab in woocommerce settings following WooCommerce > Settings > Payments.

We will use the woocommerce_payment_gateways filter hook to register our custom gateway class. This filter returns all available gateways array, so we can append our custom gateway into this array and then return all gateways.

See the following code to register woocommerce custom payment gateway.

9. Payment Gateway Webhooks

Let’s say you want a payment gateway webhook. What I mean is that suppose you don’t let customers process the payment on your website. When they click on the payment button they will redirect to the gateway website.

So when the payment is completed on their website and we want to know the status of payment then here we need to add a webhook. We will set the specific URL on the gateway setting page and when the payment is completed the gateway website sends us a $_GET request. This request has all the required detail about the order payment.

So first add the action hook in __construct() function as follows.

Then create a webhook function inside the WC_YBC_Gateway class and in this function you can use the $_GET request.

That’s it!!!

Conclusion

So in this tutorial, you learned about how to create woocommerce payment gateway plugin. First, we created construct properties and plugin settings then we created the plugin setting fields to store the value in a database.

We also made a credit card form for payment and validate the fields before processing the payment and finally, we get a response and change the status of the order according to the response.

Skip step 5 and step 6 if you want to process the payment on the gateway website. You don’t need to create the payment field. And also use add_query_arg() function in the payment process function instead of wp_remote_post().

As you see it’s not difficult to create the custom payment gateway and integrate it with woocommerce. You just have the basic knowledge of plugin creation and action/hooks.

You May Also Like

About the Author: Aman Mehra

Hey! I'm Aman Mehra and I'm a full-stack developer and have 5+ years of experience. I love coding and help to people with this blog.

Leave a Reply

Your email address will not be published. Required fields are marked *