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>
  );
};

⚠️

Google Pay and Apple Pay are not available in WebViews. Google Pay is disabled because Google blocks payment sheet rendering in WebView contexts. Apple Pay is disabled because window.ApplePaySession is not available outside Safari. Only card (manual entry) and crypto are supported in WebViews.

WebView detection: Breeze detects WebViews via the browser user agent — matching patterns like WebView, iPhone/iPad without Safari, Android.*(wv|Version/x.x Chrome), and Linux; U; Android. Facebook and Instagram in-app browsers are not treated as WebViews and will have Google Pay disabled by those apps' own restrictions regardless.

Autofill: Not supported on iOS WebViews for security reasons. Android WebViews support autofill.

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