Making payments by card more obvious using Paypal Express Checkout

Highlighted
Shopify Partner
16 0 0

Hi fellow Shopifyers,

I'm using Paypal Express Checkout and on the checkout page on my site, I got 2 buttons, one it just says "Checkout" and below this one there is the "Checkout with Paypal" button. So if a customer wants to pay with a card he/she will click on the "Checkout" button and be directed to the input your card details, that's what I would like.

At the moment, if they click on the "Checkout" button it takes them to the screen where they have to choose between "Log In to Paypal" or "Try Paypal as a Guest" if they click on the "Try Paypal as a Guest" button then they can input their credit card details.

2 Questions:

  1. Can the "Try Paypal as a Guest" field be modified to say something like "Pay Using a Card"?
  2. Can they be directed straight to the page where they input their credit card details?

It may just be me,  but I feel Paypal is a bit too much in your face and it doesn't make paying by card very obvious, how hard is it to just have two buttons, "Pay using Paypal" and "Pay using a card"? Paypal takes the fee no matter what the customer decides to use.

Anyway, any help in this matter is welcome, also I'm not using the Responsive Checkout because is even less obvious if using Paypal Express Checkout, it may be better if using just a credit card gateway and dropping Paypal all together.

0 Likes
Highlighted
Excursionist
45 0 12

one solution would be to change the paypal icon on the checkout page.

Create a new document in the assets folder named "checkout.scss.liquid"

and enter this:

/* Checkout CSS */

.payment-method.paypal {
  background: url({{ 'payreplace.png' | asset_url }}) no-repeat center center;
  width: 198px /* use the width of your own image here */;
}

I am using this image.

Ben Klinger, Studio Ve
0 Likes
Highlighted
Shopify Partner
16 0 0

Thanks for your reply Ben,

I had to add a line of text on the cart page giving the customer instructions just in case the get confused, contacted Paypal but haven't got a reply. I may drop Paypal card payment and use Stripe as a card gateway.

Cheers

0 Likes
Highlighted
Tourist
5 0 1

Thanks a lot Ben for the great solution to the "Changing Paypal logo problem". 

However, does anyone know how to change the text "Paypal" right before the Paypal logo? We would like to add text "Credit Cards or Paypal" to it. Else it will scare away customers with no paypal account. 

Thanks!

0 Likes
Highlighted
Shopify Partner
30 0 0

Thanks a lot for this. I have been trying to get this to work for the last couple of days.

This helped :)

Any suggestions on how to change the "PayPal" text left of the logo, to something else?

I have tried different stuff, but liquid isn't my strong suit ;)

0 Likes
Highlighted
Excursionist
45 0 12

Well, this has nothing to do with liquid - just plain old css. :)

Open inspector element in Chrome and search for the Paypal text. You would see something like this:

<label class="label--full-width" for="checkout_payment_gateway_3612425">PayPal</label>

Now, add this next piece of code to your checkout.scss.liquid file, replacing the gateway number with the one you found earlier:

label[for=checkout_payment_gateway_3612425]:before {
  content: "Credit Card or "
}

 

Ben Klinger, Studio Ve
Highlighted
Tourist
5 0 1

Thank you very much Ben! This is working beautifully! 

 

And Hjalte, here's what I did to follow Ben's instruction:

1. Make a new asset called "checkout.scss.liquid"

2. Add Ben's code

 label[for.................} to it. I changed the "checkout_payment_gateway_3612425" to "checkout_payment_gateway_7450147" for the Paypal express service I am using. 

That's it. Hope that this help. 
 

Highlighted
Shopify Partner
30 0 0

Everything worked, except; when I tried to complete my order I went into a checkout loop. It couldn't complete. Not sure what's going on :/

0 Likes
Highlighted
Excursionist
45 0 12

This has nothing to do with the SCSS changes. I just checked again in my store (and also I was able to get orders since I implemented this).

Probably something is not selected when it should be. Better contact Shopify

Ben Klinger, Studio Ve
0 Likes
Highlighted
Shopify Partner
30 0 0

Thanks Ben,

I'll contact shopify :)

0 Likes