HUGO

New on Hugo: How to use Vex with personal apis and Custom Checkout methods

Hi I am new on Hugo and really like the concept. I want to build a small e-commerce site with Hugo and Vex (an e-commerce theme). But I want to customize the checkout parts removing credit card and adding a payment gateway of my country. I also want to use a personal API to validate checkouts so that things like js hacks cannot be done. So, how can I integrate these things on Vex?

For Hosting: Cloudflare Pages
For API: Cloudflare Workers

These questions are not really related to Hugo, since it is simply a static site generator.

You can use Hugo to generate the HTML of your storefront but since you need a custom payment gateway, you most likely need to validate the payments dynamically on the server side.

We cannot really help with these questions here.

Perhaps you would be better served if you used an e-commerce platform that already supports the required payment gateway.

Then how do I customize the required parts of the Checkout UI of the Vex theme? That’s a HUGO related question right?

I just need to customise the payment ui and make hugo inject some js codes.

It is a theme specific question.

The Vex theme uses Snipcart, (if I remember correctly). Perhaps the theme author can point you to the relevant templates that need to be overridden.

cc: @Mehedi

Hey @onedrawingperday
Thanks for mentioning me here. He created an issue in vex theme repo and I answered him . It seems that he is a beginner and has less idea about Hugo and how Hugo works . I suggested him learn hugo first and then start working with the themes. The solution is he looking for is not theme-oriented.

well I did get vex working with forestry and cf pages at this test link. Don’t know what more do I need to learn about hugo.

Also your answer was so not helpful. Don’t know why did you even tell me that. I didn’t wanted to commit on your theme so I don’t know why I need to learn themes. I simply want to edit the cart part of the theme.

The link to the unhelpful conversation:

I will help you … wait … may be not … in fact not.

THIS is a not helpful response.

But all the other ones are helpful if you try to read them open minded because you request help on a subject you don’t know.

The Requesting Help topic contains useful tips about learning Hugo. Please read it.

However also note that your questions are more complex than you may realise.
It is not trivial to connect a payment gateway with a static site without doing it server side.

This forum is not meant for general web development questions.

Please try searching other channels to find answers to your questions regarding adding payment processing to websites. Also the payment gateway you want to use should provide documentation for developers who want to use it.

Regarding the Vex theme you basically need to override the templates -partials etc.- that contain the code for the Snipcart checkout UI with what you wish.

To override a template you need to replicate its directory PATH under the root of your project.

For example /themes/vex-hugo/layouts/partials/footer.html can be overriden at
/<your-project-directory>/layouts/partials/footer.html

This topic is kind of OT so I am closing it.
Thank you for the understanding.

2 Likes