A custom PayPal button has long been one of the most wanted features, wherein web developers and designers wanted PayPal buttons to match their website styling and do more than just directing users to PayPal’s payment page. In this tutorial, you will learn how to create custom PayPal buttons.First things first – you need to have your PayPal button code handy. If you haven’t created a button yet, then do so by logging into your PayPal account. This is how your PayPal hosted button code will look like:-

Copy the value of the input tag with name ‘hosted_button_id’. In the example above, it is 1234567890. Having the above code on your payment page will show the classic PayPal button with an image hosted in the url:- https://www.paypalobjects.com/en_GB/i/btn/btn_buynowCC_LG.gif

Style PayPal Button with CSS

Now we’ll see how you can add a style to the PayPal button so that it matches the color theme of your website. Here’s we are going to create a simple href based button which is blue in color:-

The code above create a css class for the button/href which points to the URL  https://www.paypal.com/cgi-bin/webscr and passes 2 argument values:-

1. cmd: with value _s-xclick
2. hosted_button_id: id of the button which you’ve extracted from the PayPal button code.

You can choose to directly copy the code above to your payment page, or make the desired changes wherever required.

Custom Images for PayPal buttons

Following the trails of the method above, you can also create custom PayPal buttons with the images of your choice. There are no restrictions for the size or dimensions of the image, and you can choose to use the extension in which you have it (.gif, .jpeg, .png, .svg or anything appropriate). Below is an example code of one such PayPal button created using a custom image:-

All we do is wrap an image that we want to show as a button, inside a href. The hyperlink reference points to a URL which in the example above is https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=1234567890. Specify the image source, its width and height and you are all set to create and host a PayPal button with a custom image.

PayPal button Javascript

To add some spice to the user experience, you can also choose to add some Javascript magic while trying to gel in a custom PayPal button on your payment page.

The code above will show a custom image PayPal button tied to a Javascript event which gets fired when the button is clicked. The user will be thanked with an alert message and will then be directed to PayPal. Make changes to the code as required and have fully functional and custom Javascript based PayPal buttons on your website.