Protx/Paypal Pro Integration - Hide CC Fields

[grantglendinnin]

Hey guys. I got a half working solution for the issues raised when enabling Paypal Pro and (presumably) any other PSP option.

A drop down list is created, with, in my scenario, Protx and Paypal.

If the user selects Protx, the CC fields below still show and are * as mandatory, even though they are not. Customers were entering their credit card details into those fields, clicking next, going to Protx then phoning up going mad "who did I give my card details to, now Protx is asking for them too?!?" yada yada yada. So, this idea dawned on me.

If Protx is selected, it (should) hide the CC fields, if Paypal Pro is selected in the list, the CC details fields are displayed. I spoke with Paul from support, and he managed to draw the following code up for me. The only issues is, when the page first loads, the CC fields are shown, even though Protx is selected as default. If the user selects Paypal, the fields still show, as expected. However, if they then go from Protx to Paypal back to Protx, the fields are hidden, as expected. So, my question is - how do I get the fields to be hidden when the page first loads at checkout and Protx is set as default? Here's the magic:

- in Design | Text dialog click on 'Go to'
- enter 1951 into ID and click OK
- enter the following text into Current Value field:

 <select name='PAYMENTMETHOD' size="1"
 onChange="javascript:HideCCDetails(this)" >

- click OK
- on Design tab, select page type 'Checkout Page 2'
- scroll down to the following lines:

 <actinic:variable name="OrderRequiresPayment" />
 <table border="0" cellspacing="2" cellpadding="2" class="checkout">

- after these lines insert the following lines:

<script language=javascript type='text/javascript'>
 function hideDiv()
 {
 if (document.getElementById)
 { // DOM3 = IE5, NS6
 document.getElementById('CCDetails').style.visibility = 'hidden';
 }
 else
 {
 if (document.layers)
 { // Netscape 4
 document.CCDetails.visibility = 'hidden';
 }
 else
 { // IE 4
 document.all.CCDetails.style.visibility = 'hidden';
 }
 }
 }
 
 function showDiv() {
 if (document.getElementById) { // DOM3 = IE5, NS6
 document.getElementById('CCDetails').style.visibility = 'visible';
 }
 else {
 if (document.layers) { // Netscape 4
 document.CCDetails.visibility = 'visible';
 }
 else { // IE 4
 document.all.CCDetails.style.visibility = 'visible';
 }
 }
 }
 
 function HideCCDetails(selectObj)
 {
 if (selectObj.options[selectObj.selectedIndex].value == "10005")
 {
 showDiv();
 }
 else
 {
 hideDiv();
 }
 }
 </script>

- the next line is

<actinic:variable name="CheckoutPrompt" value="Payment Method Selection"
 if="%3cactinic%3avariable%20name%3d%22PaymentPrompt000Visible%22%20%2f%3e"
 />

- insert the following lines after it

 </table>
 <div id="CCDetails">
 <table border="0" cellspacing="2" cellpadding="2" class="checkout">

- after these lines there is a 'block if' block. After the closing
</block> insert the following lines:

</table>
 </div>
 <table border="0" cellspacing="2" cellpadding="2" class="checkout">

And that's it! Any suggestions on how to hide the fields when the page first loads?

Cheers,
Grant

[grantglendinnin]

For anyone interested in a working solution for this, tried and tested in Firefox versions 1 and 2. Mozilla. Opera. Safari. IEE 4, 5, 6 and 7. The following very very simple piece of code completes the puzzle.

On this:

 <div id="CCDetails">

Add a hidden style, like so:

<div id="CCDetails" style="visibility:hidden;">

This makes the PayPal Pro and external PSP, such as Protx, integration much sleeker and more user friendly, in that they aren't confused as to whom their credit card details are being given to

Issue: Solved.

[TraceyG]

Thanks for this Grant, it's a very neat solution.

Can I just add that if anyone can't find:

<actinic:variable name="OrderRequiresPayment" />
 <table border="0" cellspacing="2" cellpadding="2" class="checkout">

It's in the 'Payment Phase' layout. I couldn't find it just by selecting 'Checkout Page 2' as it gave me the code for the overall layout.

[bentleybloke]

Is it possible to do this if you're using the radio button payment choices as per the AUG?

[grantglendinnin]

Is it possible to do this if you're using the radio button payment choices as per the AUG?

Yes, I would suspect so. Try changing 'select' to 'option' and see how that goes. The code for doing so with radio buttons will be very much the same, it'd most likely be a case of changing a few words here and there - but I haven't tried this myself.