Creating a Luminate Online Donation Form With REST APIs

Noah Cooper · June 2021

Today at the Blackbaud Developers' Conference, I presented a Skills Lab covering how to develop custom donation forms with the Luminate Online API. In this session, we went over an example use case — building a simple, portable donation form that can be invoked from any website, including a non-Luminate website hosted on, say, Wordpress or Drupal. For this solution, we used vanilla JavaScript, no libraries required. The end result is a donation form that can be displayed in a modal dialog anywhere on your site, using incredibly simple HTML, like:

<button data-donation-form-id="1234"><br /><br/> Donate<br /><br/></button>

With this kind of solution in place, anyone at your organization could easily display a donation form any time they want to, e.g. your blog authors could embed a donate button within the body of a blog entry.

I've attached here the sample code for anyone who's interested in further exploring this solution on their site. As I mentioned in the Skills Lab, this code is for demo purposes only, and would require some additional work for production use. For example, the JavaScript included relies on new functionality not available in all browsers, particularly Interner Explorer.

donation-form-with-api-complete.zip

Alex Wong · June 2021

Hi, thank you for this.

I did not get to attend this session of yours, so my question may be something that was covered but isn't clear on this post of yours.

I tried putting the HTML and is associated JS file (using same folder structure) on a HTTP server, updating the main.js luminateBaseUrl and luminateApiKey and index.html's donation ID. After loading the page, I am getting error: Access to XMLHttpRequest at 'https://secure2.convio.net/fidfny/site/CRDonationAPI' from origin 'https://this_is_a_test_site.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. I went to LO admin and added the test_is_a_test_site.com to Setup > Site Options > Open API Configuration > JavaScript Configuration > Allow JavaScript API from these domains. However, I still get the same error.
Do you have any insight on PCI Compliance when donation is driven this way? Meaning, if I placed this code on my this_is_a_test_site.com for collecting donation, since the donation form that is requesting credit card info is on this_is_a_test_site.com, will this_is_a_test_site.com need to be PCI compliance? (I understand that the form basically drives the credit card details to LO's API and never reaching to my server, and since it is done through HTTPS, maybe this_is_a_test_site.com does not need to worry about PCI Compliance?)

Kyle Booth · June 2021

Noah, I really loved your session during the conference and was planning on/counting on re-watching it three or ten more times, but I just read that "Skills Lab recordings will not be available to #bbdevdays attendees." Why!!? This is breakin my heart! Anything we can do to get that changed? There was no way to take in all that good info on one go-around!

Kyle Booth · June 2021

Alex, I had the same problem as you with the CORS error. Solved when I realized that our secure luminateBaseUrl follows a different pattern than the example. Instead of "https://secure2.convio.net/choa/site/", ours is "https://give.choa.org/site" (give.choa.org is also the base url for all of our donation forms), so it's possible that yours is also different (support.fidfny..., donate.fidfny... etc.)

Noah Cooper · June 2021

Alex,

Kyle Booth‍ is spot on -- your issue is that you need to use your site's custom secure domain in place of convio.net, e.g.

const luminateBaseUrl = 'https://support.fidf.org/site/'

As far as your question about PCI compliance, you'd need to consult your organization's legal counsel and/or QSA to determine how this might affect your system's PCI scope.

Noah Cooper · June 2021

Kyle Booth‍ you are correct -- Skills Labs aren't available to watch on demand. I'll definitely share your feedback on this for the future.

Alex Wong · June 2021

Yes, it is now working. Thank you.

Jeremy Reynolds · July 2021

Seconded on that one. Great session, Noah, would love to take it all in bite-by-bite. Any chance the recording could just “fall off the back of the truck” if the powers that be don't want to post it directly?

Hayley Adams · July 2021

Yes being able to go back and see the recording would be great! Maybe they can send it to the individuals who were at the session.

Catrina Roallos 4 · October 2021

Hi Noah, sorry for the late reply…Thanks for posting this! I am almost ready to launch an API donation page using Luminate Extend, but there were a few additional things my team asked me to add that I wasn't totally sure how to implement:

Monthly donations
Tribute gifts
Paypal
ACH

First, are these things even possible, and secondly, do you have any advice or examples that show how to implement them?

Thanks again for building this! -catrina

Erik Leaver · October 2021

Hi Catrina,

The Donation API offers recurring giving and tributes with the donate method.

To process payments via PayPal, you would use the startDonation method.

Find more details and some code examples in the API Documentation:

Greg Davis · December 2021

@Noah Cooper -Thank you for posting this, as it's a great resource to work from. Is there any documentation about how to work with forms that aren't on a website built with Bootstrap? Also something that doesn't require a modal view to display? This is great, but very specific to modal Bootstrap 5.1. I would like to work with a basic form and adjust the form elements to post/interact with Luminate.

Also, is there a security issue in having the API key in the JS directly? What would be a way around this if this does pose a problem?

Any guidance for this would be greatly appreciated. Thanks for the help!

Creating a Luminate Online Donation Form With REST APIs

Comments

Categories