javascript 如何在SPA中使用MPGS session.js

bzzcjhmw 于 2023-05-27 发布在 Java

关注(0)|答案(1)|浏览(92)

根据MPGS session的文档，我们在单页应用程序（SPA）中实现了“session.js”SKD。
一些意想不到的行为发生了……和SDK故障，如下所述。
正如我们所知，现代SPA的添加/删除html元素作为用户导航其页面。在阅读下面的问题描述和MPGS的支持答案时，请记住这一点。
用户第一次（我们称之为FIRST_CALL）到达支付页面时，我们发出PaymentSession.configure命令，如下所示（details对象包含SDK要求的现有只读输入字段的正确ID）：

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: any) => {
               console.log('PaymentSession initialized', response);
            },
            formSessionUpdate: (response: any) => {
               console.log('PaymentSession formSessionUpdate', response);
            },
        },
        interaction: {
            displayControl: {
                formatCard: 'EMBOSSED',
                invalidFieldCharacters: 'REJECT',
            },
        },
    }

通过此调用，UI元素按预期由SDK更改，并且可以执行支付。
如果用户决定不点击“支付”按钮（这将调用PaymentSession.updateSessionFromForm('card')并在必要时成功存储支付细节）并导航离开==>则会触发错误行为...为了更清楚地说明，当用户离开支付页面时，SDK修改的HTML元素将从DOM中删除（这些元素在上面的details对象中命名）。
当用户再次来到支付页面并且再次发出上述调用（让我们称之为SECOND_CALL）时，UI不会改变，并且无法在html输入字段中插入支付细节（因为这些仍然是只读的并且与SDK分离）。
看起来“session.js”SDK没有清除它与发出FIRST_CALL时存在的元素的链接（并且从DOM中删除）......所以当SECOND_CALL发生时，html元素不会更新
有没有办法从FIRST_CALL的元素中清除“PaymentSession”SDK对象的链接？
==>这是一个SPA，页面刷新不应该是一个选项。
我已经询问了MPGS支持人员该怎么做，这是他们目前的回应（我认为这是不可接受的）：
session SDK（session.js）的当前行为是设计的，如果删除并重新创建卡详细信息字段，它将不支持多次调用configure（）。这将需要增强会话SDK。我们已要求产品审查。
如前所述，如果商家隐藏/显示卡详细信息字段而不是删除/重新创建，则可以支持此场景。我们不明白为什么不能在SPA中进行。SPA不强制删除/重新创建字段，它取决于底层实现。

JavaScript

来源：https://stackoverflow.com/questions/76328202/how-to-work-with-mpgs-session-js-in-an-spa

1条答案

按热度按时间

plupiseo1#

我让它工作了...
我发现的唯一方法是从DOM中完全删除session.js对象并重新添加其引用：

mpgsScriptId = 'mpgs-session-js'

detachSdkFromUi() {
    const script = document.getElementById(mpgsScriptId);
    if (script) {
        script.remove();
        PaymentSession = undefined;
    }
}

addMpgsScript() {
    detachSdkFromUi();

    return new Promise<void>((resolve, reject) => {
        const script = document.createElement('script');
        script.id = mpgsScriptId;
        script.async = false;
        script.src = '<session.js url>';
        script.onload = () => {
            resolve();
        };
        // this call inserts the "PaymentSession" object into the window.
        document.body.append(script);
    });
}

async attachSdkToUi(details: any) {
    await addMpgsScript();

    return new Promise<void>((resolve, reject) =>
        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: any) => {
                    console.log('PaymentSession initialized', response);
                    if (response?.status !== 'ok') {
                        reject();
                        return;
                    }

                    resolve();
                },
                formSessionUpdate: (response: any) => {
                    console.log('PaymentSession formSessionUpdate', response);
                },
            },
            interaction: {
                displayControl: {
                    formatCard: 'EMBOSSED',
                    invalidFieldCharacters: 'REJECT',
                },
            },
        })
    );
}

当MPGS发布一个与SPA兼容的版本时，我可能会重新访问这个...暂时可以。

赞(0）回复(0）举报 2023-05-27

我来回答

javascript 如何在SPA中使用MPGS session.js

1条答案

相关问题

热门标签

最新问答