JavaScript SDK
Introduction
Complete guide to implementing GivePay payments with JavaScript
Quickstart
Get started with GivePay in minutes. This example shows the simplest way to add a payment button to your website.
Minimal Example
<!DOCTYPE html>
<html>
<head>
<title>GivePay Checkout</title>
</head>
<body>
<!-- 1. Add the GivePay script tag with your API key -->
<script src="https://cdn.givepay.co/v1/givepay.min.js?key=gp_test_pk_your_key_here"></script>
<!-- 2. Add the button container -->
<div class="give-pay"></div>
<!-- 3. Initialize the payment button -->
<script>
givepay.renderButton({
payment_type: "one_time",
currency: "USD",
line_items: [
{
name: "Product Name",
quantity: 1,
amount: 5000, // $50.00 (in cents)
},
],
payer: {
email: "customer@example.com",
},
return_url: "https://yoursite.com/success",
});
</script>
</body>
</html>That's it! The button will automatically appear in your page and handle the payment flow.
Payment Types
GivePay supports multiple types of payment sessions:
- One-Time Payments: Single transactions for donations, purchases, or one-time fees
- Subscriptions: Recurring payments for monthly giving, sponsorships, or memberships
- Mixed: Subscriptions with additional one-time items (e.g., setup fees)
See the Payment Options Reference for complete details on each payment type, including subscription configuration and one-time items.
Next Steps
Now that you've seen the basics, explore the full documentation: