• Edit the /usr/share/nginx/html/rd_login_pages/desktop/CoovaChilli/app/view/Land.js file.
• Use the following snippet of code as reference to see how to include the PayPal button.
• Note that you have to add a comma to the object before the Online Shop object (Help) and un-comment the Online Shop object.
• Also take note that you have to specify the xtype as pnlPayPal.

....
   {
       title       : 'Help',
       glyph       : CoovaChilli.config.icnHelp,
       html        : html_string,
       autoScroll  : true,
       itemId      : 'pnlHelp'
   },
   {
       title       : 'Online Shop',
       glyph       : CoovaChilli.config.icnShop,
       itemId      : 'pnlShop',
       xtype       : 'pnlPayPal'
       // xtype       : 'pnlPayAd'
       // xtype       : 'pnlPayU'
    }
 ]
...

• Next you have to edit the /usr/share/nginx/html/rd_login_pages/desktop/CoovaChilli/app/view/pnlPayPal.js file and replace the existing PayPal button with the one you created as the merchant.
• Look for the following part in the file:

flex        : 1,
html        : [
'<div class="lastPurchase">',
'<h3>Need time on the Internet?</h3>',
'<div>Select the time you want and click the <b>Buy Now</b> button below</div>',
'<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">',              

• Replace the instructions to fit the type of Internet vouchers you are selling e.g. time, data or both.
• The part that starts with <form… is what you replace with your own button.

• The following shows our PayPal button's code which we will use to replace the existing one.

• We also will add the following hidden items to the definition.

• Be sure to replace the your server with the hostname of your RADIUSdesk server.
• The other fields can remain as is since the clean_location item is derived by JavaScript code automatically.

• Here's our PayPal button shown:

• You can now re-build the Desktop Login pages as per the instructions in the Delevlopers Corner section of the Wiki in order to compact the code.
• Next we will tackle the Mobile Login Pages and add the PayPal button to them also.

• Edit the /usr/share/nginx/html/rd_login_pages/mobile/CoovaChilli/app/view/tabMain.js file.
• Use the following snippet of code as reference to see how to include the PayPal button.
• Note that you have to add a comma to the object before the Online Shop object (About) and un-comment the Online Shop object.
• Also take note that you have to specify the xtype as cntPayPal.

 {
     title       : 'About',
     iconCls     : 'info',
     xtype       : 'cntAbout',
     jsonData    : config.jsonData,
     itemId      : 'cntAbout',
     layout      : 'fit',
     scrollable  : false
  }
  ,{
      title       : 'Online shop',
      xtype       : 'container',
      itemId      : 'cntShop',
      iconCls     : 'compose',
      layout      : 'hbox',
      scrollable: {
         direction       : 'vertical',
         directionLock   : true
      },
      items: [
         { xtype : 'spacer', flex: 1 },
         {
            xtype : 'cntPayPal'
            //xtype : config.paymentScreen
         },
         { xtype : 'spacer', flex: 1 }
     ]
  } 
  /* {

• Next you have to edit the /usr/share/nginx/html/rd_login_pages/mobile/CoovaChilli/app/view/cntPayPal.js file and replace the existing PayPal button with the one you created as the merchant.
• Look for the following part in the file:

 {
    // bodyStyle   :{"background-color":"blue"},
    //  flex        : 1,
    cls         : 'lastPurchase',
    html        : [
       '<h3>Need extra time on the Internet?</h3>'+
        '<div>Select the time you want and click the <b>Buy Now</b> button below</div>'+

• Replace the instructions to fit the type of Internet vouchers you are selling e.g. time, data or both.
• The part that starts with <form… is what you replace with your own button.
• Note that the mobile pages are different since the string are concatenated with + and not added with , like the desktop pages.
• Use the instructions of the Desktop Login page as reference and remember to include those three hidden extra fields as you did with the Desktop Login page.
• Also note that the sample button in the mobile page uses div instead of table for the select layout. This is needed to position the button nicely on the mobile page. Adapt your code also to rather use the div element.

• Below is a screen shot of our button's code.

• Here's our PayPal button shown:

• You can now re-build the Mobile Login pages as per the instructions in the Delevlopers Corner section of the Wiki in order to compact the code.
• Now that we have our buttons on the Login Pages, its time to finish the PayPal configuration inside RADIUSdesk.