# 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}`
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.trio.com.br/guides/sdk/using-the-sdk.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.