Home :: Portfolio... :: Case Studies :: Learn :: Contact :: Our Challenge!

OVERVIEW

So you send out invoices via paper or email.  But you would like your customers to be able to come to your website to pay their invoices.  Click a button - enter the invoice number, the amount, and click 'Pay Now'.  Using a credit card, they complete the transaction.  Sounds easy enough!  But it is not quite as simple as it may sound.

NOTE: This example solution uses PayPal which is free to register.  However, they take a percentage of each transaction.  It is perfect for small amounts and periodic payments.

NOTE: It is important to note that PayPal has an invoicing system built in that allows you to send an email invoice and the customer can just click a link to pay their invoice.  Not a bad option!  They don't even have to come to your website.  (Although... maybe you WANT them to have to come to your website!)

Pros:

• Free to sign-up and add to your website

Cons:

• Percent charge per transaction (as with all online credit-card payment systems)
• Requires PayPal brand to be part of the check-out experience

THE PROBLEM

There are a few challenges that make this tricky.  PayPal is easy to use and setup.  However, their typical use creates a 'pay' button for a specific product and a specfic dollar amount.  For example:

   [example goes here]

They do provide one service that allows for the user to enter a dollar amount, but it is a 'donate' button.  You can change the look of the btton, but when the customer clicks it, they will be taken to a 'donation' page in PayPal.  Bummer.  Here is an example:

   [example goes here]

So PayPal does not have a nice little 'pay invoice' option in their bag of tricks (or at least not that we have found to-date). 

So... what to do?

THE SOLUTION

In this solution, we create a form that the user can fill in and that gets posted to PayPal exactly as if it were a product button.  We add a little javascript to make sure the user enters an invoice number and their name. 

   NOTE: The PayPal generated buttons use a newer methodology that stores most of the button parameters

                 in the PayPal system.  This means you cannot generate the price and other parameters dynamically.

                 In the steps below, we create an older style button that passes all parameters to the PayPal system.

Here are the step-by-step instructions...

1) Create a PayPal account if you have not already done so.  Record the email address of the account.

2) Copy the HTML code below to your web page, placing it in the correct spot for the 'invoice payment' fields and button.

3) Modify the field...

        value="pay@iteacup.com"

   to have your PayPal email address between the quotes.

4) View the page and test the button to make sure it works properly.  It should look something like this: 
 
 
 

NOW WE ADD VALIDATION TO THE FORM...

5) Add the javascript code below to your web page.  Usually it can be insterted at the end of the page just before the </body> tag.

6) Add the following attribute to the submit tag of the form...

     onClick="javascript:return validate('os0','r','item_number','r','amount','r');"

 so the submit tag will now read as follows...

    <input border="0" alt="Make payments with PayPal - it's fast, free and secure!" src="https://www.paypal.com/en_US/i/btn/btn_paynowCC_LG.gif" type="image" name="submit" onClick="javascript:return validate('os0','r','item_number','r','amount','r');"/>

7) You may want to add a border around the form, background color, and pretty it up a bit.  The final result could be something like this...

8) View the page and test the button to make sure it works properly.  It should look and work something like this:

     (You may click the 'Pay Now' button to see how it works, but please do not complete the transaction unless you intend to pay us real money.  This is linked to the live PayPal system in order to show an example of a functioning invoice payment form.)