mastercard hosted session integration issue

Question

I want to integrate payment in my website using mastercard payment gateway system. I use the hosted session method for the integration. I follow the mastercard hosted session

My javascript code is

<script src="https://network.gateway.mastercard.com/form/version/51/merchant/
**<testmerchantID>**/session.js"></script>
<script>
    if (self === top) {
    var antiClickjack = document.getElementById("antiClickjack");
    antiClickjack.parentNode.removeChild(antiClickjack);
} else {
    top.location = self.location;
}

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"
        }
    },
    session: 'abc456',
    //SPECIFY YOUR MITIGATION OPTION HERE
    frameEmbeddingMitigation: ["javascript"],
    callbacks: {
        initialized: function(response) {
            //console.log(response.status); 
        },
        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"
        }
    },
    order: {
        amount: 10.00,
        currency: "AED" ,
        id:123
    }
  });

function pay() {
    // UPDATE THE SESSION WITH THE INPUT FROM HOSTED FIELDS
    PaymentSession.updateSessionFromForm('card');
}
</script>

I have used option session:'dummy data' inside configuration option since I need to identify each transaction. It gives me an error

Session update failed with system error: Form Session not found or expired.

When I comment these line, I am getting sessionID genereated by the library in the response. I am confused how to identify each transaction.Please help me

With `session: 'abc456'`, you are _specifying_ the session id to use, but that would only make sense if you had one from a previous request already, _and_ you needed to explicitly provide the session id for some reason in the first place. — 04FS, Mar 26 '19 at 12:34
_“I am confused how to identify each transaction.”_ - what do you mean by that, identify when, where, why? You already included a specific order id in the data you are sending, what more do you need? — 04FS, Mar 26 '19 at 12:35
A bit late on this one, but from my experience the "Form Session not found or expired" usually indicated a difference between the merchant ID used to create the session/token and the merchant id used when making api calls to the MC api servers. — s1cart3r, Sep 09 '19 at 10:45
I have used the other method called hosted checkout rather than hosted session from this link.https://network.gateway.mastercard.com/api/documentation/integrationGuidelines/index.html?locale=en_US — Techy, Feb 10 '20 at 09:57

score 0 · Answer 1 · answered Jul 24 '20 at 07:25

I had the same issue and I solved it by ensuring all form fields (card number, ccv, expiry month, expiry year and cardholders name) have a readonly attribute.

     <div class="form-group"><label>Card Number:</label> 
<input type="text" id="card-number" class="input-field" title="card number" aria-label="enter your card number" value="" tabindex="1" readonly="readonly">
</div>
            <div class="form-group"><label>Expiry Month:</label>   
<input type="text" id="expiry-month" class="input-field" title="expiry month" aria-label="two digit expiry month" value="" tabindex="2" readonly="readonly">
</div>
            <div class="form-group">
<label>Expiry Year:</label>    
<input type="text" id="expiry-year" class="input-field" title="expiry year" aria-label="two digit expiry year" value="" tabindex="3" readonly="readonly">
</div>
            <div class="form-group">
<label>Security Code: </label> 
<input type="text" id="security-code" class="input-field" title="security code" aria-label="three digit CCV security code" value="" tabindex="4" readonly="readonly" >
</div>
  <div class="form-group">
<label>Cardholder Name:</label>
<input type="text" id="cardholder-name" class="input-field" title="cardholder name" aria-label="enter name on card" value="" tabindex="5" readonly="readonly"></div>

Hi ovicko, When load this js file,unable to load We already registered with MPGS and provided the merchantId. Do I need to add TEST id for development purpose. Because I dont know how to get the session?. Please help me, how to load the JS file and get the session. — Creditto, Sep 07 '20 at 09:39
Thanks ovicko, Do i need to create any testmerchantID for testing purpose ? — Creditto, Sep 09 '20 at 00:40

mastercard hosted session integration issue

1 Answers1

Linked