Global Payments Hosted Fields在Blazor WebAssembly中需刷新才显示问题求助

核心原因分析 #

Blazor WebAssembly的异步DOM渲染机制与MAUI Blazor Hybrid的WebView环境存在差异：

• Blazor WASM中，组件渲染是异步批量更新DOM，OnAfterRenderAsync触发时，目标div可能已被添加到DOM，但尚未完成布局渲染（不可见或尺寸为0），导致Hosted Fields初始化失败。
• MAUI Hybrid的WebView环境DOM更新更同步，元素布局状态更稳定，因此初始化能正常执行。

具体解决方案 #

1. 确保初始化前目标元素已完成布局

修改JS Interop方法，在初始化Hosted Fields前，通过requestAnimationFrame等待浏览器完成当前帧的布局渲染，确保目标div可见且有尺寸：

window.initHostedFields = function(config) {
    return new Promise((resolve) => {
        // 等待浏览器完成布局渲染
        requestAnimationFrame(() => {
            const hostedFields = new HostedFields(config);
            hostedFields.create((error) => {
                if (error) {
                    console.error('Hosted Fields初始化失败:', error);
                    resolve(false);
                } else {
                    resolve(true);
                }
            });
        });
    });
};

在Razor组件的OnAfterRenderAsync中调用：

protected override async Task OnAfterRenderAsync(bool firstRender)
{
    if (firstRender)
    {
        var config = new 
        {
            publicKey = "你的公钥",
            fields = new 
            {
                cardNumber = new { selector = "#card-number" },
                expiryDate = new { selector = "#expiry-date" },
                cvv = new { selector = "#cvv" }
            }
        };
        await JSRuntime.InvokeAsync<bool>("initHostedFields", config);
        StateHasChanged();
    }
}

2. 监听DOM元素的可见性变化

使用JS的MutationObserver监听目标div的可见性或样式变化，当元素变为可见时再初始化Hosted Fields：

window.initHostedFieldsOnVisible = function(selector, config) {
    const target = document.querySelector(selector);
    if (!target) {
        console.error('目标元素不存在');
        return;
    }

    const observer = new MutationObserver((mutations) => {
        const isVisible = target.offsetParent !== null;
        if (isVisible) {
            observer.disconnect();
            const hostedFields = new HostedFields(config);
            hostedFields.create((error) => {
                if (error) console.error('初始化失败:', error);
            });
        }
    });

    observer.observe(target, { attributes: true, attributeFilter: ['style', 'class'] });
    
    // 立即检查一次可见性
    const isVisible = target.offsetParent !== null;
    if (isVisible) {
        observer.disconnect();
        const hostedFields = new HostedFields(config);
        hostedFields.create((error) => {
            if (error) console.error('初始化失败:', error);
        });
    }
};

在Razor组件中调用时传入目标容器选择器：

await JSRuntime.InvokeVoidAsync("initHostedFieldsOnVisible", "#card-fields-container", config);

3. 强制触发Hosted Fields重绘

如果初始化后仍不显示，可在初始化完成后调用Hosted Fields的resize方法（若API支持），强制重新渲染字段：

window.initHostedFields = function(config) {
    return new Promise((resolve) => {
        requestAnimationFrame(() => {
            const hostedFields = new HostedFields(config);
            hostedFields.create((error) => {
                if (!error) {
                    // 强制重绘字段
                    hostedFields.resize();
                    resolve(true);
                } else {
                    console.error('初始化失败:', error);
                    resolve(false);
                }
            });
        });
    });
};

额外排查点 #

• 确认index.html中引入的Global Payments JS文件加载时机：若使用async属性，需确保脚本加载完成后再执行初始化，可通过监听DOMContentLoaded事件或动态加载脚本。
• 检查浏览器控制台是否有报错：比如权限问题、配置参数错误（如selector对应的元素不存在）。
• 避免在组件的OnInitializedAsync中执行JS Interop，此时DOM尚未渲染完成。

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