Eleutheria Pay - Open source donation platform

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.

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:

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