This code gist is a bit of CSS that you can add to your theme or a helper customizations plugin’s custom css file. It adds the credit card logos and a PayPal logo to the “Select Payment Method” box shown on membership checkout.


How it Works

If you are using PayPal Website Payments Pro or our Add PayPal Express Add On with another main site gateway option, there is a “Select Payment Method” box on the checkout page.


Screenshot

pmpro-add-paypal-express-logos


The Code Recipe

This code recipe requires a PMPro Plus Account or higher.

View Membership Options


Some Special Notes

Make sure you download and place the logos in this .zip file in the appropriate place for your CSS. If you are using a PMPro Customizations file with custom CSS, you would place them in an “images” folder within your customizations plugin. If you are placing this code in your theme’s stylesheet, just place the images in your theme’s images folder.

Also, update or use your own Credit Card logos image if you don’t or can’t accept all of the payment options shown in the image. You can get additional credit card logos here.


Author’s gravatar

Hi Kimberly. Thanks for the codes. However, the logos are not shown after placing the code in functions.php and images folder. We are in the middle of activating PayPal Payflow Pro, but not activated right now. Is this why the logos are not shown? Any help would be greatly appreciated. Cheers, Fred

Reply
Author’s gravatar

That could be why… You need to be using PayPal Website Payments Pro or Payflow as your main gateway OR another gateway in conjunction with the Add PayPal Express add on. If you open a topic in the members forum we will help you get this sorted out.

Reply
Author’s gravatar

Great idea but my checkout page says “Choose your Payment Method” and doesn’t have the same CSS classes you list. The main class is “pmpro_checkout top1em”. Not sure why it isn’t the same, but any ideas for the same with that setup?

Reply
Author’s gravatar

Thanks, that fixed it. Actually, I had a plugin that was named pmpro-add-paypal-express-master, which I presume was an older version? Anyway, had to delete it and upload the new plugin. I also had to change the font-size and padding-bottom CSS to make things look right on my implementation.

One thing is that if you select PayPal, the extra PayPal icon is shown underneath (where the CC fields would have shown if that option were selected) and this is the icon that needs to be clicked. Maybe it’s just me, but it seems confusing to have both PayPal logos. Perhaps you could just have the new PayPal logo replace the old one completely and link directly to the PayPal payment page (instead of just changing the select radio button). What do you think?

Reply
Author’s gravatar

hi,
Thank you so much for the instructions. I’m having some issues with displaying the icons though. It sees the difference after inserting the code but instead of seeing the images of paypal and cards right below the “check in with cards here and paypal here” there is just a white space. It seems like images are just invisible because when I hover the mouse over the blank space it is clickable and sends me to the payments. I thought it’s because of the optimizing plugins but I deactivated all of them and it’s still the same. Do you have any idea what can cause it?

Reply
Author’s gravatar

Double check that you have the images in your theme folder and then the CSS lines that specify the URL of the images. Make sure the images aren’t broken/missing or if your checkout page is served over HTTPS, then the URL for the images will need to be https://… or your browser will hide the “insecure” content.

Reply
Author’s gravatar

what if you arent using pay pal & just want logos displayed instead of text for the credit cards

Reply
Author’s gravatar

The easiest way to add credit card logos is in the Memberships > Payment Settings > SSL Seal Code field. You can include your seal code as per your SSL provider, as well as a full img tag to the credit card logos source file. For example:

`Supported Payment Methods`

Reply
Author’s gravatar

I am really trying to get this to work on my website. I put the code in the article in my pmpro customisations css file. Then made an images folder within the pmpro customisations plugin and added the two jpg images from the .zip file in the article and they didn’t show up.

I also tried uploading the images to the media page on the wordpress admin area and then copying the url’s into the code above to see if I could pull the images from there (made sure to include the https:// at the front) and that didn’t work either. Any ideas where I might be going wrong?

Thanks

Reply
Author’s gravatar

I can’t think of anything based on what you shared. If you share a link to your site in our member forum, we can take a look and follow up for access if we need to see what’s wrong. We can fix it right in place on your site for you then.

Reply
Author’s gravatar

HI! I’m trying to change the text ‘Check Out with Credit Card Here’. Can you point me in the right direction, please?

Reply
Author’s gravatar

Can’t seem to get this working – I’m using a child theme. Do I need to add the CSS and images to the child theme or the parent?

Thanks

Adam

Reply

Leave a Reply

Your email address will not be published. Required fields are marked *