API - Widget Parameter & Event Handling

Untuk memberikan fleksibilitas terhadap konfigurasi widget, Anda dapat memanfaatkan beberapa Parameter dan Fungsi yang tersedia.

Parameter

Parameter Deskripsi default Option
MP.APP_KEY (wajib) *Secret key yang di peroleh saat membuat widget di Widget Builder - SOME-SECRET-KEY
MP.LAYOUT_THEME Tema dasar layout widget white white dark
MP.COLOR_THEME Warna dari theme widget blue blue red green
MP.PROVIDER Operator seluler yang ingin di tampilkan, (pisahkan dengan koma) all all tsel axis tri xl ceria smart tseldata xldata isatdata tridata bolt
MP.PAYMENT Metode pembayaran yang ingin di tampilkan all all bca mandiri cc atmb
MP.SHOW_NAVBAR Tampilkan navbar? berguna untuk embed iFrame atau web view true true false
MP.TITLE_NAVBAR Setel judul widget di navbar Megahubs some-text
MP.ENABLE_REPORT_LINK **Tampilkan blok pesan cek transaksi? true true false
MP.ENABLE_PAYMENT_AGREEMENT **Tampilkan blok pesan syarat & ketentuan? true true false
MP.ENABLE_LOGIN **Boleh login dan bayar dengan point? true true false

Warning

*: Parameter wajib digunakan

**: Parameter disarankan untuk tidak di gunakan kecuali untuk kebutuhan urgent, dikhawatirkan dapat mempengaruhi pelayanan

SDK Version >= 0.5.0

Parameter Deskripsi default Option
MP.PROVIDER_GAMES Operator games yang ingin di tampilkan, (pisahkan dengan koma) all all gemschool zynga asiasoft garena ingame mycard orange vtc main ps lyto megaxus digicash itunes qeon wave molpoint steam gplay
MP.ENABLE_MODULE_PULSA Aktifkan tab pulsa? true true false
MP.ENABLE_MODULE_LISTRIK Aktifkan tab listrik? true true false
MP.ENABLE_MODULE_GAMES Aktifkan tab games? true true false
MP.FIRST_MODULE_TAB_INDEX Tab pertama yang akan di tampilkan 1 1 = Pulsa 2 = Listrik 3 = Games

Contoh penggunaan

Semua konfigurasi parameter harus di letakkan dalam fungsi window.mhAsyncInit, Sesuai contoh berikut:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
    ...
    <script id="mp-snippet">
        /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */

        window.mhAsyncInit = function() {
            //PRIMARY
            MP.APP_KEY = 'SOME-RANDOM-KEY';

            //OPTIONAL
            MP.COLOR_THEME = 'red';
            MP.LAYOUT_THEME = 'white';
            MP.PROVIDER = 'tsel,axis';
            MP.PAYMENT = 'atmb';
            MP.SHOW_NAVBAR = false;
            MP.TITLE_NAVBAR = 'Isi Pulsa';
            ...
        };
        ...
    </script>

Function & Retrieve Data

Function memungkinkan anda untuk mengeksekusi fungsi Megahubs yang ada atau mengambil beberapa informasi melalui fungsi yang tersedia.

Fungsi Deskripsi Hasil
MP.openWidget() (function) Digunakan untuk Membuka widget Widget akan terbuka
MP.closeWidget() (function) Digunakan untuk Menutup widget Widget akan ditutup
MP.operator Gunakan untuk memperoleh operator yang telah dipilih user Nama operator seluler
MP.nominal Gunakan untuk memperoleh harga pulsa / paket yang telah dipilih user Harga dari pembelian
MP.trx Gunakan untuk memperoleh kode transaksi saat transaksi berhasil ke tahap akhir Kode transaksi

Event Handling

Event handling memungkinkan anda untuk merespon secara program berbagai event yang terjadi terhadap widget. Contoh: Anda ingin menambahkan analytics setiap kali transaksi sukses, dll.

Event Deskripsi
window.mhOnWidgetLoaded Handle event ketika persiapan widget telah siap dan semua data telah di load
window.mhOnWidgetOpen Handle event ketika widget terbuka / popup
window.mhOnTransactionSuccess Handle event ketika transaksi telah berhasil sampai step akhir

Contoh Event Handling & Retrieve Data

Semua konfigurasi parameter harus di letakkan dalam javascript, Sesuai contoh berikut:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
    ...
    <script id="mp-snippet">
        ...
        window.mhOnWidgetLoaded = function() {
            console.log("it's Loaded!");

            //Open the widget
            MP.openWidget(); 
        };

        window.mhOnWidgetOpen = function() {
            console.log("it's Open!");
        };

        window.mhOnTransactionSuccess = function() {
            console.log("it's Success!");

            // Some sample analytic
            var img = new Image();
            img.width = "1";
            img.height = "1";
            img.src = "http://analytics.com/affiliate?token=123456&advertise=" + MP.trx + "&amount=" + MP.nominal;
        };
        ...
    </script>