# Botón para tu web

Un botón **Pagar con QuickPay** que pegas en cualquier página, sin programar.

1. En el portal, ve a **Integraciones › Configura tu botón**.
2. Elige el texto del botón y, si quieres, un monto fijo, un concepto, una sucursal y la cuenta donde caen sus pagos (si tienes más de una). Sin elegir, la de la sucursal o la principal.
3. Copia el código y pégalo en tu web (WordPress, Wix, una tienda o HTML propio).

El botón lleva a tu [página de pago](/developers/pagina-de-pago) con el monto y el concepto que elegiste. Si no fijas monto, tu cliente escribe cuánto paga.

> **¿Necesitas un monto distinto por pedido?** Entonces crea un enlace por pedido desde tu sistema: → [Enlaces de pago](/developers/enlaces-de-pago).

## Botón en una sola línea: `boton.js`

Si ya tienes el enlace de cobro (el `id` que devuelve `POST /links`, o el `slug` de tu comercio), pega esto donde quieras que aparezca el botón:

```html
<script src="https://pay.pagaconquickpay.com/boton.js" data-link="ID_O_SLUG"></script>
```

Cambia `ID_O_SLUG` por el `id` del enlace (por ejemplo `3f2c9a1e-5b7d-4e21-9c0a-8d4f6b1a2e37`) o por el slug de tu comercio (por ejemplo `mi-comercio`). El botón **Pagar con QuickPay** aparece justo ahí y abre el pago en una pestaña nueva:

- Con un `id`, abre la [página de pago](/developers/pagina-de-pago) de ese enlace, `https://pay.pagaconquickpay.com/l/<id>`.
- Con un `slug`, abre la página de cobro de tu comercio, `https://pagaconquickpay.com/pay/<slug>`.

Atributos opcionales:

| Atributo | Para qué | Valores |
|---|---|---|
| `data-texto` | Cambiar el texto del botón | Texto plano, hasta 40 caracteres. Por omisión, `Pagar con QuickPay` |
| `data-abrir` | Abrir en una ventana emergente en vez de una pestaña | `ventana`. Si el navegador la bloquea, se abre la pestaña de siempre |

Un botón por etiqueta `<script>`: para varios cobros en la misma página, pega una etiqueta por cada uno.

**Qué garantiza.**

- **Sin llaves en el navegador.** El `id` de un enlace sirve para pagar ese cobro y nada más; nunca pegues una llave (`sk_…`) en tu página. Si `data-link` no es un `id` ni un slug válido (incluida cualquier llave), el botón no se pinta.
- **No ejecuta nada que venga de los atributos.** El script no usa `eval` ni arma HTML con tus atributos: el texto del botón es texto, no código, y la dirección sólo se forma con un `id` o un `slug` validados.
- **No hace peticiones ni guarda datos** en tu página. El botón es un enlace normal: también funciona con clic derecho o clic central.
- **El botón no confirma el pago.** Que alguien abra el enlace no prueba que haya pagado: confirma con el webhook `link.pagado` o consultando el cobro. → [Volver a tu web y verificar](/developers/volver-a-tu-web)

**Si tu sitio usa una política de seguridad de contenido (CSP)**, permite el script con `script-src https://pay.pagaconquickpay.com`. El botón no hace peticiones, así que no necesita `connect-src`, y sus estilos los aplica por código, sin `style-src 'unsafe-inline'`. El archivo se sirve con CORS abierto sólo para lectura (`GET`), porque es público y no usa credenciales.

> **Prueba primero con un enlace de prueba.** Crea el enlace con tu llave `sk_test_…` y usa su `id` en `data-link`: pagas sin dinero real. → [Modo prueba](/developers/datos-de-prueba)