Donorfy Web Widgets allow you to collect online donations directly through your website using Stripe or GoCardless. Each widget captures supporter details, processes payments, and updates Donorfy automatically.

Your organisation must connect Stripe and/or GoCardless before implementing widgets.

⚠️Important:
Web Widgets are a Professional only feature. Essential subscribers, please contact us to find out more about upgrading.

How Donorfy Web Widgets Work

A Web Widget is a block of HTML embedded into your website that enables online donation collection.

Donorfy provides two widget types:

Stripe Web Widgets – For single and recurring card donations.
GoCardless Web Widgets – For recurring Direct Debit donations.

Before building your donation pages, ensure your client has connected:

Stripe – see Connecting to Stripe.
GoCardless – see : Connecting to GoCardless.

What the Widget Does

Once supporter data is submitted, the widget API will:

Process the donation via Stripe or GoCardless.
Add or match a constituent in Donorfy.
Create a Transaction (for single gifts).
Create a Recurring Payment Instruction (for regular gifts).
Add a Gift Aid Declaration, if applicable.

Embedding widgets requires a combination of HTML, CSS, and basic scripting knowledge.

When Multiple Widgets Are Required

Use a separate widget for each unique combination of:

Stripe vs GoCardless.
Product.
Campaign.
Payment Method.
Fund.
Currency.

📌 Note: You must not place more than one widget on a page—even if one is hidden. Multiple widgets will prevent correct operation.

Design and User Interface Considerations

The widget includes a basic UI to demonstrate required inputs. You are responsible for the design, layout, and supporter journey.

You may customise the page using your CMS, HTML, CSS, and JavaScript, provided you do not change:

The <form> tag
Field IDs, names, or maximum lengths
Any hidden fields after the comment “Do not change these values”

These elements are required for the widget to function correctly.

What Happens When a Donation Is Submitted

Card Payments (Stripe)

The card details are sent directly to Stripe, which returns a secure token.
The token and donor data are sent to Donorfy.
Donorfy collects the payment using the token.
A new or matched constituent is updated.
A Transaction is added to the timeline.
For recurring gifts, an RPI is created and future payments are processed automatically.
All processing details appear in Financial, Online Donations.

See: Creating a Stripe Payment Card Donations Web Widget.

Direct Debits (GoCardless)

The donor is redirected to a GoCardless form to enter banking details.
GoCardless returns the donor to your site and sends a Mandate ID to Donorfy.
Donorfy adds or matches the constituent.
An RPI is created.
Donorfy collects the first payment using the Mandate ID (debited in approx. 7 days).
Transactions appear on the timeline.
Recurring collections are managed by Donorfy.

See: Creating a GoCardless Web Widget.

Website Compatibility Requirements

Any modern CMS or platform (WordPress.org, Wix, Squarespace, etc.) can host a Donorfy widget.

Requirements include:

Your site must run on https://
An active SSL certificate
jQuery 1.11.1 or later (Donorfy uses 2.1.4)

📌 Note: WordPress.com does not support the required jQuery features.

Testing Your Widget

Stripe

Stripe widgets must use the Live Publishable Key.
Perform end-to-end testing using a real card and very small donations (e.g. £1).
Confirm the donation appears on the constituent timeline.

GoCardless

Create a live Direct Debit using real bank details.
Cancel the test mandate in GoCardless after submission.
All processing logs appear in Financial, Online Donations.

📌 Note:

GoCardless Sandbox is not supported.
Do not connect the same GoCardless account to both a live and test Donorfy. Create a separate GoCardless account for testing.

Generate the HTML Code

Follow one of the setup guides below:

Copy the generated HTML for embedding into your website.

Add the Widget to Your Website

Create a new page in your CMS.
Paste the HTML into the page as code, not as visual content.
Publish the page and verify the widget loads correctly.

For Squarespace, see: Using Widgets in Squarespace.

iFrame Support

Do not use iFrames for GoCardless widgets—Direct Debit widgets cannot operate inside an iFrame.

Modify and Style the Widget

You may customise styling, wording, and layout as needed.
Do not change:

The <form> tag.
Input field IDs or names.
Required hidden fields.

Styling Stripe Elements

Stripe’s card fields load without styling. Use the InitialiseForm() function to apply custom styles.

Example:

function InitialiseForm() {   var elementStyles = {     base: {       color: '#32325D',       fontWeight: 500,       fontFamily: 'Source Code Pro, Consolas, Menlo, monospace',       fontSize: '16px',       fontSmoothing: 'antialiased',       '::placeholder': { color: '#CFD7DF' },       ':-webkit-autofill': { color: '#e39f48' }     },     invalid: {       color: '#E25950',       '::placeholder': { color: '#FFCCA5' }     }   };   var elementClasses = { focus: 'focused', empty: 'empty', invalid: 'invalid' };   cardNumber.update({ style: elementStyles, classes: elementClasses });   cardExpiry.update({ style: elementStyles, classes: elementClasses });   cardCvc.update({ style: elementStyles, classes: elementClasses }); }