When you are assigned to do a webshop project where you need to implement a payment gateway on your own for the very first time, along with using an eCommerce platform, you may start to panic. But soon you realize that the hardest part is finding a quiet place in the office to focus on reading the documentation properly. For anyone who needs to fill some voids to make a complete webshop, I hope this post will be right for you.

In our company, in frontend web dev we use Nuxt framework for Vue.js. WordPress serves us as a headless backend, and to build this specific webshop we decided to give a shot to eCommerce plugin WooCommerce. As a payment gateway our customer chose CorvusPay.

In general, my tasks for this project were:

• build UI
• set up WordPress and WooCommerce, add the products data
• get WooCommerce data through REST API
• build shop functionalities
• process payments with Corvus Pay
• get orders to WooCommerce

Integrating CorvusPay payment gateway

In this post I focused on implementing payment gateway and getting orders to backend.
The whole process is pretty comprehensive and describing it all would take ages, so I rather choose to write about some obstacles, give some advice and point out things to pay more attention to. Some things may seem too obvious, but trust me, they can cause the worst headaches. I’ll go through my project and give you a heads up for problems I stumbled upon.

In CorvusPay Merchant portal:

• When you register on the CorvusPay Merchant portal, you will need to fill in some company info. Be especially careful with entering the store URL domain, success and cancel URLs. Write HTTP, HTTPS, www and slashes right and be consistent. If you somewhere in the process strip www from URL and somewhere you don’t, you may have some problems, especially because links with and without "www" don't share the same local storage.
• Choose GET http postback method.

In code:

• As the order number must be unique for every order sent on checkout, you need to find a way to generate it. You can write some functions that return unique numbers, or you can go the very easy way using new Date().getTime(), a function that returns current time in milliseconds. There is a very, very, very small chance that two customers will hit the buy button in the exact same millisecond, so I went with that.

• Don’t be surprised if nothing happens when you change email language in the Merchant portal. The language parameter you include in the POST method is the language the sent emails will be written in. Even if you choose a different language in the CorvusPay Merchant portal, the one in the POST method will win.

• Amount parameter must have a decimal point, not a comma, and have two decimal digits.

• In signature, beware you include all mandatory parameters, sorted alphabetically and concatenated without separators. POST requests must be signed using HMAC-SHA256. To do that, I installed vue-criptojs package. Signature was then created as simple as: const signature = this.CryptoJS.HmacSHA256(parameters, this.corvusSecretKey).

• You can include cardholder data in signature, but you don't have to.

• When you go live don’t forget to change Store ID, Secret key and checkout URL to wallet.corvuspay.com/checkout.

If you carefully go through documentation and you do above said things right, your buyer will now be successfully redirected to the CorvusPay checkout page, where they will see the total amount, fill in credit card data and make a payment. When buyers complete this step they will be redirected to the success URL provided by you in the CorvusPay Merchant portal.
At the same time payment/order gets to Merchant portal for the company owner to see, email is sent to the shop owner and to the customer. This could be the final step for some simple online purchase.

Sending orders to WooCommerce

But if you also have an eCommerce platform like WooCommerce in your project, your job here is far from over.
You need to find a way to send all the purchase data to WooCommerce if the payment is done correctly. Where do you start? You may notice the success page provides you with order data in the URL when landing on it, and we will use that.
Now go back to your code. In the same function where you are submitting data to Corvus checkout, also store in the browser's local storage all the needed order data you prepared for WooCommerce, along with the order number. The order number is mandatory because it will be used as an identifier. On your success page write a function that gets the order_number parameter from the URL. You can use this.$route.query.order_number. When you finally get the order number, perform the search for it in the local storage. If found, send belonging order data to WooCommerce with the POST method.

Conclusion

Building a webshop for the first time requires quite a bit of time and a lot of nerves. There are many dots you have to connect, and they all have to collaborate together well. But once you figure it all out, life gets much easier. At least until you get a more advanced task to implement next time.

Thank you for reading this! If you've found this interesting, consider leaving a ❤️, 🦄, and of course, share and comment your thoughts!

Lloyds is available for partnerships and open for new projects. If you want to know more about us, click here.
Also, don’t forget to follow us on Instagram and Facebook!