Eleutheria Pay - Open source donation platform

@jdaviescoates Added common currencies that have a lowest denomination that is 1/100 of the main denomination. The new demo is live.

~~I think my next thing is cleaning up the grid layout I have because the textbox and dropdown are obnoxiously large. I mean, it is certainly functional but could look better~~.

Version 0.2.0 has been released! I'm actually quite pleased with this. Could it be better? Certainly! But it works quite well for my purposes. Of course, feel free to request features here or by emailing me at atri.lahiji@lahijiapps.dev.

Technically external account creation should work on my gitlab so I am sure you could make issues there too.

jdaviescoates

@atrilahiji nice work! Although I can't actually reach it at present due to an issue with your certs

@jdaviescoates oh I changed the demo link but I can’t edit the OP anymore. Check out the link on my repo

jdaviescoates

@atrilahiji ah, I guess editing timeout options must've changed with the recent update.

I found your new demo at https://eleutheriapaydemo.atrilahiji.dev/ in the repo as you suggested

If I were you I wouldn't default the amount to the lowest amount either, I note everyone else seems to go in the middle somewhere.

e.g. https://opencollective.com/mutual-interest-media/donate

I also like prefer how they've designed the UI over what you've got so far (although, overall, really great work, thanks!)

I'd be intrigued to know what currency it displays when you go to that link? I note I can't choose, but I don't know if that's because the default has been set by the collective, or if it's worked out my location (I think probably the former)

@jdaviescoates ~~Euro~~ GBP seems to be the dafault. I can add back a currency default (with USD as the fallback if the default is not valid). Or I can try to be fancy and detect location and use USD or CAD as the fallback (probably USD its more widely used/known)

Also, I just now realize that there are button style radio-buttons for bootstrap which I missed by not scrolling down:
https://bootstrap-vue.org/docs/components/form-radio

I'll look into making these changes. I do agree it looks many times better.

jdaviescoates

@atrilahiji said in Eleutheria Pay - Open source donation platform:

GBP seems to be the dafault.

I think that's just because I've linked to collective that are UK based and have set that in their settings.

@jdaviescoates Pushed a change to make it look more like OpenCollective. There wont be a demo up yet as I want to have a few more things sorted (like a dedicated "other" button that reveals the textbox. Regular radiobuttons don't behave this way so I suspect I'd need to hack something together for this.

I've gotta say, I'm really liking the feedback

jdaviescoates

@atrilahiji said in Eleutheria Pay - Open source donation platform:

I've gotta say, I'm really liking the feedback

You are very welcome. Since I'm not a coder it's nice to be able contribute another way

@jdaviescoates Screen Shot 2020-11-05 at 1.13.04 PM.png

This is what it would look like (don't mind the lack of title. Its the frontend running locally without the backend so it cant get the info.

murgero

@atrilahiji If you are going with a dark theme, might I recommend the following colors for button highlights:

#375a7f
#444
#40739e
#353b48

Also, I'd checkout https://flatuicolors.com/ for some color palette ideas

@murgero Good idea! UX definitely isn't my specialty

murgero

@atrilahiji Always happy to put input in on an awesome project! If you need help with anything, let me know

@murgero

Landed on something like this for now:

My theme variables look like this at the moment:

:root {
    --bg-color: #ffffff;
    --text-color: #2c3e50;
    --button-color: #2980b9;
    --top-nav-color: #16a085;
}
[data-theme="dark"] {
    --bg-color: #2c3e50;
    --text-color: #ffffff;
    --button-color: #2980b9;
    --top-nav-color: #16a085;
}

All I am doing is setting the active button to 80% brightness at the moment. Turns out I have to try and re-do Bootstrap's active button styling when I try and add a new color variant. I would like other opinions on this as well. Of course all of this is going to be easily configurable via these css variables so we are just talking about defaults.

marcusquinn

Nice, you can prob set the amount field width to say 6-characters unless you're feeling very lucky!

@marcusquinn hahaha yeah I’m going to make that tiny

marcusquinn

TBH I'd make everything, except the logo, left-aligned too. Makes it easier to embed in an iframe and suite most common form styles.

marcusquinn

I realise this is for Stripe, and they are pretty good, but I'm also curious to try Fast at some point too, seems quite slick & friction-free:

@marcusquinn Normally I'd be inclined to agree, but because the only content is the form, I personally prefer centered. I am open to be swayed the other way if we get some more opinions.

As for Fast, I'll take a look. Definitely looks interesting

murgero

@marcusquinn

@marcusquinn said in Eleutheria Pay - Open source donation platform:

TBH I'd make everything, except the logo, left-aligned too. Makes it easier to embed in an iframe and suite most common form styles.

I don't agree with this - using responsive UI building tools, it would be better to center-align objects, but keep text left aligned where it makes sense.

@atrilahiji You should implement a plugin system so others of us can write integrations for other platforms as wanted.

Like I'd really like a PayPal and Bitcoin (Coinbase, BitPay, etc) integration.

murgero

@murgero In reply to the iframe / embed - there should be JS code that allows a simpler UI to be embedded into a website Something like <script src="someEmbed.js"></script> That will embed into the current page, a button at the bottom of the browser window that says something like "Support Me?" or whatever.

@murgero good idea! I’ll take a look at embed stuff. As for plugins, I’m definitely looking to split the payment processors out into a sort of plugin system. It’s going to require a lot of abstracting out the payment system specifics from the rest of the app. It’s going to be interesting to try this as plug-ins will have front end and back end components. At least Stripe does (frontend-> backend-> frontend)

I also welcome contributions if anyone wants. I’ll figure out if external accounts on my GitLab have the correct permissions and write up a contribution guide

@marcusquinn

FeelsBadMan. We'll have to wait.

Made a couple of updates. One of them was an endpoint that serves an SVG donation badge that can be embedded in websites or git readme files. I added it to my repo here if you wanna see:

https://git.lahijiapps.dev/atrilahiji/eleutheriapay

Also trying to figure out how to tweak the cloudron package to properly merge .env files and the styles.css file. Right now while updates work on cloudron, I have to manually add config changes to the .env file.

marcusquinn

@atrilahiji nice, left-align makes much more sense to me. I don't even know that I've every seen a centre-aligned form, constrained width to a max would make more sense, as the container would be centred, rather than the content. Good stuff.

murgero

@atrilahiji Cloudron wasn't made to update files that way, what you can do is use an updated start.sh to compare and then add new lines to .env.

murgero

@atrilahiji said in Eleutheria Pay - Open source donation platform:

Also trying to figure out how to tweak the cloudron package to properly merge .env files and the styles.css file. Right now while updates work on cloudron, I have to manually

Can I also make another suggestion? Can you add the option to detect dark mode enabled browsers (chrome, firefox, edge, etc all support this feature) so the site's dark mode toggle follows the users OS-determined settings?

https://stackoverflow.com/questions/50840168/how-to-detect-if-the-os-is-in-dark-mode-in-browsers

Once this project is more stable, I plan to use it as well for accepting donations.

@murgero already done. What it should be doing (I’ll verify again) is use your locastorage first. If it’s your first time visiting it will detect your system settings.

This means that if you manually toggle to light mode and come back, it will still be light and ignore your system preferences

@marcusquinn I will have to respectfully disagree with that one. That being said, the CSS is fully user customizable

marcusquinn

@atrilahiji No worries, just my POV, noting the above Fast screenshot and similar with Stripe, Paypal and every other checkout form I've ever seen.

@marcusquinn Something like this?
Screen Shot 2020-11-06 at 10.19.59 PM.png

@murgero @jdaviescoates opinions?

murgero

@atrilahiji That looks really good.

Thanks for the feedback guys. I pushed and deployed a new demo and I think I have the hand of hang of bootstrap breakpoints.

murgero

@atrilahiji Ya cert is borked

@murgero Oh the new demo link is https://eleutheriapaydemo.atrilahiji.dev/

I cant update the OP anymore (dunno why) but its updated on the repo.

jdaviescoates

@atrilahiji said in Eleutheria Pay - Open source donation platform:

I cant update the OP anymore (dunno why) but its updated on the repo.

I think when @Staff updated this NodeBB a load of default settings got changed, including making it so we can now no longer edit old posts. I'd like that change to be changed back.

marcusquinn

@atrilahiji Thats nice

marcusquinn

For the radio-button styles, It might look better to invert, so blue text on white. We always try to make high-contract for visually-impaired accessibility.

@marcusquinn Done (sort of).

marcusquinn

@atrilahiji Very nice! Some other tweaks:

Perhaps add the Name & Email fields to your form so they are pre-populated when getting to the Stripe page.
Currencies in alphabetical order.

Are you thinking to have an admin page for configuring the values & defaults? If so:

Different amounts based on currency selection.
"Donate" button text configurable (eg: "Subscribe", "Sponsor")
Social sharing icons & links.

Coming together really nicely though, I can see why you wanted to make an alternative to Fosspay.

Maybe consider changing:

"Elutheria Pay is a self-hosted FOSS payment system for FOSS developers" to
"Elutheria Pay is a self-hosted, open-source and private payment system for projects, services and fundraising."

jdaviescoates

+1 to everything @marcusquinn said

@marcusquinn I’ll look into these. So I was trying to make configuration as simple as possible while trying to not need a DB at all. So the things you want configured can be configured in the .end file. Same with the description, but I do agree that is better as a default.

I guess I’m wondering if you guys think it would benefit from using an admin page + db for config instead of a .env file for config

marcusquinn

@atrilahiji Same reason for every admin setting UI, broader reach.

@marcusquinn fair enough. I certainly could try to add support for this

Put it on my board as the next item I will be working on. Using Mongo because I love collection/document style DBs.

Boy oh boy is this a long process. I mean my previous approach was definitely quicker but this will hopefully be more robust. Building out my own login system. I've never implemented auth myself so this will be fun.

I'll definitely need some help testing it once I get the next release out.

Update again:

I have login working. I might ask others who are more experienced with writing auth to audit it if that’s ok. I also have a site up now but was too cheap to get my own domain for it so here it is: https://eleutheriapay.atrilahiji.dev/

Please let me know via dm or a reply to this post if you want to try out the new version when it’s ready and maybe even audit the code. I would be really grateful.

marcusquinn

@atrilahiji Nicely done!

You made me search for "free domains" and these look interesting:

Another update:

I have pushed a seemingly working login system to my dev branch here if anyone is feeling adventurous enough to pull it and test it out:
https://git.lahijiapps.dev/atrilahiji/eleutheriapay/-/tree/dev

I am working on a few features to play off of this here:

But as of now login and config updates now work and it makes use of MongoDB.

I'm really having fun with this one. If anyone has some more ideas (keep in mind im just going to have to queue them because this does take time) definitely let me know. And if anyone wants to contribute also let me know and I can set you up.

jdaviescoates

@atrilahiji just out of interest, what board are you using there?

marcusquinn

@jdaviescoates Looks like GitLab Issues Boards to me.

jdaviescoates

@marcusquinn you are correct

marcusquinn

@jdaviescoates I live in GitLab issues for work

Reviving this as I have come back to the project after losing motivation for a bit. I really did just want to keep this as a simple donation page that can be easily customized for those who don't want to build out their own. With that in mind, I removed monthly and annual payments from my current version. I still have a branch working on auth and a more complex system but I'll be thinking about how to best move forward with that in the future.

@staff I have a few changes I would like to make still before I have an initial version but I think it would be cool to have this app on the store if you think it makes sense. Of course, it is up to you guys

EDIT: To further explain, I got carried away in suggestions and making them all happen and forgot why I made it in the first place. Not that I don't appreciate feedback of course

jdaviescoates

@atrilahiji said in Eleutheria Pay - Open source donation platform:

With that in mind, I removed monthly and annual payments from my current version.

IMHO monthly payments (at least) are often a key feature people look for when creating a "simple donation page"

@jdaviescoates Normally I'd agree, but my goal here is to keep it lightweight. No DB, no user tracking, nothing. That is something that impossible to do while having recurring payments as you need to provide a way for users to cancel. The idea is tips and not patreon, basically. A branded layer over-top of stripe that also serves its own donation button you can embed anywhere.

I've kind of resolved to doing the work I need to make it fit my needs (as that was my original intent) and allowing contributions and forks from others if there is a need for that. Basically I don't want to put energy into building something I don't ever want to use.

jdaviescoates

@atrilahiji fair enough scratch that itch

girish

@atrilahiji it's not different to any other project in my mind. If it's something you will continue to work on and is useful to others, I don't see any problem having an app for it in the store.

@girish I have my 1.0.0-RC2 packaged and updated on the cloudron git with super basic tests. I'm going through testing things on my repo for EP and I'll hopefully have a full 1.0.0 release soon.

This post is deleted!

Pushed 1.0.0 finally. I think everything is good to go for a major release. Updated the package too.

girish

@atrilahiji w00t , congrats! BTW, did you have a landing page/home page for this? The one you linked earlier is not working anymore. Also, your git seems to have some cert errors it seems.

Cloudron makes it easy to run web apps like WordPress, Nextcloud, GitLab on your server. Find out more or install now.

Eleutheria Pay - Open source donation platform