> ## Documentation Index
> Fetch the complete documentation index at: https://developers.uvvipay.com.br/llms.txt
> Use this file to discover all available pages before exploring further.

# Script JS 3DS (CDN)

> Script oficial para embarcar o fluxo 3DS no front-end (API com CLIENT-ID ou checkout de payment link com PAYMENT-LINK-ID)

O fluxo de autenticação 3DS no front-end é embarcado através do script oficial servido via CDN.

## URL

```
https://js.uvvipay.com.br/3ds.js
```

Inclua a tag `<script>` na sua página de checkout antes de iniciar o fluxo:

```html theme={null}
<script src="https://js.uvvipay.com.br/3ds.js"></script>
```

## Autenticacao das rotas `/v1/3ds/*`

As rotas `generate-token`, `authentications` e `authentication-results` aceitam
**um** dos headers abaixo (`ThreeDsContextGuard`):

| Header            | Uso                                                                                                                         |
| ----------------- | --------------------------------------------------------------------------------------------------------------------------- |
| `CLIENT-ID`       | Integracao API — merchant com `merchant_credentials`                                                                        |
| `PAYMENT-LINK-ID` | Checkout do link de pagamento — UUID do link (`GET /uvvipay/v2/payment-links/public/:id`). Nao exige credencial do merchant |

Sem nenhum dos dois: `401`.

## Uso — integracao API (`CLIENT-ID`)

A classe global `UvviPay3DS` fica disponivel em `window`. O `accessToken` deve
ser gerado no **seu backend** via `POST /v1/3ds/generateToken` com
`client-id` + `client-secret`.

```javascript theme={null}
const threeds = new UvviPay3DS(accessToken, browserInfo, clientId);

threeds.on("Ready", () => {
  threeds.checkout({
    cardnumber: "4111111111111111",
    cardexpirationmonth: "12",
    cardexpirationyear: "2029",
  });
});

threeds.on("Success", (data) => {
  // data.Cavv, data.Eci, data.Xid, data.Version, data.DirectoryServerTransactionId
});

threeds.on("Failure", (data) => { /* ... */ });
threeds.on("Error", (data) => { /* ... */ });

await threeds.init({
  amount: 1050,
  currency: "BRL",
  options: { sandbox: false, enabled: true, debug: false },
});
```

<Warning>
  Nunca exponha o `client-secret` no front-end. O `CLIENT-ID` so identifica o
  merchant nas rotas 3DS do script; a cobranca continua autenticada no seu
  backend.
</Warning>

## Uso — checkout de payment link (`PAYMENT-LINK-ID`)

No checkout UvviPay o merchant e resolvido **server-side** pelo id do link.
Nao use `clientId` do GET publico (campo removido).

```javascript theme={null}
// 1) Token publico do checkout (sem client-secret)
const tokenResponse = await fetch("/v1/3ds/generate-token", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
    "payment-link-id": paymentLinkId,
  },
  body: JSON.stringify({ totalAmount }),
});
const { data } = await tokenResponse.json();
const accessToken = data[0].accessToken;

// 2) SDK — 3o arg null; 4o arg = UUID do link (/checkout/{id})
const threeds = new UvviPay3DS(accessToken, browserInfo, null, paymentLinkId);
```

O script envia o header `PAYMENT-LINK-ID` em `authentications` e
`authentication-results`. No app UvviPay isso vive em
`useThreeDSValidation` (`uvvipay-frontend`).

Detalhes internos: [Payment link — Pagamento](/interno/payment-link-pagamento#3ds-no-checkout-sem-merchant_credentials).