Citibank Payment Gateway Integration

Posted by leepeng on September 10, 2010

We had our first Citibank payment gateway integration on Jan 2008 and I think it will be good to share our experience.

Citibank provide a good alternative for the available payment gateways in Singapore (PayPal, WorldPay, eNets, NERA etc). I think the good point with Citibank is flexibility. Programmer can basically implement all kind of workflow after mastering the architecture and API. In addition, Citibank do provide full set of payment options (SALE, AUTH/CAPTURE, VBV). However, it is technically more complicated, require more correspondences and take longer time to implement (and of-course it can be more expensive)

Ask yourself these questions before you call Citibank

- Do you really need Citibank? Do you need a full fledged payment engine? Or simpler payment interface like PayPal and WorldPay can satisfy your need?

- Is Citibank already your aquirer? Have you negotiate a good rate with them?

- What payment mode do you need, SALE or AUTH/CAPTURE?

- Do you need to be protected through VbV (Verify by Visa)?

SALE, AUTH/CAPTURE, VbV???

These can sound foreign if you are new to payment gateway integration.

SALE – Credit will be deducted immediately once transaction successful.

AUTH/CAPTURE – AUTH perform the card verification process and authorise the card (reserve the amount). CAPTURE will do the actual deduction from the reserved amount.  AUTH/CAPTURE mode is particularly suitable for reservation (e.g. hotels, flights) and deposit payment.

VbV stands for Verify by Visa (and Master). With VbV activated, card holder with VbV activated will required to key in a security code during online payment. This security code is normally set when the card issuer issued the card and normally can be reset / changed via bank’s online portal or ATM machine. With VbV activated, merchant can reduce the charged back risk if fraud case happen.

The Process

It is not that straight forward to get this payment up and running. In summary here are the steps

1.) Approach Citibank online payment team to create a payment gateway account. You will need to decide the currency, the payment mode (SALE or AUTH/CAPTURE) and if you need VbV to be activated. These will eventually affects the number of online payment accounts you need to open with Citibank.

2.) Receive test account from Citibank

3.) Payment gateway development and integration based on the test account

4.) Payment testing based on test account. Citibank will then required a test report to be submitted to them in order for them to issue the LIVE account.

5.) Issue of LIVE account (not activated)

6.) Payment testing based on LIVE account. Additional test cases will be needed if VbV is turned on and this can only be done at the LIVE account. Citibank will then required a comprehensive test report to be submitted before they giving green light to activate the LIVE account.

7.) LIVE account activated and you can start collecting money.

Etre Bon Gallery and Academy

Posted by jessette on September 3, 2010

In a designer’s life, there are those rare moments when we stumble upon clients and projects that inspire us – projects that remind us why we are in this industry and why we love what we do. When this cosmic circumstance happened, a good design comes out of it: that is Etre Bon.

Etre Bon Gallery and Academy invited us to pitch a design for their web design and e-commerce project. Etre Bon is a sub-brand of Bon Café, which aims to teach and expose Singaporeans and residents to appreciate the art of coffee-making by conducting Coffee Journey Tours and Barista Workshops. As an exclusive agent in Singapore for selling Ascaso Dream Espresso Machines, the website is also targeted for online selling/ordering of this machine as well as barista tools.

In approaching the design for this project, I focused on this particular statement from their brochure. “JOURNEY FROM CROP TO CUP. It may appear to be simple, but behind every cup of coffee lies a stirring story.” The solution doesn’t involve any rocket science or philosophical art. The solution is simple: I just created a simple illustration of the “story of coffee”, focusing on the idea, from “crop” to “cup” and the processes involved in-between.

coffee illustrations

I used some of the elements from their branding such as the striped gray line on top of the rich, black background and added some small, hand illustrated icons on the section pages.

I created some burst of colour for the e-commerce page and enjoyed designing the rest of the styling for all the pages.

Etre Bon Homepage Design

The programming team, especially Elliot and Ross, our flash guy extraordinaire, did a good job in the execution of this project. I want to thank Xiong Zhou and Ian, for bringing us this gem of a client for us to work on.

Cheers to us! Or would I rather say, a cup of coffee for all of us!