Nth Permutation Mathematics

    @raae/gatsby-plugin-donations

    1.0.0-next.1 • Public • Published

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

    Install

    npm i @raae/gatsby-plugin-donations

    DownloadsWeekly Downloads

    6

    Version

    1.0.0-next.1

    License

    MIT

    Unpacked Size

    12.1 kB

    Total Files

    10

    Last publish

    Collaborators

    • raae