Blazor WASM PWA集成Google Play Billing API获取订阅信息失败求助

核心排查方向 #

1. 确认使用正确的SKU ID #

Google Play Billing的Digital Goods API要求传入订阅产品的SKU ID（即你创建的goldmonthly1），而非订阅计划ID（goldplan1）。需再次核对Google Play后台：

• 订阅SKU goldmonthly1是否已正确创建并保存
• SKU状态为「已发布」，未设置地区限制或其他访问限制

2. 检查内部测试轨道配置 #

• 确保包含该订阅SKU的应用版本已发布到内部测试轨道，且测试人员已被添加到测试列表并接受邀请
• 确认订阅SKU在后台「定价与可用性」设置中，已允许内部测试人员访问

3. 增强错误日志捕获（关键调试手段） #

由于无法在开发环境调试，需在JS代码中添加日志输出，通过Android Studio的Logcat查看WebView日志：

window.checkDigitalGoodsApi = async () => {
    setTimeout(async () => {
        const divGoogleDigitalGoodsAndBilling = document.getElementById('divGoogleDigitalGoodsAndBilling');
        const divGoogleDigitalGoodsOnly = document.getElementById('divGoogleDigitalGoodsOnly');
        const divNeither = document.getElementById('divNeither');

        if ('getDigitalGoodsService' in window) {
            try {
                const service = await window.getDigitalGoodsService('https://play.google.com/billing');
                divGoogleDigitalGoodsAndBilling.hidden = false;
                divGoogleDigitalGoodsOnly.hidden = true;
                divNeither.hidden = true;

                const divProductDetails = document.getElementById('divProductDetails');
                // 添加日志：打印请求的SKU和返回结果
                console.log('Requesting SKU: goldmonthly1');
                const svcProductDetails = await service.getDetails(['goldmonthly1']);
                console.log('Received product details:', svcProductDetails);

                if (svcProductDetails.length === 0) {
                    console.warn('No product details returned for SKU');
                    divProductDetails.innerHTML = '<p>Failed to load subscription details.</p>';
                    return;
                }

                for (const itmProduct of svcProductDetails) {
                    // 注意：price是对象，需使用displayPrice获取格式化后的价格字符串
                    divProductDetails.innerHTML = `<h3>${itmProduct.title}</h3>
                        <p>${itmProduct.description}</p>
                        <p>Price: ${itmProduct.price.displayPrice}</p>`;
                }

            } catch (error) {
                console.error('Billing API error:', error); // 捕获并打印错误
                divGoogleDigitalGoodsAndBilling.hidden = true;
                divGoogleDigitalGoodsOnly.hidden = false;
                divNeither.hidden = true;
            }
        } else {
            divGoogleDigitalGoodsAndBilling.hidden = true;
            divGoogleDigitalGoodsOnly.hidden = true;
            divNeither.hidden = false;
        }
    }, 0);
};

通过Logcat搜索Billing API error或Received product details，可明确是API返回空数组还是存在权限/配置错误。

4. 修正API属性访问错误 #

Digital Goods API返回的price是包含多字段的对象（如currency、value、displayPrice），直接使用itmProduct.price会输出对象而非格式化价格，需改用itmProduct.price.displayPrice获取用户可见的价格字符串。

5. 避免Blazor DOM渲染冲突 #

直接通过JS修改DOM可能被Blazor组件重新渲染覆盖，建议改用Blazor双向绑定传递数据：

1. 在Razor组件中添加字段和JS可调用方法：

<div id="divGoogleDigitalGoodsAndBilling">
    @if (productDetails != null)
    {
        <h3>@productDetails.Title</h3>
        <p>@productDetails.Description</p>
        <p>Price: @productDetails.Price</p>
    }
</div>

@code {
    private ProductInfo? productDetails;

    [JSInvokable]
    public void UpdateProductDetails(string title, string description, string price)
    {
        productDetails = new ProductInfo
        {
            Title = title,
            Description = description,
            Price = price
        };
        StateHasChanged();
    }

    private class ProductInfo
    {
        public string Title { get; set; } = string.Empty;
        public string Description { get; set; } = string.Empty;
        public string Price { get; set; } = string.Empty;
    }
}

2. 修改JS代码调用Blazor方法：

// 调用Blazor组件方法传递数据
DotNet.invokeMethodAsync('YourAssemblyName', 'UpdateProductDetails', 
    itmProduct.title, itmProduct.description, itmProduct.price.displayPrice);

总结 #

优先通过增强日志确认API返回结果，再检查SKU配置和内部测试权限，最后修正属性访问和Blazor渲染冲突问题，即可定位并解决无法获取订阅产品信息的问题。

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