Refresh merchantSessionKey when used multiple times

[judgej]

Noticed this when testing with the demo code.

When trying to submit, the sagepay.js script catches your form submit and attempts to get a token for the card details entered. If the token cannot be fetched for any reason - invalid characters, type in CC number or date, missing CVV2 etc, then the form is not submitted to the server.

Each time an attempt to get a card token is made, the merchantSessionKey loses of of its lives. It starts with only three lives (three attempts as use) and a lifetime period of 400 seconds. Once either of these are exceeded, SagePay responds with a 401. The scripts in the page need to recognise this, and refresh the merchantSessionKey.

Whether that refresh happens through AJAX (fetching a new value from the server) or by allowing the whole form to be submitted and re-presented with a new merchantSessionKey is unclear. Once the card identifier is successfully obtained, it will last for up to 400 seconds and the payment form can be submitted multiple times. The card details of the form, when represented, should probably be hidden and disabled, and shown only if the user wishes to change to a different card, or the card token has expired or been used too many times.

The documentation only lists a card token (cardIdentifier) as lasting 400 seconds, and does not list a maximum number of times it can be used to submit the payment request. Multiple submissions may be needed to get the address details into a valid state, for example.

Anyway - we need to get a better demo together that brings all these expiring tokens together and handles them appropriately.

[judgej]

sagepay.js AJAX call gets this 401 when the merchantSessionKey has expired:

{ "description": "Authentication failed",  "code": 1002}

[judgej]

The demo code in Sage Pay documentation needs more debugging anyway - it adds an empty card-identifier field to the POSTed form:

var_dump($_POST);
// array(1) { ["card-identifier"]=> string(0) "" }

The jQuery code can be wrapped up into a jQuery extension, with some parameters to cater for a wide variety of use-cases of how people want to organise their forms.

[judgej]

This is being worked on in a separate demo project. The front end JS will call the server to silently get a token renewal. The server can implement its own maximum count of renewals before failing the request.

[judgej]

The new drop-in JS form provided by Sage Pay has a hook for renewing the session key if it expires.

[judgej]

This is a front-end requirement that is covered in the ideas of issue #49

[mar7t1n]

I struggled with this initially, and lost customers who came to the payment page and didn't complete payment within 400 seconds. The key learnings which I'd struggled to find is that you needs to:

1. Register a handler for onTokenise: event.
2. Explicitly call checkout.tokenise() onclick of your pay button.
3. Check the return codes in your handler.
4. On-Success pass the card token to your back end to create a Transaction
5. On-Error get a fresh merchant session key from your back end, and call the tokenise again.

// Setup the checkout form
let msk = getMSKviaAJAX();
checkout = sagepayCheckout({ merchantSessionKey: msk, onTokenise: sagepayResponseHandler });

// Handle pay button click event
$("#paybutton").click(function(ev) { ev.preventDefault(); checkout.tokenise(); });

function sagepayResponseHandler(status)
{
    ...
    // On-Error - get new key and try again...
    let new_msk = getMSKviaAJAX();
    checkout.tokenise({newMerchantSessionKey: new_msk} );
}