Installation and Setup

import android.webkit.WebView;
import android.webkit.WebSettings;
import android.webkit.JavascriptInterface;
import android.util.Log;
import org.json.JSONObject;

// Set up WebView
WebView webView = findViewById(R.id.webview);
WebSettings webSettings = webView.getSettings();
webSettings.setJavaScriptEnabled(true);

// Add JavaScript interface to handle events from WebView
webView.addJavascriptInterface(new PaymentBridge(), "PaymentBridge");

// Load your HTML file with the Payment Widget
webView.loadUrl("file:///android_asset/payment-widget.html");

// JavaScript interface class to handle WebView events
public class PaymentBridge {
  @JavascriptInterface
  public void onMessage(String messageJson) {
    try {
      JSONObject message = new JSONObject(messageJson);
      String type = message.getString("type");
      Object data = message.opt("data");

      runOnUiThread(() -> {
        switch (type) {
          case "complete":
            handlePaymentComplete(data != null ? data.toString() : null);
            break;
          case "cancel":
            handlePaymentCancel();
            break;
          case "error":
            handlePaymentError(data != null ? data.toString() : null);
            break;
          default:
            Log.w("Payment", "Unknown Payment Widget message type: " + type);
        }
      });
    } catch (Exception e) {
      Log.e("Payment", "Error parsing Payment Widget message", e);
    }
  }

  private void handlePaymentComplete(String data) {
    // Handle successful payment completion
    Log.d("Payment", "Payment completed: " + data);
    // Navigate to success screen or handle completion
  }

  private void handlePaymentCancel() {
    // Handle payment cancellation
    Log.d("Payment", "Payment cancelled");
    // Navigate back or show cancellation message
  }

  private void handlePaymentError(String error) {
    // Handle payment error
    Log.e("Payment", "Payment error: " + error);
    // Show error message to user
  }
}

import { WebView } from 'react-native-webview';
import { Alert } from 'react-native';

const PaymentScreen = () => {
  const handleMessage = (event) => {
    try {
      const message = JSON.parse(event.nativeEvent.data);

      switch (message.type) {
        case 'complete':
          handlePaymentComplete(message.data);
          break;
        case 'cancel':
          handlePaymentCancel();
          break;
        case 'error':
          handlePaymentError(message.data);
          break;
        default:
          console.log('Unknown message type:', message.type);
      }
    } catch (error) {
      console.error('Error parsing WebView message:', error);
    }
  };

  const handlePaymentComplete = (data) => {
    // Handle successful payment completion
    console.log('Payment completed:', data);
    Alert.alert('Success', 'Payment completed successfully!');
    // Navigate to success screen
  };

  const handlePaymentCancel = () => {
    // Handle payment cancellation
    console.log('Payment cancelled');
    Alert.alert('Cancelled', 'Payment was cancelled');
    // Navigate back
  };

  const handlePaymentError = (error) => {
    // Handle payment error
    console.error('Payment error:', error);
    Alert.alert('Error', 'An error occurred during payment');
    // Show error message or retry option
  };

  return (
    <WebView
      source={{ uri: 'file:///path/to/payment-widget.html' }}
      javaScriptEnabled={true}
      domStorageEnabled={true}
      onMessage={handleMessage}
    />
  );
};