集成Firebase授权后Razorpay支付界面在iOS模拟器显示缩窄

最初集成Razorpay包后，支付界面可正常全屏显示；但添加Firebase Auth、Google Sign In、Facebook Sign In功能后，Razorpay支付界面在iOS模拟器中缩至屏幕中间区域。尝试删除Pods、.symlinks、Podfile.lock文件后重新执行pod install，问题依旧。

Podfile配置 #

# Uncomment this line to define a global platform for your project
platform :ios, '12.0'

# CocoaPods analytics sends network stats synchronously affecting flutter build latency.
ENV['COCOAPODS_DISABLE_STATS'] = 'true'

project 'Runner', {
  'Debug' => :debug,
  'Profile' => :release,
  'Release' => :release,
}

def flutter_root
  generated_xcode_build_settings_path = File.expand_path(File.join('..', 'Flutter', 'Generated.xcconfig'), __FILE__)
  unless File.exist?(generated_xcode_build_settings_path)
    raise "#{generated_xcode_build_settings_path} must exist. If you're running pod install manually, make sure flutter pub get is executed first"
  end

  File.foreach(generated_xcode_build_settings_path) do |line|
    matches = line.match(/FLUTTER_ROOT\=(.*)/)
    return matches[1].strip if matches
  end
  raise "FLUTTER_ROOT not found in #{generated_xcode_build_settings_path}. Try deleting Generated.xcconfig, then run flutter pub get"
end

require File.expand_path(File.join('packages', 'flutter_tools', 'bin', 'podhelper'), flutter_root)

flutter_ios_podfile_setup

target 'Runner' do
  use_frameworks!
  use_modular_headers!

  flutter_install_all_ios_pods File.dirname(File.realpath(__FILE__))
  target 'RunnerTests' do
    inherit! :search_paths
  end
end

post_install do |installer|
  installer.pods_project.targets.each do |target|
    flutter_additional_ios_build_settings(target)
    target.build_configurations.each do |config|
          config.build_settings['ENABLE_BITCODE'] = 'YES'
          config.build_settings['SWIFT_VERSION'] = '5.0'
     end
  end
end

打开Razorpay支付界面的代码 #

Future makePayment(String orderId, double total) async {
  Razorpay razorpay = Razorpay();
  var options = {
    'amount': (total * 100).round(),
    'currency': 'INR',
    'name': 'kaushik chandru',
    'description': 'Car Booking',
    'prefill': {
      'contact': '123456789',
      'email': 'test@gmail.com',
    },
    'send_sms_hash': true,
    'retry': {'enabled': true, 'max_count': 1},
    'key': 'rzp_test_rrrrrrr',
  };
  razorpay.on(Razorpay.EVENT_PAYMENT_ERROR, handlePaymentErrorResponse);
  razorpay.on(Razorpay.EVENT_PAYMENT_SUCCESS, handlePaymentSuccessResponse);
  razorpay.on(Razorpay.EVENT_EXTERNAL_WALLET, handleExternalWalletSelected);
  razorpay.open(options);
}

运行日志 #

I/chromium(17808): [INFO:CONSOLE(1)] "Canvas2D: Multiple readback operations using getImageData are faster with the willReadFrequently attribute set to true. See: https://html.spec.whatwg.org/multipage/canvas.html#concept-canvas-will-read-frequently", source: https://checkout-static-next.razorpay.com/build/d962afde0dc0b7bd79b0ced1b6c3fdd77de18678/checkout-frame.modern.js (1)
E/com.razorpay.checkout(17808): Webview JS Error: Error: <svg> attribute width: Unexpected end of attribute. Expected length, "".
I/chromium(17808): [INFO:CONSOLE(1)] "Error: <svg> attribute width: Unexpected end of attribute. Expected length, "".", source: https://checkout-static-next.razorpay.com/build/d962afde0dc0b7bd79b0ced1b6c3fdd77de18678/checkout-frame.modern.js (1)
E/com.razorpay.checkout(17808): Webview JS Error: Error: <svg> attribute height: Unexpected end of attribute. Expected length, "".
I/chromium(17808): [INFO:CONSOLE(1)] "Error: <svg> attribute height: Unexpected end of attribute. Expected length, "".", source: https://checkout-static-next.razorpay.com/build/d962afde0dc0b7bd79b0ced1b6c3fdd77de18678/checkout-frame.modern.js (1)
E/com.razorpay.checkout(17808): Webview JS Error: Error: <svg> attribute width: Unexpected end of attribute. Expected length, "".
I/chromium(17808): [INFO:CONSOLE(1)] "Error: <svg> attribute width: Unexpected end of attribute. Expected length, "".", source: https://checkout-static-next.razorpay.com/build/d962afde0dc0b7bd79b0ced1b6c3fdd77de18678/checkout-frame.modern.js (1)
E/com.razorpay.checkout(17808): Webview JS Error: Error: <svg> attribute height: Unexpected end of attribute. Expected length, "".
I/chromium(17808): [INFO:CONSOLE(1)] "Error: <svg> attribute height: Unexpected end of attribute. Expected length, "".", source: https://checkout-static-next.razorpay.com/build/d962afde0dc0b7bd79b0ced1b6c3fdd77de18678/checkout-frame.modern.js (1)
E/com.razorpay.checkout(17808): Webview JS Error: Error: <svg> attribute width: Unexpected end of attribute. Expected length, "".
I/chromium(17808): [INFO:CONSOLE(1)] "Error: <svg> attribute width: Unexpected end of attribute. Expected length, "".", source: https://checkout-static-next.razorpay.com/build/d962afde0dc0b7bd79b0ced1b6c3fdd77de18678/checkout-frame.modern.js (1)
E/com.razorpay.checkout(17808): Webview JS Error: Error: <svg> attribute height: Unexpected end of attribute. Expected length, "".
I/chromium(17808): [INFO:CONSOLE(1)] "Error: <svg> attribute height: Unexpected end of attribute. Expected length, "".", source: https://checkout-static-next.razorpay.com/build/d962afde0dc0b7bd79b0ced1b6c3fdd77de18678/checkout-frame.modern.js (1)
I/MSHandlerLifeCycle(17808): removeMultiSplitHandler: no exist. decor=DecorView@cc0c034[CheckoutActivity]
D/OpenGLRenderer(17808): setSurface called with nullptr
D/OpenGLRenderer(17808): setSurface() destroyed EGLSurface
D/OpenGLRenderer(17808): destroyEglSurface
I/ViewRootImpl@598c491[CheckoutActivity](17808): dispatchDetachedFromWindow
D/InputTransport(17808): Input channel destroyed: 'bc0372b', fd=129

解决方法 #

1. 检查Info.plist的视图配置
   在Info.plist中添加UIViewControllerBasedStatusBarAppearance并设为YES，同时确认UISupportedInterfaceOrientations包含所有需要的屏幕方向，保证支付界面能适配全屏布局。

2. 调整Razorpay展示逻辑
   打开支付界面前，确保当前视图控制器处于全屏状态。可以通过Flutter的WidgetsBinding获取顶层视图控制器（若插件支持），或在原生iOS层修改Razorpay的展示方式，强制其以全屏模态形式弹出。

3. 排查Pod依赖冲突
   Firebase Auth、第三方登录组件可能引入与Razorpay冲突的WebView相关依赖。尝试锁定Razorpay插件版本为最新稳定版，在Podfile中添加：

   pod 'razorpay-flutter', '~> 1.3.7'
   

   然后重新执行pod install。

4. 修复WebView SVG渲染问题
   日志中的SVG属性错误可能导致布局异常。更新Razorpay插件到最新版本，或在原生项目中配置WebView允许SVG自适应渲染。同时确保iOS模拟器系统版本与插件兼容，避免低版本系统的WebView兼容性问题。

5. 检查Xcode项目全屏设置
   打开Xcode的Runner项目，在General设置的Deployment Info中勾选所有需要的设备方向，确认Launch Screen File配置正确，避免布局约束干扰支付界面展示。

内容的提问来源于stack exchange，提问作者Kaushik Chandru