Custom Donation Flow - Creating a Cart with a Single Donation Value Example

This outlines how to correctly pass a single item or a cart of items over to Kindful so the objects can be processed in Kindful. A common example is event registration, sponsorships, memberships, and other custom transaction flows.

Creating a Cart with a Single Donation Value Example

HTML

                COPY
              
<div class="row">
  <div class="donate-options">
    <label>
      <input type="radio" value="25" name="donate-amount"/> $25
    </label>
    <label>
      <input type="radio" checked value="50" name="donate-amount"/> $50
    </label>
    <label>
      <input type="radio" value="100" name="donate-amount"/> $100
    </label>
  </div>
</div>

Javascript

                COPY
              
function calculateRegistration(){
  var amount = parseInt($('input[name="donate-amount"]:checked').val());
  var donationAmount = (isNaN(amount)) ? 0 : amount;
  return donationAmount
}

function buildUrl(){
  var items = 0;
  var donation_amount = calculateRegistration();
	var campaign_id = 0000 (substitute the Kindful campaign id you want the transaction to be tied to)
  
  var url = "https://testorg.kindful.com/widget?campaign_id=" + campaign_id;
  url += "&schedule=0" 
  url += "&success_action=GET"
  url += "&success_url=http%3A//testorg.org/"
  url += "&cart[desc]=Test Donation";
  
  if (donation_amount > 0){
    url += "&cart[items]["+items+"][amount]="+donation_amount;
    url += "&cart[items]["+items+"][desc]=Online Donation"
    url += "&cart[items]["+items+"][product_id]=online_donation"
    url += "&cart[items]["+items+"][quantity]=1";
    items ++;
  }
  if (items > 0){
    window.location.href = url;
  }else{
    alert('Please select a donation amount')
  }
}

NOTES:

schedule=0 sets the recurrence to be a one-time donation. if you'd like it to be recurring, please look at the different recurrence options in the "Top Level and Cart Params" table a little bit further down the page.

cart_item desc and cart_item product_id can be changed to be whatever you'd like the product name and product id to be. Online Donation is just an example. Kindful will dynamically create the product in our system if it doesn't already exist under your organization.

In addition to dynamically-building the URL with Javascript, a static URL can be placed as a link anywhere on the web. A great example is a "donate" button on your main website.

Be sure to use the full, original URL in any links you publish. During the process of testing your links, you are redirected to the Kindful checkout with a one-time-use URL which includes a randomly-generated ID. A common mistake is to publish this link instead of the longer URL which will forward any user on to the checkout.

The unique URL is valid for 5 days from the time it is generated. After that timeframe, a user visiting the link will be presented with the standard donation page for the campaign without any pre-set values or cart information.

For URLs short enough for a GET request, you can use this format:

https://org_subdomain.kindful.com/widget?campaign_id=9999&arg_2=test&arg_3=etc

If you have a large number of params, or a few with very long values, please POST all params instead to:

https://org_subdomain.kindful.com/set_widget_session

You'll get a response of:

{"widget_session_key" => session key to access the params}

On success, redirect user to checkout flow via the widget endpoint above, with the params widget_session_key=#{data['widget_session_key']} and check_widget_session=true

https://org_subdomain.kindful.com/widget?campaign_id=9999&widget_session_key=#{5555555555}&check_widget_session=true

You must be on a Kindful subdomain to execute the POST request.