Embed the donation form
One script tag puts Kanu Hawaiʻi’s real donation form on your page. Visitors give without leaving your site, the receipt reaches them directly, and if you add a referral code every gift that comes through your page is recorded as yours.
<div data-kanu-donate data-ref="your-code"></div>
<script src="https://new.kanuhawaii.org/widget/kanu-donate.js" defer></script>That is the whole installation. The <div> goes where you want the form; the <script> can go
anywhere on the page, and one is enough no matter how many forms you have.
This one is an iframe, and the others are not
The volunteer widget and the pledge render into your page and inherit your fonts. The donation form does not: it runs in an iframe served from Kanu Hawaiʻi’s own domain.
That is deliberate, and there are two reasons worth knowing about.
The first is yours. A form asking for a card number should look like it belongs to the organization taking the money. A donor who sees Kanu’s form, on Kanu’s domain, with Kanu’s name under it, gives at a higher rate than one looking at an unbranded card field on a page that is not the charity’s.
The second is that card details never touch your website, your servers, or your logs. They go from the donor’s browser to Stripe. Nothing about your site’s security posture changes by adding this, and if you are ever asked whether embedding it puts you in scope for PCI compliance, the answer is no.
The form’s background is transparent, so it sits on whatever your section’s background is rather than punching a white box into it.
The form resizes itself as the donor uses it, and your page follows. Do not set a height on the container: the form grows when someone opens the card fields or picks a monthly gift, and a fixed height gives half your visitors a scrollbar and the other half a gap.
Getting credit for the gifts your page brings in
Add data-ref with a code Kanu has agreed with you:
<div data-kanu-donate data-ref="maui-hotel"></div>Every gift given through that embed is recorded against maui-hotel, and so is every renewal of
every monthly gift it produces, for as long as those donors keep giving. A supporter who signs up
for $25 a month through your page in 2026 is still counted as yours in 2029, without you or Kanu
doing anything to keep that true.
Codes are lowercase letters, numbers, and -, _ or ., up to 64 characters. Case does not matter:
a code printed as MAUI2026 on a flyer and typed as maui2026 is one code.
Kanu also records which site the form was actually running on, separately from the code. That is read from the browser rather than from your page, so it cannot be typed wrong. If a code is mistyped in your snippet, the gift is still recorded and Kanu can still see it came from your site, which is what makes a typo recoverable rather than lost.
A code on an ordinary link works too
You do not need the embed to be credited. The same code on a link does the same thing, which is the easier option for an email, a newsletter, a printed QR code, or a social post:
https://new.kanuhawaii.org/donate?ref=maui-hotelAmount and frequency work on that link as well, so a newsletter can send someone straight to a preselected monthly gift:
https://new.kanuhawaii.org/donate?ref=maui-hotel&amount=25&recurring=monthEvery attribute
| Attribute | What it does |
|---|---|
data-ref | Your referral code, so gifts through this embed are recorded as yours. Ask Kanu for one. |
data-amount | Preselect an amount, in whole dollars. Under $5 is refused at checkout, so do not use one. |
data-recurring | month, quarter or year to open with the repeating-gift option already chosen. |
Everything else, the suggested amounts, the wording, and whether a monthly gift is offered at all, comes from Kanu’s own donation page and changes with it. There is nothing to update on your side when Kanu runs a campaign.
More than one on a page
Repeat the <div>. One script tag still covers all of them, and each keeps its own attributes and
its own height:
<div data-kanu-donate data-ref="maui-hotel" data-amount="25"></div>
<!-- further down the page -->
<div data-kanu-donate data-ref="maui-hotel" data-recurring="month"></div>If your site is a single-page app
React, Vue, Svelte and similar frameworks replace the page contents without reloading, so the script does not get a second chance to look for your container. Call it yourself after the container is on the screen:
window.KanuDonate.init()It is safe to call as often as you like. A container it has already claimed is left alone, so this cannot produce two forms.
Apple Pay and Google Pay
The form offers them, and they are worth having: on a phone they turn a donation into one tap and no typing.
They need one thing from Kanu that the rest of the embed does not. Apple requires your domain to be registered before the button will appear on it. Tell Kanu which domain the embed is going on, and it is a two-minute change on their side, once, for free. Until then your visitors see the ordinary card form, which works perfectly, just with more typing on a phone.
Test it on the real domain, not on a staging URL. The registration is per domain, so a form showing
the wallet button on your live site correctly shows nothing on staging.yoursite.example.
What a donor gets
They give without leaving your page. The receipt goes from Kanu Hawaiʻi directly to the donor’s inbox within a minute, carrying everything the IRS requires to claim the deduction, including Kanu’s EIN.
You never see their card details, their email address, or their name. Kanu holds the donor relationship, which also means you are not holding anyone’s personal data on their behalf. What Kanu can tell you is what your page raised.
Content Security Policy
If your site sends a Content-Security-Policy header, three directives need to allow this. Most
sites send no CSP at all and can skip this section.
script-src https://new.kanuhawaii.org
frame-src https://new.kanuhawaii.orgThe form loads Stripe inside its own frame, so nothing about js.stripe.com needs to be in your
policy. That is inside Kanu’s document, not yours.
Troubleshooting
Nothing appears. Check the browser console for a blocked request. The usual cause is a CSP
without the two directives above, and the second is a content management system that strips
<script> tags out of a rich text field. In WordPress, a Custom HTML block keeps it; the visual
editor does not.
The form appears but is short, with a scrollbar inside it. The container has a height set on it, either directly or by a CSS rule in your theme. Remove it and let the form size itself.
It works locally and not on the live site. Almost always CSP, which staging environments often do not send.
Apple Pay is missing. Your domain has not been registered yet. See above.
Questions Kanu gets asked
Does it cost anything? No. Stripe’s processing fee comes out of the gift, and the form offers donors the option of covering it so the full amount reaches Kanu.
Can we style it? Not from your page, and this is the one real limitation of the iframe. The form follows Kanu’s brand. What you control is everything around it, so a heading, an explanation and a photograph in your own design, with the form below.
Can we see the donations? Kanu can tell you what your code raised. The embed itself reports nothing back to your page, deliberately, so that no donor’s details pass through your site.
Can we take the money instead and pass it on? Not with this. This sends gifts to Kanu Hawaiʻi’s own account, which is what makes the tax receipt to your visitor come from a 501(c)(3) and what keeps you out of the business of handling other people’s donations. If you are fundraising into your own account, talk to Kanu about a partnership rather than embedding this.