Donations

Lyra doesn’t take payments itself, so there’s no payment code to keep secure and nothing to pay us. The donate form lets the visitor choose monthly or one-off and an amount, then sends them to your donation provider’s secure checkout with that amount filled in. Your provider handles the card details, receipts, Gift Aid or tax forms, and payouts.

All the settings are in donate in src/site.config.ts.

Amounts and impact lines

frequencies: ['monthly', 'once'],
amounts: {
  monthly: [
    { value: 10, impact: { en: 'Gives a child school books every month.', es: 'Da libros escolares a un niño cada mes.' } },
    { value: 25, impact: { en: 'Gives a family clean water all year round.', es: 'Da agua limpia a una familia todo el año.' }, selected: true },
    { value: 50, impact: { en: 'Funds a health worker’s village visits for a month.', es: 'Financia un mes de visitas de una agente de salud.' } },
  ],
  once: [ ... ],
},
allowCustom: true,

Setting	What it does
currency	Three-letter currency code: 'USD', 'GBP', 'EUR', 'KES', 'INR'…
page	Your donate page, linked from the header button and the phone donate bar.
frequencies	Which choices to offer, first one pre-selected. Use ['once'] for one-off gifts only.
amounts	The preset amounts for each frequency. The impact line under the form changes as the visitor picks an amount. Mark one selected: true.
allowCustom	true adds an “Other” box for any amount.
secureNote	The reassurance line under the button.

Concrete impact lines (“Buys a water filter for a family of six”) raise more than amounts alone, so write one for each.

Choosing how the form connects

mode is 'url' or 'links'.

mode: ‘url’ (Givebutter, Donorbox and most hosted forms)

The form opens one checkout address with the amount, and the frequency where the provider supports it, added to the link.

mode: 'url',
url: {
  href: 'https://your-provider-page',
  amountParam: 'amount',
  frequencyParam: 'frequency',
  frequencyValues: { once: '', monthly: 'monthly' },
},

An empty value is left out of the link, so with the settings above a one-off gift of $50 opens https://your-provider-page?amount=50, and a monthly gift of $25 opens ...?amount=25&frequency=monthly.

Givebutter. Set href to the page on your site that holds your Givebutter widget, or your Givebutter campaign page. Givebutter’s documentation lists amount and frequency as link settings, so keep the settings above.

Donorbox. Set href to https://donorbox.org/your-campaign, keep amountParam: 'amount', and set frequencyParam: ''. Donorbox has no documented link setting for frequency, so choose the default frequency in Donorbox’s form builder. Visitors can still switch it on the Donorbox form.

Other providers. Look in your provider’s help pages for “prefill amount” or “URL parameters”, and use the names they give.

mode: ‘links’ (Stripe Payment Links)

Stripe Payment Links have one link per fixed amount. Create a Payment Link in Stripe for each preset amount, plus one with “Let customers choose what to pay” for the Other box, and paste them in:

mode: 'links',
links: {
  once: { 25: 'https://buy.stripe.com/...', 50: 'https://buy.stripe.com/...', 100: 'https://buy.stripe.com/...', custom: 'https://buy.stripe.com/...' },
  monthly: { 10: 'https://buy.stripe.com/...', 25: 'https://buy.stripe.com/...', 50: 'https://buy.stripe.com/...', custom: 'https://buy.stripe.com/...' },
},

The numbers must match your amounts. For monthly gifts, create the Payment Links as subscriptions in Stripe. If an amount has no link, the form uses the custom link instead.

Test it

Run npm run dev, pick an amount and click Donate. Check that your provider opens with the right amount and frequency before you launch.

Where the form appears

The donate block (panel and card variants), the campaign highlight block, campaign pages, cause pages and the donate page all use the same form and the same settings, so you only set it up once.