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.

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”.

Step two – Generate a 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).

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.

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:

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://payfast.io/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.

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:

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://payfast.io/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