> For the complete documentation index, see [llms.txt](https://docs.trio.com.br/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.trio.com.br/guides/sdk/using-the-sdk.md).
# Using the SDK
This is a step-by-step guide on how to integrate the **Checkout** SDK within your business/system.
Some requirements for this tutorial are:
* Make sure you have created your API Keys through our console ([API Keys page](https://app.trio.com.br/developers/api_keys)), and the `client_id` and `client_secret` that belongs to your company from either in a sandbox or production environment.
* Read the API Reference on how to create a [Checkout Session](https://docs.trio.com.br/reference/banking-api/checkout).
### 1. Embed the SDK
First, you need to embed our SDK through a `script` tag just before the closing of the `` tag in your HTML:
```html
```
In case you have a mobile application, it is also possible to embed our tag by making use of a *WebView inside your application.*
### 2. Create a payment session
Since all payment information is sensitive, we allow ourselves to handle information that will be used in the front-end in the back-end beforehand. In order to use the SDK, then, we offer the creation of a session, which represents an instance of a transaction inside our front-end application. All sessions must be created with a payload, and the payload will vary depending on the type of session you want to create.\
The field **"options.session\_type"** defines which type will be created, and must be one of the four available "pay in", "payout", "guest\_onboarding", "user\_onboarding". To understand more about each type, its use cases and how to create a session for each one, please follow the links below:
* [Pay-in](https://docs.trio.com.br/guides/sdk/flows/pay-in)
* [Payout](https://docs.trio.com.br/guides/sdk/flows/payout)
After creating a session, make sure that you saved the `id` returned. It will be necessary in order to instance the SDK interface. After the expiration time ends, a created session automatically expires, and cannot be used again.
> #### 📘Be wary
>
> A **session** must always be generated inside the back-end of your application, for security reasons. Generating it inside your front-end may expose your **client\_secret**, making it interceptable by your end-users.
### 3. Create a new instance of the SDK
With the `session_id` in hand and the SDK installed, you have access to a module called Trio in the browser console. This module has 2 primary functions:
* `create()`, which is responsible for preparing the information to be sent to your backend
* `open()`, which pops up the user experience for the final user, so the transaction can be completed.
To instantiate the SDK, first use the `Trio.create`, which requires an object as parameter that must contain such information:
**Environment**
A property defining the environment:
```json
environment: 'production'
```
Could be either: sandbox or production. If the property is not informed, the default will be production.
**Session - Required**
A property defining what session will be used:
```json
session: '01GYR8ZJR9ZH5X82ACN8QQ2GMK'
```
**Callbacks**
We have some callbacks that can help you control the flow of the initiation itself:
* `onSuccess`: is triggered when a payment is completed successfully. The **data** object is returned, containing information about the created payment.
* `onExit`: is triggered when the Trio Checkout is closed by the end-user.
* `onEvent`: is triggered after each event during the initiation flow. Allows for more fine-grained control of event, such as failures and secondary events.
* `onLoad`: is triggered when the SDK Bridge is successfully initialized (through the `Trio.create()` function).
### 4. Open checkout
Once you have prepared all the necessary information to initiate a payment, use the functions `Trio.create()` and `Trio.open()`:
```javascript
try {
Trio.create({
environment: 'production',
session: '01GYR8ZJR9ZH5X82ACN8QQ2GMK',
onSuccess: (data) => {
console.log('onSuccess triggered')
console.log(data)
},
onExit: () => {
console.log('onExit triggered')
},
onEvent: (event_type, data) => {
console.log('onEvent triggered')
console.log(event_type)
console.log(data)
},
onLoad: () => {
console.log('onLoad triggered')
}
})
}
catch (error) {
console.error(error)
}
```
Then open by running `Trio.open()`
```html
```
### 5. Getting information about transactions
Every payment processed by Trio will generate a new document. You can handle the transactions either by dealing with the `onEvent` callback, or by receiving webhooks for the document:
* [Pay-in webhook (collecting document)](https://docs.trio.com.br/developers/webooks/events/collecting-document)
* [Payout webhook (payment document)](https://docs.trio.com.br/developers/webooks/events/payment-document)
You can also access the documents inside our Dashboard:
1. In Sandbox:
1. Pay-in - `app.sandbox.trio.com.br/documents/in/{document_id}`
2. Payout - `app.sandbox.trio.com.br/documents/out/{document_id}`
2. In Production
1. Pay-in - `app.trio.com.br/documents/in/{document_id}`
2. Payout - `app.trio.com.br/documents/out/{document_id}`