Ramps UI (ramps.moneygram.com) – COMMIT_RESULT postMessage

The COMMIT_RESULT message signals that no more user action is required in the Ramps UI. When a user successfully completes a transaction (commit) in the Ramps UI, the app sends a COMMIT_RESULT message to the host so partners can update their UI, show success, or navigate.

1. How to Listen (by host type)

The message payload is the same in all cases; only the delivery mechanism differs by host.

React Native WebView

• Where: Your WebView component’s onMessage (or equivalent) handler.
• Format: The message is sent as a JSON string. Parse it once, then use the object.

<WebView
  onMessage={(event) => {
    const message = JSON.parse(event.nativeEvent.data);
    if (message.type === "COMMIT_RESULT") {
      const transaction = message.payload.transaction;
      // Use transaction (e.g. id, status, more_info_url, etc.)
    }
  }}
/>

iOS WKWebView (native WebKit)

• Where: A script message handler that the Ramps UI calls by name.
• Handler name: rampsUI (you must add a WKScriptMessageHandler with this name).
• Format: The handler receives a JSON string. Parse it once, then use the object.

Example (Swift): When configuring the WKWebView, add a script message handler named rampsUI. In the handler callback, parse the message body (string) as JSON; then check type === "COMMIT_RESULT" and read payload.transaction.

Web iframe

• Where: On the page that contains the iframe, listen for the message event on window.
• Format: The payload is the message object (no JSON parse needed). Use event.data directly.

window.addEventListener("message", (event) => {
  const message = event.data;
  if (message?.type === "COMMIT_RESULT") {
    const transaction = message.payload.transaction;
    // Use transaction (e.g. id, status, more_info_url, etc.)
  }
});

2. Differentiating COMMIT_RESULT from other events

The Ramps UI can send multiple message types (e.g. COMMIT_REQUEST for the wallet send step and COMMIT_RESULT after a successful commit). To handle only the final transaction result:

1. Parse the message (React Native and iOS: parse the JSON string; iframe: use event.data as the object).
2. Check the type field: only handle messages where type === "COMMIT_RESULT".
3. Read the transaction from message.payload.transaction (or event.data.payload.transaction in the iframe example).

Message shape:

Ignore or handle other type values (e.g. "COMMIT_REQUEST") separately; only "COMMIT_RESULT" indicates the Ramps flow is completed.

Legacy Ramps UI (stellar.moneygram.com)

Open the MoneyGram URL in a webview or browser. Monitor for a postMessage with the transaction JSON. Close the webview when status is pending_user_transfer_start.

webview = window.open(moneygramURL, "webview", "width=500,height=800");
window.addEventListener("message", closeWebView);

function closeWebView(e) {
  const txJson = e.data.transaction;
  console.log(`Transaction ${txJson.id} is ${txJson.status}`);

  // If we get a postMessage event and the transaction status is
  // "pending_user_transfer_start" let's interpret that as a signal to close
  // the webview window and take user back to the application experience
  if (txJson.status === "pending_user_transfer_start") {
    webview.close();
  }
}