Eleutheria Pay - Open source donation platform

Ever since I gave up on FossPay, I have been working on a Node + Vue based version of the same thing called Eleutheria Pay. Think of it as a layer overtop of Stripe to handle donations that can be self hosted. It is not at feature parity yet, but I hope to get there eventually. Right now it has stripe based one-time payments working. Is anyone interested in this being developed further and it being tailored more to Cloudron?

I am open to feature requests as well.

Repo: https://git.atrilahiji.dev/atrilahiji/eleutheriapay
Cloudron Package: https://git.cloudron.io/AtriLahiji/eleutheriapay-app
Demo (Use this card info: https://stripe.com/docs/testing#cards) : https://testsupport.atrilahiji.dev/

This has finally reached a 1.0.0 release that better reflects what I wanted this project to me. Its certainly not complex but thats precisely what I wanted. No user management. Nothing complex. Just a customizable page that looks professional(ish) and can serve its own donate button you can embed anywhere. I have updated the package accordingly and am waiting to hear back about whether or not it can be added to the store. That being said, to get a better idea of how many people actually want this I urge you to upvote this first post.

marcusquinn

Nice! Subscription payments would be high on my recommendation list to enable easy setup of retainers and hosting agreements etc.

jdaviescoates

+1

Great stuff @atrilahiji!

And yeah, I'm with @marcusquinn recurring payments/ subscriptions are a must imho.

jdaviescoates

Also a nice name.

I think the only other time I've seen/ heard the work Eleutheria used is in this nice Lenny Kravitz song:

Youtube Video

@marcusquinn For sure. I can get that going next. Shouldn't be hard (knock on wood).

@jdaviescoates just did a google for gods/goddesses of liberty and found it lol

FYI I edited the OP with a link to the issue board on my gitlab instance. It has the current requests + some things I want to do.

murgero

@atrilahiji Any demo setup or screenshots?

@murgero I got it working just today so I still need to work out docs + screenshots. That being said I just release subcscriptions so I'll be throwing up my personal prod setup + an instance in stripe's test mode for people to try.

@murgero Here's the demo link. All payments are using test stripe credentials so nothing should go through.

https://testsupport.atrilahiji.dev/

@murgero FYI you need to use these numbers in the demo to see a successful test payment: https://stripe.com/docs/testing#cards

I'm working on docs now and will add this info.

jdaviescoates

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

I just release subcscriptions

Nice one!

@jdaviescoates do you prefer more of a preconfigured subscription system where you define tiers or the current method where I let the user enter the amount they subscribe for

FYI I added a bunch of features on my repo board including SMTP support for receipts (might be able to leverage stripe for this to reduce complexity). I'd like some opinions on what you guys want for features before I bug @girish to have this on Cloudron.

jdaviescoates

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

@jdaviescoates do you prefer more of a preconfigured subscription system where you define tiers or the current method where I let the user enter the amount they subscribe for

I think some defaults plus option to self-define probably the best of both worlds. A bit like how Open Collective do it, e.g. https://opencollective.com/bettermediauk/donate

@jdaviescoates I'll get that out for the next release. I wanted to work through some clean-up tasks and basic (and boy oh boy do I mean basic) documentation as @murgero requested. Got the ever important dark mode and user customizable CSS added as features. And also displaying the currency because I'm a dingus and didn't realize that was something that might be useful to know when paying somewhere.

0.1.6 is out here: https://git.lahijiapps.dev/atrilahiji/eleutheriapay
Your request should make it into 0.1.7.

The demo has been updated so you can play around with the new look.

murgero

@atrilahiji If I can put in a feature request - can you please allow the ability to have configurable social buttons / contact buttons? (Facebook, Twitter, Instagram, Email, Matrix, so on.)

@murgero Sure thing. I'll look into having the most common ones added. Email, FB, Twitter, Insta, Mastodon, Github. Any others you can think of?

Another thing I was thinking of was a "back arrow button" on the left side of the top nav which goes to whatever you configured your success URL to be (or it can be seperate... which is probably better. Along with the new CSS customizability it might be cool to have it "look and feel" like an extension of the site you link to it from. I did quite literally give full CSS access to the App.vue's global style section. For example, the current dark theme is matching my personal site's colour because I primarily made this for myself

marcusquinn

@atrilahiji Discord, GitLab, maybe Element? Website of course.

I added a bunch. I'm really digging this icon pack and there are some gaps: https://feathericons.com/

I'll look for icons elsewhere for the remainder but I think the ones I got now are a good starting set.

Pushed one update, and then quickly pushed another change because I goofed things up bad. Check out the new demo.

jdaviescoates

@atrilahiji Looking good!

I assume it'll be possible to choose any Stripe supported currency in the back-end?

Might even be nice to let users choose too?

@jdaviescoates yeah it does allow any stripe supported currency. It is sending that exact string to their API in the post request I make. I didn’t want to make any assumptions and have to make a code change if they change how they accept that string.

I could certainly add a drop down. Stripe (or someone’s bank) should handle the conversion but I can grab their supported currencies and just make it user defined and use the current setting as a preferred default. I just figured either way someone would front some sort of conversion cost.

jdaviescoates

@atrilahiji yeah, the conversion would happen either way, it's just that I think users are more likely to donate in their own currency because then they know how much they are actually donating upfront. Like I've no real idea what the conversion rate between CAD to GBP is right now so I'd have to go and do a conversion to check and then you might loose me

Ah I see, thats fair. I'll give that a shot then.

@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.

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