I would like to set up a Travel Grant program, helping students attend Elm conferences. The next goal would be to expand the grant program to other groups, and the long term goal would be able to afford an event organizer that could help create events like Elm Bridge, summer camps for students, conferences, and generally create opportunities for people to end up with mentors in their own city.
Technical Goal
I have PayPal and Stripe accounts set up for Elm Software Foundation, and I am hoping to set up a donation page on foundation.elm-lang.org just like any other non-profit:
Pick an amount
Should it be recurring?
Type in the necessary info
The larger goal here is for foundation.elm-lang.org to be a showcase of the grant program, and eventually of any ElmBridge-like event it helps with. Photos and/or stories.
Right now I am struggling with Stripe integration (while also figuring out lawyers and taxes that go along with this) and I figured that there are probably people here with a lot more experience making websites like this! @supermario recommended focusing on Stripe Checkout to get going.
Request
Can you make an open source project that showcases how to do a Donation page with Stripe? If that is easy, can you make a demo of what you’d like to see in the full foundation.elm-lang.org website?
I think this project can work in a lot of ways. It could be a good way to explore Elm, it could turn into a helpful blog post, it could turn into an example project, and it could help Elm Software Foundation get its website in order!
Make src/Donate.elm that is accessible and responsive.
There are a lot of designs out there, like DonorBox or CauseVox or GoFundMe Charity. I was using this ActBlue page as a reference to see how they used <ul>, <label>, and hidden radio buttons to make sure people can tab through.
The goal is for it to exist for now, so a success would be a thing that meets the following two requirements.
Requirements
First, whatever UI is needed to send requests like this:
This will return a text/plain reply containing a Stripe Checkout Session ID. I will get this endpoint going on the worker.elm-lang.org server. (And make it a foundation.elm-lang.org server if needed.) So just assume that endpoint exists.
Second, it hooks up to the following JS code:
var app = Elm.Donate.init();
var stripe = Stripe('pk_test_abcdefghijklmnopqrstuvwxyz');
app.ports.checkout.subscribe(function(id) {
stripe.redirectToCheckout({
sessionId: id
}).then(function(result) {
app.ports.failure.send(result.error.message);
});
});
This effectively means you have two ports:
port checkout : String -> Cmd msg
port failure : (String -> msg) -> Sub msg
When the worker.elm-lang.org/donate request comes back with a session ID, you pass it along to the checkout port. If that fails for some reason, an error message comes in through the failure port.
I would love to help with this! The part about making it accessible and responsive from the early stages appeals to me
I need some clarity on one thing:
First , whatever UI is needed to send requests like this: https://worker.elm-lang.org/donate?amount=10&frequency=monthly https://worker.elm-lang.org/donate?amount=25&frequency=onetime https://worker.elm-lang.org/donate?amount=50&frequency=onetime
Are these meant to be a GET or a POST requests? I guess it doesn’t change / block anything at this stage, but good to know eventually.
The main functionality should be there, but I have not yet added the custom donation amount. The “text input inside radio” from Act Blue seems not-so-great, so I might try a different approach and post that.
Update: The custom amount is now there. It shows up when the user selects “Custom” on the radio group, right after it, as a text box. I think this is better than a radio/text hybrid. It might be better yet to always show the custom amount text box, but perhaps that’s a consideration for another time.
The radio buttons are a custom styled version, so the baseline is there if they would change further. The validation errors use one of the more accessible patterns that I know of. There’s plenty of comments and links in the code that explain the choices and provide further sources.
I hope this helps! Let me know if there is anything else I can provide on this; it’s likely I’ve missed something,
(Sidenote: The Stripe API can also throw, for example if the sessionId is invalid. So we might want to add a .catch arm on the Promise, or do something different to handle that case. Logging, perhaps?)
