.NET 8 MAUI Blazor项目集成Google Pay遇到问题

Android端：Java.Lang.NullPointerException: uriString 崩溃问题 #

• 问题核心：Google Pay JS脚本在MAUI Blazor的Android WebView中构造URI时获取空值，多与WebView的origin配置、权限设置相关。
• 解决步骤：
  1. 检查AndroidManifest.xml，确保添加网络权限：

     <uses-permission android:name="android.permission.INTERNET" />
     

  2. 配置WebViewClient，强制设置合法origin（避免JS获取空值）：
     在MainActivity.cs中添加如下代码：

     protected override void OnCreate(Bundle savedInstanceState)
     {
         base.OnCreate(savedInstanceState);
         Microsoft.Maui.Handlers.WebViewHandler.Mapper.AppendToMapping("CustomWebView", (handler, view) =>
         {
             if (handler.PlatformView is Android.Webkit.WebView webView)
             {
                 webView.Settings.JavaScriptEnabled = true;
                 webView.Settings.DomStorageEnabled = true;
                 webView.SetWebViewClient(new CustomWebViewClient());
             }
         });
     }
     
     private class CustomWebViewClient : Android.Webkit.WebViewClient
     {
         public override bool ShouldOverrideUrlLoading(Android.Webkit.WebView view, IWebResourceRequest request)
         {
             view.LoadUrl(request.Url.ToString());
             return true;
         }
     }
     

  3. 修改Google Pay JS脚本中的origin字段，设置为Google Pay控制台注册的合法域名（本地测试可用http://localhost:端口号），确保非空。

Windows端：OR_BIBED_15 错误 #

• 问题核心：Google Pay不识别MAUI Blazor的WebView2环境为合规浏览器，或商家配置的origin与WebView当前origin不匹配。
• 解决步骤：
  1. 配置WebView2使用独立用户数据目录，模拟Chrome环境：
     在Windows项目MainWindow.xaml.cs中修改初始化逻辑：

     public MainWindow()
     {
         InitializeComponent();
         var webView2 = BlazorWebView.WebView as Microsoft.Web.WebView2.WinForms.WebView2;
         if (webView2 != null)
         {
             webView2.CreationProperties = new Microsoft.Web.WebView2.WinForms.CoreWebView2CreationProperties
             {
                 UserDataFolder = Path.Combine(Environment.GetFolderPath(Environment.SpecialFolder.LocalApplicationData), "YourAppName_WebView2_Data")
             };
         }
     }
     

  2. 在Google Pay控制台的allowedOrigins列表中添加MAUI Blazor应用的origin（本地测试通常为https://localhost或https://0.0.0.0）。
  3. 改用系统默认浏览器打开支付链接：
     • 在JS脚本中添加环境判断：

       // 触发支付前添加逻辑
       if (window.MauiBlazor) {
           window.MauiBlazor.OpenInBrowser(paymentRequestUrl);
       } else {
           // 原有Web支付逻辑
       }
       

     • 在MAUI项目中注册JS互操作：

       [JSInvokable]
       public static async Task OpenInBrowser(string url)
       {
           await Launcher.Default.OpenAsync(url);
       }
       

通用检查项 #

• 确认Google Pay JS脚本中environment: 'TEST'配置正确，使用测试环境。
• 验证paymentRequest内的merchantInfo、allowedPaymentMethods参数与Google Pay控制台配置完全一致。
• 测试时使用Google Pay官方提供的测试卡号，避免使用真实卡片。

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