Help with


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 just like any other non-profit:

  • Pick an amount
  • Should it be recurring?
  • Type in the necessary info

The larger goal here is for 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.


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 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!


I have refined the request.


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.


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 server. (And make it a 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) {
    sessionId: id
  }).then(function(result) {

This effectively means you have two ports:

port checkout : String -> Cmd msg
port failure : (String -> msg) -> Sub msg

When the 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 :slight_smile:

I need some clarity on one thing:

First , whatever UI is needed to send requests like this:

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.

I’ll try to put a small example together.

1 Like

I’ve added a sample repository at:

There is an interactive version at

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?)


Looks great! Accessibility seems to be good in relation to keyboard navigation. It looks like the GitHub repository is private though?

Whoops, missed that. Should be public now!

@fpapado, thank you for working on this! Can you add a license file to the code before I take a look at it?

I have a rough draft of the style for the site:

Can folks share some ideas of how the styled donation form could look?

Ah, I have now added a LICENSE file (MIT) to the repository. Hope that works, but let me know if not, and I’ll adjust.

1 Like

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.