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

    Class CheckoutModule

    SDK module for triggering native payment flows via JSBridge.

    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@x.y.z/dist/index.js"></script>
    <script>
    const checkoutModule = new SuperAppSDK.CheckoutModule();
    </script>

    Hierarchy (View Summary)

    Index

    Constructors

    Methods

    Constructors

    Methods

    • Triggers the native checkout flow for payment processing.

      Parameters

      Returns Promise<TriggerCheckoutResponse>

      This method can return the following status_code values:

      • 200 (OK): Checkout completed successfully. The result contains TriggerCheckoutResult.
      • 400 (Bad Request): Invalid request parameters.
      • 500 (Internal Server Error): An unexpected error occurred.
      • 501 (Not Implemented): Requires Grab app environment.

      mobile.checkout

      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.

      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');
      }