Paypal Pro page missing credit card icons

Hi all,

When setting up the payment options on our company website, the icons for the credit cards are missing. I’ve searched the forums and knowledge base here but I still cannot find a resolution.

Things I tried was to fix a couple of JavaScript errors that were showing in Chrome ‘inspect element’. That done, there are still some ‘warnings’ showing for the page in question, one has the div id:

s2member-pro-paypal-checkout-form-card-type-div

and classes:

s2member-pro-paypal-form-div 
s2member-pro-paypal-checkout-form-div 
s2member-pro-paypal-form-card-type-div 
s2member-pro-paypal-checkout-form-card-type-div

Could this be related to the problem? Would really appreciate some guidance with this, been going around in circles for a while now.

Have you tried it with a default theme and all other plugins turned off?
This would tell us if it was another plugin (or theme) causing the problem.

Hi Zechariah, thanks for your feedback and suggestion.

I have activated and tested with the default theme, unfortunately the icons do not display.

I also deleted all unused plugins and, updated active plugins but still does not work on custom or default theme. I switched off all plugins (except s2member of course) and tested on custom and default themes, no change.

There are a couple of JavaScript files in a .js folder, I removed reference to them and removed reference to the css and it still did not work. I wonder if this could be a server issue (probably unlikely) or a problem with php in a custom template page?

If anyone has found a solution to this please share.

Actually couldn’t be bad PHP in custom pages, as it did not work in default theme which does not reference them…what was I thinking? :)

After further investigation I came across the following errors and warnings in the w3c validation for our order page:

<strong>Line 178, Column 262: Attribute aria-required not allowed on element input at this point.</strong>
…s2member-pro-paypal-checkout-card-type-paypal" value="PayPal" tabindex="200" />

One of these errors exist for each card option…(so this seems to hint at incorrect for set-up?)

Other errors include:

<strong>Line 178, Column 262: Attribute aria-required not allowed on element input at this point.</strong>
…s2member-pro-paypal-checkout-card-type-paypal" value="PayPal" tabindex="200" />

<strong>Line 202, Column 283: Any select descendant of a label element with a for attribute must have an ID value that matches that for attribute.</strong>
…ation-month s2member-pro-paypal-checkout-card-expiration-month" tabindex="220">

<strong>ine 205, Column 279: Attribute autocomplete not allowed on element select at this point.</strong>
…iration-year s2member-pro-paypal-checkout-card-expiration-year" tabindex="221">

<strong>Line 205, Column 279: The label element may contain at most one input, button, select, textarea, or keygen descendant.</strong>
…iration-year s2member-pro-paypal-checkout-card-expiration-year" tabindex="221">

<strong>Line 310, Column 1596: Duplicate ID s2member-pro-paypal-lang-attr.</strong>
…ember-pro-paypal-lang-attr" value="" /><input type="hidden" name="s2p-option" …
✉
<strong>Warning Line 277, Column 1878: The first occurrence of ID s2member-pro-paypal-lang-attr was here.</strong>
…ember-pro-paypal-lang-attr" value="" /> <!-- Auto-filled by the s2Member softw…

For what it’s worth, the same problem occurred with the paypal pro forms as well for us. Does anyone know for sure if there a customizable theme (i.e., not the standard twenty-thirteen etc. types of themes) that can be used that would not conflict with the s2member/paypal pro forms? We tried the Infocus theme which Jason (lead developer of s2member) recommended in this post http://www.s2member.com/kb/theme-plugin-compatibility/. In fact, Jason says that the s2member site itself is built using Infocus. However, upon trying this theme, the credit card icons and the pro forms page still does not render correctly. Any help/suggestions are appreciated.

@Eugene, we’re investigating server settings at this stage to see if we can change the ‘aria-required’ setting which ‘seems’ be the source of our problem. I’ve lost over a day on this issue and counting! Hopefully s2member will address this bug – I’d have thought displaying payment options icons should be pretty straight forward, but when it doesn’t work it’s a blocker.

If I find a solution I’ll share it here, please do the same.

No problem will do. One other thing fyi. The problem doesn’t seem to be just with the display of the icons which can be fixed manually with some workaround. Not sure if you are seeing the same problems but specifically, it seems the functionality of the javascript in the pro forms is impaired in multiple respects: to properly display the credit card info fields when using a credit card, hiding the card info fields when using paypal, hiding the card start date when not accepting maestro/solo, etc. So in reality, it is hard to tell if just fixing the icons is a fix to the pro form entirely. This is why we were inclined to switch to a theme that s2member developers felt was completely conflict free with s2member (hence the Infocus theme we tried). Jason, if you have any thoughts on a theme that might solve these issues, please weigh in. Peter, hope some of this info helps you in your diagnosis.