@grabjs/superapp-sdk 2.0.0-beta.51 → 2.0.0-beta.54

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/skills/SKILL.md CHANGED
@@ -1,17 +1,19 @@
1
1
  ---
2
2
  name: 'grabjs-superapp-sdk'
3
- description: 'API reference for @grabjs/superapp-sdk. Use when building a MiniApp that runs in the Grab SuperApp WebView and needs to call native features (camera, payments, authorization, authentication, permission, location, device storage, container UI customization) via the Grab JSBridge. Keywords: miniapp, webview, android, ios, jsbridge, grab, superapp.'
3
+ description: 'API reference for `@grabjs/superapp-sdk`. Use when building a MiniApp that runs in the Grab SuperApp WebView and needs to call native features (camera, payments, authorization, authentication, permission, location, device storage, container UI customization) via the Grab `JSBridge`. Keywords: miniapp, webview, android, ios, jsbridge, grab, superapp.'
4
4
  license: 'MIT'
5
5
  ---
6
6
 
7
7
  # @grabjs/superapp-sdk
8
8
 
9
- Use this SDK to call native Grab SuperApp features from a MiniApp running in the WebView. Each module covers one domain (camera, payments, location, etc.) and communicates with the native layer via JSBridge.
9
+ Use this SDK to call native Grab SuperApp features from a MiniApp running in the WebView. Each module covers one domain (camera, payments, location, etc.) and communicates with the native layer via `JSBridge`.
10
10
 
11
11
  ## Setup
12
12
 
13
13
  ### Installation
14
14
 
15
+ Install `@grabjs/superapp-sdk` with your package manager of choice.
16
+
15
17
  #### NPM
16
18
 
17
19
  ```bash
@@ -55,11 +57,11 @@ If you are not using a bundler, load the SDK from a CDN and access it via the `S
55
57
 
56
58
  ## Core Concepts
57
59
 
58
- SDK methods communicate with the native Grab SuperApp via JSBridge. They only work when your page is running inside the **Grab SuperApp WebView**. Calling a method outside that environment returns `{ status_code: 501 }`.
60
+ SDK methods communicate with the native Grab SuperApp layer via `JSBridge`. They only work when your page is running inside the **Grab SuperApp WebView**. Calling a method outside that environment returns `{ status_code: 501 }`.
59
61
 
60
62
  ### Response Pattern
61
63
 
62
- Every SDK method returns a bridge response object with an HTTP-style `status_code`. SDK methods never throw — use type guards instead of try/catch.
64
+ Every SDK method returns a response object with an HTTP-style `status_code`. SDK methods never throw — use type guards instead of try/catch.
63
65
 
64
66
  ```typescript
65
67
  import { ProfileModule, isSuccess, isError } from '@grabjs/superapp-sdk';
@@ -105,15 +107,15 @@ The SDK uses HTTP-style status codes for all responses:
105
107
 
106
108
  Type guards narrow the response type so TypeScript knows which fields are available:
107
109
 
108
- | Guard | Matches |
109
- | --------------------------------- | ---------------------------------------- |
110
- | `isSuccess(r)` | `200`, `204` |
111
- | `isOk(r)` | `200` |
112
- | `isNoContent(r)` | `204` |
113
- | `isRedirection(r)` / `isFound(r)` | `302` |
114
- | `isClientError(r)` | `400`, `401`, `403`, `404`, `424`, `426` |
115
- | `isServerError(r)` | `500`, `501` |
116
- | `isError(r)` | any 4xx or 5xx |
110
+ | Guard | Matches |
111
+ | --------------------------------- | ------------------------------------------------------ |
112
+ | `isSuccess(r)` | `200`, `204` |
113
+ | `isOk(r)` | `200` |
114
+ | `isNoContent(r)` | `204` |
115
+ | `isRedirection(r)` / `isFound(r)` | `302` |
116
+ | `isClientError(r)` | `400`, `401`, `403`, `404`, `424`, `426` |
117
+ | `isServerError(r)` | `500`, `501` |
118
+ | `isError(r)` | `400`, `401`, `403`, `404`, `424`, `426`, `500`, `501` |
117
119
 
118
120
  ```typescript
119
121
  import { isSuccess, isOk, isNoContent, isError } from '@grabjs/superapp-sdk';
@@ -245,7 +247,7 @@ if (isError(response) && response.status_code === 403) {
245
247
 
246
248
  This guide covers the recommended setup for a MiniApp entry point — loading scopes, configuring the container UI, signalling readiness, and handling permissions.
247
249
 
248
- > **Note:** The [demo](https://github.com/grab/superapp-sdk/tree/master/demo) folder contains two complete MiniApp samples demonstrating these integration patterns in action — one using CDN (vanilla HTML/JS) and one using React. Both implement the same user flow: OAuth authorization, user profile display, deferred location permissions, and checkout payment.
250
+ > **Note:** The [`demo`](https://github.com/grab/superapp-sdk/tree/master/demo) folder contains two complete MiniApp samples demonstrating these integration patterns in action — one using CDN (vanilla HTML/JS) and one using React. Both implement the same user flow: OAuth authorization, user profile display, deferred location permissions, and checkout payment.
249
251
 
250
252
  ### Initialization
251
253
 
@@ -525,21 +527,21 @@ For the complete API reference, see [GrabPay API](https://developer.grab.com/doc
525
527
  ### Classes
526
528
 
527
529
  #### `CameraModule`
528
- JSBridge module for accessing the device camera.
530
+ SDK module for accessing the device camera via `JSBridge`.
529
531
  - `scanQRCode(request: { title?: string }): Promise<{ result: { qrCode: string }; status_code: 200 } | { status_code: 204 } | { error: string; status_code: 400 } | { error: string; status_code: 403 } | { error: string; status_code: 500 } | { error: string; status_code: 501 }>` — Opens the native camera to scan a QR code.
530
532
 
531
533
  #### `CheckoutModule`
532
- JSBridge module for triggering native payment flows.
534
+ SDK module for triggering native payment flows via `JSBridge`.
533
535
  - `triggerCheckout(request: Record<string, unknown>): Promise<{ error: string; status_code: 400 } | { error: string; status_code: 500 } | { error: string; status_code: 501 } | { result: { status: "success"; transactionID: string } | { errorCode: string; errorMessage: string; status: "failure"; transactionID: string } | { status: "pending"; transactionID: string } | { status: "userInitiatedCancel" }; status_code: 200 }>` — Triggers the native checkout flow for payment processing. (**OAuth Scope:** mobile.checkout)
534
536
 
535
537
  #### `ContainerModule`
536
- JSBridge module for controlling the WebView container.
538
+ SDK module for controlling the WebView container via `JSBridge`.
537
539
  - `close(): Promise<{ status_code: 204 } | { error: string; status_code: 500 } | { error: string; status_code: 501 }>` — Close the container and return to the previous screen.
538
540
  - `getSessionParams(): Promise<{ status_code: 204 } | { error: string; status_code: 500 } | { error: string; status_code: 501 } | { result: string; status_code: 200 }>` — Get the session parameters from the container.
539
541
  - `hideBackButton(): Promise<{ status_code: 204 } | { error: string; status_code: 500 } | { error: string; status_code: 501 }>` — Hide the back button on the container header.
540
542
  - `hideLoader(): Promise<{ status_code: 204 } | { error: string; status_code: 500 } | { error: string; status_code: 501 }>` — Hide the full-screen loading indicator.
541
543
  - `hideRefreshButton(): Promise<{ status_code: 204 } | { error: string; status_code: 500 } | { error: string; status_code: 501 }>` — Hide the refresh button on the container header.
542
- - `isConnected(): Promise<{ result: { connected: boolean }; status_code: 200 } | { error: string; status_code: 404 }>` — Check if the web app is connected to the Grab SuperApp via JSBridge.
544
+ - `isConnected(): Promise<{ result: { connected: boolean }; status_code: 200 } | { error: string; status_code: 404 }>` — Check if the web app is connected to the Grab SuperApp via `JSBridge`.
543
545
  - `onContentLoaded(): Promise<{ status_code: 204 } | { error: string; status_code: 500 } | { error: string; status_code: 501 } | { result: boolean; status_code: 200 }>` — Notify the Grab SuperApp that the page content has loaded.
544
546
  - `onCtaTap(request: string): Promise<{ error: string; status_code: 500 } | { error: string; status_code: 501 } | { result: boolean; status_code: 200 }>` — Notify the client that the user has tapped a call-to-action (CTA).
545
547
  - `openExternalLink(request: string): Promise<{ status_code: 204 } | { error: string; status_code: 400 } | { error: string; status_code: 500 } | { error: string; status_code: 501 }>` — Open a link in the external browser.
@@ -551,15 +553,15 @@ JSBridge module for controlling the WebView container.
551
553
  - `showRefreshButton(): Promise<{ status_code: 204 } | { error: string; status_code: 500 } | { error: string; status_code: 501 }>` — Show the refresh button on the container header.
552
554
 
553
555
  #### `DeviceModule`
554
- JSBridge module for querying native device information.
556
+ SDK module for querying native device information via `JSBridge`.
555
557
  - `isEsimSupported(): Promise<{ error: string; status_code: 403 } | { error: string; status_code: 500 } | { error: string; status_code: 501 } | { result: boolean; status_code: 200 } | { error: string; status_code: 424 } | { error: string; status_code: 426 }>` — Checks whether the current device supports eSIM. (**OAuth Scope:** mobile.device | **Minimum Grab App Version:** Android: 5.402.0, iOS: 5.402.0)
556
558
 
557
559
  #### `FileModule`
558
- JSBridge module for downloading files to the user's device.
559
- - `downloadFile(request: { fileName: string; fileUrl: string }): Promise<{ status_code: 204 } | { error: string; status_code: 400 } | { error: string; status_code: 500 } | { error: string; status_code: 501 }>` — Downloads a file via the native bridge.
560
+ SDK module for downloading files to the user's device via `JSBridge`.
561
+ - `downloadFile(request: { fileName: string; fileUrl: string }): Promise<{ status_code: 204 } | { error: string; status_code: 400 } | { error: string; status_code: 500 } | { error: string; status_code: 501 }>` — Downloads a file through `JSBridge`.
560
562
 
561
563
  #### `IdentityModule`
562
- JSBridge module for authenticating users via GrabID.
564
+ SDK module for authenticating users with GrabID via `JSBridge`.
563
565
  - `authorize(request: { clientId: string; environment: "staging" | "production"; redirectUri: string; responseMode?: "redirect" | "in_place"; scope: string }): Promise<{ status_code: 204 } | { error: string; status_code: 400 } | { error: string; status_code: 403 } | { error: string; status_code: 500 } | { error: string; status_code: 501 } | { status_code: 302 } | { result: { code: string; codeVerifier: string; nonce: string; redirectUri: string; state: string }; status_code: 200 }>` — Initiates an OAuth2 authorization flow with PKCE (Proof Key for Code Exchange).
564
566
  This method handles both native in-app consent and web-based fallback flows.
565
567
  - `clearAuthorizationArtifacts(): Promise<{ status_code: 204 }>` — Clears all stored PKCE authorization artifacts from local storage.
@@ -569,11 +571,11 @@ reset the authorization state (e.g., on error or logout).
569
571
  These artifacts are used to complete the OAuth2 authorization code exchange.
570
572
 
571
573
  #### `LocaleModule`
572
- JSBridge module for accessing device locale settings.
574
+ SDK module for accessing device locale settings via `JSBridge`.
573
575
  - `getLanguageLocaleIdentifier(): Promise<{ status_code: 204 } | { error: string; status_code: 400 } | { error: string; status_code: 500 } | { error: string; status_code: 501 } | { result: string; status_code: 200 }>` — Retrieves the current language locale identifier from the device.
574
576
 
575
577
  #### `LocationModule`
576
- JSBridge module for accessing device location services.
578
+ SDK module for accessing device location services via `JSBridge`.
577
579
  - `getCoordinate(): Promise<{ error: string; status_code: 403 } | { error: string; status_code: 500 } | { error: string; status_code: 501 } | { error: string; status_code: 424 } | { result: { latitude: number; longitude: number }; status_code: 200 }>` — Get the current geographic coordinates of the device. (**OAuth Scope:** mobile.geolocation)
578
580
  - `getCountryCode(): Promise<{ status_code: 204 } | { error: string; status_code: 403 } | { error: string; status_code: 500 } | { error: string; status_code: 501 } | { result: string; status_code: 200 } | { error: string; status_code: 424 }>` — Get the country code based on the device's current location. (**OAuth Scope:** mobile.geolocation)
579
581
  - `observeLocationChange(): ObserveLocationChangeResponse` — Subscribe to location change updates from the device. (**OAuth Scope:** mobile.geolocation)
@@ -582,36 +584,36 @@ JSBridge module for accessing device location services.
582
584
  Provides scoped logging for SDK modules.
583
585
 
584
586
  #### `MediaModule`
585
- JSBridge module for playing DRM-protected media content.
587
+ SDK module for playing DRM-protected media content via `JSBridge`.
586
588
  - `observePlayDRMContent(data: DRMContentConfig): ObserveDRMPlaybackResponse` — Observes DRM-protected media content playback events. (**OAuth Scope:** mobile.media)
587
589
  - `playDRMContent(data: DRMContentConfig): Promise<{ status_code: 204 } | { error: string; status_code: 400 } | { error: string; status_code: 500 } | { error: string; status_code: 501 } | { error: string; status_code: 424 } | { result: { length: number; position: number; titleId: string; type: "START_PLAYBACK" | "PROGRESS_PLAYBACK" | "START_SEEK" | "STOP_SEEK" | "STOP_PLAYBACK" | "CLOSE_PLAYBACK" | "PAUSE_PLAYBACK" | "RESUME_PLAYBACK" | "FAST_FORWARD_PLAYBACK" | "REWIND_PLAYBACK" | "ERROR_PLAYBACK" | "CHANGE_VOLUME" }; status_code: 200 }>` — Plays DRM-protected media content in the native media player. (**OAuth Scope:** mobile.media)
588
590
 
589
591
  #### `NetworkModule`
590
- JSBridge module for making network requests via the native bridge.
591
- - `send(request: { body?: unknown; endpoint: string; headers?: Record<string, string>; method: "GET" | "POST" | "PUT" | "DELETE" | "PATCH" | "HEAD" | "OPTIONS"; query?: Record<string, string>; timeout?: number }): Promise<{ status_code: 204 } | { error: string; status_code: 400 } | { error: string; status_code: 403 } | { error: string; status_code: 500 } | { error: string; status_code: 501 } | { error: string; status_code: 404 } | { error: string; status_code: 424 } | { error: string; status_code: 426 } | { result: Record<string, unknown>; status_code: 200 } | { error: string; status_code: 401 }>` — Sends a network request via the native bridge.
592
+ SDK module for making network requests through the native layer via `JSBridge`.
593
+ - `send(request: { body?: unknown; endpoint: string; headers?: Record<string, string>; method: "GET" | "POST" | "PUT" | "DELETE" | "PATCH" | "HEAD" | "OPTIONS"; query?: Record<string, string>; timeout?: number }): Promise<{ status_code: 204 } | { error: string; status_code: 400 } | { error: string; status_code: 403 } | { error: string; status_code: 500 } | { error: string; status_code: 501 } | { error: string; status_code: 404 } | { error: string; status_code: 424 } | { error: string; status_code: 426 } | { result: Record<string, unknown>; status_code: 200 } | { error: string; status_code: 401 }>` — Sends a network request through `JSBridge`.
592
594
 
593
595
  #### `PlatformModule`
594
- JSBridge module for controlling platform navigation.
596
+ SDK module for controlling platform navigation via `JSBridge`.
595
597
  - `back(): Promise<{ status_code: 204 } | { error: string; status_code: 500 } | { error: string; status_code: 501 }>` — Triggers the native platform back navigation.
596
598
  This navigates back in the native navigation stack.
597
599
 
598
600
  #### `ProfileModule`
599
- JSBridge module for accessing user profile information.
601
+ SDK module for accessing user profile information via `JSBridge`.
600
602
  - `fetchEmail(): Promise<{ status_code: 204 } | { error: string; status_code: 400 } | { error: string; status_code: 403 } | { error: string; status_code: 500 } | { error: string; status_code: 501 } | { error: string; status_code: 426 } | { result: { email: string }; status_code: 200 }>` — Fetches the user's email address from their Grab profile. (**OAuth Scope:** mobile.profile | **Minimum Grab App Version:** Android: 5.399.0, iOS: 5.399.0)
601
603
  - `verifyEmail(request?: { email?: string; skipUserInput?: boolean }): Promise<{ status_code: 204 } | { error: string; status_code: 400 } | { error: string; status_code: 403 } | { error: string; status_code: 500 } | { error: string; status_code: 501 } | { error: string; status_code: 426 } | { result: { email: string }; status_code: 200 }>` — Verifies the user's email address by triggering email capture bottom sheet and OTP verification. (**OAuth Scope:** mobile.profile | **Minimum Grab App Version:** Android: 5.399.0, iOS: 5.399.0)
602
604
 
603
605
  #### `ScopeModule`
604
- JSBridge module for checking and refreshing API access permissions.
605
- - `hasAccessTo(module: string, method: string): Promise<{ error: string; status_code: 400 } | { error: string; status_code: 500 } | { error: string; status_code: 501 } | { result: boolean; status_code: 200 } | { error: string; status_code: 424 }>` — Checks if the current client has access to a specific JSBridge API method.
606
+ SDK module for checking and refreshing API access permissions via `JSBridge`.
607
+ - `hasAccessTo(module: string, method: string): Promise<{ error: string; status_code: 400 } | { error: string; status_code: 500 } | { error: string; status_code: 501 } | { result: boolean; status_code: 200 } | { error: string; status_code: 424 }>` — Checks if the current client has access to a specific `JSBridge` API method.
606
608
  - `reloadScopes(): Promise<{ status_code: 204 } | { error: string; status_code: 500 } | { error: string; status_code: 501 } | { error: string; status_code: 424 }>` — Requests to reload the consented OAuth scopes for the current client.
607
609
  This refreshes the permissions from the server.
608
610
 
609
611
  #### `SplashScreenModule`
610
- JSBridge module for controlling the native splash / Lottie loading screen.
612
+ SDK module for controlling the native splash / Lottie loading screen via `JSBridge`.
611
613
  - `dismiss(): Promise<{ status_code: 204 } | { error: string; status_code: 400 } | { error: string; status_code: 403 } | { error: string; status_code: 500 } | { error: string; status_code: 501 }>` — Dismisses the native splash (Lottie) loading view if it is presented.
612
614
 
613
615
  #### `StorageModule`
614
- JSBridge module for persisting key-value data to native storage.
616
+ SDK module for persisting key-value data to native storage via `JSBridge`.
615
617
  - `getBoolean(key: string): Promise<{ status_code: 204 } | { error: string; status_code: 400 } | { error: string; status_code: 500 } | { error: string; status_code: 501 } | { result: boolean; status_code: 200 } | { error: string; status_code: 424 }>` — Retrieves a boolean value from the native storage. (**OAuth Scope:** mobile.storage)
616
618
  - `getDouble(key: string): Promise<{ status_code: 204 } | { error: string; status_code: 400 } | { error: string; status_code: 500 } | { error: string; status_code: 501 } | { error: string; status_code: 424 } | { result: number; status_code: 200 }>` — Retrieves a double (floating point) value from the native storage. (**OAuth Scope:** mobile.storage)
617
619
  - `getInt(key: string): Promise<{ status_code: 204 } | { error: string; status_code: 400 } | { error: string; status_code: 500 } | { error: string; status_code: 501 } | { error: string; status_code: 424 } | { result: number; status_code: 200 }>` — Retrieves an integer value from the native storage. (**OAuth Scope:** mobile.storage)
@@ -624,65 +626,65 @@ JSBridge module for persisting key-value data to native storage.
624
626
  - `setString(key: string, value: string): Promise<{ status_code: 204 } | { error: string; status_code: 400 } | { error: string; status_code: 500 } | { error: string; status_code: 501 } | { error: string; status_code: 424 }>` — Stores a string value in the native storage. (**OAuth Scope:** mobile.storage)
625
627
 
626
628
  #### `SystemWebViewKitModule`
627
- JSBridge module for opening URLs in the device's system browser.
629
+ SDK module for opening URLs in the device's system browser via `JSBridge`.
628
630
  - `redirectToSystemWebView(request: { url: string }): Promise<{ error: string; status_code: 400 } | { error: string; status_code: 500 } | { error: string; status_code: 501 } | { result: string; status_code: 200 } | { error: string; status_code: 424 }>` — Opens a URL in the device's system web browser or web view.
629
631
 
630
632
  #### `UserAttributesModule`
631
- JSBridge module for reading user-related attributes from native code.
633
+ SDK module for reading user-related attributes from native code via `JSBridge`.
632
634
  - `getSelectedTravelDestination(): Promise<{ status_code: 204 } | { error: string; status_code: 500 } | { error: string; status_code: 501 } | { result: string; status_code: 200 }>` — Returns the currently selected travel destination as a lowercase ISO 3166-1 alpha-2 country code.
633
635
 
634
636
  ### Functions
635
637
 
636
638
  #### `hasResult`
637
- Type guard to check if a JSBridge response has a defined result (not null or undefined).
639
+ Type guard to check if an SDK response has a `result` that is neither `null` nor `undefined`.
638
640
  ```ts
639
641
  hasResult<T>(response: T): response is Extract<T, { result: {} }>
640
642
  ```
641
643
 
642
644
  #### `isClientError`
643
- Type guard to check if a JSBridge response is a client error (4xx status codes).
645
+ Type guard to check if an SDK response has a client error status code (`400`, `401`, `403`, `404`, `424`, `426`).
644
646
  ```ts
645
647
  isClientError<T>(response: T): response is Extract<T, { status_code: 400 | 401 | 403 | 404 | 424 | 426 }>
646
648
  ```
647
649
 
648
650
  #### `isError`
649
- Type guard to check if a JSBridge response is an error (4xx or 5xx status codes).
651
+ Type guard to check if an SDK response has an error status code (`400`, `401`, `403`, `404`, `424`, `426`, `500`, `501`).
650
652
  ```ts
651
653
  isError<T>(response: T): response is Extract<T, { error: string }>
652
654
  ```
653
655
 
654
656
  #### `isFound`
655
- Type guard to check if a JSBridge response is a 302 Found redirect.
657
+ Type guard to check if an SDK response has a `302` status code.
656
658
  ```ts
657
659
  isFound<T>(response: T): response is Extract<T, { status_code: 302 }>
658
660
  ```
659
661
 
660
662
  #### `isNoContent`
661
- Type guard to check if a JSBridge response is a 204 No Content (operation succeeded with no result).
663
+ Type guard to check if an SDK response has a `204` status code.
662
664
  ```ts
663
665
  isNoContent<T>(response: T): response is Extract<T, { status_code: 204 }>
664
666
  ```
665
667
 
666
668
  #### `isOk`
667
- Type guard to check if a JSBridge response is a 200 OK (operation succeeded with a result).
669
+ Type guard to check if an SDK response has a `200` status code.
668
670
  ```ts
669
671
  isOk<T>(response: T): response is Extract<T, { status_code: 200 }>
670
672
  ```
671
673
 
672
674
  #### `isRedirection`
673
- Type guard to check if a JSBridge response is a redirect (status code 302).
675
+ Type guard to check if an SDK response has a `302` status code.
674
676
  ```ts
675
677
  isRedirection<T>(response: T): response is Extract<T, { status_code: 302 }>
676
678
  ```
677
679
 
678
680
  #### `isServerError`
679
- Type guard to check if a JSBridge response is a server error (5xx status codes).
681
+ Type guard to check if an SDK response has a server error status code (`500`, `501`).
680
682
  ```ts
681
683
  isServerError<T>(response: T): response is Extract<T, { status_code: 500 | 501 }>
682
684
  ```
683
685
 
684
686
  #### `isSuccess`
685
- Type guard to check if a JSBridge response is successful (2xx status codes).
687
+ Type guard to check if an SDK response has a success status code (`200`, `204`).
686
688
  ```ts
687
689
  isSuccess<T>(response: T): response is Extract<T, { status_code: 200 | 204 }>
688
690
  ```