# Apple Pay

> Cómo aceptar Apple Pay con el SDK V2 (2.1.1) — requisitos, pasos, ejemplo, datos de la hoja de pago y problemas frecuentes.

- kind: guide
- status: stable
- sdk_version: 2.1.1
- last_verified: 2026-10-21
- url: https://tilopay.com/developers/sdk/apple-pay

## Qué es [#que-es]

El SDK dibuja el botón de Apple Pay dentro de tu formulario, abre la hoja de pago de Apple y
procesa el pago con el token cifrado de Apple. El comprador no digita la tarjeta.

## Requisitos [#requisitos]

| Requisito | Detalle |
|---|---|
| Cuenta en producción | En modo de pruebas el botón no aparece y `applePaySupported` es `false`: no se puede probar en pruebas. |
| Método de pago con Apple Pay | En `init.methods` el método trae `apple_pay = 1`. Si tu método no lo trae, el botón no se muestra. |
| Dominio certificado | El dominio tiene que estar certificado para Apple Pay en tu cuenta de Tilopay. La comparación es exacta: `www.comercio.com` y `comercio.com` son dominios distintos. Para certificarlo escribí a soporte@tilopay.com con el dominio exacto. |
| HTTPS | La página se sirve por HTTPS. |
| Navegador | Safari en un dispositivo Apple con Apple Pay configurado. |
| Tarjetas | Visa, Mastercard o American Express. |

## Pasos [#pasos]

1. Cargá el [SDK v2](/developers/sdk/instalacion).
2. Dentro de `.payFormTilopay` agregá `<div id="tlpy_apple_pay_button_div"></div>` donde va el
   botón y, opcional, `<input type="hidden" id="tlpy_apple_pay_cancel">` para saber cuándo el
   comprador cierra la hoja (su valor cambia a `"cancelled"` y dispara `change`).
3. Llamá [`Init()`](/developers/sdk/reference/init) como siempre (token, moneda, monto, orden,
   facturación, `capture` y `redirect`). `applePaySupported: true` indica que se cumplen los
   requisitos para ese dominio y navegador.
4. Llená `#tlpy_payment_method` con `init.methods`.
5. El botón aparece cuando el select dispara el evento `change` con un método que tiene Apple
   Pay. Si seleccionás el método por código, dispará
   `select.dispatchEvent(new Event('change'))`.
6. Al tocar el botón, el SDK abre Apple Pay y, cuando el comprador autoriza, procesa el pago: si
   se aprueba redirige a `redirect`; si el banco pide 3DS lo muestra en `#responseTilopay`.

> **Nota:** Los campos de tarjeta siguen siendo obligatorios. `tlpy_cc_number`,
> `tlpy_cc_expiration_date` y `tlpy_cvv` tienen que estar en el HTML aunque el comprador pague con
> Apple Pay, porque el SDK los inicializa en `Init()`.

## Ejemplo [#ejemplo]

```html
<div class="payFormTilopay">
  <select id="tlpy_payment_method" name="tlpy_payment_method"></select>
  <select id="tlpy_saved_cards" name="tlpy_saved_cards"></select>
  <input type="text" id="tlpy_cc_number" name="tlpy_cc_number" />
  <input type="text" id="tlpy_cc_expiration_date" name="tlpy_cc_expiration_date" />
  <input type="text" id="tlpy_cvv" name="tlpy_cvv" />

  <div id="tlpy_apple_pay_button_div"></div>
  <input type="hidden" id="tlpy_apple_pay_cancel" />
</div>

<div id="responseTilopay"></div>

<script src="https://app.tilopay.com/sdk/v2/sdk_tpay.min.js"></script>
<script>
  (async () => {
    const init = await Tilopay.Init({
      token: "<token_del_sdk>",
      currency: "CRC",
      language: "es",
      amount: 100.0,
      billToEmail: "ana@ejemplo.com",
      orderNumber: "ORD-2026-000124",
      billToFirstName: "Ana",
      billToLastName: "Rojas",
      capture: 1,
      redirect: "https://ejemplo.com/resultado",
    });

    console.log("applePaySupported:", init.applePaySupported);

    const select = document.getElementById("tlpy_payment_method");
    init.methods.forEach((m) => select.add(new Option(m.name, m.id)));
    select.dispatchEvent(new Event("change"));

    document.getElementById("tlpy_apple_pay_cancel").addEventListener("change", (e) => {
      if (e.target.value === "cancelled") console.log("El comprador cerró Apple Pay");
    });
  })();
</script>
```

## Datos de la hoja de Apple Pay [#hoja]

| Dato | Valor |
|---|---|
| País | `CR` |
| Moneda | La de `Init()`, en mayúsculas |
| Redes | `visa`, `mastercard` y `amex` |
| Capacidad | `supports3DS` |
| Etiqueta | `Tilopay: <nombre del comercio>` |
| Monto | El de `Init()` |

## Comportamiento a tener en cuenta [#comportamiento]

- El resultado del pago con Apple Pay **no se devuelve a tu código** (el botón llama al SDK
  directamente): te llega en la URL de `redirect` como cualquier pago. Confirmalo con
  `POST /api/v1/consult` desde tu servidor. Ver [confirmar el resultado](/developers/sdk#confirmar).
- Solo podés escuchar la cancelación, con `tlpy_apple_pay_cancel`.
- Si el pago falla, la hoja queda abierta hasta que el comprador la cierre o expire, y el
  detalle queda en la consola del navegador.

## Problemas frecuentes [#problemas]

| Síntoma | Causa y solución |
|---|---|
| `applePaySupported` es `false` | Cuenta en pruebas, ningún método con `apple_pay = 1`, navegador sin Apple Pay o dominio no certificado. Cuando es el dominio, la consola muestra `Apple Pay not allowed for this domain`. |
| `applePaySupported` es `true` pero no aparece el botón | No está el div dentro de `.payFormTilopay`, el método elegido no tiene Apple Pay o el select no disparó `change`. |
| Funciona con un dominio y no con `www` | Certificá también la otra forma o usá siempre la certificada. |
| El botón abre la hoja y se cierra enseguida | Falló la validación del comercio con Apple: revisá que la certificación del dominio esté vigente y escribí a soporte@tilopay.com con el dominio y la hora. |
| El comprador autoriza y la hoja se queda cargando | El pago falló: revisá la consola y consultá la transacción por número de orden. |