Customization: Adding "Pay Offline" option to payments screen

Last post 01-23-2012, 6:42 PM by iacac. 1 replies.
Sort Posts:
  •  01-16-2012, 2:58 PM 24666

    Customization: Adding "Pay Offline" option to payments screen

    One of the changes we made in last release (4.3) was to remove the 'offline payment' option for invoices. Unfortunately this caused problems for some of our clients so we're working on solution as I write this message.

     

    However in the mean time you can use this customization created by our Nerdy Apricot Omar to insert a custom Pay Offline button and message. 

    To use this workaround simply copy and paste the entire code below into your Global Javascript (see http://help.wildapricot.com/display/DOC/Site+Settings#SiteSettings-GlobalJavascript ) .

    Once inserted you can custom the label of the button and message by editing the value of btnText and offlineMsg - the rest of the code does not need to be edited.

     

    <script type="text/javascript">
    //Replace the text between the quotes with your custom message
    var offlineMsg = "Thank you, we will update your transaction once payment is received";
    window.onload = function(){
      if (String(window.location).match(/Sys\/Profile\/Invoices/)) {
        var payBtnDiv = document.getElementById('payButtonsMessageBoxGroup');
        var btnText = "Pay offline";
        var boxDiv = payBtnDiv.parentNode;
        var offlineDiv = document.createElement('div');
        if (navigator.appName == "Microsoft Internet Explorer"){offlineDiv.className = 'alert';offlineDiv.style.fontWeight='bold';} 
        else {offlineDiv.setAttribute('class','alert');offlineDiv.setAttribute('style','font-weight:bold');}
        offlineDiv.innerHTML = offlineMsg;
        var offlineBtn = document.createElement('input');
        offlineBtn.id = 'offlineBtn';
        offlineBtn.setAttribute('value',btnText);
        offlineBtn.setAttribute('type','submit');
        if (navigator.appName == "Microsoft Internet Explorer"){offlineBtn.className = 'button';} 
        else {offlineBtn.setAttribute('class','button');}
        offlineBtn.onclick = function(){boxDiv.innerHTML = '';boxDiv.appendChild(offlineDiv);return false;}
        if(document.getElementById('payButtonsMessageBoxGroup')){payBtnDiv.appendChild(offlineBtn);}
        if (offlineBtn.value != btnText){offlineBtn.value = btnText;}
      }
    }
    </script>
    

     

    As you can see in the comments you have two customizable options. The text of the button (btnText) and the message (offlineMsg) that should be displayed after they press the button. This code was tested in Firefox, Internet Explorer and Google Chrome.

     


    Frank | User Experience Designer
    Wild Apricot
  •  01-23-2012, 6:42 PM 24751 in reply to 24666

    • iacac is not online. Last active: 05-20-2012, 10:01 PM iacac
    • Top 150 Contributor
    • Joined about 3 years ago
    • Posts 15

    Re: Customization: Adding "Pay Offline" option to payments screen

    While I appreciate the effort to create a work around, this is kind of awkward. We also use different Pay Offline instructions depending on the event (payments for different events are mailed to different event managers).

     

    I hope we can get a simple, clean, permanent, and intuitive solution ASAP.

    Thanks! 

View as RSS news feed in XML
Membership Software - Wild Apricot