> ## Documentation Index
> Fetch the complete documentation index at: https://docs.wegive.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Pay with WeGive

> Add hosted donation checkout to your website or build a custom checkout with the WeGive Pay SDK.

Pay with WeGive lets donors give from your website while WeGive handles payment
processing and records the donation in your organization. Choose a hosted pop-up
or build your own checkout with Payframes and the processing API.

<Note>
  WeGive Pay is available to enabled organizations. Contact
  [support@wegive.com](mailto:support@wegive.com) or your WeGive contact to request
  access, configure your site origins, and confirm the payment methods supported
  by your account.
</Note>

## Choose your integration

| | Hosted pop-up | Payframes and processing API |
| - | - | - |
| Your application | A donation button and the page around it | Your own donation form, backend, and completion experience |
| WeGive provides | Hosted donor identification, payment-method selection, donation confirmation, and results | Secure card-entry fields, tokenization, and server-side processing endpoints |
| Credentials | A browser-safe publishable key | A publishable key in the browser and a secret key on your server |
| Recurring donations | Pass the schedule into checkout | Create and manage recurring plans through the API |
| Appearance | Configure colors, logos, fonts, copy, language, and form options | Design your form and style the embedded card fields |

Both paths support test donations and attribution to your organization's
campaigns, designations, and brands. Available payment methods depend on your
account and processor. Payframes exposes card fields; bank integrations require
an approved bank-tokenization flow. The hosted pop-up offers bank entry where
enabled.

The SDK is distributed as versioned JavaScript files. Load it directly from a URL
or download a release into your application. No package-registry installation is
required.

## Start building

1. [Enable access and create keys](/external/onboarding/wegive-pay/setup-requirements).
2. [Install a pinned SDK version](/external/onboarding/wegive-pay/sdk-installation).
3. Follow the [pop-up guide](/external/onboarding/wegive-pay/popup-checkout) or
   [Payframes guide](/external/onboarding/wegive-pay/payframes-api).
4. [Test your integration](/external/onboarding/wegive-pay/testing-and-troubleshooting)
   with test keys before switching to live keys.

<CardGroup cols={2}>
  <Card title="Hosted pop-up" icon="window-maximize" href="/external/onboarding/wegive-pay/popup-checkout">
    Add a button and handle one-time or recurring donation results.
  </Card>

  <Card title="Payframes" icon="code" href="/external/onboarding/wegive-pay/payframes-api">
    Collect card details securely and submit donations through your backend.
  </Card>

  <Card title="Customize checkout" icon="palette" href="/external/onboarding/wegive-pay/customization">
    Apply your brand, choose languages, and configure the donor experience.
  </Card>

  <Card title="Versions and lifecycle" icon="code-branch" href="/external/onboarding/wegive-pay/versions-and-lifecycle">
    Understand SDK upgrades, session expiry, payment retries, and cleanup.
  </Card>
</CardGroup>

For exact method signatures, see the [SDK reference](/external/onboarding/wegive-pay/sdk-reference).
For backend requests and responses, see the
[processing API reference](/external/onboarding/wegive-pay/processing-api).

## Runnable examples

The [Laravel demo repository](https://github.com/givelistmediacompany/wegive-pay-laravel-demo)
contains pop-up, Payframes, and brand examples. Run it using its README and your
own test credentials. Ask your WeGive contact for repository access if needed.
The repository is an example application, not a hosted checkout service.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.