iosflutterxcodeflutter-dependenciesrazorpay

Razorpay payment screen shown with white borders

I have added razorpay package and it was displaying in full screen. After that i added, firebase auth, google sign in, facebook signin. Post these updates the razor pay payment screen is shrunk to the middle portion as shown in the image.

preview

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

Method i use to open razorpay screen

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 tried deleting Pods, .symlinks, Podfile.lock and installed pod again but same result. This happens in ios simulator

The run stack is as follows

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
Solution

  • Removed razorpay integration fully and installed again and the issue was resolved