MasterCard Payment Gateway API Single Page App

Question

I am using the Mastercard Payment Gateway API for Hosted Session: Mastercard Payment Gateway API Documentation

The integration works as expected on the first load but this has been written into a single page app. When the user goes back a page via the breadcrumbs (using javascript hash to load 'pages'). When the user then returns to the payment 'page' the Mastercard payment api should then be triggered a second time, this does not happen.

The documentation doesn't say if PaymentSession.configure({}) can be sent more than once but I am assuming that is my issue.

I have tried to 'reset' the PaymentSession and reload the session.js javascript but so far have not been able to get this particular case working. I was wondering if there is a way to 'reset' the configure() or if there was another way to approach this?

I would rather not copy and paste my code in as it's a payment integration although it's pretty much line for line the same as the example on the documentation. I would also say that the issue is unrelated my personal code and more towards how Mastercard's Payment API works and the fact that my website is a single page rather than only loading session.js when needed.

Answer 1

I don't like it when the answer is given by the op, but I have a solution:

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

This uses jQuery to load session.js every time the single page payment hash is called. Once the MasterCard payment script has been executed it then runs the PaymentSession.configure().

My company will be eventually moving away from the MasterCard payment api so this is a suitable solution and doesn't add too much to the page load. I would still be very interested in learning whether or not this script can be reset another way.

Answer 2

install jquery first then do this in your component

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",
                        },
                    },
                });
            }
        }
    );