> For the complete documentation index, see [llms.txt](https://devcenter.unico.io/you/Ol1H6eGO4sQvPYB1Nmyl/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://devcenter.unico.io/you/Ol1H6eGO4sQvPYB1Nmyl/sdk/web.md).
# Web
## SDK
{% hint style="warning" %}
The use of integrations that do not comply with the standards set out in this documentation may result in unexpected interruptions in the functioning of the system, which will not be covered or supported You.
*Examples:* implement the SDK (iFrame) inside a webview, implement iFrame through an HTML tag, etc.
{% endhint %}
### How to Start
To use You via the SDK, the first step is to register the domains, always using the HTTPS protocol, which will be used as the host to display the iFrame of the user's journey on You.
{% hint style="danger" %}
Please inform the person responsible for your integration project or the Unico support team to carry out this configuration.
{% endhint %}
To start using the SDK, you need to install the Unico Web SDK (minimum version is 2.2.3). It's worth noting that “You” uses the same SDK as IDPay:
```json
$ npm install idpay-b2b-sdk
```
{% hint style="success" %}
When installing the Unico SDK package, deploy without specifying the version you are using so that your dependency manager always updates minors and patches to the latest version.
To check previous versions, go to .
{% endhint %}
### Available methods
{% stepper %}
{% step %}
#### init(options)
This method initializes the SDK by pre-loading the assets, creating a more fluid experience for the end user. Use this method before call CreateInvoice. At this point, our SDK may indicate that the device does not support our stream.
```javascript
import { YouSDK } from "idpay-b2b-sdk";
const initializeYouSDK = async () => {
try {
const result = await YouSDK.init({
env: 'uat', // It will only be filled in if it is a test environment
hasPayments: true // if uses payment in the You flow
});
if (result?.statusPreValidation === 'DEVICE_SUPPORTED') {
// SDK ready. Proceeding to process creation
return;
}
// Handle the scenario where the device isn't compatible. No proceed to invoice creation
} catch (error) {
// Handle initialization failures
}
}
```
{% endstep %}
{% step %}
#### **open(options)**
This method opens the You experience. For the IFRAME type flow, this function displays the pre-loaded iframe and starts the message flow between the client page and the You experience.
Parameters:
***options*** - is an object with configuration properties:
* *id*
* Receives the ID of the process created. This ID is important so that we can obtain the details of the process and carry out the flow correctly (it can be obtained when creating the process via API).
* *token*
* Receives the token of the invoice created. This token is important so that we can authenticate the journey and ensure that only authorized domains use it (can be obtained when creating the process via API).
* *onFinish(process)*
* Receives a callback function that will be executed at the end of the You journey, passing as an argument the process object with the following data: **{ captureConcluded, concluded, id }**
```javascript
const id = '9bc22bac-1e64-49a5-94d6-9e4f8ec9a1bf';
const token = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c';
const process = {
transaction: {
id: '9bc22bac-1e64-49a5-94d6-9e4f8ec9a1bf',
token: 'V_adQssw5c', // last 10 caracteres from token
concluded: true,
}
};
const onFinishCallback = invoice => {
console.log('Process', process);
}
YouSDK.open({
transactionId: id,
token: token,
onFinish: onFinishCallback
});
// You can also close the SDK explicitly using the method below
YouSDK.close();
```
{% endstep %}
{% endstepper %}
### Sequence Diagram
The sequence diagram below demonstrates how to use the SDK:
### How it should look in onboarding experience
### How it should look in payments experience
### Security
**Opt for the Iframe Solution with Auth Token Instead of CSP**
After careful analysis of our needs and challenges, we have decided to adopt a solution based on iframes with authentication tokens rather than implementing a Content Security Policy (CSP). This choice was motivated by various considerations related to the security and flexibility required to meet our clients demands.
**Context and Challenges with CSP**
Content Security Policy (CSP) is a powerful tool for protecting web applications against various types of attacks, such as Cross-Site Scripting (XSS) and code injection. However, when configuring a CSP policy, it is necessary to define a strict list of trusted domains. This approach is effective when the domains are fixed and predictable. However, for our clients, who often use dynamic and variable domains, this rigid configuration presents significant challenges.
**Vulnerability with Dynamic Domains**
Dynamic domains pose a substantial security risk when using CSP. When a client has domains that frequently change or are created dynamically, it would be necessary to constantly update the CSP policy to include these new domains. This not only increases maintenance efforts but also exposes the domains to which the CSP policy applies. Each domain added to the CSP policy is potentially a vulnerability point if not adequately managed.
**Solution with Iframe and Auth Token**
To mitigate these risks and meet the flexibility required by our clients, we opted to use iframes combined with authentication tokens. This solution provides an additional layer of security and avoids the need to expose or manage an extensive and dynamic list of domains.
**How It Works**
* **Secure Authentication:** Each iframe is loaded with a unique authentication token for each transaction, ensuring that only authorized users can access the content. This token is verified in real-time, providing an additional layer of security and control.
* **Content Isolation:** The use of iframes allows for the isolation of content in a separate context, reducing the risk of interference between different origins and mitigating potential attacks.
* **Flexibility for Dynamic Domains:** By not relying on a static CSP policy, our solution easily adapts to our clients' dynamic domains without the need for constant updates to security policies.
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## 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, and the optional `goal` query parameter:
```
GET https://devcenter.unico.io/you/Ol1H6eGO4sQvPYB1Nmyl/sdk/web.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
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.