> ## Documentation Index > Fetch the complete documentation index at: https://docs.rebellapp.com/llms.txt > Use this file to discover all available pages before exploring further. # H5 Mini App > Deploy your existing HTML5 web app as a Mini App by configuring an Entrance URL and adding the JSBridge SDK. An H5 Mini App runs your web content inside a WebView within the Rebell SuperApp. There is no Mini Program framework, no IDE, and no build process required — just a hosted web page and a single ` ``` Once loaded, the `my` object is available globally. ## Step 3: Detect the Environment JSAPI calls only work inside the SuperApp WebView. Detect the environment before using `my.*`: ```javascript theme={null} function isInsideSuperApp() { return /MiniProgram/.test(navigator.userAgent); } if (isInsideSuperApp()) { // Safe to call my.* APIs my.getSystemInfo({ success: (res) => console.log('Platform:', res.platform), }); } else { // Running in a regular browser — use fallback behavior console.log('Running in browser, JSAPI unavailable'); } ``` `my.JSBridge` is a reserved object and cannot be overridden. `console.log` also cannot be replaced inside the Mini App runtime. ## Step 4: Use JSAPI All JSAPI calls follow the same callback pattern: ```javascript theme={null} my.apiName({ // parameters success(res) { /* called on success */ }, fail(err) { /* called on failure */ }, complete(res){ /* always called */ }, }); ``` H5 Mini Apps support only a **subset** of the JSAPI available to Native Mini Apps. APIs that depend on the Mini Program runtime (e.g., page routing, custom components, worker threads) are not available inside a WebView. ### Supported APIs | API | Description | | ---------------- | ------------------------------------ | | `my.getRunScene` | Get the launch scene of the Mini App | | API | | ----------------------------- | | `my.showNavigationBarLoading` | | `my.hideNavigationBarLoading` | | `my.setNavigationBar` | | API | | -------------------- | | `my.alert` | | `my.confirm` | | `my.prompt` | | `my.showLoading` | | `my.hideLoading` | | `my.showToast` | | `my.hideToast` | | `my.showActionSheet` | | API | Description | | ----------------------- | ------------------------------------ | | `my.choosePhoneContact` | Select a contact from the phone book | | `my.datePicker` | Open a native date picker | | `my.hideKeyboard` | Dismiss the soft keyboard | | `my.multiLevelSelect` | Multi-level cascading selector | | `my.setBackgroundColor` | Set the window background color | | `my.setCanPullDown` | Enable or disable pull-to-refresh | | API | | ------------------ | | `my.chooseImage` | | `my.previewImage` | | `my.saveImage` | | `my.getImageInfo` | | `my.compressImage` | | API | | ---------------- | | `my.chooseVideo` | | API | | ------------------ | | `my.getStorage` | | `my.setStorage` | | `my.removeStorage` | | `my.clearStorage` | | API | | ----------------------- | | `my.saveFile` | | `my.getFileInfo` | | `my.getSavedFileInfo` | | `my.getSavedFileList` | | `my.removeSavedFile` | | `my.chooseFileFromDisk` | | `my.openDocument` | | API | | ------------------- | | `my.getLocation` | | `my.openLocation` | | `my.chooseLocation` | | `my.calculateRoute` | | API | | ----------------- | | `my.request` | | `my.uploadFile` | | `my.downloadFile` | | API | | --------------------------- | | `my.getSystemInfo` | | `my.getNetworkType` | | `my.getClipboard` | | `my.setClipboard` | | `my.watchShake` | | `my.onAccelerometerChange` | | `my.offAccelerometerChange` | | `my.onCompassChange` | | `my.offCompassChange` | | `my.vibrateShort` | | `my.vibrateLong` | | `my.makePhoneCall` | | `my.setScreenBrightness` | | `my.getScreenBrightness` | | `my.setKeepScreenOn` | | `my.getScreenOrientation` | | `my.setScreenOrientation` | | `my.scan` | | `my.getBatteryInfo` | | `my.addPhoneContact` | | `my.getSetting` | | `my.openSetting` | | `my.showAuthGuide` | | API | | ------------------------------- | | `my.checkLocalBioAuthSupported` | | `my.startLocalBioAuth` | | API | | ---------------------------- | | `my.showSharePanel` | | `my.navigateToMiniProgram` | | `my.navigateBackMiniProgram` | | API | | ---------------- | | `my.getAuthCode` | | `my.tradePay` | ### Usage Examples ```javascript theme={null} my.getAuthCode({ success: (res) => { // Send res.authCode to your backend to identify the user fetch('/api/login', { method: 'POST', body: JSON.stringify({ authCode: res.authCode }), }); }, }); ``` ```javascript theme={null} // Native alert dialog my.alert({ title: 'Order Placed', content: 'Your order has been confirmed.', buttonText: 'OK', }); // Native toast my.showToast({ content: 'Saved!', type: 'success', duration: 2000, }); ``` ```javascript theme={null} // tradeNO must come from your backend my.tradePay({ tradeNO: '', success: (res) => { if (res.resultCode === '9000') { window.location.href = '/success'; } }, fail: (err) => { my.alert({ title: 'Payment failed', content: err.errorMessage }); }, }); ``` ```javascript theme={null} my.setNavigationBar({ title: 'Checkout', }); ``` ## Step 5: Handle Payments Payment flow in an H5 Mini App: User initiates payment from your web page Your page sends order details to your backend via `fetch` or `XMLHttpRequest` Your backend calls the Rebell Payment API and returns a `tradeNO` Pass the `tradeNO` to `my.tradePay` — Rebell handles the rest On success, redirect or update the page. Your backend also receives a webhook. ```javascript theme={null} async function initiatePayment(orderData) { // 1. Create payment on your backend const response = await fetch('/api/payment/create', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(orderData), }); const { tradeNO } = await response.json(); // 2. Open Rebell payment UI my.tradePay({ tradeNO, success: (res) => { if (res.resultCode === '9000') { window.location.href = '/order/success'; } else { showError('Payment was not completed'); } }, fail: (err) => showError(err.errorMessage), }); } ``` ## Limitations vs. Native H5 Mini Apps have a narrower set of available APIs compared to Native: | Capability | Native | H5 | | ----------------------- | ------------- | --------------- | | Full JSAPI access | ✅ | Partial | | Payment (`my.tradePay`) | ✅ | ✅ | | Auth code | ✅ | ✅ | | Native navigation | ✅ | Limited | | Platform UI components | ✅ | ❌ | | WebView access | Via component | Runs inside one | If you need deeper SuperApp integration or native UI components, consider migrating to a **Native Mini App**. ## Testing H5 Mini Apps can be tested directly: 1. Configure your Entrance URL to point to a **sandbox or staging** version of your page 2. Open the Mini App from within the Rebell SuperApp (sandbox) 3. Inspect behavior in browser DevTools when running locally — JSAPI calls will silently fail outside the SuperApp 4. Use `isInsideSuperApp()` to provide a fallback experience during development ## Next Steps Full list of my.\* APIs and their parameters Complete guide to triggering payments from Mini Apps Exchange auth codes for user identity on your backend