Thank You Gifts

Let your donors choose a thank you gift during an SDK transaction.

This code section sets up the interface required for using Thank You Gifts.

Method

This function will use the value in the paymentAmount field to determine if a donor is giving an amount that meets the requirements for a thank-you gift. Refers to a local object giftLevels that contains the thresholds for different tiers.

//Grey out levels below current paymentAmount value.
function updateGiftsAvailable(){

     var currentLevel = parseFloat($('#paymentAmount').val());

     //Set inactives
     if(currentLevel < giftLevels.level3){
          $('#gift-level-3').addClass('gift-inactive');
          $('#gi3').addClass('gift-inactive');
          $('#gl3').prop('checked',false);
     }

     if(currentLevel < giftLevels.level2){
          $('#gift-level-2').addClass('gift-inactive');
          $('#gi2').addClass('gift-inactive');
          $('#gl2').prop('checked',false);
     }

     if(currentLevel < giftLevels.level1){
          $('#gift-level-1').addClass('gift-inactive');
          $('#gi1').addClass('gift-inactive');
          $('#gl1').prop('checked',false);
     }

     //Set actives
     if(currentLevel >= giftLevels.level1){
          $('#gift-level-1').removeClass('gift-inactive');
          $('#gi1').removeClass('gift-inactive');
     }

     if(currentLevel >= giftLevels.level2){
          $('#gift-level-2').removeClass('gift-inactive');
          $('#gi2').removeClass('gift-inactive');
     }

     if(currentLevel >= giftLevels.level3){
          $('#gift-level-3').removeClass('gift-inactive');
          $('#gi3').removeClass('gift-inactive');
     }
}

DOM Events

This code section sets up the events required to use Thank You Gifts.

document.addEventListener('DOMContentLoaded',function(){
     //Set initial state
     updateGiftsAvailable();
   
     //Watch for change in paymentAmount field
     $('#paymentAmount').on('change', function(){
          updateGiftsAvailable();
     });

     //Set up gift opt-out option
     $('#gift-opt-out').on('click', function(){
          if($('#gift-opt-out').prop('checked') == true){
               $('#gl1').prop('checked',false);
               $('#gl2').prop('checked',false);
               $('#gl3').prop('checked',false);
          }
     })

     //If radial is selected, uncheck box
     $('#gl1').on('click', function(){$('#gift-opt-out').prop('checked',false)});
     $('#gl2').on('click', function(){$('#gift-opt-out').prop('checked',false)});
     $('#gl3').on('click', function(){$('#gift-opt-out').prop('checked',false)});
});