Customizing the Default Text

The customText property lets you change the default text on the payment page. You can customize the text of any element of the payment page that has an id attribute.

For example, the card number field label has the ID label-card-number:

<label class="cg-label-input ng-star-inserted"
       id="label-card-number"
       for="card-number">
    Default text
</label>

To change the default text of this label, specify the ID and the new text inside the customText property:

{
  "customText": {
    "label-card-number": "Custom card number label"
  }
}

You can customize text in as many elements as you want:

{
  "customText": {
    "cg-pd-title": "Please enter your payment details",
    "label-expYear": "Expiration year",
    "cg-submit-btn": "Pay now"
  }
}

Below are the IDs of some common elements that you may want to modify the text for. Some of these elements are shown in the screenshot below the list.

• cg-pd-title: transaction detail title.

• cg-key-currency: transaction currency description.

• cg-amount-title: amount of charge title.

• cg-form-title: transaction form title.

• label-card-number: input label for card number.

• label-expYear: input label for expiration year.

• label-expMonth: input label for expiration month.

• label-cvv: input label for CVV.

• label-personal-id: input label for Israeli personal ID.

• label-num-of-payments: input label for a control used to select the number of payments (Israel only).

• label-user-data-{1-10}: input labels for custom input fields.

• cg-submit-btn: submit form button text.

• cg-clear: clear form action text.

• cg-cancel: cancel transaction action text.

Payment page with custom text

Note that regardless of the casing of the custom text labels you provide, they are automatically transformed to title case (the first letter of each word is capitalized). For example, if you provide the label "card number" for label-card-number, it will be displayed as "Card Number" on the payment page.