Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
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.
Add the following SDK and add it to your front-end website's scripts: https://js.sensepass.com/scripts/sensepass-front-end@1.0.9.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
Create a global variable in your front-end website called SensePassFrontEndSDK
.
Set the following configuration for the sandbox
or production
environment:
Create an HTML element with the id sensepass-front-end
.
Initiate the iframe with the init
method:
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.
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:
Use the pay
method to let the payment method trigger its payment request:
You can play around with the SDK in SensePass's Front-end Playground website
E-commerce iFrame is useful for e-commerce website - the website displays the iFrame as part of the checkout page to enable customer to pay with multiple payment methods.
This iFrame enables fast integration to any website with minimal coding and enables you to get SensePass updates and new features seamlessly.
Capture, Authorization and Tokenization payment types
Products summary
Receipt
Invoice
Manual Capture
JS post message events, see our docs here
Callback events, see our docs here
Socket.IO events, see our docs here
All SensePass payment methods, see here the full list
From the create trasnaction API - get the value of transactionPage.consumerPage
transactionPage.consumerPage.regular for full size view
transactionPage.consumerPage.medium
Medium view without the QR
transactionPage.consumerPage.small
Smaller view without the QR and without the header
style selected elements & general themes
Customizing is possible only in the initial step of the configuration of SensePass's SDK client. If unfimiliar with the configuration step, refer to the Config step.
Download and edit the following themes you wish to style on your own:
Save your themes in a hosting site of your choosing and set their URL in the config JSON.
Use the SDK Theme Config Model to set you custom text and other UI configurations.
Backend verification step to complete the payment
This API call must be performed from your backend and not through the JS in the frontend.
make sure to receive the transaction number from the SDK's "pay" callback in order to continue.
POST
https://api.sensepass.com/api/transactions/:transactionNumber/commit
Authentication options:
Device ID / Merchant API Key + Branch Number / Branch API key
Name | Type | Description |
---|---|---|
Name | Type | Description |
---|---|---|
SensePass Front-end SDK allows front-end websites to control SensePass's wide variety of a payment methods through a simple UI (iFrame).
Credit Cards
Apple Pay - No integration and authentication is required with Apple
Google Pay - No integration and authentication is required with Google
PayPal
Venmo
ACH
Affirm
Amazon Pay
Bit (IL locale)
SensePass SDK enables you fast integration with all the payment methods listed above without having to whitelist your domain for Apple and Google
Add the SensePass's javascript SDK to your website's scripts (Front-end SDK).
Initiate the SensePass client with your clientId
Listen to SDK events on the front-end
Call sensepass.pay() on form submission on the front-end
On successful callback from the SDK - get the transactionNumber
Call from your backend to the API /transactions/:transactionNumber/commit with the transactionNumber to capture the payment, see Commit Transaction for further details
See here full the SDK API Flow
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
See the API Page
THIS METHOD WILL BE DEPRECATED IN FAVOR OF A NEW ONE
Please refer to for the new version.
Manual capture allows creating a transaction and call capture request later.
The capture request can only be called once, see for multi capture flow.
Manual capture is useful for making a payment and updating the payment details later.
Call "transactions/init" in order to create a capture request and add the "methodType" field with "manual_capture".
See here the full docs of
URL: /api/transactions/Init
Request Body:
Response body:
The consumer tap the sticker, or get the payment link through e-mail or SMS, and choose a payment method.
URL: /api/transactions/{transactionNumber}/capture
Request Body:
Here is an example:
Response body:
POS iFrame allows the POS platform to show an iFrame that contains multiple flows with a single API call, without implementing multiple API's for each flow.
Cancel transaction
Send SMS message to consumer
Manual credit card number entry
QR display for consumer scanning
Timeout logics
SensePass Tag pairing
From the create transaction API - get the value of transactionPage.merchantPage.POS
Example:
3. Show in the POS an iFrame with the URL
Credit Card iFrame enables you to display iFrame in your checkout page or in your POS software in order to get sensitive credit card details without having to certify your website or software to PCI.
SensePass are PCI Level 1 certified.
Capture
Tokenization
Authorization
From the create transaction API - get the value of transactionPage.merchantPage.creditCard.default
Example of Transaction Response
You may test your themes on our playground: https://js.sensepass.com
You may add metadata to the request with the key "metadata", follow for further instructions.
4. to be notified about approval, timeout and errors
Show the page using iFrame and listen for post message events or callback, see here
transactionNumber*
String
transaction number of the ready-transaction
deviceId
String
location's device id - required if no api key
methodType*
Enum
manual_capture or tokenize or authorize
apiKey
String
merchant/location api key
branchNumber
String
required if merchant api key is used.
e.g. 123
callbackURL
String
URL (POST/GET) to receive transaction changes
metadata
Array
currency
String
Defaults to location's locale.
USD | CAD | EUR | ILS (etc)
Required for manual_capture transactions
amount
Amount in cents.
Required for manual_capture
or authorize
transactions
products
Array
posData
Object
Any object/array you'd like to receive using the callback URL