@getchange/change-drop-in

change-drop-in

Two components for accepting crypto donations on the web.

<change-donation-form>

A component for accepting crypto donations for a nonprofit. It weighs < 10 KB gzipped.

Quick Start

Add the following HTML to your page:

<change-donation-form
  public-key="pk_live_d1acaf4c39ab38273133cb97649ddba0ecd5d76b81c8b1db7039f7ae937f9b33"
  nonprofit-id="n_B7e7Xu5RFvYHGLHDCSMQ5Yck"
></change-donation-form>
<script type="module" src="https://cdn.jsdelivr.net/npm/@getchange/change-drop-in@1/dist/change-donation-form.min.js"></script>

You now have a donation form for Make-a-Wish 501(c)(3)!

Change the nonprofit by setting the nonprofit-id attribute. To find nonprofit ids for over 200K nonprofits, sign up for free at https://api.getchange.io and navigate to the Nonprofits tab. This component does not require any payment to use on your site.

Once you've signed up, set the public-key attribute to match your account. If you're a nonprofit collectin donations for yourself, don't set the public key. Everyone else can find your account's public key at https://api.getchange.io/developers.

All attributes

Property	Description
public-key (*required)	The public key of your Change account. You can find your account's public key at https://api.getchange.io/developers.
nonprofit-id (*required)	The ID of the nonprofit you'd like to accept donations for. You can find nonprofit IDs at https://api.getchange.io.
solana	Add this attribute to accept SOL (Solana) donations. A second payment method option will appear in the form.

Styles

You can change the style of the donation form using CSS custom properties. For example:

<change-donation-form
  style="
    --background-color-primary: green;
    --color-primary: white;
  "
></change-donation-form>

All style properties

Property	Description
--color	Text color
--background-color	Component background
--color-primary	Primary and selected button text color
--color-disabled	Disabled button text color
--background-color-primary	Primary and selected button background color
--background-color-primary-hover	Hovered primary and selected button background color
--background-color-disabled	Disabled button background color
--input-border-color	Input border color
--input-border-radius	Input border radius
--input-color	Input text color
--input-background-color	Input background color
--input-background-color-hover	Hovered input background color. Only applies to button inputs, not text inputs.
--input-color-hover	Hovered input text color
--input-placeholder-color	Input placeholder color

Here's an example of the default look, alongside a fully customized version:

Default	Customized

<change-drop-in>

A component for accepting crypto donations for any nonprofit in the Change system. It weighs < 13 KB gzipped.

Quick Start

Add the following HTML to your page:

<change-drop-in
  public-key="pk_live_d1acaf4c39ab38273133cb97649ddba0ecd5d76b81c8b1db7039f7ae937f9b33"
></change-drop-in>
<script type="module" src="https://cdn.jsdelivr.net/npm/@getchange/change-drop-in@1/dist/change-drop-in.min.js"></script>

You now have a searchable donation widget, with access to all 200K vetted nonprofits in the Change system.

Once you've signed up, set the public-key attribute to match your account. You can find your account's public key at https://api.getchange.io/developers. This component does not require any payment to use on your site.

All attributes

Property	Description
public-key (*required)	The public key of your Change account. You can find your account's public key at https://api.getchange.io/developers.
featured-nonprofits	The ids of nonprofits to feature. You can find nonprofit IDs at https://api.getchange.io. Specify ids as a JSON array, like this (the quote types are important): nonprofit-ids='["n_123", "n_abc"]'
title	The title of the component.

Styles

You can change the style of the donation form using CSS custom properties. For example:

<change-drop-in
  style="
    --background-color-primary: green;
    --color-primary: white;
  "
></change-drop-in>

All style properties

Property	Description
--color	Text color
--background-color	Component background
--color-primary	Primary and selected button text color. Affects the donation form.
--color-disabled	Disabled button text color. Affects the donation form.
--background-color-primary	Primary and selected button background color. Affects the donation form.
--background-color-primary-hover	Hovered primary and selected button background color. Affects the donation form.
--background-color-disabled	Disabled button background color. Affects the donation form.
--input-border-color	Input border color
--input-border-radius	Input border radius
--input-color	Input text color
--input-background-color	Input background color
--input-color-hover	Hovered input text color
--input-placeholder-color	Input placeholder color
--search-result-background-hover	Hovered background color of search results
--card-background-color	Card background color
--detail-color	Color of detail elements, such as the back button and field titles