Checkout modal

Create an overlay on your organization’s website featuring our ultra-optimized Checkout form.

Unlike traditional donation forms, the Checkout modal is an overlay that instantly launches on top of your website’s content. It’s one of the two available formats for every Campaign you create: the other being a Campaign Page. The Checkout modal removes the need to redirect visitors to other web pages and allows for donations to be made from any page on your organization’s website.

Fundraise Up’s Checkout form

The Checkout modal, and the Checkout form it features, is optimized for desktop and mobile use, and includes adaptive technologies that display device-specific features and payment options. It also has a whole host of conversion-optimizing features that ensure successful donations for any Campaign.

Conversion optimization

A fundamental component of the Checkout form is conversion optimization, which is achieved through a combination of modern web technologies, e-commerce methodologies, and the integration of artificial intelligence (AI).

Below, you can learn more about some of the ways in which Fundraise Up achieves conversion optimization at checkout.

Zero redirects

Because the Checkout modal launches as an overlay on your website, it does not require page redirection. In a typical nonprofit scenario, selecting a donation button results in a redirect to an embedded or hosted donation experience. This redirect, and subsequent redirects, can have a negative impact on conversion. By avoiding redirects, Fundraise Up’s Checkout form preserves click-to-view conversion.

Suggested donation amounts

Like many online giving solutions, the Checkout modal displays an array of suggested donation amounts. However, a key differentiator for Checkout is the use of AI to personalize each suggested amount for individual website visitors. This personalization has a positive effect on conversion.

Some of the attributes utilized by Fundraise Up AI include user location, browser version, device type, date, and time.

All of the data collected and analyzed to produce donation suggestions is first-party.

Impact descriptions

Let your supporters know how their donation will make a tangible difference in your organization’s work with our Checkout modal’s built-in impact descriptions. Whether it’s $20 to buy school books or $500 to fund some life-saving cancer research, presenting supporters with a real example of the impact they could have is a proven way to boost conversion and maximize generosity. Learn more about impact descriptions →

"Remind Me Later" Screen

A feature designed to mitigate the loss of potential donations is the "Remind Me Later" Screen. This screen becomes visible when a supporter attempts to close the Checkout Modal without completing their donation. Its primary aim is to offer a straightforward method for supporters to leave their email, ensuring they can be reminded to complete their donation.

This proactive approach captures important contact information from supporters showing an intent to donate, allowing organizations to monitor these intentions and potentially convert them into successful donations. To activate this feature and begin collecting Abandoned Donations, enable function into the Organization Settings.

Upsells and cross-sells

The Checkout form includes options for upselling supporters from one-time to recurring support, and the ability to cross-sell supporters to other fundraising channels.

In some cases, machine learning, a subset of AI, is used to calculate the appropriate conditions for presenting upsell and cross-sell opportunities to supporters.

  • Pre-conversion upsell: the pre-conversion upsell occurs before the point of conversion in the Checkout form. Typically, this upsell is presented after a supporter has selected a one-time donation amount, but before they select a payment method. The upsell opportunity is an upgrade from a one-time donation to a recurring plan.
  • Post-conversion upsell: this upsell occurs after a conversion in the Checkout form. Therefore, presenting the post-conversion upsell to a supporter cannot have a negative impact on conversion, making it an effective way to increase adoption of recurring support. The post-conversion upsell will either position an upgrade to monthly giving or annual giving. The frequency determination is made automatically based on a supporter’s behavior at checkout.
  • Annual tribute upsell: when a supporter gives a one-time tribute donation and provides the tributee’s name, they will automatically be given the option to transform their one-time donation into a recurring annual donation. This option will not appear if annual recurring donations are disabled in the Organization Settings.

Address autofill

When Checkout is configured with a prompt for a supporter to input their mailing address, address autofill helps reduce the amount of input required by a supporter. Autofill results are ranked based on a supporter’s location to display the most relevant results first.

To support organizations fundraising outside of the U.S., Fundraise Up implements autofill services that are best fit for a specific locale. This approach accommodates different types of address lookup, such as searches that begin with the postal code instead of the street number.

Adaptive cost coverage

Traditionally, supporters have been presented with the option to cover the transaction costs for a donation. Adaptive cost coverage is an enhancement to this functionality that uses AI to determine who to prompt with the ask to cover transaction costs. The result is an increase in conversion and revenue output.

No-code implementation

The Checkout modal is a turnkey solution for accepting donations through your website. When the Fundraise Up installation code is added to your website and an active Stripe account is connected, the Checkout modal is activated. No additional development work is required to activate features or enable payment methods.

SSL required: in order to use the Checkout modal on your website, a valid SSL certificate must be installed on your web server, and your website must be served using HTTPS.

Preview and test your Checkout modal

To see how supporters will experience your Checkout modal, you can do either of the following.

Preview

View the screens supporters will see when they make a donation, as per the settings you have in place. This preview isn’t interactive, so you can’t make a test donation — you can only view the static screens.

To preview your Checkout modal, you can click the “Preview” button in the Checkout modal block of the Campaign Overview or, when you’re editing your Campaign, click the Preview button in the yellow bar at the bottom of the page.

From the Preview window you can switch between Campaign formats (provided you have both enabled), devices, locales and countries. You can also see all the different screens that are part of the donation flow, as per your current settings.

Test

Testing your Checkout modal allows you to actually go through the donation process in a Checkout modal, as your future supporters will.

To test your Checkout modal, you can click the “Make a test donation” button in the Checkout modal block of the Campaign Overview or, when you’re previewing your Campaign, click the “make a test donation” link in the hint bar below the Preview itself. This allows you to make a donation, with the option to switch between tests for different locales and countries. Learn more →

Accessibility

Fundraise Up’s Checkout form includes accessibility features that enhance the donation experience.

WCAG 2.1 AA compliance

Our Checkout modal is fully WCAG 2.1 AA compliant and includes features that enhance user experience when assistive devices like screen readers are used.

  • Color: to ensure compliance with WCAG standards, colors in the Checkout modal are not user-selectable. Fundraise Up has standardized Conversion Blue throughout the supporter experience to balance accessibility needs with conversion optimization
  • Typography: Fundraise Up has standardized the use of IBM Plex Sans throughout the checkout experience. Users can not enable alternate fonts for Checkout modals. This standardization ensures that labels, text fields, and other components are properly rendered across all device types, and that all characters and special symbols can be displayed for all of Fundraise Up’s language localizations.
  • ARIA attributes: Fundraise Up has standardized the use of Accessible Rich Internet Applications (ARIA) attributes throughout the Checkout modal (and Elements) to increase and enhance accessibility for supporters utilizing screen readers for navigation.

Payment methods

Our Checkout form enables you to present virtually any modern payment method to supporters during checkout, including crypto. Machine learning is used to determine which payment methods are displayed for each user. Characteristics such as device type and browser determine the display of payment methods for each supporter. Read more about our payment methods →

Supported payment methods

The following payment methods are supported in our Checkout form:

Payment method-specific UI

Some payment methods have specialized checkout requirements. To support these payment flows, Fundraise Up has created payment-method specific user interfaces that streamline the checkout process when payment options like crypto or stock are selected.

URL API

Fundraise Up’s URL API can be leveraged to predefine certain Checkout attributes using a URL. This enables you to personalize the checkout experience for individual supporters and reduce the number of fields that supporters need to fill out. Learn more →

UTM parameter tracking

When UTM parameters are included in a Checkout modal’s URL, the parameter values are captured and stored on the resulting donation record. Learn more →

JavaScript events

Fundraise Up’s JavaScript API includes three events that can be subscribed to for tracking or integration purposes. Learn more →

Localization

Fundraise Up’s localization features enable Checkout to be translated into 22 languages. Support for multiple languages ensures that you can provide a donation experience in the preferred languages of your website visitors. Learn more →

https://www.notion.so/fundraiseup/Campaigns-e2c12a26275f4c199498cfc2a45fe668

 

In this article