Embedding a Checkout on Your Website

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

Open the Checkout you want to embed from your WeGive dashboard.
Click the Implement button.
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. Takes the campaign’s numeric WeGive ID, not its name or Salesforce ID (e.g. campaign=460045, not campaign=Spring%20Appeal) — an unresolvable value is flagged rather than silently dropped, so the donor isn’t redirected away from your configured checkout over a bad campaign parameter. If you only have a campaign’s slug (not its numeric ID) on hand, use campaign_slug instead — it resolves the same way.
campaign_slug — Alternative to campaign: associates the donation with a campaign by its slug instead of its numeric ID.
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 (a free-text marketing label, independent of the campaign/campaign_slug parameters above — one associates the donation with an actual Campaign record for reporting/Salesforce purposes, the other is just a tracking tag).
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

Dynamically Forwarding URL Parameters Into an Inline Embed

The inline embed’s src attribute (see Method 2 above) is a single fixed URL — if you paste the same embed code on multiple pages, or reuse one embed across several marketing emails, every donor who loads that page gets the exact same hardcoded parameters. That’s fine when a checkout’s campaign/designation/UTM values never change, but it breaks the common case of sending several emails to the same landing page and wanting to track each email separately (e.g. utm_content=Email1 vs. utm_content=Email2), since the embed itself can’t read the values from the page’s own URL on its own. To forward parameters from the page’s URL into the embedded checkout dynamically, add a small script alongside the iframe that copies the relevant query parameters at page-load time, before the iframe’s src is set:

<iframe
  id="wegive-checkout"
  title="Donate"
  allowpaymentrequest="true"
  allow="payment"
  width="100%"
  height="100%"
></iframe>

<script>
  const checkout = new URL(
    "https://app.wegive.com/{your-org-slug}/checkout/{checkout-slug}"
  );
  const pageParams = new URLSearchParams(window.location.search);

  [
    "utm_source", "utm_medium", "utm_campaign",
    "utm_content", "utm_term", "utm_id",
    "amount", "recurring", "frequency", "campaign", "campaign_slug", "designation"
  ].forEach(function (key) {
    if (pageParams.has(key) && !checkout.searchParams.has(key)) {
      checkout.searchParams.set(key, pageParams.get(key));
    }
  });

  document.getElementById("wegive-checkout").src = checkout.href;
</script>

This forwards any of the listed parameters present on the page’s own URL (e.g. yoursite.org/give?utm_source=email&utm_content=Email3) into the embedded checkout, without hardcoding them into the embed itself — so the same embed code works across every email/campaign variant; only the links you send out need to differ. Any parameter already set directly on the checkout URL (e.g. a fixed campaign) is left alone by the script and takes precedence — so leave campaign-specific or email-specific values out of the base checkout URL if you want the page’s own URL to supply them instead.

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.

​Getting Your Embed Code

​Method 1: Direct Link

​Method 2: Inline Embed (iframe)

​Key attributes

​Tips for iframe embeds

​Method 3: Pop-Up

​How it works

​Using transparent background

​Customizing the trigger

​URL Parameters Reference

​Example with parameters

​Dynamically Forwarding URL Parameters Into an Inline Embed

​Tracking Embedded Checkout Performance

​Environments