# Form fields

> The tlpy_* ids the V2 SDK looks for inside the payFormTilopay div, and the responseTilopay container it needs for 3DS.

- kind: concept
- status: stable
- sdk_version: 2.1.1
- last_verified: 2026-10-21
- url: https://tilopay.com/en/developers/sdk/campos-del-formulario

The V2 SDK does not render the form: it takes over the inputs that already exist on your
page, finding them by `id`. Those ids are a contract — change one and the SDK stops finding
the field.

> **Warning:** The `payFormTilopay` container is required. All `tlpy_*` fields (and the
> [Apple Pay](/en/developers/sdk/apple-pay) div) must be inside a `div` with the class
> `payFormTilopay`: the SDK looks for that container to listen to the fields. The
> `responseTilopay` container goes outside that `div`.

## Fields [#campos]

<Param id="campo-tlpy-payment-method" name="tlpy_payment_method" type="text | select" required>
Holds the payment method id obtained from Tilopay. It may be visible or hidden, at your discretion.
</Param>

<Param id="campo-tlpy-saved-cards" name="tlpy_saved_cards" type="select">
Holds the saved card id obtained from Tilopay. It must exist in the DOM; it may be hidden
if the payment method does not use it.
</Param>

<Param id="campo-tlpy-cc-number" name="tlpy_cc_number" type="text">
Card number. It must exist in the DOM; it may be hidden if the payment method does not use
it.
</Param>

<Param id="campo-tlpy-cc-expiration-date" name="tlpy_cc_expiration_date" type="text">
Expiration date in month/year format, for example `12/30`. It must exist in the DOM; it may
be hidden if the payment method does not use it.
</Param>

<Param id="campo-tlpy-cvv" name="tlpy_cvv" type="text">
Security code. It must exist in the DOM; it may be hidden if the payment method does not
use it. When the customer uses a saved card, this field must be enabled so they can type
the CVV.
</Param>

<Param id="campo-tlpy-apple-pay-button-div" name="tlpy_apple_pay_button_div" type="div">
For [Apple Pay](/en/developers/sdk/apple-pay): the SDK draws the Apple Pay button there. It goes
inside `payFormTilopay`.
</Param>

<Param id="campo-tlpy-apple-pay-cancel" name="tlpy_apple_pay_cancel" type="hidden">
Optional, for Apple Pay. Its value changes to `"cancelled"` and fires `change` when the buyer
closes the Apple Pay sheet.
</Param>

<Param id="campo-response-tilopay" name="responseTilopay" type="div" required>
Required container, **outside `payFormTilopay`**. This is where the SDK mounts the 3DS flow.
</Param>

## The Yappy phone does not travel through the DOM [#yappy]

The Yappy phone number is **not** read from a form field: it is sent in the `phoneYappy`
parameter of [`Init()`](/en/developers/sdk/reference/init) or
[`updateOptions()`](/en/developers/sdk/reference/update-options).

## Example structure [#estructura]

The `div` with the `payFormTilopay` class, the input `id`s and `responseTilopay` are
required; the other `div` elements are free-form.

```html
<div class="payFormTilopay">
  <select id="tlpy_payment_method" name="tlpy_payment_method"></select>

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

  <!-- Only if you use Apple Pay -->
  <div id="tlpy_apple_pay_button_div"></div>
  <input type="hidden" id="tlpy_apple_pay_cancel" />
</div>

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