Checkout Modal
Guide on using the ultra-optimized Checkout form as an overlay on your website
Create an overlay on your organization’s website featuring the ultra-optimized Checkout form.
Found an error? Missing topic? Difficult to understand? Let us know
Unlike traditional donation forms, Givetly’s Checkout modal is an overlay that instantly appears on top of your website’s content. It is one of two formats you can choose for each campaign you create.
The Checkout modal eliminates the need to redirect visitors to different web pages and allows them to donate directly from any page on your organization’s website.
🔗 Try it out: Launch a Checkout modal
Givetly’s Checkout Form
The Checkout modal and the Checkout form it contains are designed for both desktop and mobile use. They adapt to display device-specific features and payment options and include several features to increase conversion rates and ensure successful donations for any campaign.
No-code Implementation
The Checkout modal is a turnkey solution for accepting donations through your website. Once the Givetly installation code is added to your website and an active Stripe account is connected, all you need to do is enable the Checkout modal.
Enable the Checkout modal by:
- Navigating to the Checkout modal tab on your Campaign’s page and clicking the Enable Checkout modal button.
Or
- Opening your Campaign, selecting Settings, then General, and ticking the Checkout modal checkbox in the Campaign format section.
⚠️ SSL required: To use the Checkout modal on your website, you must have a valid SSL certificate installed on your web server and ensure that your website is served over HTTPS.
Preview and Test Your Checkout Modal
To see how supporters will experience your Checkout modal, you can either:
Preview
Preview the donation screens as they will appear to supporters, based on your current settings. Note that this preview is non-interactive.
Test
Testing your Checkout modal allows you to actually go through the donation process just as your future supporters will.
- In the Campaign Overview, click the Make a test donation link located in the Checkout modal section.
- While previewing your Campaign, click the Make a test donation link found in the hint bar below the Preview.
These methods enable you to simulate a donation with flexibility to test various locales and countries. Learn more →
How We Optimize Conversions
Conversion optimization is key in the Checkout form, enhanced by modern web technologies, e-commerce strategies, and AI integration. Givetly uses several methods to optimize conversion at checkout.
Zero Redirects
The Checkout modal appears on top of your page without redirecting to another page, helping to maintain click-to-view conversion.
Suggested Donation Amounts
Our Checkout form uses AI to personalize suggested donation amounts for each visitor, improving conversion rates.
Impact Descriptions
Inform supporters about the impact of their donation using impact descriptions built into the Checkout modal.
”Remind Me Later” Screen
The “Remind me later” screen prevents the loss of potential donations by allowing supporters to be reminded to complete their donation later.
Upsells and Cross-sells
The Checkout form includes features to encourage supporters to upgrade from one-time to recurring donations and promotes other donation frequencies.
Address Autofill
Address autofill simplifies the checkout process by minimizing the amount of typing needed when a supporter is asked for their mailing address.
Adaptive Cost Coverage
Adaptive cost coverage uses AI to decide who should be prompted with the request to cover transaction costs.
Accessibility
Givetly’s Checkout form includes accessibility features and is WCAG 2.1 AA compliant, regularly audited by independent third-party accessibility auditors. Learn more →
Payment Methods
The Checkout form allows presenting virtually any modern payment method during checkout. Read more about our payment methods →
Supported Payment Methods
| Type | Methods |
|---|---|
| Bank Debits | ACH US Direct Debit, Bacs Direct Debit, BECS in Australia, PADs, SEPA Direct Debit |
| Bank Redirects | iDEAL |
| Cards | American Express, Cartes Bancaires, Diners, Discover, JCB, Mastercard, Visa, UnionPay |
| Wallets | Apple Pay, Google Pay, PayPal, Venmo |
Payment Method-Specific UI
Givetly has designed specific user interfaces for different payment methods, such as cryptocurrency, to streamline the checkout process.
URL API
You can personalize the checkout experience using Givetly’s URL API to pre-set certain Checkout attributes. Learn more →
UTM Parameter Tracking
When UTM parameters are included in a Checkout modal’s URL, these are captured and stored in the resulting donation record.
JavaScript Events
Givetly’s JavaScript API includes three events for tracking or integration purposes. Learn more →
Localization
Givetly offers Checkout in 23 languages, making donation experiences accessible in visitors’ preferred languages. Learn more →