Configuring Field Display Options

For all input fields in the payment form, you can choose whether you want them to contain placeholder text and how you want their labels to be displayed. The default behavior is to always display the labels above the input fields and never show placeholders. You can change this behavior by using the following two properties inside uiCustomData:

• inputPlaceholder. This is false by default, and when you set it to true, input labels are duplicated inside each input as placeholder text.

  <paymentPageData>
      <ppsJSONConfig>
          {
            "uiCustomData": {
              "inputPlaceholder": true
            }
          }
      </ppsJSONConfig>
  </paymentPageData>

• inputLabelType. By default, the value is UPPER, meaning that a label is displayed above each input. You can set this to HIDDEN to hide labels altogether, or DYNAMIC to display labels above inputs that receive focus and inside inputs otherwise. When using DYNAMIC, avoid setting inputPlaceholder to true to prevent overlapping of labels and placeholders within inputs.

  <paymentPageData>
      <ppsJSONConfig>
          {
            "uiCustomData": {
              "inputLabelType": "HIDDEN"
            }
          }
      </ppsJSONConfig>
  </paymentPageData>

Note that inputPlaceholder only affects input fields, not drop-down fields (expiry month and date, and number of payments). As to inputLabelType, setting HIDDEN will hide the labels for drop-downs, but DYNAMIC will have no effect on them.

Here's what the payment page looks like in the default configuration when inputPlaceholder is false and inputLabelType is UPPER:

Default configuration

When you set inputPlaceholder to true while keeping the default inputLabelType, placeholders appear inside inputs and labels are displayed above them:

Placeholders inside inputs

If you feel that having both labels and placeholders is redundant, set inputPlaceholder to true and inputLabelType to HIDDEN:

Hiding labels

If you keep inputPlaceholder off by default and set inputLabelType to DYNAMIC, then as soon as an input receives focus, its label displays above the input; otherwise, it displays inside the input:

Dynamic labels