---
title: "Vouchers come to Hargapedia"
description: "Hargapedia now has vouchers you can claim in the app and redeem at participating stores, with the cashier marking them as used on your phone."
url: "https://rayson.me/writing/hargapedia-vouchers/"
category: "Engineering"
author: "Janarayson"
published: 2019-11-19
---

Until now, everything in Hargapedia has been about prices and promotions set by retailers. We tell you where this week's cheapest Milo is, but the offer itself belongs to the store.

With this update, we're adding vouchers. You can claim an offer in Hargapedia, get a code and take it to the retailer to redeem.

The idea is straightforward enough, but there's more to it than displaying a voucher code. We need to know who has claimed one, how many are still available, where it can be used and whether someone has already redeemed it. And since we aren't connected to the retailers' tills, we needed a way to handle redemption from the app itself.

## Getting and keeping vouchers

Each voucher is an offer from a retailer, with a name, description, expiry date, participating stores and terms and conditions. The details are available in English, Malay and Chinese, and behind each offer is a pool of codes the retailer has agreed to honour.

There are two ways those codes can work.

For some vouchers, everyone receives the same code. Others have a limited pool of unique codes, where each person gets their own. With the second type, the app shows how many vouchers have been claimed, and once all the codes are taken, the offer changes to Fully Claimed.

It's first come, first served.

We added a Vouchers tab to My Inbox, alongside Messages, where you can see the available offers and the ones you've already collected. There's also a new card on the home screen showing the latest voucher, with a View button that opens the Vouchers tab.

You need to be signed in to claim anything, since the voucher code is assigned to your account.

<Screens
  screens={[
    { src: inbox, alt: 'My Inbox with the Vouchers tab selected: four voucher cards, each with a thumbnail, a title, a line of detail and a date. RM5 off at checkout has a yellow GET button, Free sample pack has a green USE button, 10% off skincare is greyed with a USED pill, and RM3 off detergent is greyed and marked EXPIRED in red' },
    { src: before, alt: 'Voucher details for RM5 off at checkout before claiming: a header image, the title and description, a code box showing asterisks, a yellow Get Voucher button, then Expires on 30 Nov 2019, Store, and the terms and conditions' },
    { src: after, alt: 'The same voucher after claiming: the code HP5NOV19 in the box, a green Use Voucher button, and the line Show this code to the cashier when you want to redeem the voucher. DO NOT TAP ON THE BUTTON or your voucher will not be honoured' },
  ]}
  caption="The Vouchers tab in My Inbox, with the details of an unclaimed voucher and the same voucher after claiming."
/>

When you tap Get, the server takes an available code from the pool and assigns it to you. The voucher moves into your claimed group, and its details page reveals the code.

Depending on how the retailer handles redemption, that could be a QR code, a barcode or plain text. Online offers also have a button to copy the code.

The list keeps things organised by status. Vouchers you can still claim come first, followed by the ones you've claimed, then used, fully claimed and expired offers.

That way, the ones you can still do something with are always near the top.

## Redeeming one without a checkout integration

The part that needed a little more thought was what happens when someone actually uses a voucher.

We aren't connected to the retailers' point-of-sale systems, so Hargapedia doesn't know when a cashier has accepted a code. The retailer still scans or enters it using whatever system they already have.

What we can do is record that the voucher has been used in our own system.

Once you've claimed a voucher, its details page shows a green Use Voucher button. But that button isn't meant for you to press. It's for the cashier.

You show the code to the cashier, who scans or enters it, then taps Use Voucher on your phone and confirms the redemption. Hargapedia records the voucher as used, along with the time, and the card changes to a grey Used state.

The code can't be shown again through the voucher.

There's an obvious problem with this approach. If someone taps Use Voucher themselves before reaching the cashier, the app has no way of knowing the code hasn't actually been redeemed.

That would leave them with a voucher already marked as used.

So we put a warning directly beneath the code, telling people to show it to the cashier and not to touch the button. The confirmation also makes it clear that the cashier should be the one using it.

It's a fairly manual redemption flow, but it lets us support vouchers without building an integration with every retailer's checkout system.

## Deciding who sees which vouchers

Not every voucher is meant for everyone.

Some offers are intended for particular groups of users, and rather than build our own audience-targeting system, we used Firebase.

Each voucher that has a target audience gets a flag in Firebase Remote Config, using the voucher's ID. Firebase's audiences determine whether that flag is enabled for a particular user.

When the Vouchers tab loads, the app checks Remote Config for vouchers with an audience and hides those whose flags aren't enabled.

Vouchers also follow [the region selected in Hargapedia](/writing/hargapedia-regions/), so the available offers can differ between West Malaysia, Sabah and Sarawak.

The home screen needed a way to surface vouchers too, and that was the part I designed and built.

Since [Hargapedia 2.0](/writing/hargapedia-2/), the home screen has used cards that our team can arrange through the CMS. I reused that card layout for vouchers, with the offer's label, name, a short description and a View button leading to the Vouchers tab.

It gives people another way to discover an offer without having to open My Inbox first.

<Note label="Update, March 2020">

We've since redesigned the voucher cards and claiming flow, and added two more ways vouchers can work.

The first is a timed voucher. Rather than relying only on a fixed expiry date, its countdown begins when the voucher is activated. An offer can therefore remain valid for a set number of minutes after activation.

The second is the ability to distribute voucher codes directly to a group of users. Instead of waiting for someone to find an offer and claim it, the team can send the code to them, along with a notification.

That gives us another way to distribute offers, while keeping the existing claim-and-redeem flow for vouchers people find themselves.

</Note>