cn-donate

Implements the Charity Navigator donate modal that can be used in third party web sites. This module implementst the logic for displaying an iFrame when a donate button is clicked in the third party site. It relies on the Charity Navigator website to provide the donation form content inside the iFrame.

Local project setup

Installation

npm install

Build

npm run build

Release (to NPM)

This step requires access to the @cn-npm NPM repo.

npm run release

How it works

We want to display an iFrame in a third party site that references content from a different domain, passing data between the two. In our case, that means we need to pass data such as the EIN and nonprofit name from the third party site to the cn-site content as well as pass events back to the third party site. We use Zoid to create a cross-domain component that can be used to pass data between the two domains. For this to work properly, Zoid must be registered in both the third party site and in cn-site. This library packages the Zoid component config and the logic to display the iFrame in the third party site.

This package is meant to be installed as a dependency in the main cn-site. The main site will then include dist/provider.js from this package in the page that shows the donate content. This will display the "inside" content of the iframe.

cn-site will also expose dist/donate.js as an endpoint from cn-site. This will be included in the third party site's page and implement the "outside" content of the iframe. This script will also hook the donate buttons in the third party site, displaying the iFrame when the button is clicked.

tailwind

Preflight is disabled for this library. This avoids tailwind resetting all of the styles in the html that this library is included in. This is done by setting the preflight option to false in the tailwind.config.js file.