React Native

Use React Native WebView when your mobile app needs to keep the user inside the app while completing the Jodo-hosted payment flow.

Flow

1. Request the checkout redirect_url from your backend.
2. Load the redirect_url in a WebView.
3. Track navigation changes inside the WebView.
4. Detect your configured callback_url.
5. Close checkout or navigate to a status screen.
6. Confirm final status from your backend using APIs or webhooks.

Get the Redirect URL

Your app should call your ERP or backend API. That backend should call Jodo and return the redirect_url to the app.

Include a callback_url when creating the flow. The callback URL should be a route that your app can detect, such as a universal link, deep link, or web route you control.

Implement the WebView

Install react-native-webview if it is not already part of your project.

npm install react-native-webview

The WebView should load the redirect_url, allow child windows when required, and watch for the callback URL.

import { useState } from "react";
import { View, TouchableOpacity, StyleSheet, Text } from "react-native";
import { WebView } from "react-native-webview";

export default function JodoCheckout({ redirectURL, callbackURL, onComplete, onClose }) {
  const [urlStack, setUrlStack] = useState([redirectURL]);

  const currentURL = urlStack[urlStack.length - 1];

  const handleClose = () => {
    if (urlStack.length > 1) {
      setUrlStack((state) => state.slice(0, -1));
      return;
    }

    onClose?.();
  };

  const handleNavigationChange = (event) => {
    if (event.url.startsWith(callbackURL)) {
      onComplete?.(event.url);
    }
  };

  return (
    <View style={styles.container}>
      <WebView
        source={{ uri: currentURL }}
        style={styles.webview}
        javaScriptEnabled
        domStorageEnabled
        setSupportMultipleWindows
        onOpenWindow={(event) => {
          setUrlStack((state) => [...state, event.nativeEvent.targetUrl]);
        }}
        onNavigationStateChange={handleNavigationChange}
      />

      <TouchableOpacity style={styles.closeButton} onPress={handleClose}>
        <Text style={styles.closeText}>Close</Text>
      </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  webview: {
    flex: 1,
  },
  closeButton: {
    position: "absolute",
    top: 32,
    right: 16,
    paddingHorizontal: 12,
    paddingVertical: 8,
    backgroundColor: "#ffffff",
    borderRadius: 8,
  },
  closeText: {
    color: "#111827",
    fontWeight: "600",
  },
});

Completion Handling

When the callback URL is detected, close the WebView and show a confirmation or pending screen. Then ask your backend for the latest status.

Do not treat the callback alone as final payment confirmation. Final status should come from your backend after checking Jodo status APIs and webhook updates.

Test Cases

• Successful payment completion
• User closes the WebView
• UPI app opens and returns to the app
• Net banking or card authentication opens a new window
• Callback URL is reached after a delayed redirect
• Network interruption during checkout