@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 will always be free.

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.

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>

Documentation coming soon.