For some strange reason. People have always thought of CPA Gateways as some sort of mystical piece of software. As if it was extremely hard to do. And certainly, the price tags that are attached to some of these things are absolutely astronomical. If we take at two of the gateways on the market at the moment, Both BlackHatCodeBreaker and CPA Convert go for $67 USD. Too much I say!
And so while I was half asleep at work on a friday afternoon. I decided to code my own. And you know, In a way I feel bad for doing this. Because seriously, I am ruining these guys businesses. But the code is so simple that I just cannot understand how people can keep charging for this stuff. I literally did all of the actual functionality (jQuery) in 10 minutes. Then spent 30 minutes trying to style the darn thing 
. Anyway, onto the code…
First you need this javascript. Just copy and paste it into the HEAD of your html document. It will need to go on every page you wish to protect.
<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js" type="text/javascript"></script> <script type="text/javascript"> var Delay = 10;//Seconds after them clicking the link, the gateway vanishes. function setupgateway() { var Left = $(window).width() /2; Left = Left - $('#gatewaydiv').width()/2; var Top = $(window).height() /2; Top = Top - $('#gatewaydiv').height()/2; $('#gatewaydiv').css('top', Top+'px').css('left', Left+'px').css('display', 'inline'); $('#gatewayDimmer').width($('html').width()); $('#gatewayDimmer').height($('html').height()); $('#gatewayDimmer').css('display','block'); } function removegateway() { $('#gatewaydiv').css('display', 'none'); $('#gatewayDimmer').css('display','none'); } $(document).ready(function() { $('.offerlink').click(function() { setTimeout('removegateway()', Delay*1000); }); setupgateway(); }); </script>
After that. You need these CSS styles. You don’t need all of them, but just take em all anyway and edit as you please. They should be pretty self explanatory. And if you don’t know, just google “Css CheatSheet”. And you should be able to work your way through em. Once again, put this code into the HEAD of your document.
<style>
body
{
background-image:url('http://i41.tinypic.com/29zvocy.jpg');
background-repeat:repeat;
height:100%;
margin:0;
}
#mainContent
{
background-color:white;
margin-left:auto;
margin-right:auto;
margin-top:30px;
width:700px;
border:3px solid #CDCDCD;
text-align:center;
}
#gatewaydiv
{
background-image:url("http://i41.tinypic.com/2znsvti.png");
background-repeat:no-repeat;
width:500px;
height:300px;
padding:20px;
position:absolute;
display:none;
background-color:#FFFFFF;
border:solid 4px gray;
text-align:center;
font-family:arial;
}
#gatewaydiv h1
{
font-size:35px;
color:#cc0000;
}
#gatewayMessage
{
font-size:18px;
}
.offerlink
{
color:red;
font-weight:bold;
}
#OfferList
{
margin:0;
padding:0;
}
#OfferList
{
list-style:none;
}
#gatewayDimmer
{
background-color:#000000;
opacity:0.8;
display:none;
position:absolute;
top:0;
}
</style>Now you need a little bit of HTML to make the code. I could have done this in Javascript. But it makes it a hell of alot easier just to edit it when it is HTML sitting on your page. Copy and paste this anywhere into the BODY of your page. Preferably make it just after the opening body tag.
<div id="gatewayDimmer"> </div> <div id="gatewaydiv"> <ul id="OfferList"> <h1>Do an offer or DAI!</h1> <span id="gatewayMessage">If you wish to see your friends alive. You will fill out an offer right now!</span> <br /><br /> <li><a href="http://www.wachahost.com" class="offerlink" target="blank">Cheap Web Hosting</a></li> <li><a href="http://www.yahoo.com" class="offerlink" target="blank">Yahoo</a></li> <li><a href="http://www.google.com" class="offerlink" target="blank">Google</a></li> </ul> <br /><br /> After completing an offer. Please wait up to a minute for it to register.<br /> Thank you! </div>
Basically just edit the “Delay” value in the javascript. This is basically a timer that after X amount of seconds elapsing after clicking a link, the gateway will be removed. In theory we could do postbacks aswell, but it would require alot more support from me to get each one of you setup.
From there, It should be fairly obvious where and how to edit it. I don’t really want to be sitting here all day long helping people out with it, so seriously, if you have a problem just google it . Simply questions are more than welcome to be asked.
Also, the dimmer background doesn’t always work. But you will have to live with that .
If you want an example of how this baby works. Check out http://www.pyrogenicmedia.com/gateway/gatewaycode.html. It uses exactly the same code.
Anyway enjoy. Feel free to share this around, just show some love with a link back 
awesome share Wade, New Zealand just got another point against Italy, what are you sharing next
Let’s see if we make it into the second round =). That means we have to beat paraguay really. Everyone in our pool has been all draws. BUT, I mean New Zealand is ranked 78th in the world… The whole country has stopped at the moment
.
Hey Wade I am really enjoying your site. Learning lots. Thank you for this code as well as the info in your other posts, it is very helpful. I was wondering if you could help me with setting a tease time on this gateway. I’m sure its easy but I am a complete noob when it comes to code. Anyways, thanks for saving me $67!
The timer is actually very easy. You could set up another timeout (There is one already in there). I guess it isn’t as easy as it looks. This was more of a spare of the moment thing, not sure if I am going to continue working on it. But we shall see.
what would I have to do to make this work “on click” rather than on a timer?
Perfect on Firefox and Chrome, but the dim on IE wan’t work.
Dark opacity is appear but still can click/access page content behind gateway box.
I’m not sure it would even block the clicks actually, I never coded it like that way. So if it works on Firefox then I guess that is just a bonus.
In all honesty, It was just something for people to get going. I can see plenty of clones popping up now using my code as a decent base.
Sure mate, I now using your code and modified it by myself and converting well for Firefox user.
Your code easy to customized. Thank you.
This is good code….I will use it for my websites….thanks alot
Hello Wade
I am trying to put an adscendmedia gateway to my blog but I dont know how..
Do you know an easy way to do it ?
Big thanks! I appreciate it alot. My offer provider’s gateway is being slightly stupid, so thanks!
Hi Pyro,
Been reading your blog for more than 5 months, saw you first on website note. I implemented this gateway code on my website, but when i click an offer and close it and again click an offer and close it…i can access the page without even completing any survey. I checked your sample gateway..and it’s the same. Any ideas?
Hi Wade,
Great script in deed. I know nothing about programming but was able to install this on one of my sites real easy. The question I have is how do I make sure that the content page only unlocks once the survey has indeed been completed?
I read your threads in the blackhatseo forum but couldn’t find anything to address this question I have?
Unfortunately the only thing to go off is the delay. This module doesn’t have a postback option, you can only guess the time it takes for the user to fill out the offer.