Jun 25 2008
How to integrate Flex with an online payment system like Ogone ?
Disease :
What would be the best way to integrate an online payment system like Ogone into my Flex application ?
Prescription :
Depending on the payment system, there are a number of different options.
Option 1 : Use the payment provider web application that handles payment
This is probably the best way to integrate as the payment provider will handle the full payment and has to take care of security. Most of the payment providers will provide you with an html application that you can integrate into your own application, and which is running on a secure environment.You would forward your user to this HTML page. When the payment transaction is done,
the payment service will return your customer to your application and provide
it with information on the transaction. So your Flex application will not even see any credit card details !
the payment service will return your customer to your application and provide
it with information on the transaction. So your Flex application will not even see any credit card details !
So how can you integrate this secure HTML payment application into your Flex application ? The best way is to show the application in an iFrame on top of your Flex application. The Flex application will be able to communicate with the iFrame through FABridge. FABridge is an Adobe javascript library that allows flash player to interact with the HTML container and the other way around. Alistair Rutherford wrote a post on how to use an iFrame on top of your Flex application.
The solution Ogone is providing is Ogone e-commerce. I have build an example integrating Flex with Ogone e-commerce. You can find the source code here.
Here in a few steps what you need to take care of :
1. PaymentEvent.as : Custom event that is used to pass the payment data to the HTML page running in the iFrame.
2. iFrame.as : iFrame component build by Alistair RutherFord
3. Add the FABridge javascript library to ‘html-template/index.template.html’ and add the .js itself.
4. ogone_html.html : html file that will runn in iFrame. Main part is an HTML form that we’ll submit to the Ogone server. Notice how I added an event listener for the Payment event, and i fill in the form and submit it. Also check the form to see what is configurable on the payment side.
5. ogone_bevestiging : html file that will be called by Ogone when transaction is over. Ogone will call this html file with an attribute indicating the status of the transaction. When this page is loaded you can see in the load() function I’m calling the transactionOver() function in my Flex application (Ogone.mxml). TransactionOver function will take as an argument the transaction status and show it in my Flex application.
You can find the source files on here
And have a look at the application here. (Use this test VISA number : 4111 1111 1111 1111)
Option 2 : Use the payment provider API’s.
In this case you’ll build the UI that will handle payment details yourself, which means you’ll be responsable for providing the necesary security measures. After collectint the credit card details you’ll be using the API’s to handle the payment.
So depending on the API technology you’ll have to use a specific solution :
- Java API : LiveCycle Data Services/BlazeDS.
- Web Services API : Flex client or through LiveCycle Data Services or BlazeDS
- PHP API : AMFPHP
- Actionscript API : Flex Client
Tips to stay healthy :
Taking care of payments is a delicate thing. Check out legal and security issues. Try to go for solution 1, which will put those responsibilities on the payment provider.
Christoph,
Your sample payment form doesn’t quite render correctly (at least under Firefox and I suspect maybe other browsers as well). The reason for this is that you have missed out the wmode=opaque settings in you index.template.html file.
I.e. The flash player requires that the wmode be set to opaque otherwise the iframe will not render correctly see below
AC_FL_RunContent(
“src”, “playerProductInstall”,
“FlashVars”, “MMredirectURL=”+MMredirectURL+’&MMplayerType=’+MMPlayerType+’&MMdoctitle=’+MMdoctitle+”",
“width”, “${width}”,
“height”, “${height}”,
“align”, “middle”,
“id”, “${application}”,
“quality”, “high”,
“bgcolor”, “${bgcolor}”,
“name”, “${application}”,
“allowScriptAccess”,”sameDomain”,
“type”, “application/x-shockwave-flash”,
“pluginspage”, “http://www.adobe.com/go/getflashplayer”,
“wmode”, “opaque”
);
} else if (hasRequestedVersion) {
// if we’ve detected an acceptable version
// embed the Flash Content SWF when all tests are passed
AC_FL_RunContent(
“src”, “${swf}”,
“width”, “${width}”,
“height”, “${height}”,
“align”, “middle”,
“id”, “${application}”,
“quality”, “high”,
“bgcolor”, “${bgcolor}”,
“name”, “${application}”,
“allowScriptAccess”,”sameDomain”,
“type”, “application/x-shockwave-flash”,
“pluginspage”, “http://www.adobe.com/go/getflashplayer”,
“wmode”, “opaque”
);
Al.
Hey Al,
Good point ! I copied all source codes at the end in a new Flex project and forgot to copy the index.template.html …
I uploaded a new version of the project to share.adobe.com
Thanks
Christoph
I will upload new version later on today … Share seems to have a small problem uploading at the moment
Ok, new version is online …
Hello,
using an IFrame also means setting the wmode to opaque or transparent and this gives major issues with the text fields in Flex on the Firefox browser (see: https://bugs.adobe.com/jira/browse/SDK-12420).
There are some hacks to solve those problems (remapping the key codes with the right characters by overriding the TextField and TextArea classes), but isn’t there a cleaner solution avaiblable out there?
regards,
Hans.
Ogone advises against the use of an iframe. Moreover, some banks demand their customers to digitally sign the payment too, as an extra security measure. However, you cannot control the graphical output of this extra screen and some of these screens of some banks do not work in an iframe on Internet Explorer.
Hi Hans,
The solution proposed here is just one of the alternatives. As mentioned in the post you can also build the full interaction with the Ogone engine from within Flex and take care of all https traffic yourself.
Also don’t forget that Ogone will interact also directly with your backend so you can double check payment information coming from a rich internet application.
If there are other alternatives you might think off, it would be interesting to post them here …
thanks,
Your blog is interesting!
Keep up the good work!
Hi Christophe,
my comments had to do with a specific case: http://www.billy.be
This is an e-commerce website built in Flex 3, with the Ogone payment system in an IFrame. Our solution is very similar to the way you describe in this post and we came across a few issues: firstly the wmode bug and secondly that fact that Ogone redirects to bank-specific pages not working in the IFrame (mostly design-wise, but sometimes also functionally).
I’ll probably write some posts about the necessary workarounds on my blog (www.novio.be) soon.
Thanks.
Hi Christophe,
I cannot acces the source files. I get the message:
“The file could not be found or you don’t have permission to access it.”
Could you mail it if possible. We too need the implement ogone in an existing flex website and are very interested in this solution.
Thanks.
Sorry, forgot to add my email address.
tim5@prosteps.be
Thanks.
Hi Tim,
It seems i didn’t open up the access to the sources … I updated it and the zip file is now accessible for everyone !
Thanks for pointing this out !
christoph
I can’t see the code.
There is download link where you can download the code.Just tested it … it should work.
Thanks for the great information!
Can you give another link for the source file because I can’t download it from adobe acrobat.com beta.
thanks in advance.
I really can’t download the file on Adobe Acrobat.com, i’m in the Philippines.
Can you give another link please. I really need the source code.
I have updated the download link, source should be available again now.