FIXED - Enter discount code before PayPal transaction page

[James_Lupton1]

Hey everyone,

Just wanted to share this one with you guys as it really annoyed me that users would have to enter all their payment info into PayPal before being able to enter a discount code when using Paypal Express Checkout as your only available payment method, until I just figured out a workaround.

Simply enable COD payment method as additional method of payment, then in checkout.css.liquid add at the bottom:

.manual-payment-gateway { display: none; }

#paypal-payments label:after {
  content: "or pay with your credit or debit card";
  display: inline;
  font-size: 110%;
  padding-left: 10px;
}

That means users go to step 2 in the checkout where they can enter their discount code, before being transferred to Paypal.

The only slight confusion is the checkout page says step 2 of 2 and the button says 'complete purchase', so I just added a little note above that button explaining they will be transferred to Paypal to pay:

.step2 #buttons:before { 
  content: "Click 'Complete my purchase' to pay by credit or debit card or with your PayPal account.";
  display: block;
  margin: 10px 0;
  font-size: 13px; 
}

I hope that helps some people. :)

James

[CSS edited by Caroline Schnapp on May 3rd 2014]

[Christian_Sørum]

Great! This is exactly what I needed!

Thanks a lot.

[James_Lupton1]

No worries. Be sure to hide payment-method on mobile checkout CSS too :)

[Stefanie_Wolf]

Thank you for posting this. Forgive my ignorance, but does this workaround only address the discount code issue within PayPal Express, or will this improve overall poor customer experience scenario described here:
http://ecommerce.shopify.com/c/payments-shipping-fulfilment/t/paypal-express-integration-flaw-133338

I hope it is the latter because I'm not pleased with the current state of the PayPal Express integration with Shopify.

[James_Lupton1]

Hi Stephanie,

I'm not sure as I don't fully understand the issue, but perhaps if PayPal is last in the checkout process then it will fix that issue too, but I've not tested it.

If you understand the issue, try testing it and let us know if this workaround fixes the issue.

Cheers, James

[Staffan]

Hi James,

Thanks a billion for this fix even though I can't understand why this is not an option from the start. 

However, we discovered that the COD button is visible when you purchase via your mobile (iOS, Safari).

Any ideas on how to solve this?

Staffan

[James_Lupton1]

Hi Staffan,

No worries. Yes all you need to do is add the same CSS to mobile.checkout.css

That file might not be visible so you have to add it as an asset and its exact name depends on the theme but try that first.

Cheers,

James

[Staffan]

Ok, I've tried that with no success. There's no such file, like you said. I copied the other one and renamed it but it doesn't work. How do I find out what mobile css my theme uses?

I'm very thankful for your help! Please let me redeem you with a voucher in our shop later.

Best Regards

Staffan

[James_Lupton1]

Hey, it needs to be called "checkout.mobile.css" or "checkout.mobile.css.liquid"

[Staffan]

That worked! Thank's a million, we've been looking for a fix for so long. If you need an Ass Saver, please let me know, staffan@ass-savers.com

Cheers

Staffan