Mastercard Hosted Session Facade
You're probably here because you went to implement the Mastercard (TNS)
session.js API in your app and encountered the...odd...design of their API.
"Why," you ask, "would they think a callback registered on a config object
being called by a completely unrelated global method is a good idea? Surely
there's a better way?"
Perhaps you wish that you could ask for a card session, and get a Promise back that might resolve to a valid session, or reject on an invalid session.
Supported Environments and Dependencies
session.js is a browser API that works via injected iframes. So
so you will need a module builder. I've tested this with
webpack, but since
the distribution is transpiled you should be able to use it with your packer
No matter what module environment you choose, your destination will need to support ES6 Promises, since this facade relies on them heavily. Many browsers already natively support Promises, but if a target browser you support does not you'll need to include a polyfill.
session.js does not return
headers when you request the script for your merchant ID. This means this library is
unable to dynamically append the Mastercard script for you, for reasons of CORS restrictions.
You must append a script tag containing your own Mastercard
session.js script, e.g.
npm i mastercard-hosted-session --save-dev
Import the library, and initialise the module with the merchant ID supplied
to you by Mastercard, and the config you'd normally pass to the
PaymentSession.configure method. Do not pass the
on your config object, since the facade configures those for you.
The initialisation function returns a Promise that will resolve a Hosted
Session facade, initialised against the form specified by the
The example below uses Promises directly, but since a Promise is a Promise you
can happily use the
async function style if your environment or transpilation
tool support them.
const getHostedSession =