UPDATE: Christoph Priebe has explained this payment system in much more detail. See the end of the post for his comments.

Posterino is one of the more interesting new apps I have had cause to write about in recent months. It’s like Pages for your photos, offering pre-packaged templates for turning photos into attractive posters, leaflets, cards and more.

One of the newer features is a built-in postcard sending service, where you design your card in Posterino, then with a simple payment it gets printed and posted for you automatically. No trip to the post office required.

What’s coolest of all is how you pay for this service. You can simply type your cell phone number into a box, to pay via your phone account. A confirmation SMS message will be sent to the phone number you enter (to prevent you entering the numbers of your enemies, obviously) and once replied to, your postcard is on its way. That’s assuming you have a cellphone contract with the right company, in the right country.

Posterino’s postcard payment box

Posterino’s creator, Christoph Priebe, told me:

“The Posterino postcard service is a cooperation between Zykloid Software and Swiss Post International. Actually, the mobile phone number payment system is implemented by the Swiss Post and not by me.” Plans are also afoot for adding Paypal as another payment option, he added.

Does anyone know of any apps using this kind of system? Posterino is the first I have encountered. Personally I think it’s a great idea and I’d love to see wider use of it for software payments.

UPDATE: Christoph has kindly explained in much more detail how he made this system work:

In short: I do a HTTP-post to upload the (image) data to the Swiss Post server and then I’m redirected to a web page with the postcard details. I’m using WebKit, Address Book and CSS to make the integration of the Swiss Post interface seamless.

This may be a good example for the cool things you can do using WebKit and the Address Book framework clued together by JavaScript and finally some CSS to shape the whole thing.

I had to do some tricks to improve the user experience. For example, in the first version we had the “Send” button on the web page visible and just a “Close” button was placed on the right hand side at the bottom of the dialog. But the “Close” button on the dialog was easily confused with a kind of “send” action by the user. So instead of
actually sending the postcard the user closed the dialog. Now the “Send” button on HTML page is hidden to send the user focus to the “Send” button on the surrounding dialog. The “Send” button on the dialog triggers some JavaScript action to do the same thing as the invisible “Send” button on the web page.

I’m especially pleased with the seamless integration of Address Book using the JavaScript bridge: I did know from the beginning that I had to include the Address Book in this equation one way or the other, but I had no final thoughts on how to do this. For example: One idea was to use drag & drop from the Address Book, but there is no clue on the postcard details dialog that the user can do this. While I was
implementing the “Send” button hack, it struck me like lightning: A simple search field is all I need. The address edit fields already exists and I just need some JavaScript to propagate the data. Clean and simple.

I implemented the search mechanism like the search in the address book and in version 1.1.1 I added a popup menu that appears when there is more than one hit. The popup menu also shows detailed information if a person has more than one address defined in the
Address Book.

Finally I set up some CSS to shape the web page to feel like a Mac OS X dialog and not like a webpage.

The result? The whole thing looks and feels like a natural part of the application.