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).
​
Supported Payment Methods
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
Sample App
You can play around with the SDK in SensePass's Front-end Playground website​
The SDK exposes a few methods to let you operate the iFrame in various ways.
Script
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>
​
Flow
1.Create a SensePass transaction on your backend: Create SensePass Transaction​
2.Listen to Notifications regarding the transaction on your backend: Notifications Docs​
3.Add the SensePass's javascript SDK to your website's scripts (Front-end SDK).
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
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:
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.
Step 2 - Initiate the iFrame element
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 the sensepass-front-end value.
Step 3 - Style the frame dimensions (optional)
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
});
Step 4 - Listen to callback events
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...
Step 5 - Pay button event
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
Pay button event - For manual capture transaction type - see our docs here​
sensepass.pay(callback, 
{ 
    amount: 1099,   //Transaction amount in Cents (10.99 USD)
    currency: "USD"
});