> For the complete documentation index, see [llms.txt](https://docs.preauth.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.preauth.io/widget.md).

# Widget

{% hint style="success" %}
Únete a nuestro [*<mark style="color:blue;">espacio de Slack</mark>*](https://join.slack.com/t/preauth-soporte/shared_invite/zt-18pzujyy8-F6cZBsHmZ_5OZFd16fnnWw) y te ayudaremos con tus dudas
{% endhint %}

### Insertando SDK

Con el siguiente script te aseguras que nuestro SDK sea cargado en tu web. Puedes hacerles pequeños cambios, pero te recomendamos no hacerlo.

```javascript
 !function(e,t){window.PreauthObject=t,window[t]=window[t]||function(){(window[t].q=window[t].q||[]).push(arguments)};const n="script",o=document.createElement(n),c=document.getElementsByTagName(n)[0];o.async=1,o.src=e,c.parentNode.insertBefore(o,c)}("https://cdn.preauth.io/preauth.js","preauth");
```

### Configuración del SDK

El SDK necesita cierta información para su correcto funcionamiento, por lo que debes configurar el id de la orden y los callbacks que se ejecutaran en caso de éxito o fallo según corresponda. Puedes ver más detalle en la descripción del modelo [SDKConfiguration](/widget.md#modelos).

```javascript
preauth("init", {
  order: "4085-whOdSyS2FkGmm4j9feJNeMh0SjQDgLa5xAUENBkajsfQK",
  onSuccess() {
    //CODE  
  },  
  onError(e) {
    //CODE
  }
});
```

### Mostrando widget

Para mostrar el widget solo necesitas enviar el texto **"start"** como se muestra a continuación:

```javascript
preauth("start");
```

### Ejemplo completo

```html
<!DOCTYPE html>
<html>
<head>
  <script type="text/javascript">
    !function(e,t){window.PreauthObject=t,window[t]=window[t]||function(){(window[t].q=window[t].q||[]).push(arguments)};const n="script",o=document.createElement(n),c=document.getElementsByTagName(n)[0];o.async=1,o.src=e,c.parentNode.insertBefore(o,c)}("https://cdn.preauth.io/preauth.js","preauth");

    preauth("init", {
      order: "4085-whOdSyS2FkGmm4j9feJNeMh0SjQDgLa5xAUENBkajsfQK",
      onSuccess() {
        //CODE  
      },  
      onError(e) {
        //CODE
      }
    });

    function openPreauth() {
      preauth("start");
    }
  </script>
</head>
<body>
  <button onclick="openPreauth">Click me!</button>
</body>
</html>
```

### Modelos

#### SDKConfiguration

<table><thead><tr><th width="178.4464285714286">Attributo</th><th>Tipo</th><th width="197.33333333333331">Descripción</th><th>Ejemplo</th></tr></thead><tbody><tr><td>order</td><td>Texto</td><td>Id de la orden, obtenido al crear la orden por medio del API REST.</td><td>4085-whOdSyS2FkGmm4j9feJNeMh0SjQDgLa5xAUENBkajsfQK</td></tr><tr><td>onSuccess</td><td>Callback</td><td>Callback que se ejecuta cuando la orden ha sido preautorizada correctamente.</td><td></td></tr><tr><td>onError</td><td>Callback</td><td>Callback que se ejecuta cuando ocurre algún error al preautorizar la orden. Ver modelo PreauthError.</td><td></td></tr></tbody></table>

#### PreauthError

| Attributo | Tipo             | Descripción                          | Ejemplo              |
| --------- | ---------------- | ------------------------------------ | -------------------- |
| code      | PreauthErrorCode | Código de error interno.             | 100                  |
| message   | Text             | Mensaje asociado al código de error. | Modal closed by user |

#### PreauthErrorCode

<table><thead><tr><th width="174">Código</th><th>Descripción</th></tr></thead><tbody><tr><td>100</td><td>Cuando el widget es cerrado.</td></tr><tr><td>101</td><td>Cuando el widget no ha cargado correctamente.</td></tr><tr><td>102</td><td>Cuando sucede algún error al realizar la preautorización.</td></tr></tbody></table>
