JavaScript UI SDK
SensePass Front-end SDK allows front-end websites to control SensePass's wide variety of a payment methods through a simple UI (iFrame).

- 1.Credit Cards
- 2.Apple Pay - No integration and authentication is required with Apple
- 3.Google Pay - No integration and authentication is required with Google
- 4.PayPal
- 5.Venmo
- 6.ACH
SensePass SDK enables you fast integration with all the payment methods listed above without having to whitelist your domain for Apple and Google
The SDK exposes a few methods to let you operate the iFrame in various ways.
Add the following SDK and add it to your front-end website's scripts:
https://js.sensepass.com/scripts/[email protected]
<html>
<head>
<script src="https://js.sensepass.com/scripts/[email protected]" type="application/javascript"></script>
</head>
</html>
- 1.
- 2.
- 3.
- 4.Follow the SDK Methods instructions to initiate the SensePass client with the transactionNumber from #1
- 5.Listen to SDK events on the front-end
- 6.Call sensepass.pay() on form submission on the front-end
- 7.On successful payment callback from the SDK - Call transaction status API to verify current transaction status
Create a global variable in your front-end website called
SensePassFrontEndSDK
.Set the following configuration for the
sandbox
or production
environment:1
const spClient = SensePassFrontEndSDK.config({
2
mode: "sandbox", // "sandbox" | "production"
3
debug: true, // optional for logs
4
visualizer: true, // optional visual logs, requires HTML with id="sensepass-front-end-visualizer"
5
transactionNumber: 'aee8d2cdc1cb...', // a SensePass's Transaction-number
6
});
Create an HTML element with the id
sensepass-front-end
.Initiate the iframe with the
init
method:1
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 thesensepass-front-end
value.
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:1
const spFrontEndContainerEl = document.getElementById("sensepass-front-end");
2
const spFrontEndIframeEl = spFrontEndContainerEl.firstElementChild;
3
sensepass.frameDimensions((payload: any) => {
4
if (payload) {
5
const height = payload.height;
6
const width = payload.width;
7
spFrontEndIframeEl.style.height = `${height}px`;
8
spFrontEndIframeEl.style.width = `${width}px`;
9
}
10
});
Using the above example, you may hook on to the following callbacks aswell:
1
const callback = payload => console.log(payload);
2
sensepass.paymentSelected(callback); // get event for the payment method's selection
3
sensepass.paying(callback); // get event for the payment method in its paying-process
4
sensepass.paymentMethodValidationStatus(callback); // if a payment method has a validatable state, always updates you on it.
5
sensepass.error(callback); // get various error messages for the payment attempts, transaction status and more...
Use the
pay
method to let the payment method trigger its payment request:1
sensepass.pay(callback); // get a JSON of the transaction's final state
sensepass.pay(callback,
{
amount: 1099, //Transaction amount in Cents (10.99 USD)
currency: "USD"
});
Last modified 1mo ago