Apple Pay

What it is#

The SDK draws the Apple Pay button inside your form, opens Apple's payment sheet and processes the payment with Apple's encrypted token. The buyer does not type the card.

Requirements#

Steps#

1. Load the v2 SDK.
2. Inside .payFormTilopay add <div id="tlpy_apple_pay_button_div"></div> where the button goes and, optionally, <input type="hidden" id="tlpy_apple_pay_cancel"> to know when the buyer closes the sheet (its value changes to "cancelled" and fires change).
3. Call Init() as usual (token, currency, amount, order, billing, capture and redirect). applePaySupported: true means the requirements are met for that domain and browser.
4. Fill #tlpy_payment_method with init.methods.
5. The button appears when the select fires the change event with a method that has Apple Pay. If you select the method from code, fire select.dispatchEvent(new Event('change')).
6. When the button is tapped, the SDK opens Apple Pay and, once the buyer authorizes, processes the payment: if approved it redirects to redirect; if the bank asks for 3DS it shows it in #responseTilopay.

Example#

<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: "en",
      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("The buyer closed Apple Pay");
    });
  })();
</script>

Apple Pay sheet data#

Behavior to keep in mind#

• The Apple Pay payment result is not returned to your code (the button calls the SDK directly): it arrives on the redirect URL like any payment. Confirm it with POST /api/v1/consult from your server. See confirm the result.
• You can only listen for cancellation, with tlpy_apple_pay_cancel.
• If the payment fails, the sheet stays open until the buyer closes it or it expires, and the detail is logged in the browser console.

Common problems#