Create a Custom Payment Method in OpenCart: Part 3

If you've been following along with this series, you should be familiar with the kind of file structure we set up for our custom payment method in the back-end. If you haven't gone through the earlier parts of this series, I strongly recommend that you read them before proceeding with this one.

We'll use a similar kind of file setup for the front-end section as well. 

Controller Setup

Go ahead and create the controller file at catalog/controller/payment/custom.php. Paste the following contents in the newly created controller file custom.php.

As you can see, there are two different methods. The index method will be responsible for setting up the data when the form is submitted to the third party payment gateway, and the callback method is used to handle the response data from the payment gateway. Having said that, you can define more methods if it's required by your payment gateway. In this example we've kept the flow as simple as possible.

Let's go through each section in detail. We'll start with the index method.

First, we've loaded the language file and set the value of the Confirm button. We've also set up the action attribute which will be used by the payment submission form. You should change this as per your payment gateway.

Next, we've loaded the order information from the user's active session.

If order information is available, we'll go ahead and set up the data for the hidden variables which will be used to submit the form to the payment gateway URL. If you follow the code closely, you'll notice that we've also used our custom parameters, text_config_one and text_config_two, which we set up in the admin configuration form in the previous part of this series.

The other important variable to note here is callbackurl, which holds the URL used by the payment gateway to redirect the user back to our store after the payment process. And yes, looking at the URL payment/custom/callback should indicate that it will call the callback method, as we'll see in the moment.

Finally, we assign our custom template file custom.tpl and render the view.

Let's review the code of the callback method. This method will be called when the user comes back to the store from the payment gateway site.

First, we check if the orderid variable is available or not before proceeding further. If it's not available, we simply stop further processing.

Next, we load the order information from the database. And finally, we'll check if we've got the success indicator from the payment gateway response. If it's so, we'll go ahead and update the order status information accordingly.

That's the controller setup. Straightforward, isn't it?

Conventional Model

As you probably know, OpenCart has its own set of conventions and standards for dealing with the inner workings of the store. Such is the case with the model setup for the payment method detection. You just set it up as per the conventions, and it will be picked up automatically. 

Go ahead and create the model file at catalog/model/payment/custom.php. Paste the following contents in the newly created model file custom.php.

This class will be used by OpenCart when listing the active payment methods during the checkout process. During this process, OpenCart gathers the list of active payment methods from the back-end, and for each method it'll check if the appropriate model class is available or not. The payment method will be only listed if an associated model class is available.

The important thing in this setup is the value of the code variable. In our case, we've defined it to custom, which means that when you select the payment method and press Continue, it will call the payment/custom URL internally, which eventually sets up the form for our payment gateway.

In short, we can say that it's a mandatory file for the detection and proper working of the payment method in the front-end.

Language and Template Files

Now, we just need to create language and view files. Go ahead and create the language file at catalog/language/english/payment/custom.php. Paste the following contents in the newly created language file custom.php.

Fairly easy to understand: we've just set up the labels which will be used in the front‑end during checkout.

Go ahead and create the template file at catalog/view/theme/default/template/payment/custom.tpl. Paste the following contents in the newly created template file custom.tpl.

As you've probably guessed, this is the form that will be submitted when a user clicks on the Confirm Order button. We've just set up the hidden variables and their values which were earlier defined in the index method of the controller. 

Let's see how things look on the front-end:

Front-end Checkout View

Let's quickly go through the overall flow:

  • First, you must set up the model file for your payment method so that it can be listed in the Step 5: Payment Method tab.
  • Next, when a user selects Custom Payment Method in the fifth tab and clicks on the Continue button, OpenCart internally calls the payment/custom URL, which calls the index method eventually and renders the custom.tpl file in the sixth tab.
  • Finally, when a user clicks on the Confirm Order button, the form will be submitted and the user is taken to the payment gateway site where the payment process begins. Once the payment process is completed, the user will be redirected back to our site, thanks to the callbackurl hidden variable. Of course, the order status will be updated as a part of the callback method if things have operated as expected.

Conclusion

In this series, I've explained how to set up almost any payment method by creating your own payment method module. I hope you've enjoyed this series and learned something useful. 

It's always fun creating custom stuff for any framework, isn't it? Remember you can always provide comments and questions using the comment form below. 

Tags:

Comments

Related Articles