Installing Connect

Install JavaScript Package

Chariot Connect (DAFpay button) comes as a small JavaScript package. It can be loaded directly from the Chariot CDN or installed via NPM or Yarn. When loading from the CDN, it must always be loaded directly from https://cdn.givechariot.com, rather than included in a bundle or hosted yourself.

1 <script src="https://cdn.givechariot.com/chariot-connect.umd.js"></script>

Add Chariot Connect

Chariot provides a simple-to-use web component that allows you to implement the Chariot Connect (DAFpay) button with a single line. Add Chariot-Connect component where you want the DAFpay button to appear and make sure to add the Connect ID (CID).

Save Down Your CID

You only need to call the Create Connect route one time per nonprofit to generate the cid; Once generated, you can save it down in your system.

1 <chariot-connect id="chariot" cid="GENERATED_CONNECT_IDENTIFIER"></chariot-connect>

A nonprofit’s cid (Connect ID) should be retrieved from your database after the nonprofit has been registered with Chariot.

Sandbox Credentials

Use the following credentials to log in to any DAF provider in the sandbox environment.

username: good-user
password: password123

Button Placement

Ensure that DAFpay is listed directly alongside primary payment methods (i.e., credit card, bank transfer, and Apple Pay)

Button Themes (Optional)

Choose your theme by adding the theme name as a parameter to the chariot-connect component, as below.

1 <chariot-connect 
2 	id="chariot" 
3 	cid="GENERATED_CONNECT_IDENTIFIER" 
4 	theme="THEME_NAME" <!-- Add this parameter ->
5 >
6 </chariot-connect>

We provide the options below as default themes. If theme is not defined, DefaultTheme will be used.

DefaultTheme

LightModeTheme

LightBlueTheme

GradientTheme

Custom Theme

To create a custom theme for the DAFpay button, create an object with the desired properties that you wish to change. Utilize Tailwind CSS styling in the definition of these properties.

Style Customizations Notice

Style customizations for DAFpay require that all available CSS be packaged within the chariot-connect.umd.js bundle. The problem is that for Chariot to allow any customizations, we would need to include the entire tailwindcss package (~2.4Mb uncompressed) which would degrade performance and load times to an unacceptable level.

While performance is a concern, we also realize the need for a consistent and seamless user experience and are also committed to providing configurations for size, padding, border radius, etc. on top of the pre-built themes that we offer.

1 // get the element from the DOM
2 const chariot = document.getElementById("chariot")
3 
4 // define your alterations using valid properties from the table below
5 const alterations = {
6 	width: "w-12",
7 	height: "h-8",
8 };
9 
10 // register your new theme with a custom name
11 chariot.registerTheme("myTheme", alterations);

Theme Properties

Parameter Name	Use	Allowed value
`width`	The width of the button	width up to `16` or `64px`
`height`	The height of the button	height at least `9` or `36px` up to `12` or `48px`
`showExtendedText`	Show an extended text (`Give with Donor Advised Fund`) version of the DAFpay button text	`true` or `false` (this value is `false` by default)

1	<chariot-connect
2	id="chariot"
3	cid="GENERATED_CONNECT_IDENTIFIER"
4	theme="THEME_NAME" <!-- Add this parameter ->
5	>
6	</chariot-connect>

1	// get the element from the DOM
2	const chariot = document.getElementById("chariot")
3
4	// define your alterations using valid properties from the table below
5	const alterations = {
6	width: "w-12",
7	height: "h-8",
8	};
9
10	// register your new theme with a custom name
11	chariot.registerTheme("myTheme", alterations);