Creating a "Buy Now" button

Parent Previous Next

Creating a Buy Now Button on your website

  1. Things to know:
    1. This section teaches you how to place a button image on a web page of your website which links to eBizCharge's secure Payment Form for collection of funds. You will need access to edit your own website and be able to upload an image to your website via a service such as FTP or something similar. Most companies that host your website have a tool that will allow you to upload files. Please check their documentation before proceeding.
  2. Collecting the pieces:
    1. You will need to have an image that appears to look like a button.
    2. In order to create the link you will need to use a text editor or your favorite editor such as Notepad, TextEdit, Dreamweaver, etc.
    3. Almost no HTML knowledge is required as most of the pieces are here for you to put together. However it does help to know several HTML tags, specifically the anchor tag <a href=””></> and the image tag <img src=””/>. You will be using these.
    4. The most important part is having your source key ready. Once you have it be ready to copy and paste.
  3. Putting it together
    1. Open your favorite web page editor as specified above in “Collecting the pieces”.
    2. Begin with typing the image tag and it's associated attributes namely the src which is the source of the button image (where it comes from) and the alt which is the text displayed when a curser is hovered over the image: <img src=“eBizChargesecurebuttongray3.gif” alt=“Click to pay” />
      1. As you can tell the source of our button is an image called “eBizChargesecurebuttongray3.gif”. You can use your own image. For this example our stock button image is used. It looks like this: The path of the images is the same as the web page that image will be on. If you have your images in a directory called “images” for example, the link will be “src=“images/eBizChargesecurebuttongray3.gif”. The alt attribute has the text “Click to Pay”. This is optional as well is customizable to anything you want.
    3. Now wrap the image tag with an anchor tag <a href=””>IMAGE TAG GOES HERE</> to make it look like this: 
      <a href="https://secure.eBizCharge.com/interface/epayform/_YOUR_SOURCE_KEY_HERE_/sale?&UMamount=10.00&UMinvoice=123456&  UMdescription=Thank%20You%20For%20Your%20Payment"><img src="eBizChargesecurebuttongray3.gif" alt="Click to pay" />  </a>
    4. There is only one attribute that was populated within the anchor tag, the href. This is the URL that will be requested when the button is clicked. It needs to be specially formatted to connect to eBizCharge, authenticate you as a valid merchant on our system and pass in the required information to make a payment. Let's break it down:
      1. There are several parts that make up the URL and they are all concatenated (attached) but the ampersand character ”&”.
      2. The first part is the Payment Form URL on eBizCharge's servers: https://secure.eBizCharge.com/interface/epayform/_YOUR_SOURCE_KEY_HERE_/sale?. The only thing that you need to edit here is the source key. As you can see there is a dummy key placed for security. You will need to remove it and paste your own source key after “epayform/” and before ”/sale?”. The “sale?” command tells eBizCharge this is a credit card charge. Your option is “authonly?” to authorize payment only.
      3. After that you will see an ampersand, ”&”, to concatenate the amount of your transaction. This is done by attaching UMamount (all fields are case sensitive) and equaling it to the dollar amount including the cents separated by a decimal point. This piece will be UMamount=10.00
      4. Once again after adding another ampersand, ”&”, the invoice of the order is attached. This piece will be UMinvoice=123456. It is highly recommended that you pass in this value. It designates the invoice or order number of your transaction.
      5. The final piece is the description of your transaction. After adding the last ampersand, ”&”, type UMdescription setting it equal to the actual text description. If there are spaces in your description as there are in this example they need to be separated by ”%20”. This is the code that browsers use instead of space because URL's by nature do not have spaces. This piece will be UMdescription=Thank%20You%20For%20Your%20Payment
      6. Close the first part of the href tag with a greater than carrot symbol ”>” and close the entire tag AFTER the image tag with a ”</a>”
      7. You should now have a complete link as in section 3.3.
  4. Testing the Buy Now Link
    1. Save the file with the .html extention or unzip the file from our example. Open your favorite browser and locate the file→open menu and find the file you saved or unziped. Open it. You should now see the button and you should be able to click it. If you see a broken image make sure the button image is located at the same place as the files you saved such as the Desktop. Click the button and if everything is correct it will lead you to your secure Payment Form on eBizCharge's servers. Don't forget to place YOUR source key in the code. The Order Summary block should be filled out completely. If not make sure you're passing the UMamount, UMinvoice, and UMdescription correctly along with the values in quotes. The fields are case sensitive.
    2. Checklist:
      1. Can you open your own file?
      2. When the file is open do you see the button image?
      3. Is the button image clickable?
      4. When you click on an image does it lead you to YOUR secure Payment Form hosted by eBizCharge?
      5. Does the Order Summary block contain all the information and none of it is blank including the Order Date, Order Amount, Order Number, Customer IP, and Description? It should look like this:

      7. If all of the following are yes then you are ready to make it live.
  5. Making it live
    1. If you have a designated web page on your website that will need the button then edit the web page, place the code somewhere within the <body> tag of the page, save it, and upload it to your website. Also upload the button image to the same place or wherever your images are located on your website file structure. You should now be able to browse your website to that specific page and see the button. Make sure to refresh the page if you don't see the button appear. Go down the checklist in section 4.II starting with c-f.
  6. Further reading
    1. How to customize the form on eBizCharge's end: here
    2. Where to generate the source key from your account: here
    3. More on the anchor tag
    4. More on the image tag
    5. Basic HTML tutorial
    6. Basic FTP tutorial