# Instalação
Carregue a FaciPay JS SDK via CDN em Next.js, React, Vue, SvelteKit ou HTML puro.
A SDK é distribuída por CDN como um global de browser (`window.FaciPay`). Carregue-a
**uma vez** — escolha **uma** estratégia, não duas.
```html
```
Depois de carregada, `FaciPay` fica disponível globalmente.
## Por framework
Coloque a tag no `` antes do código que usa `FaciPay(...)`.
```html
```
Use o componente `Script` com `strategy="afterInteractive"`.
```tsx
import Script from 'next/script';
export default function Layout({ children }) {
return (
<>
{children}
);
}
```
Declare o tipo global para TypeScript:
```ts
declare global {
interface Window {
FaciPay: (publishableKey: string) => any;
}
}
```
Tag no `index.html` **ou** carregamento via `useEffect`.
```tsx
import { useEffect, useRef } from 'react';
function loadFaciPay() {
return new Promise((resolve) => {
if (window.FaciPay) return resolve();
const s = document.createElement('script');
s.src = 'https://cdn.faciconnect.com/sdks/v1/facipay.min.js';
s.onload = () => resolve();
document.body.appendChild(s);
});
}
export function PayButton() {
const ref = useRef(null);
useEffect(() => {
loadFaciPay().then(() => {
const facipay = window.FaciPay('pk_test_xxx');
facipay.generateButton({ /* ... */ }).render('#facipay-button-container');
});
}, []);
return ;
}
```
Tag no HTML base ou carregamento em `onMounted`.
```vue
```
```svelte
```
Inicialize a SDK **só depois** de o script ter carregado **e** de o container existir no DOM.
Chamar `.render()` para um container inexistente lança erro.
Inicializar a SDK e validar a chave.