@grabjs/superapp-sdk
    Preparing search index...

    Class CheckoutModule

    JSBridge module for triggering native payment flows.

    Invokes the native Grab checkout/pay component to process payments. This code must run on the Grab SuperApp's WebView to function correctly.

    ES Module:

    import { CheckoutModule } from '@grabjs/superapp-sdk';
    const checkoutModule = new CheckoutModule();

    CDN (UMD):

    <script src="https://cdn.jsdelivr.net/npm/@grabjs/superapp-sdk/dist/index.js"></script>
    <script>
      const checkoutModule = new SuperAppSDK.CheckoutModule();
    </script>

    Hierarchy (View Summary)

    Index

    Constructors

    constructor

    Methods

    triggerCheckout

    Constructors

    Methods

    • Triggers the native checkout flow for payment processing.

      Parameters

      • request: { [key: string]: unknown }

        Payment transaction details, including the transaction ID and amount. See TriggerCheckoutRequest.

      Returns 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;
          },
      >

      The checkout result, containing transaction status (success, failure, pending, or userInitiatedCancel) and transaction details. See TriggerCheckoutResponse.

      You must create a transaction on your backend (via API POST https://partner-api.grab.com/grabpay/partner/v4/charge/init) before calling this method. Pass the transaction parameters returned from that API call as the request argument. Calling this method without a valid pre-created transaction will result in a checkout failure.

      Simple usage

      import { CheckoutModule, isSuccess, isError } from '@grabjs/superapp-sdk';

      // Initialize the checkout module
      const checkout = new CheckoutModule();

      // Trigger checkout with response params
      const transactionResponse = await createTransaction(); // Call POST /grabpay/partner/v4/charge/init from Grab API to create a transaction
      const response = await checkout.triggerCheckout(transactionResponse);

      // Handle the response
      if (isSuccess(response)) {
        console.log('Transaction ID:', response.result.transactionID);
        switch (response.result.status) {
          case 'success':
            console.log('Transaction successful');
            break;
          case 'failure':
            console.log('Transaction failed:', response.result.errorMessage, response.result.errorCode);
            break;
          case 'pending':
            console.log('Transaction pending');
            break;
          case 'userInitiatedCancel':
            console.log('User cancelled the checkout');
            break;
        }
      } else if (isError(response)) {
        switch (response.status_code) {
          case 403:
            console.log('No permission to trigger checkout');
            // Trigger IdentityModule.authorize() for scope 'mobile.checkout', then reload via ScopeModule.reloadScopes() and try again
            break;
          default:
            console.error(`Error ${response.status_code}: ${response.error}`);
        }
      } else {
        console.error('Unhandled response');
      }

    Settings

    Member Visibility

    On This Page

    Constructors
    Methods