JavaScript SDK
Examples
Complete integration examples for the GivePay JavaScript SDK
Complete Examples
Example 1: Simple Donation
<!DOCTYPE html>
<html>
<head>
<title>Support Our Cause</title>
</head>
<body>
<h1>Winter Appeal Donation - £50</h1>
<p>Your donation helps provide warm clothing to those in need.</p>
<script src="https://cdn.givepay.com/v1/givepay.js?key=gp_test_pk_your_key_here"></script>
<div class="give-pay"></div>
<script>
givepay.renderButton({
currency: "GBP",
line_items: [
{
name: "Winter Appeal Donation",
quantity: 1,
amount: 5000, // £50.00
country_iso: "GB",
intention: "General Donation",
project: "Winter Appeal 2024"
},
],
payer: {
email: "donor@example.com",
first_name: "Sarah",
last_name: "Smith",
phone: "+447700900123",
billing_address: {
country: "GB",
city: "London",
line1: "10 Downing Street",
postcode: "SW1A 2AA",
state: "London"
}
},
return_url: "https://yourcharity.org/thank-you",
});
</script>
</body>
</html>Example 2: Donation with Merchandise
<!DOCTYPE html>
<html>
<head>
<title>Charity Shop Checkout</title>
</head>
<body>
<h1>Your Cart</h1>
<ul>
<li>Charity T-Shirt (x2) - £25.00 each</li>
<li>Additional Donation - £10.00</li>
<li>Shipping - £5.00</li>
</ul>
<p><strong>Total: £65.00</strong></p>
<script src="https://cdn.givepay.com/v1/givepay.js?key=gp_test_pk_your_key_here"></script>
<div class="give-pay"></div>
<script>
givepay.renderButton({
currency: "GBP",
line_items: [
{
name: "Charity T-Shirt",
quantity: 2,
amount: 2500, // £25.00 each
country_iso: "GB",
intention: "Merchandise",
project: "General Fund"
},
{
name: "Additional Donation",
quantity: 1,
amount: 1000, // £10.00
country_iso: "GB",
intention: "General Donation",
project: "General Fund"
},
{
name: "Shipping",
quantity: 1,
amount: 500, // £5.00
},
],
payer: {
email: "supporter@example.com",
},
return_url: "https://yourcharity.org/shop/complete",
});
</script>
</body>
</html>Example 3: Custom Styled Button
<!DOCTYPE html>
<html>
<head>
<title>Donate Now</title>
<style>
.give-pay {
max-width: 400px;
margin: 40px auto;
}
</style>
</head>
<body>
<h1>Support Our Cause</h1>
<p>Your donation helps us make a difference!</p>
<script src="https://cdn.givepay.com/v1/givepay.js?key=gp_test_pk_your_key_here"></script>
<div class="give-pay"></div>
<script>
givepay.renderButton(
{
currency: "USD",
line_items: [
{
name: "Donation",
quantity: 1,
amount: 10000, // $100.00
},
],
payer: {
email: "donor@example.com",
},
return_url: "https://yourorg.com/thank-you",
},
{
text: "Donate $100 Now",
style: {
backgroundColor: "#28a745",
color: "#ffffff",
padding: "20px 40px",
borderRadius: "50px",
fontFamily: "Helvetica, Arial, sans-serif",
fontWeight: "bold",
},
}
);
</script>
</body>
</html>Example 4: Dynamic Payment with User Input
<!DOCTYPE html>
<html>
<head>
<title>Custom Donation</title>
</head>
<body>
<h1>Make a Donation</h1>
<label for="email">Your Email:</label>
<input type="email" id="email" placeholder="your@email.com" required />
<br /><br />
<label for="amount">Donation Amount ($):</label>
<input type="number" id="amount" min="1" value="50" required />
<br /><br />
<script src="https://cdn.givepay.com/v1/givepay.js?key=gp_test_pk_your_key_here"></script>
<div class="give-pay"></div>
<script>
const emailInput = document.getElementById("email");
const amountInput = document.getElementById("amount");
// Re-render button when inputs change
function updateButton() {
const email = emailInput.value;
const amount = parseFloat(amountInput.value) || 50;
if (!email) {
return; // Wait for email to be entered
}
givepay.renderButton({
currency: "USD",
line_items: [
{
name: "Donation",
quantity: 1,
amount: Math.round(amount * 100), // Convert dollars to cents
},
],
payer: {
email: email,
},
return_url: "https://yourorg.com/donation/thank-you",
});
}
// Update button on input change
emailInput.addEventListener("blur", updateButton);
amountInput.addEventListener("change", updateButton);
// Initial render
updateButton();
</script>
</body>
</html>