window.FaciPay). Carrega-a
uma vez — escolhe uma estratégia, não duas.
<script src="https://cdn.faciconnect.com/sdks/v1/facipay.min.js"></script>
FaciPay fica disponível globalmente.
Por framework
- HTML puro
- Next.js
- React (Vite/CRA)
- Vue / Nuxt
- SvelteKit
Coloca a tag no
<head> antes do código que usa FaciPay(...).<head>
<script src="https://cdn.faciconnect.com/sdks/v1/facipay.min.js"></script>
</head>
<body>
<div id="facipay-button-container"></div>
<script>
const facipay = FaciPay('pk_test_xxx');
facipay.generateButton({ /* ... */ }).render('#facipay-button-container');
</script>
</body>
Usa o componente Declara o tipo global para TypeScript:
Script com strategy="afterInteractive".import Script from 'next/script';
export default function Layout({ children }) {
return (
<>
<Script
src="https://cdn.faciconnect.com/sdks/v1/facipay.min.js"
strategy="afterInteractive"
/>
{children}
</>
);
}
declare global {
interface Window {
FaciPay: (publishableKey: string) => any;
}
}
Tag no
index.html ou carregamento via useEffect.import { useEffect, useRef } from 'react';
function loadFaciPay() {
return new Promise<void>((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<HTMLDivElement>(null);
useEffect(() => {
loadFaciPay().then(() => {
const facipay = window.FaciPay('pk_test_xxx');
facipay.generateButton({ /* ... */ }).render('#facipay-button-container');
});
}, []);
return <div id="facipay-button-container" ref={ref} />;
}
Tag no HTML base ou carregamento em
onMounted.<script setup>
import { onMounted } from 'vue';
onMounted(async () => {
if (!window.FaciPay) {
await new Promise((resolve) => {
const s = document.createElement('script');
s.src = 'https://cdn.faciconnect.com/sdks/v1/facipay.min.js';
s.onload = resolve;
document.body.appendChild(s);
});
}
const facipay = window.FaciPay('pk_test_xxx');
facipay.generateButton({ /* ... */ }).render('#facipay-button-container');
});
</script>
<template>
<div id="facipay-button-container"></div>
</template>
<script>
import { onMount } from 'svelte';
onMount(async () => {
if (!window.FaciPay) {
await new Promise((r) => {
const s = document.createElement('script');
s.src = 'https://cdn.faciconnect.com/sdks/v1/facipay.min.js';
s.onload = r;
document.body.appendChild(s);
});
}
const facipay = window.FaciPay('pk_test_xxx');
facipay.generateButton({ /* ... */ }).render('#facipay-button-container');
});
</script>
<div id="facipay-button-container"></div>
Inicializa 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.Próximo passo: FaciPay()
Inicializar a SDK e validar a chave.