Embed loader

package.json

@@ -3,8 +3,9 @@
     "build:donateButton": "yarn workspace @everydotorg/donate-button build && cp -r packages/donate-button/dist ./docs",
     "build:donateButtonNext": "yarn workspace @everydotorg/donate-button-next build && cp -r packages/donate-button-next/dist ./docs",
     "build:donateButtonV4": "yarn workspace @everydotorg/donate-button-v4 build && cp -r packages/donate-button-v4/dist ./docs",
-    "build": "yarn build:donateButtonV4",
-    "lint": "yarn workspace @everydotorg/donate-button-v4 lint",
+    "build:donateEmbed": "yarn workspace @everydotorg/donate-embed build && cp -r packages/donate-embed/dist ./docs",
+    "build": "yarn build:donateButtonV4 && yarn build:donateEmbed",
+    "lint": "yarn workspace @everydotorg/donate-button-v4 lint && yarn workspace @everydotorg/donate-embed lint",
     "lint:fix": "yarn workspaces @everydotorg/donate-button-v4 lint:fix",
     "test": "yarn concurrently -n 'api,website-next,common,partner-api' 'yarn workspace @everydotorg/donate-button-cloudflare-worker test'  'yarn workspace @everydotorg/donate-button test'  'yarn workspace @everydotorg/donate-button-next test' 'yarn workspace @everydotorg/donate-button-v4 test'",
     "postinstall": "patch-package"
@@ -17,7 +18,8 @@
     "packages/cloudflare-worker",
     "packages/donate-button",
     "packages/donate-button-next",
-    "packages/donate-button-v4"
+    "packages/donate-button-v4",
+    "packages/donate-embed"
   ],
   "devDependencies": {
     "concurrently": "^7.1.0",

packages/donate-embed/.gitignore

@@ -0,0 +1 @@
+dist

packages/donate-embed/.prettierignore

@@ -0,0 +1 @@
+dist

packages/donate-embed/.prettierrc

@@ -0,0 +1,7 @@
+{
+	"tabWidth": 2,
+	"useTabs": true,
+	"trailingComma": "none",
+	"bracketSpacing": false,
+	"singleQuote": true
+}

packages/donate-embed/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 Every.org
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

packages/donate-embed/README.md

@@ -0,0 +1,73 @@
+# donate-embed
+
+`embed.js` renders the every.org donate form inline on your page. It adds an
+iframe to a container of your choice, sizes it to fit the form, and tells you
+when a donation completes.
+
+Published at **https://embeds.every.org/embed.js**.
+
+## Usage
+
+```html
+<div id="donate-widget"></div>
+
+<script src="https://embeds.every.org/embed.js"></script>
+<script>
+	everyWidget.create({
+		selector: '#donate-widget',
+		partnerSlug: 'your-partner-slug',
+		nonprofitSlug: 'nonprofit-slug',
+		onSuccess: function () {}
+	});
+</script>
+```
+
+Options for `everyWidget.create`:
+
+- `selector` (required): CSS selector of the element the donate form is added
+  to, or the element itself. Pass an element when the container is not
+  reachable from `document`, for example inside a web component's shadow root.
+  A malformed selector string throws, just like `document.querySelector`.
+- `partnerSlug` (required): the partner slug every.org assigned to you.
+- `nonprofitSlug` (required): the every.org slug of the nonprofit to donate to.
+- `onSuccess` (optional): called when a donation completes.
+
+`create` returns the `<iframe>` element, or `null` if the options are invalid.
+
+Inside a web component:
+
+```js
+class DonateWidget extends HTMLElement {
+	connectedCallback() {
+		const root = this.attachShadow({mode: 'open'});
+		const container = document.createElement('div');
+		root.appendChild(container);
+		everyWidget.create({
+			selector: container,
+			partnerSlug: 'your-partner-slug',
+			nonprofitSlug: 'nonprofit-slug'
+		});
+	}
+}
+```
+
+The form fills the width of its container and resizes itself to fit its
+content, so the container's width is what sets the form's width.
+
+The form is currently served from the every.org staging environment.
+
+## Development
+
+The source is `src/embed.ts`. `tsc` compiles it to a single classic ES2015 script
+and [terser](https://terser.org) minifies it in place at
+`dist/donate-button/embed.js`; there is no bundler.
+
+- `yarn build` builds once; `yarn dev` recompiles on change (unminified).
+- `yarn lint` type-checks with `tsc` and checks formatting with Prettier.
+
+## Publishing
+
+Vercel serves `embeds.every.org` as a static site from `docs/dist/donate-button/`.
+From the repo root, `yarn build:donateEmbed` builds the minified script and
+copies it to `docs/dist/donate-button/embed.js`. Check that file in to publish
+it; the package's own `dist` folder is not checked in.

packages/donate-embed/package.json

@@ -0,0 +1,21 @@
+{
+	"name": "@everydotorg/donate-embed",
+	"version": "1.0.0",
+	"private": true,
+	"description": "Loader script (embed.js) for the embedded every.org donate flow, published at https://embeds.every.org/embed.js",
+	"scripts": {
+		"tsc": "tsc",
+		"build": "rm -rf dist && tsc && terser dist/donate-button/embed.js --compress --mangle --comments false --output dist/donate-button/embed.js",
+		"dev": "tsc --watch",
+		"lint": "tsc --noEmit && prettier --check .",
+		"lint:fix": "prettier --write .",
+		"test": "echo 'no tests'"
+	},
+	"author": "Every.org",
+	"license": "MIT",
+	"devDependencies": {
+		"prettier": "^2.2.1",
+		"terser": "^5.0.0",
+		"typescript": "^4.1.3"
+	}
+}

packages/donate-embed/src/embed.ts

@@ -0,0 +1,142 @@
+/**
+ * every.org embedded donate form.
+ *
+ * Include this script and call:
+ *
+ *   everyWidget.create({
+ *     selector: '#donate-widget',
+ *     partnerSlug: 'your-partner-slug',
+ *     nonprofitSlug: 'nonprofit-slug',
+ *     onSuccess: function () {},   // optional
+ *   });
+ *
+ * selector      CSS selector of the element the donate form is added to, or
+ *               the element itself (for example inside a shadow root).
+ * partnerSlug   The partner slug every.org assigned to you.
+ * nonprofitSlug The every.org slug of the nonprofit to donate to.
+ * onSuccess     Called when a donation completes.
+ *
+ * The donate form renders in an iframe that fills the width of its
+ * container and resizes itself to fit its content.
+ */
+
+interface EveryWidgetOptions {
+	/**
+	 * CSS selector of the element the donate form is added to, or the element
+	 * itself. Pass an element when the container is not reachable from
+	 * `document` (for example inside a web component's shadow root).
+	 */
+	selector: string | Element;
+	/** The partner slug every.org assigned to you. */
+	partnerSlug: string;
+	/** The every.org slug of the nonprofit to donate to. */
+	nonprofitSlug: string;
+	/** Called when a donation completes. */
+	onSuccess?: () => void;
+}
+
+interface EveryWidget {
+	create(options: EveryWidgetOptions): HTMLIFrameElement | null;
+}
+
+interface Window {
+	everyWidget: EveryWidget;
+}
+
+(function () {
+	var EMBED_ORIGIN = 'https://embed-staging.every.org';
+	var MESSAGE_SOURCE = 'every-widget';
+
+	interface ResizeMessage {
+		source: typeof MESSAGE_SOURCE;
+		type: 'resize';
+		height: number;
+	}
+
+	interface SuccessMessage {
+		source: typeof MESSAGE_SOURCE;
+		type: 'success';
+	}
+
+	type EmbedMessage = ResizeMessage | SuccessMessage;
+
+	function resolveContainer(selector: string | Element): Element | null {
+		if (typeof selector === 'string') {
+			// Throws a SyntaxError for a malformed selector, which is intentional.
+			return document.querySelector(selector);
+		}
+
+		return selector instanceof Element ? selector : null;
+	}
+
+	function isEmbedMessage(data: unknown): data is EmbedMessage {
+		return (
+			typeof data === 'object' &&
+			data !== null &&
+			(data as {source?: unknown}).source === MESSAGE_SOURCE
+		);
+	}
+
+	function create(options: EveryWidgetOptions): HTMLIFrameElement | null {
+		var container = resolveContainer(options.selector);
+		if (!container) {
+			console.error('everyWidget: no element matches', options.selector);
+			return null;
+		}
+
+		if (!options.partnerSlug || !options.nonprofitSlug) {
+			console.error(
+				'everyWidget: partnerSlug and nonprofitSlug are required',
+				options
+			);
+			return null;
+		}
+
+		var iframe = document.createElement('iframe');
+		iframe.src =
+			EMBED_ORIGIN +
+			'/embed/' +
+			encodeURIComponent(options.nonprofitSlug) +
+			'/donate?partnerSlug=' +
+			encodeURIComponent(options.partnerSlug);
+		iframe.title = 'Donate';
+		// The form resizes itself to fit its content, so it never scrolls.
+		iframe.setAttribute('scrolling', 'no');
+		// Required for Apple Pay / Google Pay.
+		iframe.setAttribute('allow', 'payment');
+		iframe.style.display = 'block';
+		iframe.style.width = '100%';
+		iframe.style.border = '0';
+		iframe.style.overflow = 'hidden';
+		// Placeholder height until the form reports its own.
+		iframe.style.minHeight = '480px';
+		container.appendChild(iframe);
+
+		window.addEventListener('message', function (event: MessageEvent) {
+			if (
+				event.origin !== EMBED_ORIGIN ||
+				event.source !== iframe.contentWindow
+			) {
+				return;
+			}
+
+			var data: unknown = event.data;
+			if (!isEmbedMessage(data)) {
+				return;
+			}
+
+			if (data.type === 'resize' && typeof data.height === 'number') {
+				iframe.style.minHeight = '0';
+				iframe.style.height = data.height + 'px';
+			}
+
+			if (data.type === 'success' && typeof options.onSuccess === 'function') {
+				options.onSuccess();
+			}
+		});
+
+		return iframe;
+	}
+
+	window.everyWidget = {create: create};
+})();

packages/donate-embed/tsconfig.json

@@ -0,0 +1,15 @@
+{
+	"compilerOptions": {
+		"target": "es2015",
+		"module": "es2015",
+		"lib": ["es2015", "dom"],
+		"strict": true,
+		"rootDir": "src",
+		"outDir": "dist/donate-button",
+		"newLine": "lf",
+		"skipLibCheck": true,
+		"forceConsistentCasingInFileNames": true,
+		"types": []
+	},
+	"include": ["src"]
+}

yarn.lock

@@ -2154,6 +2154,16 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"@everydotorg/donate-embed@workspace:packages/donate-embed":
+  version: 0.0.0-use.local
+  resolution: "@everydotorg/donate-embed@workspace:packages/donate-embed"
+  dependencies:
+    prettier: ^2.2.1
+    terser: ^5.0.0
+    typescript: ^4.1.3
+  languageName: unknown
+  linkType: soft
+
 "@gar/promisify@npm:^1.0.1":
   version: 1.1.3
   resolution: "@gar/promisify@npm:1.1.3"