# 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).

<div align="left"><figure><img src="https://3556089516-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MbqMA3Kf8t2xEX9F6y9%2Fuploads%2FwlJNXz65EKccDXgEMkkv%2FScreenshot%202024-07-17%20at%2017.31.09.png?alt=media&#x26;token=387b5776-9c84-4da6-a43d-f760b49bd336" alt=""><figcaption></figcaption></figure></div>

### 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
7. Affirm
8. Amazon Pay
9. Bit (IL locale)

{% hint style="info" %}
SensePass SDK enables you fast integration with all the payment methods listed above without having to whitelist your domain for Apple and Google
{% endhint %}

## SDK Flow

1. Add the SensePass's javascript SDK to your website's scripts ([Front-end SDK](https://js.sensepass.com/scripts/sensepass-front-end@1.0.8.sdk.js)).
2. Initiate the SensePass client with your clientId
3. Listen to SDK events on the front-end
4. Call sensepass.pay() on form submission on the front-end
5. On successful callback from the SDK - get the transactionNumber
6. Call from your backend to the API **/transactions/:transactionNumber/commit** with the transactionNumber to capture the payment, see [Commit Transaction](https://docs.sensepass.com/sensepay/transaction-api/sdk-and-iframes/javascript-ui-sdk/commit-transaction) for further details

[**See here full the SDK API Flow**](https://docs.sensepass.com/sensepay/transaction-api/sdk-and-iframes/javascript-ui-sdk/api)

## Security

1. The frontend uses client ID that does not have permissions to payment except for initalizing the SDK
2. The backend uses device ID / Merchant API Key / Branch API key for calling the [commit API](https://docs.sensepass.com/sensepay/transaction-api/sdk-and-iframes/javascript-ui-sdk/commit-transaction)

## API

See the [API Page](https://docs.sensepass.com/sensepay/transaction-api/sdk-and-iframes/javascript-ui-sdk/api)