react-gopay-miniapp

Unofficial GoPay Miniapp react SDK

Installation

npm install react-gopay-miniapp

Usage

useMiniapp

The main hook to interact with the GoPay Miniapp infrastructure. It automatically loads the SDK and provides typed responses.

import { useMiniapp } from 'react-gopay-miniapp';

function App() {
  const { 
    isReady, 
    isLoading, 
    error,
    getAuthCode
  } = useMiniapp({
    onReady: () => console.log('SDK Ready'),
    onError: (err) => console.error('SDK Error', err)
  });

  const handleAuth = async () => {
    try {
      const response = await getAuthCode();
      // Response structure: { success: true, ret: "GP_SUCCESS", data?: T }
      console.log('Auth Code:', response);
    } catch (error) {
      // Error structure: { success: false, error_code: string, error_type: string, error_message: string, ret: "GP_EXCEPTION" }
      console.error('Error:', error);
    }
  };

  if (isLoading) return <div>Loading SDK...</div>;
  if (error) return <div>Error loading SDK: {error}</div>;

  return (
    <div>
      <button onClick={handleAuth} disabled={!isReady}>
        Get Auth Code
      </button>
    </div>
  );
}

Response Types

All methods return properly typed responses:

Success Response:

{
  success: true,
  ret: "GP_SUCCESS",
  data?: T  // Optional data field. see https://docs.midtrans.com/reference/frontend-v2
}

Error Response:

{
  success: false,
  error_code: string,
  error_type: string,
  error_message: string,
  ret: "GP_EXCEPTION"
}

Helper Methods

The following methods are available directly from the hook:

• getAuthCode(params?: Record<string, unknown>) - Get authentication code
• launchDeeplink(deeplink: string) - Launch a deeplink
• launchUri(uri: string) - Launch a URI
• launchPayment(deeplink: string) - Launch payment flow
• getLocation(params?: Record<string, unknown>) - Get device location
• getSystemInfo(params?: Record<string, unknown>) - Get system information
• getWifiInfo(params?: Record<string, unknown>) - Get WiFi information
• getRootedDeviceInfo(params?: Record<string, unknown>) - Check if device is rooted
• getBankAccountToken(params?: Record<string, unknown>) - Get bank account token
• startAccelerometer(params?: Record<string, unknown>) - Start accelerometer
• stopAccelerometer(params?: Record<string, unknown>) - Stop accelerometer
• startCompass(params?: Record<string, unknown>) - Start compass
• stopCompass(params?: Record<string, unknown>) - Stop compass
• vibrate(params?: Record<string, unknown>) - Vibrate device
• getLocale(params?: Record<string, unknown>) - Get device locale

getUserConsent has been removed from the public helper API. Use the generic call method if you still need to invoke unsupported JS APIs directly.

Primitive Call Method

You can also use the generic call method with type parameter:

import type { GopaySuccessResponse } from 'react-gopay-miniapp';

interface GetLocaleSuccessResponse extends Omit<GopaySuccessResponse, 'data'> {
  data: {
    appLocale: 'en_ID' | 'id_ID' | string
  }
}

const { call } = useMiniapp();

// Promise based with typed response
const result = await call('GPBase', 'getLocale') as GetLocaleSuccessResponse
// result is typed as GetLocaleSuccessResponse

useJSAPILoader

Low-level hook if you need to load the JS SDK script manually without the bridge logic.

import { useJSAPILoader } from 'react-gopay-miniapp';

function Loader() {
  const { isLoaded, isLoading, error } = useJSAPILoader({
    onLoad: () => console.log('Loaded'),
  });
  
  // ...
}

Error Handling

The SDK properly forwards errors from the GoPay Miniapp SDK and provides consistent error structures:

try {
  const result = await getAuthCode();
  // Handle success
} catch (error) {
  const gopayError = error as GopayErrorResponse;
  console.error('Error Code:', gopayError.error_code);
  console.error('Error Type:', gopayError.error_type);
  console.error('Error Message:', gopayError.error_message);
  console.error('Return Code:', gopayError.ret);
}