Integration Guide

Connecting the Donation Form to Blackbaud

This guide explains how to replace the current Netlify form logic with Blackbaud's BBOX (Blackbaud Checkout) script so that donations sync directly to Raiser's Edge / Blackbaud CRM.

⚠

Before you start: Log into your Blackbaud Merchant Services or Raiser's Edge portal and add the production domain to the Approved Domains list. The form will silently fail on unapproved domains.

Option 1 — The Clean Swap

Option 1

Replaces the internal fields of the current modal with the official Blackbaud form. Ensures 100% PCI compliance and connects directly to your Blackbaud merchant account. Recommended for most deployments.

Step 1 — Update the Modal HTML in index.html

Find the <div id="m-donate"> section and replace the <form> and its contents with the Blackbaud root div.

Remove:

HTML — remove

<form id="don-form" ...>
  <!-- all form fields -->
</form>

Replace with:

HTML — add

<div id="bbox-root"></div>

Step 2 — Add the Blackbaud Loader Script

Add this script just before the closing </body> tag in index.html:

JavaScript

<script type="text/javascript">
  window.bboxInit = function () {
    // Replace with your actual Blackbaud Form ID
    bbox.showForm('82adc758-cd1c-42f0-981c-36c79eaabd08');
  };
  (function () {
    var e = document.createElement('script');
    e.async = true;
    e.src = 'https://bbox.blackbaudhosting.com/webforms/bbox-min.js';
    document.getElementsByTagName('head')[0].appendChild(e);
  }());
</script>

Option 2 — Hybrid (Keep Custom UI)

Option 2

Keeps the custom yellow preset-amount buttons and frequency toggle, and only hands off to Blackbaud when the user clicks "Give Now." The selected amount and frequency are passed as parameters.

Update donSubmit() in the script block of index.html

JavaScript

function donSubmit(e) {
  e.preventDefault();

  const amount    = document.getElementById('don-amt-val').value;
  const frequency = document.getElementById('don-freq-val').value;
  // frequency value is 'one-time' or 'monthly'

  bbox.showForm({
    formId:    '82adc758-cd1c-42f0-981c-36c79eaabd08',
    amount:    amount,
    recurring: frequency === 'monthly'
  });
}

You will still need to add the Blackbaud loader script from Option 1 Step 2 for this approach to work.

Key Requirements

Approved Domain: Log into Blackbaud Merchant Services or Raiser's Edge and add the production domain to the Approved Domains list. Blackbaud will silently block the form on unapproved domains.
Form ID: The ID used above (82adc758-cd1c-42f0-981c-36c79eaabd08) must match the specific Web Form created in your Blackbaud dashboard. Verify this before going live.

Option 1 is right if…

You want the simplest, most compliant path and are OK with Blackbaud rendering the form fields.

Option 2 is right if…

You want to preserve the custom preset amounts and frequency toggle before handing off to Blackbaud's payment screen.

Benefits After Integration

Direct CRM Sync: Donations automatically appear in Raiser's Edge / Blackbaud CRM — no manual entry.
Security: Credit card data never touches LIM's server; it goes directly to Blackbaud's encrypted vault (PCI-DSS compliant).
Payment Methods: Once integrated, the form supports Apple Pay, Google Pay, and ACH if those are enabled in your Blackbaud account.

← Back to Site · LIM Developer Documentation · Restricted Access