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:
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
SensePass SDK enables you fast integration with all the payment methods listed above without having to whitelist your domain for Apple and Google
Follow the SDK Methods instructions to 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
The frontend uses client ID that does not have permissions to payment except for initalizing the SDK
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
Add the SensePass's javascript SDK to your website's scripts ().
Call from your backend to the API /transactions/:transactionNumber/commit with the transactionNumber to capture the payment, see for further details
The backend uses device ID / Merchant API Key / Branch API key for calling the
See the
Name | Type | Description |
---|
Name | Type | Description |
---|
transactionNumber* | String | transaction number of the ready-transaction |
THIS METHOD WILL BE DEPRECATED IN FAVOR OF A NEW ONE
Please refer to Commit Transaction for the new version.
Manual capture allows creating a transaction and call capture request later.
The capture request can only be called once, see Tokenization flow 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 creating a transaction
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.
You may add metadata to the request with the key "metadata", follow Metadata Model for further instructions.
URL: /api/transactions/{transactionNumber}/capture
Request Body:
Here is an example:
Response body:
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. |
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 transactions |
products | Array |
posData | Object | Any object/array you'd like to receive using the callback URL |
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.
You may test your themes on our playground: https://js.sensepass.com