Pancake Payments | QR codes in invoices

Username		Password		Remember Me?	forgot password?

Posted 13 February 2011 12:44 PM

Markus Dishwasher

Total Posts: 16

Joined 2011-01-11

I wanted to add some “interactive” elements to my invoice. So my plan was to show a QR code on the invoice which is viewed by the customer. If he scans it with his smartphone he should automatically be redirected to the pdf version which he can then download to his smartphone.

This is how it looks now.
http://cl.ly/3g223b2R3T051p1R001C

If you want something like this you only need to add a few lines to your invoice template.

<?php 
  if (!$pdf_mode){ ?>
       <img class="qrcode" 
src="http://chart.apis.google.com/chart?cht=qr&chs=57x57&choe=UTF-8
&chld=L|0&chl=http://yourdomain/pancake/pdf/<?php echo 
$invoice['unique_id']; ?>" />
 <?php }?> 

First we check if this is NOT the pdf version. So the QR code is only shown in the web/screen version.
Then we include the QR code via the google API:

cht=qr
defines a QR code

chs=57x57
defines the size of the QR code

choe=UTF-8
this defines how the QR code content is encoded

chld=L|0
There are several options for error correction for QR codes. For this one i choosed the lowest level L. The second paramenter defines the margin for the QR code.

chl=http://yourdomain/pancake/pdf/<?php echo $invoice[‘unique_id’];?>
This defines the url which is opened if the QR Code is scanned. In this case we redirect to the pdf version of the invoice.

Here is a link to the google chart API documentation:
http://code.google.com/apis/chart/docs/gallery/qr_codes.html

Not ultra neccesary but it’s fancy! :)

The next step is to include the QR code (which is generated on the fly via the google chart API) to the printable PDF version itself! DOMPF doesn’t support external script at the moment. There are some workarounds with javascript but for now this is perfect for me.
There is also the possibility to make a special “Payment QR code” which tells mobile banking software about the amount etc. of the invoice so the customer can pay via the software on his smartphone. We’ll see… :)

Posted 22 February 2011 05:55 PM #1

Lee Pancake Staff

Total Posts: 419

Joined 2010-08-10

PM

DUDE! This is awesome!

Sorry it took me a while to reply, I really do appreciate all you do, just had the flu!

I can think of a couple rad uses for this and its a good howto on how you can be clever with Pancake :D

Posted 07 March 2011 06:44 PM #2

Scott Kivowitz Dishwasher

Total Posts: 13

Joined 2011-03-07

PM

What a cool tip!

Posted 06 May 2011 12:49 PM #3

cadunbar Dishwasher

Total Posts: 7

Joined 2011-05-04

PM

Done this and it looks great, thanks for your tips!

Posted 20 July 2011 02:14 PM #4

Paul Lumsdaine Dishwasher

Total Posts: 21

Joined 2011-07-20

PM

Genius! I’ve just started using QR codes more in my work and this would be great to include on invoices. Simply brilliant.

Posted 18 September 2011 09:13 AM #5

bradclarkuk Line Cook

Total Posts: 27

Joined 2011-09-09

PM

Okay I’m the first to admit I am a total noob. Please could you let me know exactly which file and where to paste the code?

Cheers Muchly!

Posted 18 September 2011 11:41 AM #6

Lee Pancake Staff

Total Posts: 419

Joined 2010-08-10

PM

Hey Brad,

You could put it in


/third_party/themes/pancake/views/layouts/detailed.php

and really anywhere there you wanted, personally I’d throw it in

<div id="footer">

  </div><!-- /footer --> 

Hope that helps, I’m running out the door but I will be back later if you are still stuck.

Posted 18 September 2011 06:43 PM #7

bradclarkuk Line Cook

Total Posts: 27

Joined 2011-09-09

PM

Wow thanks Lee.

You guys really know how to make a complete ignoramus welcome (not being sarcastic!) - Who knows within a wee while I might be less ignoramusish?

Bradders

Posted 19 September 2011 03:54 PM #8

bradclarkuk Line Cook

Total Posts: 27

Joined 2011-09-09

PM

Hey Lee,

I may be stretching the support here a little! - So thank you in advance!

Ideally I would love to have the QR Code on the right with the dotted line (as in Markus’ screenshot) and a link below to get a qr code reader i.e quick mark etc….. what code do I have to paste in the Footer Div to get that - - told you I’m useless at this stuff!

All the best.

Brad

Posted 19 September 2011 04:01 PM #9

bradclarkuk Line Cook

Total Posts: 27

Joined 2011-09-09

PM

Also, what do I define as the Unique ID as my QR codes at the mo just lead to my domain and not the pdf version of the invoice.

Many thanks.

Bradders

Posted 22 September 2011 06:16 AM #10

bradclarkuk Line Cook

Total Posts: 27

Joined 2011-09-09

PM

Howdy Peeps! - Any ideas?

Bradders

Posted 22 September 2011 07:03 PM #11

Lee Pancake Staff

Total Posts: 419

Joined 2010-08-10

PM

Hey Brad,

Sorry, super swamped with life stuff and I missed this.

Ok, can you send me a dummy invoice to .(JavaScript must be enabled to view this email address) and then I can give you exact code to copy and paste into your template and tell you exactly where to put it.

Posted 03 October 2011 06:13 AM #12

bradclarkuk Line Cook

Total Posts: 27

Joined 2011-09-09

PM

Hey Lee,

No worries I realise you guys are working your socks off! Thank you!

I have sent you a dummy invoice.

Cheers Mate.

Brad

Posted 07 November 2011 04:48 PM #13

Lee Pancake Staff

Total Posts: 419

Joined 2010-08-10

PM

Hey Brad,

So the new theme is out and I think it will make it much easier for you to put this info in where you need it to go. Have you had a chance to update and check it out?

If you still need help with this I’m game for helping!