MasterCard 支付网关 API 单页应用

Question

我正在为托管会话使用万事达卡支付网关API：Mastercard Payment Gateway API Documentation

集成在第一次加载时按预期工作，但这已写入单页应用程序。当用户通过面包屑返回页面时（使用 javascript 哈希加载 'pages'）。当用户然后 returns 付款 'page' 万事达卡付款 api 应该会被触发第二次，这不会发生。

文档没有说明 PaymentSession.configure({}) 是否可以发送多次，但我假设这是我的问题。

我已经尝试 'reset' PaymentSession 并重新加载 session.js javascript 但到目前为止还没有能够使这个特殊情况正常工作。我想知道是否有办法 'reset' configure() 或者是否有另一种方法来解决这个问题？

我不想复制和粘贴我的代码，因为它是一个支付集成，尽管它几乎与文档中的示例一样逐行。我还要说的是，这个问题与我的个人代码无关，更多的是与万事达卡的付款方式 API 的工作方式以及我的网站是单个页面而不是仅在需要时加载 session.js 的事实有关。

Answer 1

我不喜欢op给出的答案，但我有一个解决方案：

$.getScript("<mastercard url + version + merchant id>/session.js", function() { 
  //PaymentSession && PaymentSession.configure(); 
});

这会在每次调用单页支付哈希时使用 jQuery 来加载 session.js。一旦执行了万事达卡支付脚本，它就会运行 PaymentSession.configure().

我的公司最终将不再使用万事达卡付款 api，因此这是一个合适的解决方案，不会增加太多页面加载。我仍然很想知道这个脚本是否可以用另一种方式重置。

Answer 2

先安装 jquery 然后在您的组件中执行此操作

declare const PaymentSession: any;

$.getScript(
        <"mastercard url/version/merchantId>/session.js",
        function () {
            if (PaymentSession) {
                PaymentSession.configure({
                    fields: {
                        // ATTACH HOSTED FIELDS TO YOUR PAYMENT PAGE FOR A CREDIT CARD
                        card: {
                            number: "#card-number",
                            securityCode: "#security-code",
                            expiryMonth: "#expiry-month",
                            expiryYear: "#expiry-year",
                            nameOnCard: "#cardholder-name",
                        },
                    },
                    session: "xxxxxxxxxxxxxxxx",
                    //SPECIFY YOUR MITIGATION OPTION HERE
                    frameEmbeddingMitigation: ["javascript"],
                    callbacks: {
                        initialized: function (response) {
                            console.log(response);

                            // HANDLE INITIALIZATION RESPONSE
                        },
                        formSessionUpdate: function (response) {
                            // HANDLE RESPONSE FOR UPDATE SESSION
                            if (response.status) {
                                if ("ok" == response.status) {
                                    console.log(
                                        "Session updated with data: " +
                                            response.session.id
                                    );

                                    //check if the security code was provided by the user
                                    if (
                                        response.sourceOfFunds.provided.card
                                            .securityCode
                                    ) {
                                        console.log(
                                            "Security code was provided."
                                        );
                                    }

                                    //check if the user entered a Mastercard credit card
                                    if (
                                        response.sourceOfFunds.provided.card
                                            .scheme == "MASTERCARD"
                                    ) {
                                        console.log(
                                            "The user entered a Mastercard credit card."
                                        );
                                    }
                                } else if (
                                    "fields_in_error" == response.status
                                ) {
                                    console.log(
                                        "Session update failed with field errors."
                                    );
                                    if (response.errors.cardNumber) {
                                        console.log(
                                            "Card number invalid or missing."
                                        );
                                    }
                                    if (response.errors.expiryYear) {
                                        console.log(
                                            "Expiry year invalid or missing."
                                        );
                                    }
                                    if (response.errors.expiryMonth) {
                                        console.log(
                                            "Expiry month invalid or missing."
                                        );
                                    }
                                    if (response.errors.securityCode) {
                                        console.log(
                                            "Security code invalid."
                                        );
                                    }
                                } else if (
                                    "request_timeout" == response.status
                                ) {
                                    console.log(
                                        "Session update failed with request timeout: " +
                                            response.errors.message
                                    );
                                } else if (
                                    "system_error" == response.status
                                ) {
                                    console.log(
                                        "Session update failed with system error: " +
                                            response.errors.message
                                    );
                                }
                            } else {
                                console.log(
                                    "Session update failed: " + response
                                );
                            }
                        },
                    },
                    interaction: {
                        displayControl: {
                            formatCard: "EMBOSSED",
                            invalidFieldCharacters: "REJECT",
                        },
                    },
                });
            }
        }
    );

MasterCard 支付网关 API 单页应用

MasterCard Payment Gateway API Single Page App

javascript

api

single-page-application

mastercard