Mona One Tap allows your customers to make payment within your website or app with just a single tap. We do all the heavy lifting in the background. Your customers’ bank accounts and cards will show up natively within your UI and they can complete payment without any additional UI or complex redirect flows, uplifting your conversion dramatically.

Customers can pay with biometrics using their saved payment methods, while traditional payment methods like card and manual transfer are also supported. The integration is straightforward - just drop in the SDK for your corresponding web or mobile platform without complex setup requirements.

​
How It Works

The checkout process follows these key steps:

  1. Create Transaction: Use the create checkout session endpoint to generate a transaction ID and payment URL
  2. Initialize SDK: Set up the Mona SDK in your app with your merchant key
  3. Launch Checkout: Pass the transaction ID to the SDK to start the payment flow
  4. Handle Response: Listen for transaction status updates and handle success/failure states

​
Platform Integration

​
Installation

<!-- Load the Mona Script (Next.js example) -->
<Script
  src="/mona_web_embedding.js"
  strategy="beforeInteractive"
/>

<!-- Or in vanilla HTML -->
<head>
  <script src="mona_embedding.js" />
</head>

​
Usage

// 1. Create transaction via API, navigate to checkout page
// Example: /checkout?transactionId={transactionId}&checkoutToken={checkoutToken}

// 2. Initialize Mona on checkout page
useEffect(() => {
  const initializeMona = async () => {
    try {
      if (window.MonaClient && containerRef.current) {
        window.MonaClient.init(
          transactionId,
          containerRef.current,
          checkoutToken
        );
      }
    } catch (error) {
      console.error("Failed to initialize Mona:", error);
    }
  };

  initializeMona();

  window.addEventListener("monaComplete", () => {
    router.push(`/success?transactionId=${transactionId}`);
  });

  window.addEventListener("monaFailure", () => {
    router.push("/failure");
  });

  return () => {
    window.removeEventListener("monaComplete", () => {});
    window.removeEventListener("monaFailure", () => {});
  };
}, []);

// 3. Container for Mona UI
<div ref={containerRef} className="w-full" />

// Note: Complete integration details and additional methods 
// are not yet documented for Web SDK

​
Transaction Status Types

Monitor your payment status with these callback types across platforms:

Event DescriptionWebReact NativeFlutter
Payment successfulmonaCompleteTransactionStatus.COMPLETED-
Payment failedmonaFailureTransactionStatus.FAILED-
SDK processing/loading-MonaSDKStatus.LOADINGMonaSDKState.loading
SDK ready/idle--MonaSDKState.idle
Operation successful-MonaSDKStatus.SUCCESSMonaSDKState.success
Transaction initiated-MonaSDKStatus.TRANSACTION_INITIATED-
SDK error-MonaSDKStatus.ERRORMonaSDKState.error
User authenticated-AuthStatus.LOGGED_INAuthState.loggedIn
User not authenticated-AuthStatus.LOGGED_OUTAuthState.loggedOut
Not a Mona user--AuthState.notAMonaUser

Note: Flutter transaction-specific events are handled via txnStateStream - specific transaction events not yet documented.

​
Next Steps

  1. Get API Keys: Contact us to get your merchant public and private keys
  2. Create Backend: Implement the create checkout endpoint on your server
  3. Test Integration: Use our sandbox environment to test the complete flow
  4. Go Live: Switch to production keys when ready

Check out our API Reference for detailed information about the checkout endpoints.