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
LAYOUT_THEME Tema dasar layout widget white white dark
COLOR_THEME Warna dari theme widget blue blue red green
PROVIDER Operator seluler yang ingin di tampilkan, (pisahkan dengan koma) all all tsel axis tri xl ceria smart tseldata xldata isatdata tridata bolt
PAYMENT Metode pembayaran yang ingin di tampilkan all all bca mandiri cc atmb
SHOW_NAVBAR Tampilkan navbar? berguna untuk embed iFrame atau web view true true false
TITLE_NAVBAR Setel judul widget di navbar Megahubs some-text
ENABLE_REPORT_LINK **Tampilkan blok pesan cek transaksi? true true false
ENABLE_PAYMENT_AGREEMENT **Tampilkan blok pesan syarat & ketentuan? true true false
ENABLE_LOGIN **Boleh login dan bayar dengan point? true true false
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
PROVIDER_TAGIHAN Operator tagihan yang ingin di tampilkan, (pisahkan dengan koma) all all
ENABLE_MODULE_PULSA Aktifkan tab pulsa? true true false
ENABLE_MODULE_LISTRIK Aktifkan tab listrik? true true false
ENABLE_MODULE_GAMES Aktifkan tab games? true true false
ENABLE_MODULE_TAGIHAN Aktifkan tab tagihan? false true false
FIRST_MODULE_TAB_INDEX Tab pertama yang akan di tampilkan 1 1 = Pulsa 2 = Listrik 3 = Games
LANG Bahasa yang di gunakan di widget id-ID id-ID atau en-US
DEFAULT_NUMBER Nomor HP default yang akan di gunakan 0811xxx String
DEFAULT_PULSA_OR_DATA Tipe transaksi default yang akan di gunakan pulsa pulsa, paket

Keterangan

*: Parameter wajib digunakan

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

Contoh penggunaan

Semua konfigurasi parameter harus di letakkan dalam fungsi MP('init', 'APP_KEY', 'PARAMETER'), 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
...
<script id="mp-snippet">
    /* * * CONFIGURATION VARIABLES: EDIT BEFORE PASTING INTO YOUR WEBPAGE * * */
    MP('init', 'YOUR_APP_KEY', {
        PROVIDER: 'tsel',
        PAYMENT: 'all',
        PROVIDER_GAMES: 'all',
        COLOR_THEME: 'green',
        LAYOUT_THEME: 'white',
        SHOW_NAVBAR: true,
        TITLE_NAVBAR: 'Megahubs',
        ENABLE_LOGIN: true,
        ENABLE_REPORT_LINK: true,
        ENABLE_PAYMENT_AGREEMENT: true,
        SHOW_PAYMENT_PHONE: false,
        ENABLE_MODULE_PULSA: true,
        ENABLE_MODULE_LISTRIK: true,
        ENABLE_MODULE_GAMES: true,
        FIRST_MODULE_TAB_INDEX: 1,
        ...
    });
    ...
</script>

Eventer

Eventer memungkinkan anda untuk mengeksekusi fungsi-fungsi tertentu dari widget Megahubs.

Fungsi Deskripsi Hasil
MP('openWidget'); Digunakan untuk Membuka widget Widget akan terbuka
MP('closeWidget'); Digunakan untuk Menutup widget Widget akan ditutup

Listener

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

Event Deskripsi
MP('listen', 'widget.loaded', function); Handle event ketika frame widget telah siap dan semua data telah di load
MP('listen', 'widget.ready', function); Handle event ketika widget telah siap untuk digunakan
MP('listen', 'widget.opened', function); Handle event ketika widget terbuka / popup
MP('listen', 'widget.closed', function); Handle event ketika widget ditutup
MP('listen', 'transaction.success', function(response)); Handle event ketika transaksi telah berhasil sampai step akhir. Response Data yang dapat di gunakan

Transaction Success Response

Beberapa response data yang dapat Anda gunakan ketika transaksi berhasil.

Fungsi Deskripsi Hasil
response.operator Gunakan untuk memperoleh operator yang telah dipilih user Nama operator seluler
response.nominal Gunakan untuk memperoleh harga pulsa / paket yang telah dipilih user Harga dari pembelian
response.trx Gunakan untuk memperoleh kode transaksi saat transaksi berhasil ke tahap akhir Kode transaksi

Contoh Eventer & Listener

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
26
27
28
29
30
31
...
<script id="mp-snippet">
    ...
    MP('listen', 'widget.ready', function() {
        console.log('ready');
        MP('openWidget');
    });

    MP('listen', 'widget.loaded', function() {
        console.log("it's Loaded!");
    });

    MP('listen', 'widget.opened', function () {
        console.log("it's Open!");
    });

    MP('listen', 'widget.closed', function () {
        console.log('closed');
    });

    MP('listen', 'transaction.success', function (response) {
        console.log("Transaction Success!");

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