Simple Payments PayPal button renders two buttons in Safari
-
Using the Simple Payments option for a PayPal button, I found that (on a Mac) the button renders differently in Safari. Instead of a single “Pay with PayPal” button, it shows two buttons in Safari: “PayPal” and “Credit”:
Worse, the “Credit” button does NOT take you to a “pay with credit card” page, but rather gives only the option to pay with your PayPal account. Counter intuitively, the “PayPal” button is the one that gives you the choice!
You can see it live here:
https://npschoolfoundation.org/events/Any idea what’s going on?
The blog I need help with is: (visible only to logged in users)
-
Hi adessentials,
That’s interesting, I’m seeing the same button on your Events page in both Safari and Chrome for Mac:
Chrome: https://cloudup.com/cfiy4PupxYO
Safari: https://cloudup.com/cdqLy34_7IYCan you send me the version numbers of your operating system and Safari? Both pieces of information can be found by visiting supportdetails.com.
Worse, the “Credit” button does NOT take you to a “pay with credit card” page, but rather gives only the option to pay with your PayPal account.
The VISA, Mastercard icons all direct through to PayPal — is that what you mean? Payments are fulfilled by PayPal but those card types are supported on their card payment form :)
Just let me know the details above and I can do some more testing.
-
Thanks for your reply. Info you requested:
Operating System
Mac OSX 10.13.6 (High Sierra)Web Browser
Safari 12.0.1Web Browser
Chrome 70.0.3538.102I double-checked today and, for me, the buttons are still displaying as a single “Pay with PayPal” button in Chrome and Firefox, but two buttons in Safari: “PayPal” and “CREDIT”.
In all cases, there are four smaller credit card images below those. I hadn’t realized that those credit cards were separately clickable and take you directly to the “guest checkout”; in older iterations of PayPal buttons, those pictures of credit cards were simply pictures that were all part of the same link as the main PayPal “Buy Now” or “Donate” button.
Now, for me, in Chrome/Firefox, the “Pay with PayPal” button in Chrome and Firefox pops up a window where you can choose to log in to PayPal, or, pay with credit card. (This was the standard PayPal option that most people, I think, are used to.) The “PayPal” button in Safari works the same way.
In Safari, for me, the “CREDIT” button ONLY let’s you log in to a PayPal account – no credit card option.
Thanks again for investigating. Why would there be any difference at all between OS types and browsers?
-
Side note:
In the Simple Payments button editing interface, the Price you enter ($25.00 in this case) ultimately displays right above the quantity selector input. But the price displayed DOES NOT change when you select multiples of the item, as a user might expect! This might lead them to wonder if the quantity selector is working or not.In our case, I tried to make this clearer by adding the word “each” after the displayed price (using a custom CSS ::after pseudo-element). I’d recommend something like this to the Simple Payments developers.
-
@gemmacevans :
By the way, when you said that you are seeing the same thing in Safari and Chrome… are you seeing what I see in Chrome (one button on top) or the two buttons that I see in Safari? Do you see the dark blue “CREDIT” button, as in my screenshot? -
I’m also using Safari 12.0.1 in High Sierra and I only see one long Pay with PayPal button.
In our case, I tried to make this clearer by adding the word “each” after the displayed price (using a custom CSS ::after pseudo-element). I’d recommend something like this to the Simple Payments developers.
Thank you! I’ll send that suggestion back to them.
-
There, I’ve filed a request for you here:
https://github.com/Automattic/wp-calypso/issues/28605 -
@supernovia :
Thanks for filing that request!Very odd that you guys are not seeing that second (dark blue) PayPal button, especially since you are using the same OS and browser version as I am!
Any brilliant idea of what the difference might be, or why it might be there?
Does anyone else see what I’m seeing? (I’m not seeing things, it’s really there!)
Do the Simple Payments developers have a forum of any kind. or other way to reach them? Any other recommendations about finding out more? Posting an issue on GitHub for example?
(My curiosity is peaked now, more than anything.)
It seems odd that the double PayPal buttons take you to two different pop-over pages; there must be something more than button-rendering issues going on.
Second dark blue CREDIT button goes to:
https://www.paypal.com/checkoutnow?locale.x=en_US&fundingSource=credit&sessionID=df1e99b75b_giydumruhi2tc&buttonSessionID=401f930aa0_giydumrxhiydc&env=production&fundingOffered=paypal%2Ccredit%2Ccard%2Ccard%2Ccard%2Ccard%2Ccard%2Ccard%2Ccard%2Ccard&logLevel=warn&uid=3afa616cc3&version=4&token=PAYID-LPW5U6Y1GW33646CV8245302&xcomponent=1#/checkout/loginEven if this was somehow intentional, it is badly designed and somewhat cryptic to users.
I’m also not a fan of the styling of the small credit card icons and their relation to the PayPal button. Since those credit cards have been simply decorative for so long (and served only to give the information that you could pay by credit card), I’d think that they should now be styled in a way that makes it obvious that you need to click on them to pay by card.
-
Hi there,
The “Credit” button is for PayPal Credit, not for using a credit card. PayPal Credit is PayPal’s own credit service:
https://www.paypal.com/us/webapps/mpp/credit-promotion-portal/learn-more
That button will only appear for someone who is both already logged into PayPal in the same browser they’re using to visit your site, and who is approved to use that method to pay for purchases by PayPal. This is controlled by PayPal via their API that we use to insert the button. If you log into your PayPal account in Chrome, you should see the button there as well.
I’m also not a fan of the styling of the small credit card icons and their relation to the PayPal button.
I understand, but this is not something we can change. Those buttons are inserted via PayPal’s API at the time someone loads your page, so PayPal controls both which buttons appear (depending on the visitor’s location, whether or not their logged into PayPal, what payment options they have available in PayPal, etc.), and how the buttons themselves are styled. We only have limited control over the PayPal button itself, but not over the credit card buttons.
Do the Simple Payments developers have a forum of any kind. or other way to reach them? Any other recommendations about finding out more? Posting an issue on GitHub for example?
The GitHub repo that @supernovia linked to above is the repository for most WordPress.com features, including the Simple Payments feature.
-
@kokkieh:
Thanks for that great explanation. I should have expected that it is PayPal who is responsible for this confusing interface rather than WordPress! I doubt that WordPress would have come up with a counter-intuitive feature like this:The “Credit” button is for PayPal Credit, not for using a credit card.
I don’t suppose that you or anyone else reading this post knows where I can pass along suggestions and gripes the the PayPal developer’s team?
That button will only appear for someone who is both already logged into PayPal…
Knowing this, I suppose there is at least one small benefit: it will remind me to log out of PayPal so they can’t track me. :-)
We only have limited control over the PayPal button itself…
Just curious: what control is that? Can you change the text on the button(s)? They could be clearer.
not over the credit card buttons
Do you have any control over the styling of the whole thing? I notice that the credit card button images are actually larger than the size at which they are displayed. CSS rules could be applied to make those card icon buttons more prominent (and also more obvious that they are clickable buttons), if you at WordPress have any control over that? Is that what Zoid is for? (I don’t know what control, if any, that the API provides regarding styling the iframe content.)
-
It does look like you at WordPress have control over that Zoid inline stylesheet, no?
And even some of the elements at a higher level can be tweaked to make the payment options clearer, and the fact that the credit card icons are buttons. For example:
.entry-content .jetpack-simple-payments-button { min-width: 200px; } .paypal-button > .zoid-outlet { width: 200px !impiortant; height: 70px !important; }This makes the credit card buttons larger relative to the font size of the PayPal button. And in conjunction with that, you could add top/bottom padding to the quantity selector to line it’s baseline up with the card icons:
input[type=number].jetpack-simple-payments-items-number { font-size: 16px; line-height: 1; max-width: 60px; padding: <strong>22</strong>px 8px; }See if this isn’t already clearer (even without changing the Zoid inline stylesheet):
https://npschoolfoundation.org/events/ -
The stylesheet is in an iframe, and it’s loaded from PayPal, so we don’t have a great way to change that. I’m guessing they are larger than displayed so they’re Retina friendly, possibly.
My guess though is that we could use a larger format, but because this one needs to fit in some fairly skinny widgets at times, we’ve picked a smaller one.
We’ll pass your feedback along to our developers, though!
- The topic ‘Simple Payments PayPal button renders two buttons in Safari’ is closed to new replies.
WordPress.com Forums 