Dunia Games - DG x Byu
DG x Byu is the integration between the by.U application and Dunia Games. So the by.U user can top up their game directly from their own application, 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 by.U mobile application, and the pages that we make are the home, the search, the detail of the product, the confirmation, and the congrats.
The most important part of this integration is the authentication. The page that is accessed is required to use custparam, which is handled by the by.U application, and inside that custparam there is the phone number of the by.U user as the identifier. So the user is identified from the custparam itself and does not need to log in again inside the webview, and the page has to make sure that without a valid custparam it cannot be accessed at all.
On the home page, the user is welcomed with the Top Up Kilat (the shortcut to top up the game that they played before), the flash sale that is running and the one that is coming, the promo banners, and the list of the games that can be topped up, including the game that is under maintenance which is shown as disabled. Continued with the search that already gives its result while the user is still typing, and the detail page of the product where the user chooses the nominal, fills in their game ID, and applies the promo code.
Then it goes to the checkout, which shows the summary of the order, the information of the game account that is already validated, the promo that is applied, and the payment method from by.U. Because it concerns a transaction, the user is verified first with the OTP that is sent to their by.U number before the order is created.
The last one is 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 itself is different depending on the payment method, for example the virtual account which shows the number of the virtual account, the total of the bill, the deadline of the payment, and the instruction of how to pay it from every channel of the bank.
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, the handling of the custparam, form validation, the state of every payment, loading state, empty state, error state, etc.).
NB: Source code cannot be shared because it is a company asset.
