Form fields

SDK 2.1.1

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.

The payFormTilopay container is required. All tlpy_* fields (and the 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#

tlpy_payment_methodtext | selectrequired#

Holds the payment method id obtained from Tilopay. It may be visible or hidden, at your discretion.

tlpy_saved_cardsselect#

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.

tlpy_cc_numbertext#

Card number. It must exist in the DOM; it may be hidden if the payment method does not use it.

tlpy_cc_expiration_datetext#

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.

tlpy_cvvtext#

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.

tlpy_apple_pay_button_divdiv#

For Apple Pay: the SDK draws the Apple Pay button there. It goes inside payFormTilopay.

tlpy_apple_pay_cancelhidden#

Optional, for Apple Pay. Its value changes to "cancelled" and fires change when the buyer closes the Apple Pay sheet.

responseTilopaydivrequired#

Required container, outside payFormTilopay. This is where the SDK mounts the 3DS flow.

The Yappy phone does not travel through the DOM#

The Yappy phone number is not read from a form field: it is sent in the phoneYappy parameter of Init() or updateOptions().

Example structure#

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

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

Last verified: 2026-10-21

View as raw Markdown