This guide explains how to integrate Donor Fuse's hosted payment form into your website. The hosted form securely collects credit card information without sensitive data passing through your servers.
Include Required Scripts:
Add these scripts to your HTML <head> section:
<script src="https://js.basistheory.com/web-elements/2.9.0/index.js"
integrity="sha384-wmu8CwhrvCHCqTiSWYh8A/1fd1TwPiM5h5X7pQlLhfyb1op8euEb2Z7wJqN5XXt2"
crossorigin="anonymous"></script>
<script src="https://donate.donorfuse.com/assets/hosted.js"></script>
Create HTML Elements:
Create containers for the hosted form fields:
<div>
<p>Card Number</p>
<div class="cc-form-input-wrp">
<div id="CrecitCardNumberId"></div>
</div>
</div>
<div>
<p>Exp Date</p>
<div class="cc-form-input-wrp">
<div id="expDateId"></div>
</div>
</div>
<div>
<p>CVV</p>
<div class="cc-form-input-wrp">
<div id="cvvId"></div>
</div>
</div>
<button onclick="donate()">Process</button>
Initialize the Hosted Form:
var options = {
publicApiKey: 'YOUR_PUBLIC_API_KEY', // Contact support to obtain
ccFieldId: 'CrecitCardNumberId',
expFieldId: 'expDateId',
cvvFieldId: 'cvvId'
};
DonorFuseHostedClient.Init(options, () => {
console.log('form ready');
});
Process the Donation:
Refer to the article on how to submit the donation
function donate() {
// Start loader (user should not be able to click button while loading)
DonorFuseHostedClient.GenerateToken((response) => {
console.log('response', response);
if (response.success) {
var donation = {
Amount: 180,
DonorFirstName: 'John',
DonorLastName: 'Doe',
DonorEmail: 'john.doe@example.com',
PaymentMethod: 'CreditCard',
PaymentMethodToken: response.token,
ExpDate: response.expDate,
IsBtToken: true, // Required
isDuplicate: response.isDuplicate, // Required
// Add other fields as needed...
};
// Process the donation
// Stop Loader
} else {
// Stop Loader
alert(response.error);
}
});
}
Complete HTML Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Donor Fuse - Hosted Form</title>
<script src="https://js.basistheory.com/web-elements/2.9.0/index.js"
integrity="sha384-wmu8CwhrvCHCqTiSWYh8A/1fd1TwPiM5h5X7pQlLhfyb1op8euEb2Z7wJqN5XXt2"
crossorigin="anonymous"></script>
<script src="https://donate.donorfuse.com/assets/hosted.js"></script>
<style>
.cc-form-input-wrp {
height: 30px;
padding: 12px;
border-radius: 8px;
border: 1px solid #d5dbda;
width: 100%;
color: #24352f;
font-weight: 500;
font-family: Work Sans;
line-height: 24px;
}
</style>
<script>
var options = {
publicApiKey: 'YOUR_PUBLIC_API_KEY', // Contact support to obtain
ccFieldId: 'CrecitCardNumberId',
expFieldId: 'expDateId',
cvvFieldId: 'cvvId'
};
setTimeout(() => {
DonorFuseHostedClient.Init(options, () => {
console.log('form ready');
});
}, 100);
function donate() {
// Start loader (disable button to prevent double-clicks)
DonorFuseHostedClient.GenerateToken((response) => {
console.log('response', response);
if (response.success) {
// Process the donation
// POST to https://sandboxapi.donorfuse.com/api/Integrations/Donations/process
var donation = {
Amount: 180,
DonorFirstName: 'John',
DonorLastName: 'Doe',
DonorEmail: 'john.doe@example.com',
PaymentMethod: 'CreditCard',
PaymentMethodToken: response.token,
ExpDate: response.expDate,
IsBtToken: true, // Required
isDuplicate: response.isDuplicate, // Required
};
// Send donation object to your server
// Your server will POST to Donor Fuse API with X-api-key header
// Stop Loader
} else {
// Stop Loader
alert(response.error);
}
});
}
</script>
</head>
<body>
<div>
<p>Card Number</p>
<div class="cc-form-input-wrp">
<div id="CrecitCardNumberId"></div>
</div>
</div>
<div>
<p>Exp Date</p>
<div class="cc-form-input-wrp">
<div id="expDateId"></div>
</div>
</div>
<div>
<p>CVV</p>
<div class="cc-form-input-wrp">
<div id="cvvId"></div>
</div>
</div>
<button onclick="donate()">Process Donation</button>
</body>
</html>
Notes:
- For payment plans, set IsPaymentPlan to true and provide NumberOfMonths
- For payment plans, set IsPaymentPlan to true and provide NumberOfMonths.
- For recurring donations, set IsRecurring to true.
- CustomData and Raisers arrays must match the expected structure.
- Always implement proper loading states to prevent duplicate submissions.