Support
HomePlatform basicsCampaignsElementsPayment methodsDonor PortalLanguagesDashboardIntegrations
What’s new
Home
Integrations

JavaScript API

Explore Fundraise Up’s JavaScript API.

Fundraise Up’s JavaScript API can be used to integrate Fundraise Up with other apps and integrations that are not natively supported by the platform.

The JavaScript API is most often used to track Fundraise Up conversion events in other apps.

Try it: JavaScript API playground

Events

Fundraise Up pushes three events to JavaScript’s data layer: checkoutOpen, checkoutClose, and donationComplete. These events and examples of their payloads are included below.

checkoutOpen

This event is fired every time Checkout is opened.

1{
2  "customFields": {
3    "fiscal_year": "fy2023",
4    "form": "DonateNow"
5  },
6  "livemode": true,
7  "campaign": {
8    "id": "FUNCPJTZZQR",
9    "code": "C-INT-0000",
10    "name": "General Donations"
11  },
12  "utm": {
13    "source": "",
14    "campaign": "",
15    "medium": "",
16    "content": "",
17    "term": ""
18  },
19  "element": {
20    "id": "XTGWFZFR",
21    "type": "Donate Button",
22    "name": "Header Nav - Donate"
23  }
24}

checkoutClose

This event is fired any time Checkout is closed, regardless of whether a conversion has been logged. If the Checkout modal is closed before a donation is completed, the information the donor entered before closing (their name and email address, for example) will still be sent.

After a successful donation

1{
2  "customFields": {
3    "fiscal_year": "fy2023",
4    "form": "DonateNow"
5  },
6  "livemode": true,
7  "campaign": {
8    "id": "FUNCPJTZZQR",
9    "code": "C-INT-0000",
10    "name": "General Donations"
11  },
12  "utm": {
13    "source": "",
14    "campaign": "",
15    "medium": "",
16    "content": "",
17    "term": ""
18  },
19  "element": {
20    "id": "XTGWFZFR",
21    "type": "Donate Button",
22    "name": "Header Nav - Donate"
23  },
24  "supporter": {
25    "id": "SBLQMBBU",
26    "email": "example@mail.com",
27    "firstName": "Caractacus",
28    "lastName": "Potts",
29    "anonymous": false,
30    "mailingListSubscribed": false,
31    "employer": null,
32    "onBehalfOf": null
33  },
34  "donation": {
35    "id": "DNNLGBJF",
36    "paymentMethod": "CreditCard",
37    "amount": 25,
38    "feesCovered": 1.5,
39    "currency": "USD",
40    "recurring": false,
41    "frequency": "once"
42  },
43  "designation": {
44    "id": "EXVNFMNX",
45    "name": "food for the hungry",
46    "code": "F-INT-0014"
47  },
48  "tribute": null,
49  "recurring": {
50    "id": "RNXGXWWR"
51  }
52}

An example of the CheckoutClose event after a successful donation. This event is identical in parameters to donationComplete.

Without a successful donation

1{
2  "customFields": {
3    "fiscal_year": "fy2023",
4    "form": "DonateNow"
5  },
6  "livemode": true,
7  "campaign": {
8    "id": "FUNCPJTZZQR",
9    "code": "C-INT-0000",
10    "name": "General Donations"
11  },
12  "utm": {
13    "source": "",
14    "campaign": "",
15    "medium": "",
16    "content": "",
17    "term": ""
18  },
19  "element": {
20    "id": "XTGWFZFR",
21    "type": "Donate Button",
22    "name": "Header Nav - Donate"
23  },
24  "supporter": null,
25  "donation": null,
26  "designation": null,
27  "tribute": null,
28  "recurring": null
29}

An example of checkoutClose without a successful donation.

donationComplete

This event fires at the point of conversion in Checkout.

1{
2  "customFields": {
3    "fiscal_year": "fy2023",
4    "form": "DonateNow",
5    "hs_preview": "UvMjiRBY-66781953082"
6  },
7  "livemode": true,
8  "campaign": {
9    "id": "FUNCPJTZZQR",
10    "code": "C-INT-0000",
11    "name": "General Donations"
12  },
13  "utm": {
14    "source": "",
15    "campaign": "",
16    "medium": "",
17    "content": "",
18    "term": ""
19  },
20  "element": {
21    "id": "XTGWFZFR",
22    "type": "Donate Button",
23    "name": "Header Nav - Donate"
24  },
25  "supporter": {
26    "id": "STMNACDG",
27    "email": "tulsi.lattimer@gmail.com",
28    "firstName": "Tulsi",
29    "lastName": "Lattimer",
30    "anonymous": false,
31    "mailingListSubscribed": false,
32    "employer": null,
33    "onBehalfOf": null
34  },
35  "donation": {
36    "id": "DPPSCTFU",
37    "paymentMethod": "CreditCard",
38    "amount": 5.6,
39    "feesCovered": 0.6,
40    "currency": "USD",
41    "recurring": false,
42    "frequency": "once"
43  },
44  "designation": {
45    "id": "EHHJ9R36",
46    "name": "the greatest need",
47    "code": "F-INT-0001"
48 },
49  "tribute": null,
50  "recurring": {
51    "id": "RNXGXWWR"
52  }
53}

Custom fields

Custom fields that you add to a Campaign can be sent to the JavaScript data layer. In the example below, the donationComplete event is fired. Its payload includes parameters for three custom fields: fund, appeal, and source.

1FundraiseUp.on('donationComplete', function(details) {
2  var fund = details.customFields.fund || '';
3  var appeal = details.customFields.appeal || '';
4  var source = details.customFields.source || '';
5});

Debugging and testing

You can debug and test events sent to the JavaScript data layer using your browser’s console. In the example below, the parameters for the Fundraise Up event, checkoutOpen, are written to the console when the event is fired.

1FundraiseUp.on('checkoutOpen', function(details) {	
2  console.log(details);
3});

Implementation example

In the example below, the Fundraise Up JavaScript API is used to fire and provide parameter values to the Feathr Super Pixel tracking code.

1FundraiseUp.on('donationComplete', function(details) {
2  var feathr_amount = details.donation.amount || 0;
3  var feathr_recurring = details.donation.recurring || 'Not Provided';
4  var feathr_currency = details.donation.currency || 'USD';
5  var feathr_fullName = details.supporter.firstName + ' ' + details.supporter.lastName || '';
6  var feathr_email = details.supporter.email || 'Not Provided';
7  var feathr_companies = [details.supporter.employer] || ['Not Provided'];
8  
9  feathr("update", {
10    "name": feathr_fullName,
11    "email": feathr_email,
12    "companies": feathr_companies
13  });
14
15  feathr(
16    "convert",
17    "YOUR_CONVERSION_PIXEL_ID",
18    {
19      "amount": feathr_amount,
20      "currency": feathr_currency,
21      "category": "YOUR CONVERSION CATEGORY"
22    },
23    {
24      "RECURRING": feathr_recurring
25    }
26  );
27});

Platform guides

Explore using Fundraise Up’s JavaScript API with popular platforms.

Analytics

Use Checkout events to create custom triggers and tracking properties.

Marketing

Send Checkout events to marketing pixels for audience building and advertising.

Related article
Parameters

 

In this article