Support » Plugin: WooCommerce » How to offer multiple payment gateways in a pretty format (good UX)

  • Resolved jrothra

    (@jrothra)


    I agree that offering multiple payment gateways is advisable. I’d like to offer Amazon Pay, PayPal, and Stripe. I know WooCommerce has extensions for all three, and I have the first two already offered. However, the display (UX) is ugly. Two giant PayPal buttons and a smaller Amazon button (which sometimes at the top of the page, sometimes at the bottom) . . . it’s ugly.

    It just looks like a dump of buttons.

    Is there a method to offer the three I mentioned (Amazon Pay, Stripe, PayPal) in a way that isn’t ugly, but looks good for a better UX? Maybe, pick a tab for your gateway choice, or something other than just a bunch of buttons splattered around?

    I tried Googling over this week and haven’t found anything.

    • This topic was modified 2 months, 3 weeks ago by jrothra.

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)
  • Have you checked to see how the payment gateway buttons look in a default theme to make sure the issue isn’t the theme you’re using? I haven’t seen that problem before; the payment options are usually contained in a nice list at the bottom of the checkout page.

    Plugin Support Fernando

    (@fhaps)

    Automattic Happiness Engineer

    How payment gateways are displayed on the checkout page depends largely on two things:

    * The styling of your theme
    * The specific gateways you have chosen.

    Visiting your site, it looks like you are using the PayPal Checkout and Amazon Pay extensions. Those two extensions in particular use buttons for their express checkout processes. PayPal Checkout does include an option to remove the buttons, from the settings select to disabled Smart Payment buttons. That will remove the buttons and make PayPal appear as a toggle option among your other methods.

    However, the Amazon plugin does not have this option. Amazon can only show with the buttons that you described. This is a design choice of that plugin specifically, and modifying that would require custom coding.

    For reference, this is what my payment options look like on a site using the Storefront theme, with the following methods: Stripe, Cash on Delivery, PayPal Checkout (with Smart Payment buttons disabled).

    https://cld.wthms.co/p5luie

    @fhaps Something like that is what I had in mind: person picks from a list and it lets them pay via that method. Did you custom code that? Do you use PayPal or PayPal Pro?
    Something like that is clean, clear, and avoids a button farm which can be overwhelming.

    Plugin Support Fernando

    (@fhaps)

    Automattic Happiness Engineer

    Did you custom code that? Do you use PayPal or PayPal Pro?

    @jrothra No, that is PayPal Checkout – just using the option I described above, of disabling the Smart Payment buttons from WooCommerce > Settings > Payments > PayPal Checkout.

    No, that is PayPal Checkout – just using the option I described above, of disabling the Smart Payment buttons

    I completely overlooked that. *facepalm*

    However, I noticed that the non-Smart buttons will be abandoned:

    PayPal Checkout with new Smart Payment Buttons™ gives your customers the power to pay the way they want without leaving your site.

    The existing buttons will be deprecated and removed in future releases. Upgrade to Smart Payment Buttons in the PayPal Checkout settings.

    Plugin Support Fernando

    (@fhaps)

    Automattic Happiness Engineer

    They will be retired at some point. No firm timeline on when will that happen. But for now, both options are still active.

    If you don’t want to use those Smart buttons at any point, you might look into using a different PayPal extension that doesn’t include those type of buttons. I’d recommend looking into PayPal Powered by Braintree.

    I’m marking this thread as resolved now, as we seem to have reached an understanding of where the buttons are coming from, and what are the options.

    Let us know if you have other questions, though.

Viewing 6 replies - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.