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

or

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");
  }
};