How can I add style to Paypal Checkout button?

Question

Is there a way to add some style to Paypal checkout button?

Or create my own button for paypal checkout?

Answer 1

If you're using the paypal.Button.render integration, then no. The button is rendered in an iframe, so the style can customized but not changed completely:

https://developer.paypal.com/docs/integration/direct/express-checkout/integration-jsv4/customize-button/

This means that the button will render at high resolution on any device, including retina monitors, rather than an image which can look blurry depending on the device you're using.

Answer 2

As said above you cannot customize those button, but you can try some css - js hack to change it's look. For example, you could make paypal button opacity 0 - then pull your button up under paypal button and make your button z-index -1 so user could click paypal button. Also you could add the hover effect on hovering paypal button. I hope you catch an idea. But yet - it is just visual hack.

Answer 3

Well, there are several designs provided by PayPal itself. (Have a look at them). But if you want your own style then you'll need to implement payment in back-end and bind to it your own button.