WebView payment integration allows you to seamlessly embed a hosted Breeze payment page directly within your mobile application. This approach is recommended to keep the app experience seamless and avoid jarring app to browser context switches.

How It Works

1. Your application creates a payment session on your backend server
2. The WebView loads the hosted payment URL
3. Users complete payment within the embedded WebView
4. Payment results are communicated back to your application via URL callbacks or back button callbacks
5. Your application closes the Webview and validates the payment page status to your backend server
6. Your application handles the success or failure states appropriately

Implementation Examples

import React, { useRef } from 'react';
import { View, Alert } from 'react-native';
import { WebView } from 'react-native-webview';

const PaymentWebView = ({ paymentUrl, onPaymentComplete }) => {
  const webViewRef = useRef(null);

  const handleNavigationStateChange = (navState) => {
    if (navState.url.includes('status')) {
      //Validate payment status on your BE server
      onPaymentComplete(true);
    }
  };

  return (
    <View style={{ flex: 1 }}>
      <WebView
        source={{ uri: paymentUrl }}
        onNavigationStateChange={handleNavigationStateChange}
        javaScriptEnabled={true}
        domStorageEnabled={true}
      />
    </View>
  );
};

Notes

• Google Pay and Google Authentication are disabled on WebView because Google has disabled redirection when requests originate from WebView browsers.
• Autofill features are not supported on iOS devices for security reasons, with full functionality limited to Android devices only.

Best Practices

1. Deep link redirection

always support a return_url (deep link or universal link). If deep links fail, handle an HTTPS universal link that your app can open.

2. Return URL verification

when your frontend detects that the payment status has changed, make sure to always validate the payment status with your backend. do not trust client messages alone