Render a designed HTML page for payment successful / errors.

Question

Render a designed HTML page for payment successful / errors.

Closed this issue a year ago · 7 comments

Context: along with the bot itself we run a simple web server that handles communication with a payment gateway, most of the bot's premiums are purchased though this way only.

As you can see https://github.com/quotientbot/Quotient-Bot/blob/62ac73accd2461f3af1582143fac40bf1c4a9319/src/server/app/payment.py#L92 , we return json responses to the user be it a success event or any error, while it might be cool for the devs but not a lot of users find it creative.

We need to write some HTML , design it with some css and render the file for errors & success events in https://github.com/quotientbot/Quotient-Bot/blob/main/src/server/app/payment.py

the HTML file should be named response.html & should be inside https://github.com/quotientbot/Quotient-Bot/tree/main/src/server/templates .

what is the task?

create a file named response.html inside https://github.com/quotientbot/Quotient-Bot/tree/main/src/server/templates.
Use https://github.com/quotientbot/Quotient-Bot/blob/62ac73accd2461f3af1582143fac40bf1c4a9319/src/server/app/payment.py#L51 & https://github.com/quotientbot/Quotient-Bot/blob/main/src/server/templates/payu.html to understand how to render a HTML file & how to pass down data into into the file. (Jinja2 templating, google it.)
The design is not definite, you are free to use your own creativity. It is not mandatory but you are free to match the design language to our dashboard https://quotientbot.xyz/.
The page should just show the message like error occurred, payment was successful, etc.
Don't make extra file for css, keep it inside response.html only.
Keep in mind that the page will be opened on various screens (mobile, pc) so design it accordingly.

Note that this issue will be assigned to 2-3 contributors and the best PR will be merged, you don't need to do something fancy, simple is sexy. Do share screenshots of the changes in your PRs.

Answer 1 · 2023-06-04T20:54:18.000Z

If you are someone looking to contribute to this project, I just created a new server to talk about issues https://discord.gg/QEdaKRDnJs

Answer 2 · 2023-06-05T03:24:35.000Z

I can add a Error Page with a text place where you can add your response similarly a success page as well is that ok?

Answer 3 · 2023-06-05T07:05:01.000Z

Hello @basic-programmer-python , thanks for your interest!
as clearly mentioned in issue itself, there should be only one file i.e. response.html, there won't be separate files for error and success message.

You are given the liberty to design them according to you.

Answer 4 · 2023-06-05T07:58:39.000Z

Hey, I have a small question. The response.html will only have success response or failure response as well. If it'll have failure response then how will if else statement work?

Answer 5 · 2023-06-05T08:42:27.000Z

Hello @agamswaroop619 !
See that is why I mentioned Jinja2 , its a template engine, really easy to understand, google about it.

Here's how you use can use conditionals into the HTML: https://linuxhint.com/if-statement-jinja2/
Also I mentioned the payu.html in the issue, you see how the data is being passed into the HTML Form, that is also Jinja2

Hope this helps.

Answer 6 · 2023-06-05T08:54:10.000Z

can I take it @deadaf
I mean can u assign it to me?

Answer 7 · 2023-06-05T08:58:57.000Z

Yes you can work on it @basic-programmer-python but as mentioned in the issue, 2-3 devs will independently work on the issue and the work will be reviewed on first come basis, if you are willing to work on the issue and believe that you can finish the task, start working on it and make a PR.
(as of now 2 others mentioned to me that they will work on this)