WebView Interfaces

1. Landing page WebView

WebView 1.0

WebView will show after partner following step 1 - 3 from WebView Transaction Flow

2. Customer filtering products

WebView 1.1

Customer can sorting and filtering our products

3. Result of filtering products

WebView 1.2

4. Customers choose products to buy

WebView 2.0

On this page, customer must input their UserIdand ZoneId base on the selected product.

Please note, we will validate UserId, ZoneId fields to make sure game UserId is valid. If UserId not valid on 3 times we will blocked that Userid.

5. Review an order

WebView 3.0

After customer success create an order, partner must create an CommunicationInterface on MobileApp / WebApp to receive order callback then return to partner App UI

Sample Android (Java)

import android.webkit.JavascriptInterface;

import timber.log.Timber;

public class FormJavascriptInterface {
    
    // This code will executed after order is success
    @JavascriptInterface
    public void paymentOrderSuccessFully(String merchantId, String orderId, String validationToken) {
        //@todo your next action
        Timber.d("MerchantId =%s Your order number is=%s Your validation token is =%s", merchantId, orderId, validationToken);
    }

    // This code will executed after order is success
    @JavascriptInterface
    public void getDetailOrder(String jsonDetailOrder) {
        //@todo your next action
        /*
        jsonDetailOrder: {
          order_id: string;
          status: string;
          qty: number;
          total_order_amount: number;
          created_at: string;
          updated_at: string;
          product_name: string;
          denom_name: string;
        }
        */
    }
}

Sample Flutter (Dart)

  import 'package:webview_flutter/webview_flutter.dart';
  final WebViewController controller;

  Future<String>paymentOrderSuccessFully(){
      return widget.controller
      .runJavaScriptReturningResult('paymentOrderSuccessFully()')
      .then((value) {
          return value as String;
      });
  }

  Future<String>getDetailOrder(){
      return widget.controller
      .runJavaScriptReturningResult('getDetailOrder()')
      .then((value) {
          return value as String;
      });
  }

  final payment = await paymentOrderSuccessFully();
  if (payment == "null") {
     // order not success
  } else {
      Map<String,dynamic> jsonMap = json.decode(payment);
        /*
        example value after decode
        dataOrder: {
        merchantId: string;
        orderId: string;
        validation_token: string;
        }*/
  }

  final detailOrder = await getDetailOrder();
  if (detailOrder == "null") {
     // order not success
  }else {
      Map<String,dynamic> jsonMap = json.decode(detailOrder);
       /* example value after decode
       jsonDetailOrder: {
          order_id: string;
          status: string;
          qty: number;
          total_order_amount: number;
          created_at: string;
          updated_at: string;
          product_name: string;
          denom_name: string;
       }
        */
  }

7. UI after customer success order and want pay to partner (*suggest)

8. Partner call our Buy Endpoint

After customer on partner is successfully paying, partner must create transaction signature for buy and call our buy endpoint.