Latest industry standard of web-components, making our widget native to your web-page.
No unnecessary pop-ups, easy-to-handle UI (CSS) & faster load-times thanks to native script caching.
Add the following SDK and add it to your front-end website's scripts:
https://js.sensepass.com/scripts/sensepass-front-end@1.1.0.sdk.js
The frontend uses client ID that does not have permissions to payment except for initalizing the SDK
The backend uses device ID / Merchant API Key / Branch API key for calling the commit API
Using the JS API
Step 1 - Configuration
Create a global variable in your front-end website called SensePassFrontEndSDK.
Set the following configuration for the sandbox or production environment:
const spClient = SensePassFrontEndSDK.config({
mode: "sandbox", // "sandbox" | "production"
debug: true, // optional for logs
visualizer: true, // optional visual logs, requires HTML with id="sensepass-front-end-visualizer"
clientId: "aee8d2cdc1cb...", // Client ID
methodType: "manual_capture", // type for the transaction, defaults to "manual_capture", enum: "manual_capture" | "tokenize" | "authorize"
});
Create an HTML element with the id sensepass-front-end.
Step 2 - Initiate the iFrame element
Initiate the iframe with the init method:
const sensepass = spClient.init();
You can also handle the SDK client from the global variable, e.g. SensePassFrontEndSDK.init()
There is an optional argument for the spClient.init(iframeContainerEl) to let you set the iframe's container-element directly.
This is a replacement option for the element by id search for the sensepass-front-end value.
Step 3 - Style the frame dimensions (optional)
You can skip this implementation when using version 1.1.0 (beta)
Use the method frameDimensions to get the iframe's width & height value (in pixels).
Assuming you have an element <div id="sensepass-front-end"></div> you may get its iFrame (as its first child element) and apply the following callback's dimensions:
Using the above example, you may hook on to the following callbacks aswell:
const callback = payload => console.log(payload);
sensepass.paymentSelected(callback); // get event for the payment method's selection
sensepass.paying(callback); // get event for the payment method in its paying-process
sensepass.paymentMethodValidationStatus(callback); // if a payment method has a validatable state, always updates you on it.
sensepass.error(callback); // get various error messages for the payment attempts, transaction status and more...
Step 5 - Pay button event
Use the pay method to let the payment method trigger its payment request:
sensepass.pay(callback); // get a JSON of the transaction's final state
Pay button event - For manual capture transaction type - see our docs here