Embedding a Checkout on Your Website

Last updated: April 9, 2026

WeGive checkouts can be added to any website so donors can give without leaving your page. There are three ways to implement a checkout: as a direct link, an inline embed, or a pop-up. This article walks through each method and the options available to you.

Getting Your Embed Code

  1. Open the Checkout you want to embed from your WeGive dashboard.

  2. Click the Implement button.

  3. A dialog will appear with three tabs: Link To, Embed, and Pop-Up. Choose the method that fits your website.

Before copying your code, you can configure several options directly in the Implement dialog:

  • Campaign — Associate the checkout with a specific campaign. All donations made through this checkout will be aggregated into the selected campaign.

  • Designation — Pre-select a fund so donors don't have to choose one themselves.

  • Payment Processor — If your organization has multiple payment processors connected (e.g., Payrix, Stripe, Finix, or Braintree), you can select which one this checkout should use.

  • Test Mode — Toggle this on to generate a test URL that processes test transactions instead of real ones. Test URLs route to a /test path and include a preview=true parameter.

  • Single Page — Override the checkout layout to display as a single-page form instead of the default multi-step flow.

  • Transparent Background — Remove the checkout background so it blends into your website's design (available for pop-up implementations).

  • UTM Parameters — Expand the UTM fields to add utm_source, utm_medium, utm_campaign, utm_term, and utm_content for marketing attribution. These values are stored on each checkout session and can be used to track which channels drive donations.

Once you've configured your options, copy the generated code and paste it into your website.

Method 1: Direct Link

The simplest option. You get a URL that you can use anywhere — in a button, a text link, an email, or a social media post. Clicking the link takes the donor to a full-page hosted checkout.

Your link will follow this format:

https://app.wegive.com/{your-org-slug}/checkout/{checkout-slug}

If you've associated a campaign, the URL will include it in the path:

https://app.wegive.com/{your-org-slug}/checkout/{checkout-slug}/{campaign-slug}

Any UTM parameters or other options you selected will be appended as query parameters.

Method 2: Inline Embed (iframe)

The embed option generates an iframe you can paste directly into your website's HTML. The checkout form renders inline on your page, so donors can complete their gift without navigating away.

The generated code looks like this:

html

<iframe  id="inlineFrameExample"  allowpaymentrequest="true"  allow="payment"  title="Inline Frame Example"  width="100%"  height="100%"  src="https://app.wegive.com/{your-org-slug}/checkout/{checkout-slug}"></iframe>

Key attributes

  • allowpaymentrequest="true" and allow="payment" enable the browser's Payment Request API, which is required for Apple Pay and Google Pay to function inside the iframe.

  • width and height are set to 100% by default, meaning the iframe will fill whatever container you place it in. You should wrap it in a parent element with a defined height to control the size on your page.

Tips for iframe embeds

  • Set a container height of at least 700px for multi-step checkouts to avoid internal scrolling.

  • If you're using a single-page checkout layout, you may need a taller container since all fields are shown at once.

  • Test on mobile devices to make sure the iframe is scrollable and the payment step is accessible.

Method 3: Pop-Up

The pop-up option adds a script to your page that opens the checkout in a modal overlay when a donor clicks a button. This keeps your page layout clean while still providing the full checkout experience.

The generated code includes two parts — a button and a script tag:

html

<button id="{checkout-id}-activator">Give Now</button><script  id="wegive-popup"  src="https://app.wegive.com/dev/wegive-popup.js"  button-id="{checkout-id}-activator"  element-url="https://app.wegive.com/{your-org-slug}/checkout/{checkout-slug}"></script>

How it works

  • The button-id attribute tells the script which button on your page should trigger the pop-up. It matches the id of your button element.

  • The element-url attribute is the full checkout URL, including any campaign, designation, UTM, or processor parameters you configured.

  • When the donor clicks the button, the script opens a modal overlay containing the checkout.

Using transparent background

If you enabled Transparent Background in the Implement dialog, the script tag will include an additional attribute:

html

<script  id="wegive-popup"  src="https://app.wegive.com/dev/wegive-popup.js"  button-id="{checkout-id}-activator"  element-url="https://app.wegive.com/{your-org-slug}/checkout/{checkout-slug}"  background="transparent"></script>

This removes the default background from the pop-up overlay so you can style it to match your site.

Customizing the trigger

You don't have to use a <button> element. Any HTML element with the matching id will work — a link, an image, a div, etc. Just make sure the id matches the button-id attribute on the script tag.

URL Parameters Reference

You can manually append query parameters to any checkout URL (link, embed, or pop-up) for additional control:

  • single_page — Set to true to force the single-page checkout layout.

  • preview — Set to true to load the checkout in preview/test mode.

  • designation — Pre-select a specific fund or designation.

  • campaign — Associate the donation with a campaign for tracking.

  • payment_processor — Specify which connected processor to use (e.g., if you have multiple Payrix or Stripe accounts).

  • utm_source — Marketing attribution: the source (e.g., website, newsletter).

  • utm_medium — Marketing attribution: the medium (e.g., email, cpc).

  • utm_campaign — Marketing attribution: the campaign name.

  • utm_term — Marketing attribution: the paid search keyword.

  • utm_content — Marketing attribution: used to differentiate ad variations.

Example with parameters

https://app.wegive.com/{your-org-slug}/checkout/{checkout-slug}?single_page=true&utm_source=website&utm_medium=header_button

Tracking Embedded Checkout Performance

WeGive automatically tracks checkout sessions for embedded checkouts, including whether the checkout was loaded via an iframe. You can view this data in the Performance tab of your checkout, which shows session flow, step progression, drop-off points, and conversion rates. UTM parameters are captured per session so you can attribute donations to specific marketing channels.

Environments

If you are testing on a sandbox account, URLs will point to the sandbox environment:

https://app.sandbox.wegive.com/{your-org-slug}/checkout/{checkout-slug}

Make sure to update your embed code to use the production URL (https://app.wegive.com/...) before going live.