Apple Pay

Qué 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#

Pasos#

1. Cargá el SDK v2.
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() 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.

Ejemplo#

<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#

Comportamiento a tener en cuenta#

• 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.
• 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#