adyen/main_content.html in adyen-skinbuilder-0.1.0 vs adyen/main_content.html in adyen-skinbuilder-0.1.1

- old
+ new

@@ -1,596 +1,1192 @@ -== adyen main content == \ No newline at end of file +<script type="text/javascript"> + //<![CDATA[ + /* Form validation */ + var requiredFields = new Array(); + var fieldLinks = new Array(); + var errorMessages = new Array(); + var errorAreas = new Array(); + var validationFunctions = new Array(); + var details = new Array(); + + errorMessages["default"] = new Array(); + requiredFields["default"] = new Array(); + + var maySubmitOnlyOnce=true; + + requiredFields["default"].push("brandCode"); + errorMessages["default"]["brandCode"] = "Please enter your payment details"; + errorMessages["default"]["submitonce"] = "Your request is being processed, please wait...."; + + var locked = false; + var _valFunc = new function() {}; + + var displayAmountExtras = new Object(); + + function show(detail, actionURL, group, brandCode) { + + if(config["pmmanimation"] != 1) { + if(locked) { return false; } + locked = true; + setTimeout('locked=false',1000); + } + + document.forms["pageform"].action=actionURL; + document.forms["pageform"].onsubmit=null; + + if(document.forms["pageform"].addEventListener) { + document.forms["pageform"].removeEventListener('submit',_valFunc ,false); + document.forms["pageform"].addEventListener('submit',_valFunc = function(e) { + result = formValidate(document.forms["pageform"] ,group); + if(result == false) { + e=e||event; + e.preventDefault? e.preventDefault() : e.returnValue = false; + } + },false); + } else { + document.forms["pageform"].detachEvent('onsubmit',_valFunc); + document.forms["pageform"].attachEvent('onsubmit',_valFunc = function(e) { + result = formValidate(document.forms["pageform"] ,group); + if(result == false) { + e=e||event; + e.preventDefault? e.preventDefault() : e.returnValue = false; + } + }); + } + + document.forms["pageform"]["brandCode"].value=brandCode; + document.getElementById('extraCostAmount').innerHTML = displayAmountExtras[group]; + + if(detail != "") { + detail.slideit(); + for (i = 0; i < details.length; i++) { + if (details[i].divId != detail.divId) { + details[i].slideup(); + } + } + } + return false; + } + + + + + addOnLoad(preventEnterSubmit); + + + + //]]> +</script> +<script type="text/javascript" src="https://test.adyen.com/hpp/js/animatedcollapse.js"></script> +<script type="text/javascript" src="https://test.adyen.com/hpp/js/cc.js"></script> +<input type="hidden" id="brandCode" name="brandCode" value="" /> + +<h2 id="stageheader">Please Enter your Payment Details</h2> + +<div id="orderDataWrapper"> + <div id="orderDataHeader">Order Details</div> + <div id="orderData"> + <!-- Adyen Order Data --> + </div> +</div> +<div id="displayAmount"> + Total payment amount EUR 43.20 <span id="extraCostAmount"></span> +</div> + +<ul id="paymentMethods"> + <li style="list-style-type: none;"> + <button type="submit" name="brandName" value="VISA" class="imgB pmB pmBvisa" onclick="return show(collapsevisa, 'completeCard.shtml', 'card', 'visa');">VISA</button> + <span id="pmmextracosts-visa" class="pmmextracosts"></span><span id="pmvisadescription" class="pmmdescription"></span> + <div id="pmmdetails-visa" class="pmmdetails"> + <script type="text/javascript"> + //<![CDATA[ + /* Form validation */ + requiredFields["card"] = new Array(); + requiredFields["card"].push("cardHolderName"); + requiredFields["card"].push("cardNumber"); + requiredFields["card"].push("expiryMonth"); + requiredFields["card"].push("expiryYear"); + errorMessages["card"] = new Array(); + errorMessages["card"]["cardHolderName"] = "Card Holder Name missing"; + errorMessages["card"]["cardNumber"] = "Card Number invalid or missing"; + errorMessages["card"]["expiryMonth"] = "Expiry Month missing"; + errorMessages["card"]["expiryYear"] = "Expiry Year missing"; + errorMessages["card"]["cvcCode"] = "CVC/CVV/CID missing"; + errorMessages["card"]["generic"] = "Please enter your card details"; + + + var cvcinfo = new Array(); + cvcinfo["mc"] = "<h3>What is CVC?</h3>" + + "<p><img style=\"margin-right: 5px\" class=\"fl\" src=\"/hpp/img/CVC_mini.jpg\" alt=\"CVC location\" />" + + "The Card Validation Code (CVC) is an <i>additional</i> " + + "three-digit security code that is printed (not embossed) on the back " + + "of your card.</p>" + + "<p>The CVC is an extra security measure to ensure that you are in possession of the card.</p><br style=\"clear: both\" />"; + cvcinfo["visa"] = "<h3>What is CVV?</h3>" + + "<p><img style=\"margin-right: 5px\" class=\"fl\" src=\"/hpp/img/CVV_mini.jpg\" alt=\"CVV location\" />" + + "The Card Verification Value (CVV) is an <i>additional</i> " + + "three-digit security code that is printed (not embossed) on the back " + + "of your card.</p>" + + "<p>The CVV is an extra security measure to ensure that you are in possession of the card.</p><br style=\"clear: both\" />"; + cvcinfo["amex"] = "<h3>What is CID?</h3>" + + "<p><img style=\"margin-right: 5px\" class=\"fl\" src=\"/hpp/img/CID_mini.jpg\" alt=\"CID location\" />" + + "The Card IDentification (CID) is an <i>additional</i> " + + "four-digit security code that is printed (not embossed) on the front " + + "of your card.</p>" + + "<p>The CID is an extra security measure to ensure that you are in possession of the card.</p><br style=\"clear: both\" />"; + cvcinfo["card"] = "<h3>What is CVC/CVV/CID?</h3>" + + "<p>The Card Security Code (CVC/CVV/CID) is an <i>additional</i> " + + "three or four digit security code that is printed (not embossed) on the front or the back " + + "of your card.</p>" + + "<p>The CVC/CVV/CID is an extra security measure to ensure that you are in possession of the card.</p><br style=\"clear: both\" />"; + + var card_types = new Array(); + var card_logos = new Array(); + var card_displayAmountExtras = new Array(); + var card_extras = new Array(); + var previousCardNumber =""; + var card_subVariantExtras = new Object(); + var card_subVariantExtrasPhrase = new Object(); + var originalExtraCostPhrase = document.getElementById('pmmextracosts-visa').innerHTML; + + card_types.push("visa"); + card_logos.push("/img/pm/visa"); + card_displayAmountExtras.push(""); + card_extras.push(""); + + card_subVariantExtras['visacorporate'] = ""; + card_subVariantExtrasPhrase['visacorporate'] = ""; + card_subVariantExtras['travelmoney'] = ""; + card_subVariantExtrasPhrase['travelmoney'] = ""; + card_subVariantExtras['visabusiness'] = ""; + card_subVariantExtrasPhrase['visabusiness'] = ""; + card_subVariantExtras['visacredit'] = ""; + card_subVariantExtrasPhrase['visacredit'] = ""; + card_subVariantExtras['visahipotecario'] = ""; + card_subVariantExtrasPhrase['visahipotecario'] = ""; + card_subVariantExtras['visapurchasing'] = ""; + card_subVariantExtrasPhrase['visapurchasing'] = ""; + card_subVariantExtras['visaclassic'] = ""; + card_subVariantExtrasPhrase['visaclassic'] = ""; + card_subVariantExtras['visaplatinum'] = ""; + card_subVariantExtrasPhrase['visaplatinum'] = ""; + card_subVariantExtras['visasignature'] = ""; + card_subVariantExtrasPhrase['visasignature'] = ""; + card_subVariantExtras['electron'] = ""; + card_subVariantExtrasPhrase['electron'] = ""; + card_subVariantExtras['visacommercialcredit'] = ""; + card_subVariantExtrasPhrase['visacommercialcredit'] = ""; + card_subVariantExtras['visagold'] = ""; + card_subVariantExtrasPhrase['visagold'] = ""; + card_subVariantExtras['visa'] = ""; + card_subVariantExtrasPhrase['visa'] = ""; + card_subVariantExtras['visadebit'] = ""; + card_subVariantExtrasPhrase['visadebit'] = ""; + + + var baseURL = "/hpp/"; + if(baseURL.indexOf(";jsession") != -1) { + baseURL = baseURL.substr(0,baseURL.indexOf(";jsession")); + } + + function validateCcNumber(e, dontHideErrorFrame) { + cardNumber = (document.getElementById('cardNumber').value); + + if(cardNumber.length <= previousCardNumber.length) { + previousCardNumber = cardNumber; + if (cardNumber.length == 0) { + resetExtraCost(); + } + return; + } + var l=0; + while(l < previousCardNumber.length) { + if(cardNumber[l] != previousCardNumber[l]) { + previousCardNumber = cardNumber; + return; + } + l++; + } + + reg = /\s+/g; + cardNumber = cardNumber.replace(reg,''); + + nrOfDigits = cardNumber.length; + + if(nrOfDigits > 19){ + ccNumberPresentation(false); + return; + } + + ccNumberPresentation(true,dontHideErrorFrame); + + baseCard = getBaseCard(cardNumber,card_types); + if(baseCard != null) { + setCardBrand(baseCard, true); + } else if(nrOfDigits > 4) { + setCardBrand(null, true); + ccNumberPresentation(false); + } else { + setCardBrand(null, false); + } + + if (cardNumber.length < 6) { + setExtraCost(baseCard, null); + } else if (cardNumber.length == 6 || cardNumber.length == 9 || cardNumber.length == 12){ + _.X("/hpp/binLookup.shtml",function(d,r){ + if(r.status != 200 || d.indexOf('"result"') == -1) return false; + var response=eval("("+d+")"); + + if(typeof(response.result)=='undefined') return false; + + if (response.result == 0) { + lookedUpCardType = response.cardType; + } else { + lookedUpCardType = null; + } + setExtraCost(baseCard, lookedUpCardType); + + return true; + }, 'bin='+cardNumber+'&'+_.Q(_.G("pageform"))); + } + + //show value with white space after four numbers + result = cardNumber.replace(/(\d{4})/g, '$1 '); + result = result.replace(/\s+$/, ''); //remove trailing spaces + + previousCardNumber = result; + document.getElementById('cardNumber').value = result; + } + + function setExtraCost(selectedCard, lookedUpCard) { + var extraCostDisplayed = false; + if (lookedUpCard != null && card_subVariantExtras[lookedUpCard] != null) { + document.getElementById('extraCostAmount').innerHTML = card_subVariantExtras[lookedUpCard]; + displayAmountExtras['card'] = card_subVariantExtras[lookedUpCard]; + document.getElementById('pmmextracosts-visa').innerHTML = card_subVariantExtrasPhrase[lookedUpCard]; + extraCostDisplayed = true; + } else { + for(var i = 0; i < card_types.length; ++i) { + if(selectedCard != null && card_types[i] == selectedCard.cardtype && card_subVariantExtras[selectedCard.cardtype] != null) { + document.getElementById('extraCostAmount').innerHTML = card_subVariantExtras[selectedCard.cardtype]; + displayAmountExtras['card'] = card_subVariantExtras[selectedCard.cardtype]; + document.getElementById('pmmextracosts-visa').innerHTML = card_subVariantExtrasPhrase[selectedCard.cardtype]; + extraCostDisplayed = true; + } + } + } + + if (!extraCostDisplayed) { + resetExtraCost(); + } + } + + function resetExtraCost() { + displayAmountExtras['card'] = ""; + document.getElementById('extraCostAmount').innerHTML = ""; + document.getElementById('pmmextracosts-visa').innerHTML = originalExtraCostPhrase; + } + + function setCardBrand(selectedCard, greyInactive) { + + for(var i = 0; i < card_types.length; ++i) { + var imageId = "cclogo" + i; + if(selectedCard != null && card_types[i] == selectedCard.cardtype) { + document.getElementById(imageId).src=baseURL + card_logos[i] + "_small.png"; + } else { + if(greyInactive) { + document.getElementById(imageId).src=baseURL + card_logos[i] + "_small_grey.png"; + } else { + document.getElementById(imageId).src=baseURL + card_logos[i] + "_small.png"; + } + } + document.getElementById(imageId).style.display="inline"; + } + if(selectedCard != null) { + if(selectedCard.cardtype == "amex") { + document.getElementById("cvcCode").maxLength = 4; + document.getElementById('cvcName').innerHTML = "CID"; + document.getElementById('cvcWhatIs').innerHTML = "What is CID?"; + document.getElementById('cvcFrame').innerHTML = cvcinfo["amex"]; + showDebitCardFields("none"); + } else if (selectedCard.cardtype == "visa" || selectedCard.cardtype == "electron") { + document.getElementById("cvcCode").maxLength = 3; + document.getElementById('cvcName').innerHTML = "CVV"; + document.getElementById('cvcWhatIs').innerHTML = "What is CVV?"; + document.getElementById('cvcFrame').innerHTML = cvcinfo["visa"]; + showDebitCardFields("none"); + } else if (selectedCard.cardtype == "mc" || selectedCard.cardtype == "maestro" || selectedCard.cardtype == "maestrouk" || selectedCard.cardtype == "solo" ) { + document.getElementById("cvcCode").maxLength = 3; + document.getElementById('cvcName').innerHTML = "CVC"; + document.getElementById('cvcWhatIs').innerHTML = "What is CVC?"; + document.getElementById('cvcFrame').innerHTML = cvcinfo["mc"]; + if(selectedCard.cardtype == "maestrouk" || selectedCard.cardtype == "solo") { + showDebitCardFields(cssTr); + } else { + showDebitCardFields("none"); + } + } else { + document.getElementById("cvcCode").maxLength = 3; + document.getElementById('cvcName').innerHTML = "CVC"; + document.getElementById('cvcWhatIs').innerHTML = "What is CVC?"; + document.getElementById('cvcFrame').innerHTML = cvcinfo["card"]; + showDebitCardFields("none"); + } + } + } + + function showDebitCardFields(show) { + document.getElementById('cardIssueNumber').style.display = show; + document.getElementById('cardStartDate').style.display = show; + document.getElementById('pmmdetails-visa').style.height = document.getElementById('pmmdetails-visa').scrollHeight + "px"; + collapsevisa._getheight(true); + } + + function ccNumberPresentation(valid, dontHideErrorFrame){ + var errors = new Array(); + errors.push("cardNumber"); + if(valid){ + clearErrors(errors, dontHideErrorFrame); + } + else{ + markErrorFields(errors); + } + } + + function blockNonNumbers(e) { + var key; + var isCtrl = false; + var keychar; + var reg; + + if(window.event) { + key = e.keyCode; + isCtrl = window.event.ctrlKey + } + else if(e.which) { + key = e.which; + isCtrl = e.ctrlKey; + } + + if (isNaN(key)) return true; + + keychar = String.fromCharCode(key); + + // check for backspace or delete, or if Ctrl was pressed + if (key == 8 || isCtrl) { + return true; + } + + reg = /[\d ]/; + + return reg.test(keychar); + } + + validationFunctions + function doCCCheck(){ + cardNumber = (document.getElementById('cardNumber').value); + reg = /\s+/g; + cardNumber = cardNumber.replace(reg,''); + if(!luhnCheck(cardNumber)) + ccNumberPresentation(false); + else + ccNumberPresentation(true); + } + + validationFunctions["card"] = new Array(); + validationFunctions["card"]["cardNumber"] = function (cardNumberField) { + cardNumber = cardNumberField.value; + reg = /\s+/g; + cardNumber = cardNumber.replace(reg,''); + if(cardNumber == "" || luhnCheck(cardNumber)){ + return true; + } + return false; + } + + + + //]]> + </script> + + <table class="basetable"> + <tr> + <td class="mid"><div id="cclogoheader" style="display: none">Card Type</div></td> + <td class="mid"> + <div style="height: 25px" id="cclogo"> + <img alt="" id="cclogo0" style="display: none" class="mid" src="/hpp/img/pm/unknown_small.png" /> + <img alt="" id="cclogo1" style="display: none" class="mid" src="/hpp/img/pm/unknown_small.png" /> + <img alt="" id="cclogo2" style="display: none" class="mid" src="/hpp/img/pm/unknown_small.png" /> + <img alt="" id="cclogo3" style="display: none" class="mid" src="/hpp/img/pm/unknown_small.png" /> + <img alt="" id="cclogo4" style="display: none" class="mid" src="/hpp/img/pm/unknown_small.png" /> + <img alt="" id="cclogo5" style="display: none" class="mid" src="/hpp/img/pm/unknown_small.png" /> + <img alt="" id="cclogo6" style="display: none" class="mid" src="/hpp/img/pm/unknown_small.png" /> + <img alt="" id="cclogo7" style="display: none" class="mid" src="/hpp/img/pm/unknown_small.png" /> + <img alt="" id="cclogo8" style="display: none" class="mid" src="/hpp/img/pm/unknown_small.png" /> + <script type="text/javascript"> + setCardBrand(null, false); + </script> + </div> + </td> + </tr> + <tr id="cardNumberTr"> + <td><div>Card number</div></td> + <td><div class="fieldDiv"><input type="text" class="inputField" id="cardNumber" onkeypress="return blockNonNumbers(event)" onkeyup="validateCcNumber(event)" onblur="validateCcNumber(event)" onchange="doCCCheck()" name="cardNumber" value="" size="24" maxlength="23" /></div></td> + </tr> + <tr> + <td><div>Card holder name</div></td> + <td><div class="fieldDiv"><input type="text" class="inputField" id="cardHolderName" name="cardHolderName" value="" size="19" maxlength="30" /></div></td> + </tr> + <tr id="cardIssueNumber" style="display: none"> + <td><div>Issue Number</div></td> + <td><div class="fieldDiv"><input type="text" class="inputField" name="issueNumber" id="issueNumber" size="4" maxlength="2" /></div></td> + </tr> + <tr id="cardStartDate" style="display: none"> + <td><div>Start Date</div></td> + <td><div class="fieldDiv"> + <select class="inputField" name="startMonth" id="startMonth" size="1"> + <option value="*"></option> + <option value="01">01</option> + <option value="02">02</option> + <option value="03">03</option> + <option value="04">04</option> + <option value="05">05</option> + <option value="06">06</option> + <option value="07">07</option> + <option value="08">08</option> + <option value="09">09</option> + <option value="10">10</option> + <option value="11">11</option> + <option value="12">12</option> + </select> + &nbsp;/&nbsp; + <select class="inputField" name="startYear" id="startYear" size="1"> + <option value="*"></option> + <option value="2011">2011</option> + <option value="2010">2010</option> + <option value="2009">2009</option> + <option value="2008">2008</option> + <option value="2007">2007</option> + <option value="2006">2006</option> + <option value="2005">2005</option> + <option value="2004">2004</option> + <option value="2003">2003</option> + <option value="2002">2002</option> + </select> + </div> + </td> + </tr> + <tr> + <td><div>Card expiry date</div></td><td> + <div class="fieldDiv"> + <select class="inputField" name="expiryMonth" id="expiryMonth" size="1"> + <option value="*"></option> + <option value="01">01</option> + <option value="02">02</option> + <option value="03">03</option> + <option value="04">04</option> + <option value="05">05</option> + <option value="06">06</option> + <option value="07">07</option> + <option value="08">08</option> + <option value="09">09</option> + <option value="10">10</option> + <option value="11">11</option> + <option value="12">12</option> + </select> + &nbsp;/&nbsp; + <select class="inputField" name="expiryYear" id="expiryYear" size="1"> + <option value="*"></option> + <option value="2011">2011</option> + <option value="2012">2012</option> + <option value="2013">2013</option> + <option value="2014">2014</option> + <option value="2015">2015</option> + <option value="2016">2016</option> + <option value="2017">2017</option> + <option value="2018">2018</option> + <option value="2019">2019</option> + <option value="2020">2020</option> + <option value="2021">2021</option> + <option value="2022">2022</option> + <option value="2023">2023</option> + <option value="2024">2024</option> + <option value="2025">2025</option> + <option value="2026">2026</option> + <option value="2027">2027</option> + </select> + </div> + </td> + </tr> + <tr> + <td><div id="cvcName">CVC/CVV/CID</div></td> + <td><div class="fieldDiv"><input class="inputField" type="text" name="cvcCode" value="" id="cvcCode" size="7" maxlength="3" /> &nbsp; <a href="#" onclick="return toggleElement('cvcFrame');"><span id="cvcWhatIs">What is CVC/CVV/CID?</span></a></div></td> + </tr> + <tr> + <td colspan="2"><div class="r"> + <input class="paySubmit paySubmitvisa" type="submit" name="pay" value="Confirm payment" /> + </div></td> + </tr> + </table> + + <div class="popupMsg popupMsgOPP " style="display: none;" onclick="return hideElement('cvcFrame');" id="cvcFrame"> + <h3>What is CVC/CVV/CID?</h3> + <p>The Card Security Code (CVC/CVV/CID) is an <i>additional</i> + three or four digit security code that is printed (not embossed) on the front or the back + of your card.</p> + <p>The CVC/CVV/CID is an extra security measure to ensure that you are in possession of the card.</p> + </div> + + + <script type="text/javascript"> + //<![CDATA[ + + // find out what the CSS implementation calls the tr "display" value + var cssTr = document.getElementById('cardNumberTr').style.display; + + if(document.getElementById('cardNumber').value.length > 0) { + var validateCcNumberTimer = setTimeout('validateCcNumber(null,true)', 2500); + } + + //]]> + </script> + + <script type="text/javascript"> + var collapsevisa = new animatedcollapse("pmmdetails-visa", 1000, false, false, config["pmmanimation"]==1?false:true); + details.push(collapsevisa); + + displayAmountExtras['card'] = ""; + + + + addOnLoad(function () { + setTimeout("show(collapsevisa, 'completeCard.shtml', 'card', 'visa')",100); + }); + + if (notNull(document.getElementById('pmmform-visa'))) { + document.getElementById('pmmform-visa').setAttribute("autocomplete","off"); + } + </script> + </div> + </li> +</ul> + +<div id="errorFrame" style="display: none;" class="popupMsg errorFrame"> + <div id="errorFrameValidationErrors"></div> +</div> +<div id="okFrame" style="display: none;" class="popupMsg okFrame"> + <div id="okFrameMessages"></div> +</div> + +<input type="text" style="display: none" /> +<input type="hidden" name="sig" value="" /> +<input type="hidden" name="merchantReference" value="" /> +<input type="hidden" name="paymentAmount" value="4320" /> +<input type="hidden" name="currencyCode" value="EUR" /> +<input type="hidden" name="shipBeforeDate" value="2011-06-03" /> +<input type="hidden" name="skinCode" value="Zij12nYa" /> +<input type="hidden" name="merchantAccount" value="Test" /> +<input type="hidden" name="shopperLocale" value="en" /> +<input type="hidden" name="stage" value="pay" /> +<input type="hidden" name="sessionId" value="" /> +<input type="hidden" name="orderData" value="" /> +<input type="hidden" name="sessionValidity" value="" /> +<input type="hidden" name="countryCode" value="" /> +<input type="hidden" name="shopperEmail" value="test@test.com" /> +<input type="hidden" name="allowedMethods" value="visa" /> +<input type="hidden" name="originalSession" value="" /> +<input type="hidden" name="referrerURL" value="" />