Blog » How to create custom HTML buttons

How to create custom HTML buttons

Creating custom Pay Now or Buy Now HTML buttons is one of the easiest ways of integrating with PayFast. In a couple of minutes you can create a clickable button, which you can embed in your blog or website to allow people to pay you online for your goods or services.

Pay Now HTML buttons demo

Step one – Register with us

Do it. It is free and only takes seconds. Make sure you tick the checkbox “I want to receive online payments”.

Register to accept payments

Step two – Generate a button

Log in to your account. You’ll be taken to your Dashboard. Click on “Generate” under the “Pay Now buttons” section.

Generate Pay now button

Fill in the details. You should enter a name for the service or product you’re creating the button for. Also set a price and select an image that you want to use for your button (we’ll just use the PayFast styled ones for now, we’ll create custom ones in a minute).

Pay now button details

You also have the option of giving the item/service a description and a return and cancel URL. A return URL is the success page they could see ( “Thanks for your payment”) and the cancel URL is a page where they could go if they decide to cancel the payment to you (“Awh shucks, you bailed on us”).

Step three – Embed

After hitting the generate button, our system will generate the code for your HTML button. This code you can paste directly into the HTML of your blog or website, where your button will display.

Pay Now button

Optional: So you want to create a custom button, huh?

For those interested in making custom buttons, you’ll need to look at the code that we generated above. This will be different for form and non-form buttons, but the line of code we’re interested in changing stays the same:

<a href=”https://www.payfast.co.za/blog/eng/process?cmd=_paynow&receiver=support%40payfast.co.za&?item_name=Black+Eye+Boxing+Gloves&amount=129.99″>
<img src=”https://www.payfast.co.za/blog/images/buttons/buynow_basic_logo.gif” width=”95″ height=”57″ alt=”Buy” title=”Buy Now with PayFast” /></a>

The field that we are interested in is the <img> tag and the source, width and height of the button’s image, as highlighted below:

img src=”https://www.payfast.co.za/blog/images/buttons/buynow_basic_logo.gif”

and

width=”95″ height=”57″

That line of code is the image used for the Pay Now button. It simply tells browsers to display an image (which is hosted somewhere, in this case by us) and the width and height of that image.

Step four – Create a custom button

There are lots of ways to create custom buttons. You can have a go at it on Photoshop (or even MS Paint) or get a professional designer to create some that are in line with your website/blog’s style.

There are also a lot of free web based solutions out there, and a simple Google search for “create free html button” will give you plenty of results. A simple one we’ve found is www.dabuttonfactory.com

You can enter custom text, change the font (type, style, size), add shadows, gradients, borders and the like. Play around until you have found exactly the button that suits your needs. Below is a preview of our new button.

Custom button

It will give you a preview of what your new button will look like and a URL for where the button is uploaded. You can use URL of the image uploaded to their server, but it might make sense to upload the image to your own server (because if your website has content from an external website which goes down, your images/buttons won’t display anymore).

For brevity’s sake, we’ll use their URL:

URL

Step five – Change the PayFast generated code

Remember, we’re interested in the <img> field. Go and change the URL in black of the original Pay Now button with the URL of the new button.

From the original button location:

“https://www.payfast.co.za/blog/images/buttons/buynow_basic_logo.gif”

To the new button location (either hosted on your website or elsewhere):

“http://dabuttonfactory.com/b.png?t=Click%20to%20buy&f=Calibri-Bold&ts=24&tc=ffffff&tshs=1&tshc=222222&it=png&c=5&bgt=gradient
&bgc=e04848&ebgc=850000&hp=20&vp=11”

Make sure that the width and height reflect the same pixel size as the new button, otherwise it won’t display properly.

From:

width=”95″ height=”57″

To:

width=”156″ height=”39″

Now copy the changed code and go and paste it at the right place with the HTML editor of your website, blog or email application and go show all your customers your brand new payment buttons.

We hope you found this tutorial useful. If you have any questions, send us a message below! Thanks for reading!

The Team @ PayFast

2 thoughts on “How to create custom HTML buttons”

  1. Considering that PayFast has so many causes that it supports, could you not make a standard ‘Donate Now’ button, very much similar to the Buy Now ones that you have.

    It would be very helpful!

    Regards

  2. Hey Gary,

    You can link to or download the Donate images we have up on our Logos page (https://www.payfast.co.za/blog/s/std/logos). They are styled to match the colour and style of our Buy/Pay Now buttons.

    Unfortunately we can’t add Donate Now buttons to be generated for all accounts, as the South African Reserve Bank is strict in who can accept donations in SA. That said, we’ll add this to our developers’ (rather lengthy) list of things to do, and in due time you should be able to generate Donate buttons if you are a Cause account holder, right from inside your PayFast account.

    Thanks for your feedback and let us know if there is anything else!

Comments are closed.