Accept Invoice Payments on your website
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!)
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?
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...
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...
6) Add the following attribute to the submit tag of the form...
so the submit tag will now read as follows...
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.)
|Site map :: Contact us :: Email info@TheWebsiteParkingLot.com|