Gatsby Plugin Donations

A Gatsby Plugin for accepting donations through Stripe 💰

Beta notice: The plugin is in active development, and I am looking for beta users/testers. Leave a comment on this discussion thread if that is you.

Gatsby Plugin Donation adds the endpoint /api/@raae/gatsby-plugin-donations/donation to your site, making it possible to accept donations of any amount through a Stripe Checkout Session created on the server.

A message from Queen @raae

Learn how to get the most out of Gatsby and stay updated on the plugin by subscribing to emails from yours truly.

How to install

npm install @raae/gatsby-plugin-donations

yarn add @raae/gatsby-plugin-donations

How to configure

module.exports = {
  plugins: [
    `@raae/gatsby-plugin-donations`
  ],
}

Configuration for Gatsby Plugin Donations is done using environment variables. We'll move to plugin options as soon as that is technically possible for our use case.

Environment variables

Env var	Type	Default	Description
RAAE_GATSBY_PLUGIN_DONATIONS_STRIPE_SECRET_KEY	string	`undefined`	[required] Your Stripe Secret Key
GATSBY_RAAE_GATSBY_PLUGIN_DONATIONS_STRIPE_PAYMENT_METHODS	string	`"card"`	Comma seperated list of Stripe Payment Method Types
GATSBY_RAAE_GATSBY_PLUGIN_DONATIONS_STRIPE_CURRENCY	string	`"USD"`	The currency of the donations
GATSBY_RAAE_GATSBY_PLUGIN_DONATIONS_STRIPE_AMOUNT_MULTIPLIER	number	`100`	If your input us in USD, then the multiplier should be 100 to get to cents; the accepted Stripe unit.
GATSBY_RAAE_GATSBY_PLUGIN_DONATIONS_STRIPE_PRODUCT_ID	string	`undefined`	The id of the product to tie the donation to, will also be the content of the checkout page
GATSBY_RAAE_GATSBY_PLUGIN_DONATIONS_STRIPE_PRODUCT_NAME	string	`"Donation"`	If no product, this will be the product name used
GATSBY_RAAE_GATSBY_PLUGIN_DONATIONS_STRIPE_PRODUCT_DESCRIPTION	string	`undefined`	If no product, this will be the product description used

How to use

Send a POST request to /api/@raae/gatsby-plugin-donations/donation with the parameters listed below.

If possible the endpoint will redirect automatically to the created Stripe Checkout Session. If not you'll upack the response and redirect manually, see the examples.

Parameters

name	Type	Default	Description
amount	number	`undefined`	The amount, will be multiplied with GATSBY_RAAE_GATSBY_PLUGIN_DONATIONS_STRIPE_AMOUNT_MULTIPLIER
successUrl	string	`${req.headers.origin}/?success=true`	The page to redirect to after the donation succeeds
cancelUrl	string	`${req.headers.origin}/?canceled=true`	The page to redirect to if the donation is cancelled

Examples

Use form action directly

<form action="/api/@raae/gatsby-plugin-donations/donation" method="POST">
  <fieldset>
    <p>
      <label htmlFor="amount">Amount: </label>
      <br />
      <input type="number" id="amount" name="amount" defaultValue="10" />
    </p>
    <p>
      <button>Donate</button>
    </p>
  </fieldset>
</form>

Use custom onSumbit (without stripe-js)

const handleSubmit = async (event) => {
  event.preventDefault();

  try {
    setMessage("Calling Stripe...");
    setStatus("pending");

    const {
      data: { url },
    } = await axios.post("/api/@raae/gatsby-plugin-donations/donation", {
      amount: event.target.elements.amount.value,
    });

    setMessage("Redirect to Stripe Checkout...");

    window.location = url;
  } catch (error) {
    setMessage(error.response?.data?.message || error.message);
    setStatus("failed");
  }
};

Use custom onSumbit (with stripe-js)

const handleSubmit = async (event) => {
  event.preventDefault();

  try {
    setMessage("Calling stripe...");
    setStatus("pending");

    const {
      data: { id },
    } = await axios.post("/api/@raae/gatsby-plugin-donations/donation", {
      amount: event.target.elements.amount.value,
    });

    setMessage("Redirect to checkout...");

    const stripe = await loadStripe(`<Your Stripe Publishable Key>`);
    stripe.redirectToCheckout({ sessionId: id });
  } catch (error) {
    setMessage(error.response?.data?.message || error.message);
    setStatus("failed");
  }
};

queen-raae / gatsby-plugin-donations

readme