MasterCard支付网关API单页应用程序

Question

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

集成在第一次加载时可以正常工作，但它已经写入到一个页面应用程序中。当用户通过面包屑返回页面时(使用javascript散列加载“页面”)。当用户返回到支付“页面”时，应该再次触发Mastercard支付api，这种情况不会发生。

文档中并没有说明PaymentSession.configure({})是否可以不止发送一次，但我认为这是我的问题。

我尝试过“重置”PaymentSession并重新加载session.js javascript，但是到目前为止还没有能够让这个特定的案例正常工作。我想知道是否有一种“重置”configure()的方法，或者是否有其他方法来解决这个问题？

我不想复制和粘贴我的代码，因为它是一种支付集成，尽管它与文档中的示例差不多是一行行。我还想说，这个问题与我的个人代码无关，更多的是关于Mastercard的支付API是如何工作的，以及我的网站是一个单一页面的事实，而不仅仅是在需要时才加载session.js。

Answer 1

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

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

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

我的公司最终将不再使用MasterCard支付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",
                        },
                    },
                });
            }
        }
    );