8min
Donations for Non-Profits

Use this guide to connect your non-profit's website to Tensile's SDK to enable accepting donations
1. Link to Tensile's JavaScript SDKTo install the Tensile Payments SDK, place the following <script> tag within the <head> of your desired HTML page, e.g. your checkout html page:
<script src="https://cdn.tensilepayments.com/tensile.js"></script>
To test the sandbox version of the SDK, load the following script instead:
<script src="https://cdn.tensilepayments.com/tensile-sandbox.js"></script>
This loads the Tensile SDK and assigns it to a global variable called tensile
2. Add a container div for the Tensile buttonIn the <body> of your HTML, add a container <div> where you'll want to render the Tensile donation button:
<div id="donation-container"></div>
You don't have to use "donation-container" as your ID, but whatever ID you use must also be used in the next step.
3. Instantiate the Tensile buttonIn the <body> of your HTML, somewhere after the container <div> you just added, add the following <script> tag and logic to configure the button:
HTML
|
    <script>
      const donationButton = tensile.Button({
        containerElementId: "donation-container",
        styleOptions: {
          buttonColor: "white",
          buttonSizeMode: "static",
          useDonationStyles: true,
        },
        onClick: () => { // opens the donation app
          // make sure the spelling and casing of your organization name matches
          // exactly what is registered with us for your merchant profile

          const organization = "Tensile Gear";
          donationButton.openDonationApp(organization);
        },
        renderProbability: 100,
      });
    </script>

    <script>
      const donationButton = tensile.Button({
        containerElementId: "donation-container",
        styleOptions: {
          buttonColor: "white",
          buttonSizeMode: "static",
          useDonationStyles: true,
        },
        onClick: () => { // opens the donation app
          // make sure the spelling and casing of your organization name matches
          // exactly what is registered with us for your merchant profile

          const organization = "Tensile Gear";
          donationButton.openDonationApp(organization);
        },
        renderProbability: 100,
      });
    </script>
﻿
4. Test the integration!You should now have a button on your html page that links to the donations app.
Tensile donations button
﻿
Tensile donations app
﻿
5. Hyperlinks and Sandbox Mode (optional)Alternatively, if you wish to avoid using the SDK, you can still use the underlying link to your liking, but the app will not open in a modal within the same tab.
e.g. underlying link: https://checkout.tensilepayments.com/donate/Tensile%20Gear﻿
Note that the organization name at the end of the url is web encoded to account for spaces in the organization's name.
If you'd like to test the experience in sandbox mode instead, simply include "sandbox" in the url:
e.g. https://checkout.sandbox.tensilepayments.com/donate/Tensile%20Gear﻿
To link a bank account to a customer profile in sandbox, you can use credentials for any bank and make the username "user_good" and password "pass_good" on the link-a-bank page.
Updated 03 Mar 2023
Did this page help you?
Yes
Docs powered by archbee
TABLE OF CONTENTS
1. Link to Tensile's JavaScript SDK
2. Add a container div for the Tensile button
3. Instantiate the Tensile button
4. Test the integration!
5. Hyperlinks and Sandbox Mode (optional)