Donor Fuse API – Generate Credit Card Token using our Hosted Form library – Donor Fuse

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.

Search

How can we help?

Donor Fuse API – Generate Credit Card Token using our Hosted Form library