Dunia Games - DG x My Telkomsel

DG x My Telkomsel is the integration between the My Telkomsel application and Dunia Games. So the My Telkomsel user can top up their game directly from the application that they already use every day, without having to leave it and open Dunia Games separately.

The way it works is that we make a webview that is loaded from the My Telkomsel mobile application, and the pages that we make are the home, the search, the detail of the product, the confirmation, and the congrats.

On the home page, the user is welcomed with the Top Up Kilat (the shortcut to top up the game that they played before, complete with the nominal that they bought last time), the flash sale that is running together with its countdown and the information of the stock that is left, the list of the games that can be topped up with its category filter, including the game that is under maintenance which is shown as disabled, and also the promo banners. Continued with the search so the user can find their game quickly.

The detail of the product is the heart of this feature, and it is arranged into steps so it stays simple even though there are many things to fill. The user chooses the nominal of the item, then chooses the payment (the Telkomsel credit itself where they only need to fill in their Telkomsel number to check the bonus, or the other payment methods such as DANA and LinkAja), then fills in their game ID together with the zone ID, which can also be saved so the next purchase does not need to be filled again, and the last one is the email where the proof of the transaction is sent. All of it is watched by the total price and the promo that can still be applied at the bottom of the page.

After the order is created, comes the congrats, and this one has many conditions that all have to be handled, namely the payment that succeeds, the payment that fails, and the payment that is still pending, where the pending of the virtual account has its own countdown until when the payment has to be completed. And when that time runs out, the page has to be able to tell the user that the payment time is already over so they can try it again, without leaving them wondering what happened to their order.

My job is to create this feature, both slicing (changing the image UI in Figma into html, css, and js code), and also integration (consume API, form validation, the state of every payment, the countdown until it expires, loading state, empty state, error state, etc.).

NB: Source code cannot be shared because it is a company asset.