Zapper QR Code

The first step is getting the Zapper QR Code onto your printed Bills. This is the most basic form of integration, as it allows your customers to start paying with Zapper. This QR Code contains information related to the Merchant; as well as the bill that was printed with this code.

Official SDKs

We provide multiple SDK's for generating Zapper QR Codes:

Before each bill is printed

Before each bill is printed, determine if Zapper is enabled and initiated for this site.

When you create a QR Code using the SDK or otherwise, you will need to have certain information about the Merchant at hand, namely:

MerchantId

Merchant Id provided by Zapper after registration

SiteId

Merchant Site Id provided by Zapper after registration

Currency ISO Code

3 Letter ISO code for the currency that the merchant will be transacting in.

Merchant Name

The name of the Merchant which will show in the title bar of the app when the user scans the Zapper QR Code.

It's possible to request these values from the Zapper API, by retrieving the Merchant Site details.

Generating a unique QR Code

The QR code includes a number of data elements as described below. One of the most important is the "Reference" attribute. This should be used to pass the POS system's check number / check number to Zapper, so that when Zapper sends back notification of payments, the POS system can apply the payments to the relevant bill / check.

Note that:

  • The Reference should be as unique as possible, e.g. unique across time within each site.

  • The Reference is also referred to, in some parts of the API, as the MerchantOrderId – these two are equivalent.

In addition to your own Reference, the QR code must include a unique PosReference value, which identifies each bill-print event. Note that if a particular bill/check is printed twice then each should have a distinct PosReference value. PosReference and Reference are distinct and should not be confused.

The PosReference value is used at the time of printing the bill; however it is recommended that the PosReference values are stored (ideally linked to your own Reference values / check numbers) at least until the corresponding bill is closed.

More details about the Zapper QR Code SDKs can be found under the SDK Reference.

Marketing Graphics

As well as a QR code, each bill needs a "marketing graphic", printed just below the QR code. The bubble is a small graphic containing a call-to-action / explanation to the customer of what the QR code is for – and typically also incentivises first-time use by offering money-off when paying with Zapper for the first time in a particular restaurant.

Please allow merchants to configure the bubble per site by storing:

  • a set of PNG files (per currency + language pair), and

  • the currently-selected PNG file (per site).

PNG files for the "bubble" will be provided by Zapper (see MarketingGraphics.zip) and are named in a manner which indicates the message displayed in the bubble. Please allow merchants to configure the bubble per-site by storing a set of PNG files (per currency + language pair), and storing the currently-selected PNG file (per site).

If you are not able to use per-site configurable images for the marketing bubble please contact Zapper – if a text + static image approach is available, with configurable text per site, this may meet the same goals.

Dynamic Marketing Graphics

Zapper allows fetching of Marketing Graphics per merchant using the Zapper Web API.

These can be set by Zapper on a Merchant Site level, and should be retrieved at least once a day to ensure that the marketing material is always the most relevant.

Once you have generated a QR code, and identified the correct marketing graphic to use, simply add these to the bill before printing – the convention is that the QR code immediately follows the bill total, and the marketing graphic appears underneath.

Note that you will need to ensure that the bill prints reliably with the QR code and marketing graphic in all circumstances, e.g. for very short (1-item) bills and larger bills (100+ items) as appropriate. See below for an illustration of a bill showing the positioning of the Zapper QR code and a typical marketing graphic.

Once the bill is printed, staff give the bill to the customer as normal – there is no need for them to do anything in the POS to enable Zapper, so their normal working practices don’t change and no new UI is required in your POS to support Zapper QR code printing.

Display the QR Code

Once you have generated the QR Code, it should be displayed on a customer facing display where present and relevant.

QR Codes on the Customer Display

The purpose of displaying the Zapper QR Code on a customer-facing display is to enable various models of pay-at-counter / counter service. This can include:

  • Order-and-pay at counter in table-oriented environments (e.g. coffee shops, canteens and quick-service restaurants).

  • Bar service (e.g. pubs, bars and coffee kiosks).

QR Codes for pay-at-counter

When displaying a QR code for payment at counter, it should not be identical to the QR code printed on bills. A few trivial differences are suggested – but using exactly the same QR Code URL structure:

  • The Zapper Tip function should be disabled.

  • The Zapper Split-Bill function should be disabled.

  • The Zapper Service-Charge field is not used.

  • The "Table number" field is populated with e.g. "Till 3"

  • The "Waiter name" field is populated with the clerk / cashier / server / barista name.

See the Zapper QR Code SDK (.NET / C# / C++) which generates the URL for you.

In addition, a different marketing graphic image should be used – please speak to Zapper about the file format (PNG, JPG) you prefer and to agree image orientation, positioning and size as well as the positioning and size of the QR code. Note that the same image will be used for all terminals in a venue. Note that the reference (aka MerchantOrderId) and PosReference are still required – there is no difference in the payment notification / confirmation API.

When to display the QR Code

The Zapper QR Code should be displayed: * After the order has been entered; * Before the consumer has decided how to pay.

In simple terms, this is exactly the same as "display the total to pay" – conceptually, "display the Zapper QR Code" and "display the total to pay" should be exactly equivalent.

Note: it is possible that a customer will present a coupon or voucher or redeem loyalty points (as supported by the EPOS and merchant) which amend the total to pay. These should be handled as normal, and the Zapper QR code adjusted accordingly – e.g. if they are entered during the pay stage, as part tenders, a new total to pay is displayed, and therefore a new Zapper QR code (containing the reduced total) is displayed in place of the original.

When to remove the QR Code

Just as for the "total to pay", the Zapper QR code and marketing graphic image should be removed once the order has been closed – e.g. fully paid (through whatever tender type(s)) – or otherwise no longer displayed on the till (e.g. clerk logs out).