Script JS 3DS (CDN) - UvviPay Public API

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:

<script src="https://js.uvvipay.com.br/3ds.js"></script>

Autenticação das rotas `/v1/3ds/*`

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

Header	Uso
`CLIENT-ID`	Integração API: merchant com `merchant_credentials`
`PAYMENT-LINK-ID`	Checkout do link de pagamento: UUID do link (`GET /uvvipay/v2/payment-links/public/:id`). Não exige credencial do merchant

Sem nenhum dos dois: 401.

Uso na integração API (`CLIENT-ID`)

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

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 },
});

Nunca exponha o client-secret no front-end. O CLIENT-ID só identifica o merchant nas rotas 3DS do script; a cobrança continua autenticada no seu backend.

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

No checkout UvviPay o merchant é resolvido server-side pelo id do link. Não use clientId do GET público (campo removido).

// 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.

​URL

​Autenticação das rotas /v1/3ds/*

​Uso na integração API (CLIENT-ID)

​Uso no checkout de payment link (PAYMENT-LINK-ID)

URL

Autenticação das rotas `/v1/3ds/*`

Uso na integração API (`CLIENT-ID`)

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