Checkout embebido

Si prefieres que el formulario de pago viva dentro de tu propia página, sin redirigir al cliente a otro dominio, usa el checkout embebido: un script público que monta un iframe con el formulario de pago de Paytami.

Es más trabajo de integración que el checkout hospedado — sigue siendo la opción correcta cuando no quieres ningún salto de página durante el pago.

El flujo

Igual que el checkout hospedado, empieza creando el pago desde tu backend con POST /v1/payments (ver esa guía para el detalle). La diferencia está en el paso 2: en vez de redirigir, montas el iframe en el navegador del cliente.

1. Incluye el script en tu página

html

<div id="paytami-slot"></div>
<script
  src="https://link.paytami.com/checkout.js"
  integrity="sha384-..."
  crossorigin="anonymous"
></script>

WARNING

El valor de integrity cambia con cada versión publicada de checkout.js. Recalcúlalo contra el script real antes de ponerlo en producción:

bash

curl -s https://link.paytami.com/checkout.js | openssl dgst -sha384 -binary | openssl base64 -A

2. Inicializa el checkout con el `pay_...` que creaste

html

<script>
  var checkout = new PaytamiCheckout({
    paymentId: 'pay_8f2c1a9d4e6b7c0a1d2e3f40',
    container: '#paytami-slot',
    onSuccess: function (d) {
      // Señal de UX únicamente — no actives el acceso del cliente aquí.
    },
    onFailure: function (d) {
      // El cliente puede reintentar.
    },
    onProcessing: function (d) {
      // Método asíncrono (p. ej. transferencia bancaria), puede tardar horas.
    },
  });
  checkout.open();
</script>

PaytamiCheckout acepta:

Opción	Tipo	Descripción
`paymentId`	`string` (requerido)	El `pay_...` devuelto por `POST /v1/payments`.
`container`	`string \| Element` (requerido)	Selector CSS o elemento donde se monta el iframe.
`height`	`string`	Alto del iframe. Por omisión `600px`.
`onSuccess`	`(data: { paymentId }) => void`	El cliente completó el flujo de pago en el formulario.
`onFailure`	`(data: { paymentId }) => void`	El intento de pago falló.
`onProcessing`	`(data: { paymentId }) => void`	El pago quedó en un método asíncrono, pendiente de confirmación.

3. Confirma el resultado desde tu backend

onSuccess es una señal para mejorar la experiencia en el navegador (por ejemplo, mostrar "¡listo!") — nunca una prueba de que el dinero se movió. Antes de otorgar acceso o entregar el producto, confirma con tu api_key:

bash

curl https://app.paytami.com/api/v1/payments/pay_8f2c1a9d4e6b7c0a1d2e3f40 \
  -H "Authorization: Bearer sk_live_..."

Solo si el status de la respuesta indica que el pago se completó, activa el acceso del cliente.

Cuándo usar hospedado en vez de embebido

Si no tienes una razón específica para mantener al cliente sin salir de tu página, prefiere el checkout hospedado: es menos código, se actualiza solo (nunca tienes que recalcular un hash de integridad) y el resultado es el mismo formulario de pago.

Checkout embebido ​

El flujo ​

1. Incluye el script en tu página ​

2. Inicializa el checkout con el pay_... que creaste ​

3. Confirma el resultado desde tu backend ​

Cuándo usar hospedado en vez de embebido ​