How we set up our online payments

Really we should of done this years ago, but time and a busy work schedule got in the way.

Along with everyone else in business cash flow is king, we're no different getting cash in the door is paramount in keeping the doors open and staff paid. We had (up until now) only accepted payment through Cheque or Direct Deposit. Which may have caused issues for some of our clients. Maybe they only pay all their bills with a company credit card?

Filling out forms

So we decided to build a payment gateway on our website, we went to ANZ and got all the documentation. For us to fill out the forms it was pretty straight forward as we are developing the gateway ourselfs and have a bit of knowledge on the subject. We knew we were not going to keep any Credit card information on the site, we had an SSL certificate installed on our website (encrypts data sent from our website to other places i.e the bank).

form-questions But if someone that had no idea about this stuff questions like "Your web application is securly developed to defend against the top ten security risks outlined in the OWASP Top 10" (This boils down to sanitising your form inputs) might be daunting and scare people off. Really if you want to get an gateway installed on your website you should talk to your web developer while filling out this form.

To implement our gateway we used a Joomla 3 component called RSForm pro it is pretty much a form builder (and installed on almost all of our client websites), it allows you to allocate text input fields, select fields, checkboxes, radio boxes and all that stuff. We created our own plugin that integrates all the egate functionality and lets us define which fields are going to be sent to the bank. The beauty of this is we're not limited to ANZ in the future we can use any bank we want. We just have to change the code in our plugin.

Setting it all up

form-fields So what do we need on our payment form?

Name
Card Number
Expiry Dates
CVN
Amount
Company
Phone Number
Email
Invoice Number
Message
Total Amount

Creating the custom plugin that grabs our form inputs and send them to the bank i don't want to go into too much detail here in case it is a security issue.

        $cc_number        = str_replace('-','',$vars[]);        
        //payment gateway adjustment
        $price = (int) ($price * 100);        
        $post_values = array(
            "vpc_Version"            => "1",
            "vpc_Command"            => "pay",
            "vpc_TxSource"            => "INTERNET",
            "vpc_CardNum"            => $cc_number,
            "vpc_CardExp"            => $cc_expiration,
            "vpc_CardSecurityCode"    => $csc_number,
            "vpc_Amount"            => $price,
            "vpc_MerchTxnRef"        => 'PaymentForm'.$SubmissionId, // order num (unique)
            "vpc_OrderInfo"            => 'Invoice Payment '.$post['Invoice'].'/'.$SubmissionId
        );

Making it look good.

Styling of the form took a little bit. We knew everything is secure on the site but we wanted to assure our clients through styling so it looks secure. We did this by putting all the credit cards fields in their own box separate from the rest of the form. Inserted the image from our SSL certificate provider and an image of a padlock (just to illustrate we are secure, it doesn't actually do anything) here is the before and after even though i know the functionality is exactly the same i would prefer using the pretty one.

styling-before-after

iphone Also changed the input type on the fields that have a numerical input to be type="tel" we did this so if anyone uses their phone to make a payment the phones numerical keypad will be used.

User Emails

We included a receipt email that gets sent to the client and to our bookkeeper. This is so everyone knows what is going on.

Xero

We added our payment gateway to our Xero accounting package. We added the payment url to our invoice emails

Dear [Contact Name],

Please find attached an invoice from Pixel To Paper Creative.

We accept payment by Credit Card, Cheque and EFT.  If you would like to make payment by EFT, kindly send an electronic receipt as proof of payment to allow us to easily allocate the funds.

To make payment via our Secure Credit Card processor please go to https://www.pixeltopaper.com.au/payment?invoice=[Invoice Number]&amount=[Amount Due]

Please ensure that you use the tax invoice number as the transaction reference.
[Invoice Number] for [Invoice Total].

The amount outstanding of [Amount Due] is due on [Due Date].
View your bill online: [Online Invoice Link]
Pay your bill online: https://www.pixeltopaper.com.au/payment?invoice=[Invoice Number]&amount=[Amount Due]

xero-setup And finally to xero online invoice viewer. This is added by (in xero) going to Settings > General Settings > Invoice Settings the on the new page click on Payment Services and add your new payment service. Once it is saved you need to add it to your invoice themes. Just click on the edit link and then invoice themes and choose the themes you want this payment service added to

Wrap up

At the end of the day it took longer that expected to set everything up on our website, we used our self as a test case so we can then set this all up for our clients. We're happy with the result and hopefully it will help with our overdue invoices.

If you are after something like this to be implemented on your own website get in touch with us. It helps a lot if you have Joomla as an CMS and your a client (as we know everything was set up correctly)

Had enough browsing?

Get in touch