React Native集成Razorpay CustomUI时UI背景透明问题咨询

我使用react-native-customui调用Razorpay支付组件，代码如下：

const options = {
    description: 'Credits towards consultation',
    currency: 'INR',
    key_id: "rzr_id",
    amount: 100,
    email: 'void@razorpay.com',
    contact: '9999999123',
    method: 'card',
    'card[name]': 'test',
    'card[number]': 4111111111111111,
    'card[expiry_month]': 12,
    'card[expiry_year]': 23,
    'card[cvv]': 123,
  };
  Razorpay.open(options).then((res: any) => {// handle success}).catch((error: any) => {// handle failure});

调用后发现Razorpay的UI在iOS端打开时背景为透明状态，但Android端显示正常的白色背景：

针对iOS端的这个问题，可以尝试以下几种解决思路：

• 配置WebView背景色：react-native-customui底层大概率用WebView渲染支付界面，iOS端WebView默认背景可能为透明。可以在RN组件配置或iOS原生代码中，强制将WebView的背景色设置为白色，同时设置opaque属性为YES。

• 升级依赖版本：检查react-native-customui和Razorpay iOS SDK的版本，旧版本可能存在UI渲染bug，尝试升级到官方最新稳定版。

• 添加主题配置项：在调用Razorpay.open()的options参数中，新增主题配置明确指定背景色，参考示例：

  const options = {
    // 原有配置...
    theme: {
      background: '#ffffff'
    }
  };
  

  具体配置字段可参考Razorpay Custom UI官方文档中的主题设置说明。

• iOS原生代码修复：如果以上方案无效，可在iOS项目中找到Razorpay对应的WebView实例，手动设置背景色：

  webView.backgroundColor = [UIColor whiteColor];
  webView.opaque = YES;
  

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