Installation & Setup

Option 1: Auto-Initialization (Recommended)

The easiest way to integrate GivePay is using the script tag with auto-initialization via the key query parameter:

<script src="https://cdn.givepay.com/v1/givepay.js?key=YOUR_API_KEY"></script>

Replace YOUR_API_KEY with your actual API key. The SDK will automatically initialize and be available as givepay.

Option 2: Manual Initialization

If you need to control when the SDK loads or initialize it dynamically (e.g., in a single-page application), you can load the script without the key and initialize it manually using GivePay.init().

Load the script without the key parameter:

<script src="https://cdn.givepay.com/v1/givepay.js"></script>

Initialize the SDK with your API key when ready:

// Initialize with your public key
// This returns the SDK instance, same as window.givepay in auto-init
const givepay = GivePay.init("gp_test_pk_your_key_here");

// Now you can use the SDK
givepay.renderButton({
  // ... payment options
});

API Keys

Test mode: Keys starting with gp_test_pk_ (points to development environment)
Live mode: Keys starting with gp_live_pk_ (points to production environment)

Button Container

Add a container element where you want the payment button to appear:

<div class="give-pay"></div>

The SDK looks for an element with the class give-pay to render the button.

Browser Support

The GivePay JavaScript SDK supports all modern browsers:

Chrome (latest)
Firefox (latest)
Safari (latest)
Edge (latest)

The SDK uses modern JavaScript features and the Fetch API.

Installation & Setup