New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add a donate button #53

Closed
xivk opened this Issue Aug 3, 2018 · 22 comments

Comments

Projects
None yet
3 participants
@xivk
Contributor

xivk commented Aug 3, 2018

Can we figure out a quick and simple way to add a donate button to the website?

I'm financing everything personally still and we need a (small) provable source of income to move those services under the Open Knowledge Belgium umbrella.

This doesn't need to be perfect, just simple...

When we have this I can just start donating whatever expenses there are now via the new system and we can move all services to Open Knowledge Belgium (domains and 1 machine).

@xivk xivk added the enhancement label Aug 3, 2018

@xivk xivk self-assigned this Aug 3, 2018

@jbelien jbelien self-assigned this Aug 4, 2018

@jbelien

This comment has been minimized.

Show comment
Hide comment
@jbelien

jbelien Aug 4, 2018

Member

As you may know, I started working on an app for OpenKnowledge Belgium based on Stripe ; unfortunately, I'm stuck and I think I won't be able to finish it (not enough time).

Here are some solutions that look interesting :

The last one really seems amazing (and based on Stripe).
It's basically what I had in mind when I was developing my tool. I told Dries I would have a look at it.

Maybe we can start with PayPal Donate button or Stripe Checkout because it's easy to implement and when we have the time move to Houdini (if it fits our needs).

Member

jbelien commented Aug 4, 2018

As you may know, I started working on an app for OpenKnowledge Belgium based on Stripe ; unfortunately, I'm stuck and I think I won't be able to finish it (not enough time).

Here are some solutions that look interesting :

The last one really seems amazing (and based on Stripe).
It's basically what I had in mind when I was developing my tool. I told Dries I would have a look at it.

Maybe we can start with PayPal Donate button or Stripe Checkout because it's easy to implement and when we have the time move to Houdini (if it fits our needs).

@jbelien

This comment has been minimized.

Show comment
Hide comment
@jbelien

jbelien Aug 4, 2018

Member

And I think we should keep OpenKnowledge Belgium in this loop because they are looking for something like this as well.

Member

jbelien commented Aug 4, 2018

And I think we should keep OpenKnowledge Belgium in this loop because they are looking for something like this as well.

@xivk

This comment has been minimized.

Show comment
Hide comment
@xivk
Contributor

xivk commented Aug 4, 2018

@rustyb

This comment has been minimized.

Show comment
Hide comment
@rustyb

rustyb Aug 4, 2018

Member

Hi Folks - I had a crack at making an donation page for the website. Something I've had to do for work recently, and it's really not too hard if we want to keep it super simple for the interm.

Using stripe checkout i've created a page to allow you to choose an amount to donate and then pay by card -> https://github.com/rustyb/website/blob/stripe/donate.html

Choose an amount and click donate:
screen shot 2018-08-04 at 17 45 53

Fill in the card details:
screen shot 2018-08-04 at 17 46 00

If you wish to test it out, you will need to clone the repo and serve the jekyll site. For testing stripe handly provides a number of test cards which you can use -> https://stripe.com/docs/testing#cards

Backend

For the backend part I created a very simple serverless webtask to allow the actual charging of the card.

All you need to do is head over to webtask.io and sign in. You can create a blank webtask or use the stripe payment processing template already provided in the editor.

The /payment endpoint takes a post request from the stripe checkout form which includes the stripeToken, email address, and the amount to charge.

On a successful payment you will receive a rather nice looking receipt which can be customised in the stripe dashboard - https://stripe.com/docs/receipts

Below is the webtask code. Make sure to setup a secret named STRIPE_SECRET_KEY when setting up.

'use latest';

import express from 'express';
import { fromExpress } from 'webtask-tools';
import bodyParser from 'body-parser';
import stripe from 'stripe';

bodyParser.urlencoded();

var app = express();
app.use(bodyParser.urlencoded());

app.post('/payment', (req,res) => {
  var ctx = req.webtaskContext;
  var STRIPE_SECRET_KEY = ctx.secrets.STRIPE_SECRET_KEY;

  stripe(STRIPE_SECRET_KEY).charges.create({
    amount: req.body.amount, // use the amount from the request body
    currency: 'EUR', // set to euro.
    source: req.body.stripeToken, // token from stripe checkout
    description: "Donation to OSM Belgium", // this description will appear on the receipt
    receipt_email: req.body.email
  }, (err, charge) => {
    const status = err ? 400: 200;
    const message = err ? err.message: 'Payment success!';
    res.writeHead(status, { 'Content-Type': 'application/json' });
    return res.end({"message": message});
  });
});

module.exports = fromExpress(app);  
Member

rustyb commented Aug 4, 2018

Hi Folks - I had a crack at making an donation page for the website. Something I've had to do for work recently, and it's really not too hard if we want to keep it super simple for the interm.

Using stripe checkout i've created a page to allow you to choose an amount to donate and then pay by card -> https://github.com/rustyb/website/blob/stripe/donate.html

Choose an amount and click donate:
screen shot 2018-08-04 at 17 45 53

Fill in the card details:
screen shot 2018-08-04 at 17 46 00

If you wish to test it out, you will need to clone the repo and serve the jekyll site. For testing stripe handly provides a number of test cards which you can use -> https://stripe.com/docs/testing#cards

Backend

For the backend part I created a very simple serverless webtask to allow the actual charging of the card.

All you need to do is head over to webtask.io and sign in. You can create a blank webtask or use the stripe payment processing template already provided in the editor.

The /payment endpoint takes a post request from the stripe checkout form which includes the stripeToken, email address, and the amount to charge.

On a successful payment you will receive a rather nice looking receipt which can be customised in the stripe dashboard - https://stripe.com/docs/receipts

Below is the webtask code. Make sure to setup a secret named STRIPE_SECRET_KEY when setting up.

'use latest';

import express from 'express';
import { fromExpress } from 'webtask-tools';
import bodyParser from 'body-parser';
import stripe from 'stripe';

bodyParser.urlencoded();

var app = express();
app.use(bodyParser.urlencoded());

app.post('/payment', (req,res) => {
  var ctx = req.webtaskContext;
  var STRIPE_SECRET_KEY = ctx.secrets.STRIPE_SECRET_KEY;

  stripe(STRIPE_SECRET_KEY).charges.create({
    amount: req.body.amount, // use the amount from the request body
    currency: 'EUR', // set to euro.
    source: req.body.stripeToken, // token from stripe checkout
    description: "Donation to OSM Belgium", // this description will appear on the receipt
    receipt_email: req.body.email
  }, (err, charge) => {
    const status = err ? 400: 200;
    const message = err ? err.message: 'Payment success!';
    res.writeHead(status, { 'Content-Type': 'application/json' });
    return res.end({"message": message});
  });
});

module.exports = fromExpress(app);  
@xivk

This comment has been minimized.

Show comment
Hide comment
@xivk

xivk Aug 5, 2018

Contributor

This looks excellent! We were also thinking about recurring donations, like 5€/mt or something but this is definitely already better than what we have now, just the number of our account on the website! 👍

I don't have the time right now to test this out but I see this ending up on the website soon, just a few questions:

  • Are there extra costs? The serverless function needs to run somewhere. (https://webtask.io/pricing free unless we have > 1 donation/s :-))
  • Is there an upgrade path possible to recurring donations?
Contributor

xivk commented Aug 5, 2018

This looks excellent! We were also thinking about recurring donations, like 5€/mt or something but this is definitely already better than what we have now, just the number of our account on the website! 👍

I don't have the time right now to test this out but I see this ending up on the website soon, just a few questions:

  • Are there extra costs? The serverless function needs to run somewhere. (https://webtask.io/pricing free unless we have > 1 donation/s :-))
  • Is there an upgrade path possible to recurring donations?
@jbelien

This comment has been minimized.

Show comment
Hide comment
@jbelien

jbelien Aug 5, 2018

Member

That's awesome ! Thanks a lot @rustyb ! 🎉

I have access to OpenKnowledge Belgium Stripe account, I'll try to set it up and include in our website (for testing at first) in the next days.
I think we can safely say that we won't have more than 1 donation per second, so we can use https://webtask.io ; worst case, I can host it on my server that also hosts https://calendar.osm.be and https://members.osm.be

Member

jbelien commented Aug 5, 2018

That's awesome ! Thanks a lot @rustyb ! 🎉

I have access to OpenKnowledge Belgium Stripe account, I'll try to set it up and include in our website (for testing at first) in the next days.
I think we can safely say that we won't have more than 1 donation per second, so we can use https://webtask.io ; worst case, I can host it on my server that also hosts https://calendar.osm.be and https://members.osm.be

@jbelien jbelien referenced this issue Aug 5, 2018

Open

Do a funding drive #3

0 of 3 tasks complete
@rustyb

This comment has been minimized.

Show comment
Hide comment
@rustyb

rustyb Aug 5, 2018

Member

Good stuff 😄 I'm pretty sure we won't go over the 1 donation per second threshold. @jbelien if you run into any trouble let me know.

@xivk As for dealing with monthly donations this is also possible through stripe's billing service. Basically just requires a minor modification to the flow when processing the payment.

Currently it goes like this:

  1. user inputs cards details into checkout
  2. checkout sends the details to stripe, we get back token representing the card
  3. send to the webtask
  4. use the token to make the charge
  5. Return a successful message to the user.

It might be best to keep both options, so would simply need an additional route on the web task e.g. subscription to handle the slight different flow:

Subscription flow

  1. user inputs cards details into checkout
  2. checkout sends the details to stripe, we get back token representing the card
  3. send to the webtask
  4. create a customer on stripe using the email and register card token as their default payment method.
  5. Create a subscription, with this customer.
  6. Return a successful message to the user.

The main drawback to this is that users will need to contact OSM BE to cancel their subscription as stripe does not provide a place for customers to manage their subscriptions out of the box.

Again though this could be easily solved by including a link in the receipt sent out each month that includes the customer_id that we could use cancel a subscription through another route on the webtask.

Member

rustyb commented Aug 5, 2018

Good stuff 😄 I'm pretty sure we won't go over the 1 donation per second threshold. @jbelien if you run into any trouble let me know.

@xivk As for dealing with monthly donations this is also possible through stripe's billing service. Basically just requires a minor modification to the flow when processing the payment.

Currently it goes like this:

  1. user inputs cards details into checkout
  2. checkout sends the details to stripe, we get back token representing the card
  3. send to the webtask
  4. use the token to make the charge
  5. Return a successful message to the user.

It might be best to keep both options, so would simply need an additional route on the web task e.g. subscription to handle the slight different flow:

Subscription flow

  1. user inputs cards details into checkout
  2. checkout sends the details to stripe, we get back token representing the card
  3. send to the webtask
  4. create a customer on stripe using the email and register card token as their default payment method.
  5. Create a subscription, with this customer.
  6. Return a successful message to the user.

The main drawback to this is that users will need to contact OSM BE to cancel their subscription as stripe does not provide a place for customers to manage their subscriptions out of the box.

Again though this could be easily solved by including a link in the receipt sent out each month that includes the customer_id that we could use cancel a subscription through another route on the webtask.

@xivk

This comment has been minimized.

Show comment
Hide comment
@xivk

xivk Aug 5, 2018

Contributor

OK, thanks a lot @rustyb for helping out and @jbelien for having another go at it, let's start with the regular one-time donations then and move on from there.
See also here: osmbe/community_planning#3

Contributor

xivk commented Aug 5, 2018

OK, thanks a lot @rustyb for helping out and @jbelien for having another go at it, let's start with the regular one-time donations then and move on from there.
See also here: osmbe/community_planning#3

@jbelien

This comment has been minimized.

Show comment
Hide comment
@jbelien

jbelien Aug 11, 2018

Member

Single donation is working : https://jbelien.github.io/website-osmbe/donate.html

For now, it uses my Stripe account and an OpenStreetMap test sub-account (exactly as it would work under OpenKnowledge account).

You can try with your credit card, it's in test mode so your card won't be charged but you can also use Stripe test cards.

Member

jbelien commented Aug 11, 2018

Single donation is working : https://jbelien.github.io/website-osmbe/donate.html

For now, it uses my Stripe account and an OpenStreetMap test sub-account (exactly as it would work under OpenKnowledge account).

You can try with your credit card, it's in test mode so your card won't be charged but you can also use Stripe test cards.

@jbelien

This comment has been minimized.

Show comment
Hide comment
@jbelien

jbelien Aug 11, 2018

Member

Here is the webtask code :

'use latest';

import express from 'express';
import { fromExpress } from 'webtask-tools';
import bodyParser from 'body-parser';
import stripe from 'stripe';

bodyParser.json();

var app = express();
app.use(bodyParser.json());

app.post('/payment', (request, response) => {
  var ctx = request.webtaskContext;
  var STRIPE_SECRET_KEY = ctx.secrets.STRIPE_SECRET_KEY;

  stripe(STRIPE_SECRET_KEY).charges.create({
    amount: request.body.amount,
    currency: 'eur',
    description: 'Donation to OpenStreetMap Belgium',
    destination: {
      account: ctx.secrets.STRIPE_CONNECT_ACCOUNT,
      amount: request.body.amount
    },
    receipt_email: request.body.email,
    source: request.body.stripeToken
  }, (error, charge) => {
    if (error) {
      response.writeHead(400, { 'Content-Type': 'application/json' });
      response.write(JSON.stringify({ 'error': error.message }));
    } else {
      response.writeHead(200, { 'Content-Type': 'application/json' });
      response.write(JSON.stringify({ 'success': 'Payment done!' }));
    }
    response.end();
  });
});

module.exports = fromExpress(app);  
Member

jbelien commented Aug 11, 2018

Here is the webtask code :

'use latest';

import express from 'express';
import { fromExpress } from 'webtask-tools';
import bodyParser from 'body-parser';
import stripe from 'stripe';

bodyParser.json();

var app = express();
app.use(bodyParser.json());

app.post('/payment', (request, response) => {
  var ctx = request.webtaskContext;
  var STRIPE_SECRET_KEY = ctx.secrets.STRIPE_SECRET_KEY;

  stripe(STRIPE_SECRET_KEY).charges.create({
    amount: request.body.amount,
    currency: 'eur',
    description: 'Donation to OpenStreetMap Belgium',
    destination: {
      account: ctx.secrets.STRIPE_CONNECT_ACCOUNT,
      amount: request.body.amount
    },
    receipt_email: request.body.email,
    source: request.body.stripeToken
  }, (error, charge) => {
    if (error) {
      response.writeHead(400, { 'Content-Type': 'application/json' });
      response.write(JSON.stringify({ 'error': error.message }));
    } else {
      response.writeHead(200, { 'Content-Type': 'application/json' });
      response.write(JSON.stringify({ 'success': 'Payment done!' }));
    }
    response.end();
  });
});

module.exports = fromExpress(app);  
@xivk

This comment has been minimized.

Show comment
Hide comment
@xivk

xivk Aug 11, 2018

Contributor

@jbelien What's the next step? We create a stripe account with Open Knowledge or something?

Contributor

xivk commented Aug 11, 2018

@jbelien What's the next step? We create a stripe account with Open Knowledge or something?

@jbelien

This comment has been minimized.

Show comment
Hide comment
@jbelien

jbelien Aug 12, 2018

Member

OpenKnowledge Belgium already has a Stripe account and I have access to it.
I have to create a OpenStreetMap Belgium "sub-account" with Stripe Connect. I'll have a look in the next few days ; just to be sure it's done properly and what kind of information do we need for the sub-account (person in charge, ...).

Member

jbelien commented Aug 12, 2018

OpenKnowledge Belgium already has a Stripe account and I have access to it.
I have to create a OpenStreetMap Belgium "sub-account" with Stripe Connect. I'll have a look in the next few days ; just to be sure it's done properly and what kind of information do we need for the sub-account (person in charge, ...).

@xivk

This comment has been minimized.

Show comment
Hide comment
@xivk

xivk Aug 12, 2018

Contributor

I don't know Stripe very well? I guess a sub-account means we can have an overview of what we receive and from who easily and that this is separate from the rest of the 'accounts'?

I guess you can add my personal info or perhaps @Driesvanransbeeck knows more about this...

Contributor

xivk commented Aug 12, 2018

I don't know Stripe very well? I guess a sub-account means we can have an overview of what we receive and from who easily and that this is separate from the rest of the 'accounts'?

I guess you can add my personal info or perhaps @Driesvanransbeeck knows more about this...

@jbelien

This comment has been minimized.

Show comment
Hide comment
@jbelien

jbelien Aug 12, 2018

Member

I guess a sub-account means we can have an overview of what we receive and from who easily and that this is separate from the rest of the 'accounts'?

Exactly, the sub-account will allow use to split the donation between the working groups easily.
Each working group could have its own sub-account, so we know who is the donation for.

Member

jbelien commented Aug 12, 2018

I guess a sub-account means we can have an overview of what we receive and from who easily and that this is separate from the rest of the 'accounts'?

Exactly, the sub-account will allow use to split the donation between the working groups easily.
Each working group could have its own sub-account, so we know who is the donation for.

@xivk

This comment has been minimized.

Show comment
Hide comment
@xivk

xivk Aug 16, 2018

Contributor

Let's finish this off, and come up with a piece of text to put on top?

  • English text about donations.
  • Dutch text about donations.
  • French text about donations.

Do we put a button on the frontpage?

Contributor

xivk commented Aug 16, 2018

Let's finish this off, and come up with a piece of text to put on top?

  • English text about donations.
  • Dutch text about donations.
  • French text about donations.

Do we put a button on the frontpage?

@xivk

This comment has been minimized.

Show comment
Hide comment
@xivk

xivk Aug 16, 2018

Contributor

English:

Donating to OSM Belgium helps our group to host this website, refund travel expenses for volunteers, and it enables us to organize specific projects. We also use the donations to have t-shirts, stickers and banners made for promotion.

Contributor

xivk commented Aug 16, 2018

English:

Donating to OSM Belgium helps our group to host this website, refund travel expenses for volunteers, and it enables us to organize specific projects. We also use the donations to have t-shirts, stickers and banners made for promotion.

@jbelien

This comment has been minimized.

Show comment
Hide comment
@jbelien

jbelien Aug 16, 2018

Member

Do we put a button on the frontpage ?

We can do that of course ;
And by default, there will be a "Donate" in the main menu (we can choose the order but I would put it last so it's more visible)

Member

jbelien commented Aug 16, 2018

Do we put a button on the frontpage ?

We can do that of course ;
And by default, there will be a "Donate" in the main menu (we can choose the order but I would put it last so it's more visible)

@xivk

This comment has been minimized.

Show comment
Hide comment
@xivk

xivk Aug 16, 2018

Contributor

I'm not sure about the donate menu... we already have a bunch of menu items (Home, News, Join, Projects, Calendar, Contact). Perhaps a donate button that links to /donate without a direct menu item?

Contributor

xivk commented Aug 16, 2018

I'm not sure about the donate menu... we already have a bunch of menu items (Home, News, Join, Projects, Calendar, Contact). Perhaps a donate button that links to /donate without a direct menu item?

@jbelien

This comment has been minimized.

Show comment
Hide comment
@jbelien

jbelien Aug 16, 2018

Member

I can do that too, no problem 😄

We have to think where to put that donate button on the homepage then ...
It has to be as visible as possible but not aggressive.

Member

jbelien commented Aug 16, 2018

I can do that too, no problem 😄

We have to think where to put that donate button on the homepage then ...
It has to be as visible as possible but not aggressive.

@xivk

This comment has been minimized.

Show comment
Hide comment
@xivk

xivk Aug 16, 2018

Contributor

Below have a question and above the tweets:

image

Contributor

xivk commented Aug 16, 2018

Below have a question and above the tweets:

image

@xivk

This comment has been minimized.

Show comment
Hide comment
@xivk

xivk Aug 16, 2018

Contributor

That's what I was thinking :-)

Contributor

xivk commented Aug 16, 2018

That's what I was thinking :-)

@jbelien

This comment has been minimized.

Show comment
Hide comment
@jbelien

jbelien Aug 16, 2018

Member

Seems good to me 👍

I'll try to move further on this ASAP 😃

Member

jbelien commented Aug 16, 2018

Seems good to me 👍

I'll try to move further on this ASAP 😃

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment