SPA中MPGS session.js重复配置失效问题及解决方案问询

问题背景 #

我们在单页应用(SPA)中集成了MPGS的session.js SDK，首次进入支付页面时调用PaymentSession.configure（代码如下），SDK能正常修改UI元素，支付流程可正常完成：

PaymentSession.configure(
    {
        session: details.sessionId,
        fields: {
            card: {
                number: `#${details.htmlElementIdCardNumber}`,
                securityCode: `#${details.htmlElementIdCardCCV}`,
                expiryMonth: `#${details.htmlElementIdCardExpiryMonth}`,
                expiryYear: `#${details.htmlElementIdCardExpiryYear}`,
                nameOnCard: `#${details.htmlElementIdCardNameOnCard}`,
            },
        },
        frameEmbeddingMitigation: ['javascript'],
        callbacks: {
            initialized: (response) => {
               console.log('PaymentSession initialized', response);
            },
            formSessionUpdate: (response) => {
               console.log('PaymentSession formSessionUpdate', response);
            },
        },
        interaction: {
            displayControl: {
                formatCard: 'EMBOSSED',
                invalidFieldCharacters: 'REJECT',
            },
        },
    }
);

但当用户未完成支付就导航离开，支付相关DOM元素被SPA移除后，再次进入支付页重复调用上述配置命令时，UI完全无变化：输入框仍为只读状态，且无法与SDK建立关联。推测原因是SDK未清理与已移除DOM元素的绑定关系，导致新元素无法被正确关联。

官方回复（无法满足需求） #

当前session SDK（session.js）的此行为为设计如此，若卡片信息字段被删除后重建，不支持多次调用configure()。此需SDK功能增强，我们已提交产品团队评估。如之前所述，若商户采用隐藏/显示卡片信息字段而非删除/重建的方式，可支持该场景。我们不理解为何SPA无法实现，SPA并不强制要求增删字段，取决于底层实现。

可行的替代方案 #

由于官方暂不支持销毁SDK实例或清理DOM关联的API，我们可以尝试以下几种落地方案：

方案1：改用元素隐藏/显示逻辑（官方推荐，低风险） #

修改SPA的页面导航逻辑，让支付相关的DOM元素始终保留在DOM树中，仅通过CSS控制显示与隐藏：

• 当用户离开支付页时，给支付容器添加display: none或visibility: hidden类；
• 再次进入支付页时，移除隐藏类，然后重新调用PaymentSession.configure。
  这种方式避免了DOM元素的删除与重建，符合SDK的设计预期，能保证重复配置生效。

方案2：动态重置SDK实例（高风险，需测试） #

如果无法修改DOM操作逻辑，可以尝试通过重新加载SDK的方式重置状态：

1. 在用户离开支付页时，移除页面中已加载的session.js脚本标签；
2. 创建新的script标签，重新加载session.js；
3. 再次进入支付页时，等待SDK重新加载完成后，调用PaymentSession.configure。
   注意：这种方式可能会导致全局状态丢失，且需要处理脚本加载的异步逻辑，部分场景下可能出现兼容性问题，需充分测试。

方案3：手动清理SDK绑定（依赖内部实现，不推荐） #

通过查看SDK的内部代码，尝试手动移除其绑定在DOM元素上的事件监听器和关联数据：

• 找到SDK可能绑定的事件（如input、focus等），逐个移除；
• 删除元素上SDK添加的自定义属性或数据（如data-payment-session类或属性）。
  这种方式完全依赖SDK的内部实现，一旦SDK更新可能失效，仅作为临时应急方案。

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