Clearent Hosted Payment Page

Configuration

Overview Security Considerations Configuration Styling / Branding Digital Wallets Examples
Clearent Hosted Payment Page is Highly Configurable

Clearent's Hosted Payment Page was designed to provide an embedded payment solution quickly and easily. You can get your payments working with just a few lines of code and you don't need to do any custom configuration. But if you want to configure the text and behavior of the Hosted Payment Page popup, there are many options detailed below. We even made it easy to style and brand the popup to match your site.

Members

ach-account-name :boolean

determines if ach-account-name field is shown on payment popup for ach
Type:
  • boolean
Since:
  • 1.2021.02.25
Default Value:
  • false
See:
Examples
Clearent.setProperty("show-ach-account-name", false);
Clearent.payButton({
    "show-ach-account-name": false
});

ach-account-name-label :string

text to appear above ach Name on account field when show-labels is turned on
Type:
  • string
Since:
  • 1.2018.07.27
Default Value:
  • Name on account
Examples
Clearent.setProperty("ach-account-name-label","Enter Name on account below");
Clearent.payButton({
    "ach-account-name-label": "Enter Name on account below"
});

ach-account-name-missing-error :string

message to show when name on account is missing (ACH transactions).
Type:
  • string
Since:
  • 1.2020.04.15
Default Value:
  • "Name on account is missing"
Examples
Clearent.setProperty("ach-account-name-missing-error", "Please enter name on account");
Clearent.payButton({
    "ach-account-name-missing-error": "Please enter name on account"
});

ach-account-name-placeholder :string

text to appear in account name input field when value has not yet been entered; account name input is shown if value has been set when displaying payment form
Type:
  • string
Since:
  • 1.2018.07.27
Default Value:
  • Name on account
Examples
Clearent.setProperty("ach-account-name-placeholder","Enter name on account");
Clearent.payButton({
    "ach-account-name-placeholder": "Enter name on account"
});

ach-account-name-tooltip :string

tooltip to appear when hovering over or focused on ach-account-name input field
Type:
  • string
Since:
  • 1.2018.07.27
Default Value:
  • (empty string)
Examples
Clearent.setProperty("ach-account-name-tooltip","Enter name associated with this account");
Clearent.payButton({
    "ach-account-name-tooltip": "Enter name associated with this account"
});

ach-account-number-invalid-error :string

message to show when account number is invalid.
Type:
  • string
Since:
  • 1.2020.04.15
Default Value:
  • "Account number must be 1 to 17 digits"
Examples
Clearent.setProperty("ach-account-number-invalid-error", "Please enter a valid account number");
Clearent.payButton({
    "ach-account-number-invalid-error": "Please enter a valid account number"
});

ach-account-number-label :string

text to appear above ach account number field when show-labels is turned on
Type:
  • string
Since:
  • 1.2018.07.27
Default Value:
  • Account number
Examples
Clearent.setProperty("ach-account-number-label","Enter account number below");
Clearent.payButton({
    "ach-account-number-label": "Enter account number below"
});

ach-account-number-missing-error :string

message to show when account number is missing (ACH transactions).
Type:
  • string
Since:
  • 1.2020.04.15
Default Value:
  • "Account number is missing"
Examples
Clearent.setProperty("ach-account-number-missing-error", "Please enter account number");
Clearent.payButton({
    "ach-account-number-missing-error": "Please enter account number"
});

ach-account-number-placeholder :string

text to appear in account number input field when value has not yet been entered; account number input is shown if value has been set when displaying payment form
Type:
  • string
Since:
  • 1.2018.07.27
Default Value:
  • Account number
Examples
Clearent.setProperty("ach-account-number-placeholder","Enter account number");
Clearent.payButton({
    "ach-account-number-placeholder": "Enter account number"
});

ach-account-number-tooltip :string

tooltip to appear when hovering over or focused on ach-account-number input field
Type:
  • string
Since:
  • 1.2018.07.27
Default Value:
  • (empty string)
Examples
Clearent.setProperty("ach-account-number-tooltip","Enter account number as it appears on your checking/savings account");
Clearent.payButton({
    "ach-routing-account-tooltip": "Enter account number as it appears on your checking/savings account"
});

ach-account-type-label :string

text to appear above ach account type selector when show-labels is turned on
Type:
  • string
Since:
  • 1.2018.07.27
Default Value:
  • Account type
Examples
Clearent.setProperty("ach-account-type-label","Select account type");
Clearent.payButton({
    "ach-account-type-label": "Select account type"
});

ach-account-type-missing-error :string

message to show when account type is missing.
Type:
  • string
Since:
  • 1.2020.04.15
Default Value:
  • "Account type is not selected"
Examples
Clearent.setProperty("ach-account-type-missing-error", "Please select account type");
Clearent.payButton({
    "ach-account-type-missing-error": "Please select account type"
});

ach-account-type-placeholder :string

text to appear in ach account type selector when state value has not yet been selected
Type:
  • string
Since:
  • 1.2018.07.27
Default Value:
  • Account type
Examples
Clearent.setProperty("ach-account-type-placeholder","Select account type");
Clearent.payButton({
    "ach-account-type-placeholder": "Select account type"
});

ach-account-type-tooltip :string

tooltip to appear when hovering over or focused on ach-account-type selector
Type:
  • string
Since:
  • 1.2018.07.27
Default Value:
  • (empty string)
Examples
Clearent.setProperty("ach-account-type-tooltip","Enter amount in $xx.xx format");
Clearent.payButton({
    "ach-account-type-tooltip": "Enter amount in $xx.xx format"
});

ach-amount-label :string

text to appear above ach amount input field when show-labels is turned on
Type:
  • string
Since:
  • 1.2018.07.27
Default Value:
  • Amount
See:
Examples
Clearent.setProperty("ach-amount-label","Enter amount below");
Clearent.payButton({
    "ach-amount-label": "Enter amount below"
});

ach-amount-placeholder :string

text to appear in amount input field when amount value has not yet been entered; amount input is shown if amount has not been set when displaying payment form
Type:
  • string
Since:
  • 1.2018.07.27
Default Value:
  • Enter amount
See:
Examples
Clearent.setProperty("ach-amount-placeholder","Enter donation amount");
Clearent.payButton({
    "ach-amount-placeholder": "Enter donation amount"
});

ach-amount-tooltip :string

tooltip to appear when hovering over or focused on ach-amount input field; amount input is shown if amount has not been set when displaying payment form
Type:
  • string
Since:
  • 1.2018.07.27
Default Value:
  • (empty string)
See:
Examples
Clearent.setProperty("ach-amount-tooltip","Enter amount in $xx.xx format");
Clearent.payButton({
    "ach-amount-tooltip": "Enter amount in $xx.xx format"
});

ach-check-number-label :string

text to appear above ach check number selector when show-labels is turned on
Type:
  • string
Since:
  • 1.2018.07.27
Default Value:
  • Check number
Examples
Clearent.setProperty("ach-check-number-label","Enter check number below");
Clearent.payButton({
    "ach-check-number-label": "Enter check number below"
});

ach-check-number-missing-error :string

message to show when check number is missing and configured as required.
Type:
  • string
Since:
  • 1.2020.04.15
Default Value:
  • "Check number is missing"
Examples
Clearent.setProperty("ach-check-number-missing-error", "Please enter check number");
Clearent.payButton({
    "ach-check-number-missing-error": "Please enter check number"
});

ach-check-number-placeholder :string

text to appear in check number input field when value has not yet been entered; check number input is shown if value has been set when displaying payment form
Type:
  • string
Since:
  • 1.2018.07.27
Default Value:
  • Check number
Examples
Clearent.setProperty("ach-check-number-placeholder","Enter check number");
Clearent.payButton({
    "ach-check-number-placeholder": "Enter check number"
});

ach-check-number-required :boolean

Determines if check-number field is required.
Type:
  • boolean
Since:
  • 1.2018.07.27
Default Value:
  • false
Examples
Clearent.setProperty("ach-check-number-required",true);
Clearent.payButton({
    "ach-check-number-required": true
});

ach-check-number-tooltip :string

tooltip to appear when hovering over or focused on ach-check-number input field
Type:
  • string
Since:
  • 1.2018.07.27
Default Value:
  • (empty string)
Examples
Clearent.setProperty("ach-check-number-tooltip","Enter check number");
Clearent.payButton({
    "ach-check-account-tooltip": "Enter check number"
});

ach-description-placeholder :string

text to appear in the ACH Description input field (when saving ACH payment method) when ACH Description value has not yet been entered
Type:
  • string
Default Value:
  • ACH payment description
See:
Examples
Clearent.setProperty("ach-description-placeholder","ACH nickname");
Clearent.payButton({
    "ach-description-placeholder": "ACH nickname"
});

ach-description-tooltip :string

tooltip to appear when focused on ACH description input field
Type:
  • string
Default Value:
  • (empty string)
Examples
Clearent.setProperty("ach-description-tooltip","Enter a nickname for this ACH payment method");
Clearent.payButton({
    "ach-description-tooltip": "Enter a nickname for this ACH payment method"
});

ach-routing-number-invalid-error :string

message to show when routing number is invalid (ACH transactions).
Type:
  • string
Since:
  • 1.2020.04.15
Default Value:
  • "Routing number must be 9 digits"
Examples
Clearent.setProperty("ach-routing-number-invalid-error", "Please enter a valid routing number");
Clearent.payButton({
    "ach-routing-number-invalid-error": "Please enter a valid routing number"
});

ach-routing-number-label :string

text to appear above ach routing number field when show-labels is turned on
Type:
  • string
Since:
  • 1.2018.07.27
Default Value:
  • Routing number
Examples
Clearent.setProperty("ach-routing-number-label","Enter routing number below");
Clearent.payButton({
    "ach-routing-number-label": "Enter routing number below"
});

ach-routing-number-missing-error :string

message to show when routing number is missing (ACH transactions).
Type:
  • string
Since:
  • 1.2020.04.15
Default Value:
  • "Routing number is missing"
Examples
Clearent.setProperty("ach-routing-number-missing-error", "Please enter routing number");
Clearent.payButton({
    "ach-routing-number-missing-error": "Please enter routing number"
});

ach-routing-number-placeholder :string

text to appear in routing number input field when value has not yet been entered; routing number input is shown if value has been set when displaying payment form
Type:
  • string
Since:
  • 1.2018.07.27
Default Value:
  • Routing number
Examples
Clearent.setProperty("ach-routing-number-placeholder","Enter routing number");
Clearent.payButton({
    "ach-routing-number-placeholder": "Enter routing number"
});

ach-routing-number-tooltip :string

tooltip to appear when hovering over or focused on ach-routing-number input field
Type:
  • string
Since:
  • 1.2018.07.27
Default Value:
  • (empty string)
Examples
Clearent.setProperty("ach-routing-number-tooltip","Enter router number as it appears on your checking/savings account");
Clearent.payButton({
    "ach-routing-number-tooltip": "Enter router number as it appears on your checking/savings account"
});

ach-terms-not-accepted-error :string

message to show when ACH terms and conditions have not been accepted.
Type:
  • string
Since:
  • 1.2020.04.15
Default Value:
  • "Check number is missing"
Examples
Clearent.setProperty("ach-terms-not-accepted-error", "You must accept ACH terms to continue");
Clearent.payButton({
    "ach-terms-not-accepted-error": "You must accept ACH terms to continue"
});

ach-validate-account-invalid-error :string

message to show when validate account is invalid (ACH transactions).
Type:
  • string
Since:
  • 1.2020.08.14
Default Value:
  • "ACH Account validation failed"
Examples
Clearent.setProperty("ach-validate-account-invalid-error", "Please check bank details");
Clearent.payButton({
    "ach-validate-account-invalid-error": "Please check bank details"
});

add-payment-button-text :string

text to appear on the button that launches the add payment method form. This is used when request-type is token-only.
Type:
  • string
Default Value:
  • Add payment method
See:
Examples
Clearent.setProperty("add-payment-button-text","Add new payment method");
Clearent.payButton({
    "add-payment-button-text": "Add new payment method"
});

address2-label :string

text to appear above billing address2, street address2 input field when show-labels is turned on
Type:
  • string
Since:
  • 1.2021.02.25
Default Value:
  • Street Address2
Examples
Clearent.setProperty("address-label2","Enter Street Address2 below");
Clearent.payButton({
    "address-label": "Enter Street Address2 below"
});

address2-placeholder :string

text to appear in billing address2, address input field when address value has not yet been entered
Type:
  • string
Default Value:
  • Address2
Examples
Clearent.setProperty("address-placeholder","Street2 name and number");
Clearent.payButton({
    "address-placeholder": "Street2 name and number"
});

address2-tooltip :string

tooltip to appear when focused on billing address, address input field
Type:
  • string
Default Value:
  • (empty string)
Examples
Clearent.setProperty("address2-tooltip","Enter billing address");
Clearent.payButton({
    "address-tooltip": "Enter billing address2"
});

address-label :string

text to appear above billing address, street address input field when show-labels is turned on
Type:
  • string
Since:
  • 1.2018.05.04
Default Value:
  • Street Address
Examples
Clearent.setProperty("address-label","Enter Street Address below");
Clearent.payButton({
    "address-label": "Enter Street Address below"
});

address-missing-error :string

message to show when billing street address is missing and configured as required.
Type:
  • string
Since:
  • 1.2020.04.15
Default Value:
  • "Address required and street address is missing"
Examples
Clearent.setProperty("address-missing-error", "Please enter billing street address");
Clearent.payButton({
    "address-missing-error": "Please enter billing street address"
});

address-placeholder :string

text to appear in billing address, address input field when address value has not yet been entered
Type:
  • string
Default Value:
  • Address
Examples
Clearent.setProperty("address-placeholder","Street name and number");
Clearent.payButton({
    "address-placeholder": "Street name and number"
});

address-tooltip :string

tooltip to appear when focused on billing address, address input field
Type:
  • string
Default Value:
  • (empty string)
Examples
Clearent.setProperty("address-tooltip","Enter billing address");
Clearent.payButton({
    "address-tooltip": "Enter billing address"
});

amount :string

sale transaction amount
Type:
  • string
Examples
Clearent.setProperty("amount","88.50");
Clearent.payButton({
    "amount": "88.50"
});

amount-invalid-error :string

message to show when amount is invalid.
Type:
  • string
Since:
  • 1.2020.04.15
Default Value:
  • "Amount is not valid; Please include two decimal places (ex 1.00). Do not include $ symbol."
Examples
Clearent.setProperty("amount-invalid-error", "Please enter valid amount; ex 2.55");
Clearent.payButton({
    "amount-invalid-error": "Please enter valid amount; ex 2.55"
});

amount-label :string

text to appear above amount input field when show-labels is turned on
Type:
  • string
Default Value:
  • Amount
See:
Examples
Clearent.setProperty("amount-label","Enter amount below");
Clearent.payButton({
    "amount-label": "Enter amount below"
});

amount-missing-error :string

message to show when amount is missing.
Type:
  • string
Since:
  • 1.2020.04.15
Default Value:
  • "Amount is missing"
Examples
Clearent.setProperty("amount-missing-error", "Please enter amount");
Clearent.payButton({
    "amount-missing-error": "Please enter amount"
});

amount-placeholder :string

text to appear in amount input field when amount value has not yet been entered; amount input is shown if amount has not been set when displaying payment form
Type:
  • string
Default Value:
  • Enter amount
See:
Examples
Clearent.setProperty("amount-placeholder","Enter donation amount");
Clearent.payButton({
    "amount-placeholder": "Enter donation amount"
});

amount-tooltip :string

tooltip to appear when hovering over or focused on amount input field; amount input is shown if amount has not been set when displaying payment form
Type:
  • string
Default Value:
  • (empty string)
See:
Examples
Clearent.setProperty("amount-tooltip","Enter amount in $xx.xx format");
Clearent.payButton({
    "amount-tooltip": "Enter amount in $xx.xx format"
});

apple-pay-amount-label :string

text to appear alongside total amount in the Apple payment sheet. If the value is an empty string, the label defaults to merchant DBA.
Type:
  • string
Since:
  • 1.2023.09.19
Default Value:
  • ""
Examples
Clearent.setProperty("apple-pay-amount-label", "Sasha's Mustard Shop");
Clearent.payButton({
    "apple-pay-amount-label": "Sasha's Mustard Shop"
});

apple-pay-payment-session-error-message :string

text to appear in the popup when an Apple Pay session fails to be established.
Type:
  • string
Since:
  • 1.2023.11.17
Default Value:
  • "We were unable to establish an Apple Pay session for your payment transaction. Please try again or complete your order by entering your card details."
Examples
Clearent.setProperty("apple-pay-payment-session-error-message", "We were unable to establish an Apple Pay session for your payment transaction. Please try again or complete your order by entering your card details.");
Clearent.payButton({
    "apple-pay-payment-session-error-message": "We were unable to establish an Apple Pay session for your payment transaction. Please try again or complete your order by entering your card details."
});

apple-pay-transaction-error-message :string

text to appear in the popup when an Apple Pay transaction was unsuccessful.
Type:
  • string
Since:
  • 1.2023.11.17
Default Value:
  • "We are unable to process your Apple Pay transaction. Please try again or complete your order by entering your card details below. If the problem persists, please contact us."
Examples
Clearent.setProperty("apple-pay-transaction-error-message", "We are unable to process your Apple Pay transaction. Please try again or complete your order by entering your card details below. If the problem persists, please contact us.");
Clearent.payButton({
    "apple-pay-transaction-error-message": "We are unable to process your Apple Pay transaction. Please try again or complete your order by entering your card details below. If the problem persists, please contact us."
});

billing-address :object

Optional property to set the billing address. If billing address fields are shown, this property is used to pre-populate the fields.
Type:
  • object
Since:
  • 1.2020.06.17
Default Value:
  • (null)
See:
Examples
Clearent.setProperty("billing-address",
     {
        "first-name":"John",
        "last-name":"Backus",
        "street":"123 Billing St.",
        "city":"Richmond",
        "state":"MO",
        "zip":"85284",
        "phone":"314-555-1212"
    });
Clearent.payButton({
    "billing-address":{
        "first-name":"John",
        "last-name":"Backus",
        "street":"123 Billing St.",
        "city":"Richmond",
        "state":"MO",
        "zip":"85284",
        "phone":"314-555-1212"
    }
});

billing-address-label :string

text to appear above the billing-address section of the payment form
Type:
  • string
Since:
  • 1.2016.06.02
Default Value:
  • Billing Address
Examples
Clearent.setProperty("billing-address-label","Address");
Clearent.payButton({
    "billing-address-label": "Address"
});

billing-zip :string

Optional property to set a zip code. If zip code field is shown, this property is used to pre-populate the field.
Type:
  • string
Since:
  • 1.2020.06.17
Default Value:
  • (null)
See:
Examples
Clearent.setProperty("billing-zip","85284");
Clearent.payButton({
    "billing-zip": "85284"
});

billing-zip-length-error :string

message to show when billing zip is over 10 chars.
Type:
  • string
Since:
  • 1.2020.06.29
Default Value:
  • "Zip code can not be more than 10 characters"
Examples
Clearent.setProperty("billing-zip-length-error", "Zip code is to long");
Clearent.payButton({
    "billing-zip-length-error": "Zip code is to long"
});

cancel-button-text :string

text to appear on the payment popup form's cancel button
Type:
  • string
Default Value:
  • Cancel
Examples
Clearent.setProperty("cancel-button-text","Continue Shopping");
Clearent.payButton({
    "cancel-button-text": "Continue Shopping"
});

card :string

last four digits of user-entered card number; (returns null if payment request has not yet been submitted)
Type:
  • string
Example
let card = Clearent.getProperty("card");

card-acceptance-label :string

text to appear in front of the image showing accepted cards (Visa, MasterCard, American Express, Discover, Diners Club, JCB).
Type:
  • string
Default Value:
  • Pay using.
Examples
Clearent.setProperty("card-acceptance-label","We proudly accept");
Clearent.payButton({
    "card-acceptance-label": "We proudly accept"
});

card-description-label :string

text to appear above card description input field when show-labels is true and the save card checkbox is selected
Type:
  • string
Since:
  • 1.2023.09.19
Default Value:
  • "Card Description"
Examples
Clearent.setProperty("card-description-label", "Card Description");
Clearent.payButton({
    "card-description-label": "Card Description"
});

card-description-placeholder :string

text to appear in the Card Description input field (when saving card) when Card Description value has not yet been entered
Type:
  • string
Default Value:
  • Card description
See:
Examples
Clearent.setProperty("card-description-placeholder","Card nickname");
Clearent.payButton({
    "card-description-placeholder": "Card nickname"
});

card-description-tooltip :string

tooltip to appear when focused on card description input field
Type:
  • string
Default Value:
  • (empty string)
Examples
Clearent.setProperty("card-description-tooltip","Enter a nickname for this card");
Clearent.payButton({
    "card-description-tooltip": "Enter a nickname for this card"
});

card-invalid-error :string

message to show when card number is invalid.
Type:
  • string
Since:
  • 1.2020.04.15
Default Value:
  • "Card number is not valid"
Examples
Clearent.setProperty("card-invalid-error", "Please enter a valid card number");
Clearent.payButton({
    "card-invalid-error": "Please enter a valid card number"
});

card-label :string

text to appear above card number input field when show-labels is turned on
Type:
  • string
Default Value:
  • Card number
Examples
Clearent.setProperty("card-label","Enter card number below");
Clearent.payButton({
    "card-label": "Enter card number below"
});

card-missing-error :string

message to show when card number is missing.
Type:
  • string
Since:
  • 1.2020.04.15
Default Value:
  • "Card number is missing"
Examples
Clearent.setProperty("card-missing-error", "Please enter card number");
Clearent.payButton({
    "card-missing-error": "Please enter card number"
});

card-placeholder :string

text to appear in card input field when card value has not yet been entered
Type:
  • string
Default Value:
  • Card number
Examples
Clearent.setProperty("card-placeholder","Enter card number");
Clearent.payButton({
    "card-placeholder": "Enter card number"
});

card-token-only

Deprecated:
  • use request-type instead
See:

card-tooltip :string

tooltip to appear when hovering over or focused on card number input field
Type:
  • string
Default Value:
  • (empty string)
Examples
Clearent.setProperty("card-tooltip","Enter card number as it appears on your card");
Clearent.payButton({
    "card-tooltip": "Enter card number as it appears on your card"
});

check-field :string

Used to prevent duplicate payments. Determines if HPP should check a specific field before allowing transaction to continue. For example, if check-field is set to invoice and a transaction with the same invoice number and amount has been paid, the original transaction will be returned and no new transaction will be attempted. If this option is used, a unique value must be provided for the field name specified. For example, if check-field is set to order-id, then a unique order-id must be provided with the original transaction, and the same order-id must be provided with subsequent transaction attempts. The field used for check-field must be set with setProperty() and should not be exposed to end user as it could be changed and would no longer provide a match when searching for duplicate transactions. Possible values for check-field: "invoice" (other fields deprecated).
Type:
  • string
Since:
  • 1.2016.10.18
Default Value:
  • null
Examples
Clearent.setProperty("check-field": "invoice");
Clearent.setProperty("invoice", "a12345");
Clearent.payButton({
    "check-field": "invoice",
    "invoice": "a12345"
});

check-field-mid :boolean

Used to prevent duplicate payments. Used in tandem with check-field. Determines if HPP should check a specific field across the merchant level before allowing transaction to continue. For example, if check-field is set to invoice and check-field-mid is set to true and a transaction with the same invoice number and amount has been paid by any terminal belonging to the same merchant, the original transaction will be returned and no new transaction will be attempted. If this option is used, a unique value must be provided for check-field and the field name specified. For example, if check-field-mid is set to true, then check-field must be provided with the original transaction, and the corresponding field (refer to check-field) provided with subsequent transaction attempts.
Type:
  • boolean
Since:
  • 1.2016.10.18
Default Value:
  • false
Examples
Clearent.setProperty("check-field-mid", true);
Clearent.setProperty("check-field", "invoice");
Clearent.setProperty("invoice", "a12345");
Clearent.payButton({
    "check-field-mid": true,
    "check-field": "invoice",
    "invoice": "a12345"
});

city-label :string

text to appear above billing address, city input field when show-labels is turned on
Type:
  • string
Since:
  • 1.2018.05.04
Default Value:
  • City
Examples
Clearent.setProperty("city-label","Enter City below");
Clearent.payButton({
    "city-label": "Enter City below"
});

city-missing-error :string

message to show when billing city is missing and configured as required.
Type:
  • string
Since:
  • 1.2020.04.15
Default Value:
  • "Address required and city is missing"
Examples
Clearent.setProperty("city-missing-error", "Please enter billing city");
Clearent.payButton({
    "city-missing-error": "Please enter billing city"
});

city-placeholder :string

text to appear in billing address city input field when city value has not yet been entered
Type:
  • string
Default Value:
  • City
Examples
Clearent.setProperty("city-placeholder","Enter city");
Clearent.payButton({
    "city-placeholder": "Enter city"
});

city-tooltip :string

tooltip to appear when focused on billing address city input field
Type:
  • string
Default Value:
  • (empty string)
Examples
Clearent.setProperty("city-tooltip","Enter city of your billing address");
Clearent.payButton({
    "city-tooltip": "Enter city of your billing address"
});

close-button-text :string

text to appear on the payment popup form's close button after successful transaction
Type:
  • string
Default Value:
  • Close
Examples
Clearent.setProperty("close-button-text","Return to Page");
Clearent.payButton({
    "close-button-text": "Return to Page"
});

comments :string

Optional property to set a comments value that will be stored with the transaction. This is a displayed field when using Clearent's Virtual Terminal to research transaction data. If comments field is shown, this property is used to pre-populate the field.
Type:
  • string
Since:
  • 1.2016.06.02
Default Value:
  • (null)
See:
Examples
Clearent.setProperty("comments","This is my comment");
Clearent.payButton({
    "comments": "This is my comment"
});

comments-label :string

text to appear above comments input field when show-labels is turned on
Type:
  • string
Since:
  • 1.2018.05.04
Default Value:
  • Comments
See:
Examples
Clearent.setProperty("comments-label","Enter Comments below");
Clearent.payButton({
    "comments-label": "Enter Comments below"
});

comments-missing-error :string

message to show when comments is missing and configured as required.
Type:
  • string
Since:
  • 1.2020.04.15
Default Value:
  • "Comments required and is missing"
Examples
Clearent.setProperty("comments-missing-error", "Please enter comments");
Clearent.payButton({
    "comments-missing-error": "Please enter comments"
});

comments-placeholder :string

default text to appear in comments input field
Type:
  • string
Since:
  • 1.2016.06.02
Default Value:
  • Comments
See:
Examples
Clearent.setProperty("comments-placeholder","Enter comments");
Clearent.payButton({
    "comments-placeholder": "Enter comments"
});

comments-tooltip :string

tooltip to appear when hovering over or focused on comments input field
Type:
  • string
Since:
  • 1.2016.06.02
Default Value:
  • (empty string)
See:
Examples
Clearent.setProperty("comments-tooltip","Enter comments");
Clearent.payButton({
    "comments-tooltip": "Enter comments"
});

customer-id :string

Optional property to set a customer-id that will be stored with the transaction. This is a searchable field when using Clearent's Virtual Terminal to research transaction data. If customer-id field is shown, this property is used to pre-populate the field.
Type:
  • string
Since:
  • 1.2016.06.02
Default Value:
  • (null)
See:
Examples
Clearent.setProperty("customer-id","a12345");
Clearent.payButton({
    "customer-id": "a12345"
});

customer-id-label :string

text to appear above customer id input field when show-labels is turned on
Type:
  • string
Since:
  • 1.2018.05.04
Default Value:
  • customer-id
See:
Examples
Clearent.setProperty("customer-id-label","Enter Customer ID below");
Clearent.payButton({
    "customer-id-label": "Enter Customer ID below"
});

customer-id-missing-error :string

message to show when customer id is missing and configured as required.
Type:
  • string
Since:
  • 1.2020.04.15
Default Value:
  • "Customer-id required and is missing"
Examples
Clearent.setProperty("customer-id-missing-error", "Please enter customer id");
Clearent.payButton({
    "customer-id-missing-error": "Please enter customer id"
});

customer-id-placeholder :string

default text to appear in customer-id input field
Type:
  • string
Since:
  • 1.2016.06.02
Default Value:
  • Customer ID
See:
Examples
Clearent.setProperty("customer-id-placeholder","Enter Customer ID");
Clearent.payButton({
    "customer-id-placeholder": "Enter Customer ID"
});

customer-id-tooltip :string

tooltip to appear when hovering over or focused on customer-id input field
Type:
  • string
Since:
  • 1.2016.06.02
Default Value:
  • (empty string)
See:
Examples
Clearent.setProperty("customer-id-tooltip","Enter Customer ID");
Clearent.payButton({
    "customer-id-tooltip": "Enter Customer ID"
});

cvc-invalid-error :string

message to show when card security code is invalid.
Type:
  • string
Since:
  • 1.2020.04.15
Default Value:
  • "CSC length is not valid for card type"
Examples
Clearent.setProperty("cvc-invalid-error", "Please enter valid CSC");
Clearent.payButton({
    "cvc-invalid-error": "Please enter valid CSC"
});

cvc-label :string

text to appear above CVC input field when show-labels is turned on
Type:
  • string
Since:
  • 1.2018.05.04
Default Value:
  • Card Security Code
Examples
Clearent.setProperty("cvc-label","Enter Card Security Code below");
Clearent.payButton({
    "cvc-label": "Enter Card Security Code below"
});

cvc-missing-error :string

message to show when card security code is missing and configured as required (default).
Type:
  • string
Since:
  • 1.2020.04.15
Default Value:
  • "CSC is missing"
Examples
Clearent.setProperty("cvc-missing-error", "Please enter CSC");
Clearent.payButton({
    "cvc-missing-error": "Please enter CSC"
});

cvc-placeholder :string

text to appear in CVC input field when CVC value has not yet been entered
Type:
  • string
Default Value:
  • Security Code
Examples
Clearent.setProperty("cvc-placeholder","card security code");
Clearent.payButton({
    "cvc-placeholder": "card security code"
});

cvc-required :boolean

determines if user must enter a value for cvc input
Type:
  • boolean
Default Value:
  • true
Examples
Clearent.setProperty("cvc-required", false);
Clearent.payButton({
    "cvc-required": false
});

cvc-tooltip :string

tooltip to appear when hovering over or focused on card cvc input field
Type:
  • string
Default Value:
  • Enter security code found on back of Visa/Mastercard/Discover or front of American Express.
Examples
Clearent.setProperty("cvc-tooltip","Enter security code from your card");
Clearent.payButton({
    "cvc-tooltip": "Enter security code from your card"
});

description :string

Optional property to set an description value that will be stored with the transaction. This is a searchable field when using Clearent's Virtual Terminal to research transaction data. If description field is shown, this property is used to pre-populate the field.
Type:
  • string
Since:
  • 1.2016.06.02
Default Value:
  • (null)
See:
Examples
Clearent.setProperty("description","Payment for venue rental");
Clearent.payButton({
    "description": "Payment for venue rental"
});

description-label :string

text to appear above description input field when show-labels is turned on
Type:
  • string
Since:
  • 1.2018.05.04
Default Value:
  • Description
See:
Examples
Clearent.setProperty("description-label","Enter Description below");
Clearent.payButton({
    "description-label": "Enter Description below"
});

description-missing-error :string

message to show when description is missing and configured as required.
Type:
  • string
Since:
  • 1.2020.04.15
Default Value:
  • "Description required and is missing"
Examples
Clearent.setProperty("description-missing-error", "Please enter description");
Clearent.payButton({
    "description-missing-error": "Please enter description"
});

description-placeholder :string

default text to appear in description input field
Type:
  • string
Since:
  • 1.2016.06.02
Default Value:
  • Description
See:
Examples
Clearent.setProperty("description-placeholder","Enter description");
Clearent.payButton({
    "description-placeholder": "Enter description"
});

description-tooltip :string

tooltip to appear when hovering over or focused on description input field
Type:
  • string
Since:
  • 1.2016.06.02
Default Value:
  • (empty string)
See:
Examples
Clearent.setProperty("description-tooltip","Enter description");
Clearent.payButton({
    "description-tooltip": "Enter description"
});

dob-year :string

Optional property to set an dob-year that will be stored with the transaction. If dob-year field is shown, this property is used to pre-populate the field.
Type:
  • string
Since:
  • 1.2021.02.23
Default Value:
  • (null)
See:
Examples
Clearent.setProperty("dob-year","1999");
Clearent.payButton({
    "dob-year": "1999"
});

dob-year-invalid-error :string

message to show when date of birth year is invalid.
Type:
  • string
Since:
  • 1.2021.02.23
Default Value:
  • "Date of birth year is not valid (check for spaces or invalid characters)"
Examples
Clearent.setProperty("dob-year-invalid-error", "Please enter a valid email address");
Clearent.payButton({
    "dob-year-invalid-error": "Please enter a valid date of birth year"
});

dob-year-label :string

text to appear above customer year of birth input field when show-labels is turned on
Type:
  • string
Since:
  • 1.2021.02.23
Default Value:
  • Customer year of birth
See:
Examples
Clearent.setProperty("dob-year-label","Enter customer year of birth below");
Clearent.payButton({
    "email-address-label": "Enter customer year of birth below"
});

dob-year-missing-error :string

message to show when date of birth year is missing and configured as required.
Type:
  • string
Since:
  • 1.2021.02.23
Default Value:
  • "Customer year of birth required and is missing"
Examples
Clearent.setProperty("dob-year-missing-error", "Please enter date of birth year");
Clearent.payButton({
    "dob-year-missing-error": "Please enter date of birth year"
});

dob-year-placeholder :string

default text to appear in dob-year input field
Type:
  • string
Since:
  • 1.2021.02.23
Default Value:
  • Enter customer year of birth
See:
Examples
Clearent.setProperty("dob-year-placeholder","Customer year of birth");
Clearent.payButton({
    "dob-year-placeholder": "Customer year of birth"
});

dob-year-tooltip :string

tooltip to appear when hovering over or focused on dob-year input field
Type:
  • string
Since:
  • 1.2021.02.23
Default Value:
  • (empty string)
See:
Examples
Clearent.setProperty("dob-year-tooltip","Enter date of birth year");
Clearent.payButton({
    "dob-year-tooltip": "Customer year of birth"
});

email-address :string

Optional property to set an email-address that will be stored with the transaction. If email-address field is shown, this property is used to pre-populate the field.
Type:
  • string
Since:
  • 1.2016.06.02
Default Value:
  • (null)
See:
Examples
Clearent.setProperty("email-address","bob.smith@example.com");
Clearent.payButton({
    "email-address": "bob.smith@example.com"
});

email-address-invalid-error :string

message to show when email address is invalid.
Type:
  • string
Since:
  • 1.2020.04.15
Default Value:
  • "Email address is not valid (check for spaces or invalid characters)"
Examples
Clearent.setProperty("email-address-invalid-error", "Please enter a valid email address");
Clearent.payButton({
    "email-address-invalid-error": "Please enter a valid email address"
});

email-address-label :string

text to appear above Email Address input field when show-labels is turned on
Type:
  • string
Since:
  • 1.2018.05.04
Default Value:
  • Email Address
See:
Examples
Clearent.setProperty("email-address-label","Enter Email Address below");
Clearent.payButton({
    "email-address-label": "Enter Email Address below"
});

email-address-missing-error :string

message to show when email address is missing and configured as required.
Type:
  • string
Since:
  • 1.2020.04.15
Default Value:
  • "Email address required and is missing"
Examples
Clearent.setProperty("email-address-missing-error", "Please enter email address");
Clearent.payButton({
    "email-address-missing-error": "Please enter email address"
});

email-address-placeholder :string

default text to appear in email-address input field
Type:
  • string
Since:
  • 1.2016.06.02
Default Value:
  • Email address
See:
Examples
Clearent.setProperty("email-address-placeholder","Enter email address");
Clearent.payButton({
    "email-address-placeholder": "Enter email address"
});

email-address-tooltip :string

tooltip to appear when hovering over or focused on email-address input field
Type:
  • string
Since:
  • 1.2016.06.02
Default Value:
  • (empty string)
See:
Examples
Clearent.setProperty("email-address-tooltip","Enter email address");
Clearent.payButton({
    "email-address-tooltip": "Enter email address"
});

email-receipt-option-text :string

text to show next to "Send a receipt by email" option checkbox
Type:
  • string
Since:
  • 1.2018.03.28
Default Value:
  • Send a receipt by email
See:
Examples
Clearent.setProperty("email-receipt-option-text","Email my receipt to:");
Clearent.payButton({
    "email-receipt-option-text": "Email my receipt to:"
});

enable-ach :boolean

enables the option for the customer to pay with online-check.
Type:
  • boolean
Since:
  • 1.2018.07.27
Default Value:
  • false
Examples
Clearent.setProperty("enable-ach", true);
Clearent.payButton({
    "enable-ach": true
});

entry-label-manual :string

Label for choosing manual entry (choosing to use manual entry when use-mobile-reader is enabled)
Type:
  • string
Since:
  • 1.2019.09.29
Default Value:
  • Manual card entry
See:
Examples
Clearent.setProperty("entry-label-manual", "Manual Entry");
Clearent.payButton({
    "entry-label-manual": "Manual Entry"
});

entry-label-mobile :string

Label for choosing mobile reader card entry (choosing to use mobile entry when use-mobile-reader is enabled)
Type:
  • string
Since:
  • 1.2019.09.29
Default Value:
  • Use mobile reader
See:
Examples
Clearent.setProperty("entry-label-mobile", "Mobile Card Reader");
Clearent.payButton({
    "entry-label-mobile": "Mobile Card Reader"
});

error-message :string

text to appear in the popup when transaction was unsuccessful.
Type:
  • string
Default Value:
  • We were unable to process your payment. Please verify your payment details and try again or contact us to complete your order..
Examples
Clearent.setProperty("error-message","We were unable to process your payment. Please contact us to complete your order..");
Clearent.payButton({
    "error-message": "We were unable to process your payment. Please contact us to complete your order.."
});

exp-date-invalid-error :string

message to show when expiration date is invalid.
Type:
  • string
Since:
  • 1.2020.04.15
Default Value:
  • "Expiration date is not valid or expired. Please enter as MMYY."
Examples
Clearent.setProperty("exp-date-invalid-error", "Please enter expiration date as MMYY");
Clearent.payButton({
    "exp-date-invalid-error": "Please enter expiration date as MMYY"
});

exp-date-label :string

text to appear above Expiration Date input field when show-labels is turned on
Type:
  • string
Since:
  • 1.2018.05.04
Default Value:
  • Expiration Date (MM / YY)
See:
  • exp-date
Examples
Clearent.setProperty("exp-date-label","Enter Expiration Date below");
Clearent.payButton({
    "exp-date-label": "Enter Expiration Date below"
});

exp-date-missing-error :string

message to show when card expiration date is missing.
Type:
  • string
Since:
  • 1.2020.04.15
Default Value:
  • "Expiration date is missing"
Examples
Clearent.setProperty("exp-date-missing-error", "Please enter expiration date");
Clearent.payButton({
    "exp-date-missing-error": "Please enter expiration date"
});

exp-date-placeholder :string

text to appear in expiration date input field when expiration date value has not yet been entered
Type:
  • string
Default Value:
  • MMYY
Examples
Clearent.setProperty("exp-date-placeholder","mm/yy");
Clearent.payButton({
    "exp-date-placeholder": "mm/yy"
});

exp-date-tooltip :string

tooltip to appear when hovering over or focused on card expiration date input field
Type:
  • string
Default Value:
  • Enter 2-digit expiration month and 2-digit expiration year
Examples
Clearent.setProperty("exp-date-tooltip","Enter card expiration date in MM/YY format");
Clearent.payButton({
    "exp-date-tooltip": "Enter card expiration date in MM/YY format"
});

first-name-label :string

text to appear above billing address, first name input field when show-labels is turned on
Type:
  • string
Since:
  • 1.2018.05.04
Default Value:
  • First name on card
Examples
Clearent.setProperty("first-name-label","Enter first name on card below");
Clearent.payButton({
    "first-name-label": "Enter first name on card below"
});

first-name-missing-error :string

message to show when billing first name is missing and configured as required.
Type:
  • string
Since:
  • 1.2020.04.15
Default Value:
  • "Address required and first name is missing"
Examples
Clearent.setProperty("first-name-missing-error", "Please enter billing first name");
Clearent.payButton({
    "first-name-missing-error": "Please enter billing first name"
});

first-name-placeholder :string

text to appear in billing address, first name input field when first name has not yet been entered
Type:
  • string
Default Value:
  • First name on card
Examples
Clearent.setProperty("first-name-placeholder","First name");
Clearent.payButton({
    "first-name-placeholder": "First name"
});

first-name-tooltip :string

tooltip to appear when focused on billing address first name input field
Type:
  • string
Default Value:
  • (empty string)
Examples
Clearent.setProperty("first-name-tooltip","Enter first name exactly as it appears on your card");
Clearent.payButton({
    "first-name-tooltip": "Enter name exactly as it appears on your card"
});

heading-text :string

text to appear in the header section of the payment popup form
Type:
  • string
Default Value:
  • Enter Payment Information
Examples
Clearent.setProperty("heading-text","ACME Cogs and Widgets");
Clearent.payButton({
    "heading-text": "ACME Cogs and Widgets"
});

invalid-message :string

text to appear in the error bar when invalid form entries are found.
Type:
  • string
Default Value:
  • Please correct invalid entries.
Examples
Clearent.setProperty("invalid-message","Fix errors below and try again.");
Clearent.payButton({
    "invalid-message": "Fix errors below and try again."
});

invoice :string

Optional property to set an invoice that will be stored with the transaction. This is a searchable field when using Clearent's Virtual Terminal to research transaction data. If invoice field is shown, this property is used to pre-populate the field.
Type:
  • string
Since:
  • 1.2016.06.02
Default Value:
  • (null)
See:
Examples
Clearent.setProperty("invoice","a12345");
Clearent.payButton({
    "invoice": "a12345"
});

invoice-label :string

text to appear above invoice input field when show-labels is turned on
Type:
  • string
Since:
  • 1.2018.05.04
Default Value:
  • Invoice
See:
Examples
Clearent.setProperty("invoice-label","Enter Invoice below");
Clearent.payButton({
    "invoice-label": "Enter Invoice below"
});

invoice-missing-error :string

message to show when invoice is missing and configured as required.
Type:
  • string
Since:
  • 1.2020.04.15
Default Value:
  • "Invoice required and is missing"
Examples
Clearent.setProperty("invoice-missing-error", "Please enter invoice");
Clearent.payButton({
    "invoice-missing-error": "Please enter invoice"
});

invoice-placeholder :string

default text to appear in invoice input field
Type:
  • string
Since:
  • 1.2016.06.02
Default Value:
  • Invoice Number
See:
Examples
Clearent.setProperty("invoice-placeholder","Enter Invoice");
Clearent.payButton({
    "invoice-placeholder": "Enter Invoice"
});

invoice-tooltip :string

tooltip to appear when hovering over or focused on invoice input field
Type:
  • string
Since:
  • 1.2016.06.02
Default Value:
  • (empty string)
See:
Examples
Clearent.setProperty("invoice-tooltip","Enter Invoice");
Clearent.payButton({
    "invoice-tooltip": "Enter Invoice"
});

last-name-label :string

text to appear above billing address, last name input field when show-labels is turned on
Type:
  • string
Since:
  • 1.2018.05.04
Default Value:
  • Last name on card
Examples
Clearent.setProperty("last-name-label","Enter last name on card below");
Clearent.payButton({
    "last-name-label": "Enter last name on card below"
});

last-name-missing-error :string

message to show when billing last name is missing and configured as required.
Type:
  • string
Since:
  • 1.2020.04.15
Default Value:
  • "Address required and last name is missing"
Examples
Clearent.setProperty("last-name-missing-error", "Please enter billing last name");
Clearent.payButton({
    "last-name-missing-error": "Please enter billing last name"
});

last-name-placeholder :string

text to appear in billing address, last name input field when last name has not yet been entered
Type:
  • string
Default Value:
  • Last name on card
Examples
Clearent.setProperty("last-name-placeholder","Last name");
Clearent.payButton({
    "last-name-placeholder": "Last name"
});

last-name-tooltip :string

tooltip to appear when focused on billing address last name input field
Type:
  • string
Default Value:
  • (empty string)
Examples
Clearent.setProperty("last-name-tooltip","Enter last name exactly as it appears on your card");
Clearent.payButton({
    "last-name-tooltip": "Enter name exactly as it appears on your card"
});

mask-entry :boolean

Masks entry of Card Number, Expiration Date, Card Security Code, Routing Number and Account number fields. When the field has focus you can see the data, when the field loses focus, the data is obfuscated.
Type:
  • boolean
Since:
  • 1.2018.02.28
Default Value:
  • true
Examples
Clearent.setProperty("mask-entry", false);
Clearent.payButton({
    "mask-entry": false
});

merchant-logo-url :string

For Paylink only. If populated with proper url, will show the desired logo at top of page.
Type:
  • string
Since:
  • 1.2019.01.10
Default Value:
  • null
Examples
Clearent.setProperty("merchant-logo-url", "https://logo.url");
Clearent.payButton({
    "merchant-logo-url": "https://logo.url"
});

merchant-name :string

text to replace generic "the merchant" in the ACH Terms and Conditions. Also shows as the * merchant name below the logo and above the header text in the Paylink view when using Paylink funcitonality.
Type:
  • string
Since:
  • 1.2019.01.10
Default Value:
  • null
Examples
Clearent.setProperty("merchant-name", "Merchant Name");
Clearent.payButton({
    "merchant-name": "Merchant Name"
});

mobile-cancel-url :string

if mobile payment is canceled, the mobile application will attempt to launch this url in the default configured browser on the mobile device. This can be used to redirect user to merchant site after a canceled transaction.
Type:
  • string
Since:
  • 1.2019.06.25
Default Value:
  • null
See:
Examples
Clearent.setProperty("mobile-cancel-url", "https://my-company/cancel-page");
Clearent.payButton({
    "mobile-cancel-url": "https://my-company/cancel-page"
});

mobile-success-url :string

if mobile payment is successful, the mobile application will attempt to launch this url in the default configured browser on the mobile device. This can be used to redirect user to merchant site after a successful transaction.
Type:
  • string
Since:
  • 1.2019.06.25 * @example Clearent.setProperty("mobile-success-url", "https://my-company/success-page");
Default Value:
  • null
See:
Example
Clearent.payButton({
    "mobile-success-url": "https://my-company/success-page"
});

order-id :string

Optional property to set an order id that will be stored with the transaction. This is a searchable field when using Clearent's Virtual Terminal to research transaction data. If order-id field is shown, this property is used to pre-populate the field.
Type:
  • string
Since:
  • 1.2016.06.02
Default Value:
  • (null)
See:
Examples
Clearent.setProperty("order-id","a12345");
Clearent.payButton({
    "order-id": "a12345"
});

order-id-label :string

text to appear above Order ID input field when show-labels is turned on
Type:
  • string
Since:
  • 1.2018.05.04
Default Value:
  • Order ID
See:
Examples
Clearent.setProperty("order-id-label","Enter Order ID below");
Clearent.payButton({
    "order-id-label": "Enter Order ID below"
});

order-id-missing-error :string

message to show when order id is missing and configured as required.
Type:
  • string
Since:
  • 1.2020.04.15
Default Value:
  • "Order-id required and is missing"
Examples
Clearent.setProperty("order-id-missing-error", "Please enter order id");
Clearent.payButton({
    "order-id-missing-error": "Please enter order id"
});

order-id-placeholder :string

default text to appear in order-id input field
Type:
  • string
Since:
  • 1.2016.06.02
Default Value:
  • Order ID
See:
Examples
Clearent.setProperty("order-id-placeholder","Enter Order ID");
Clearent.payButton({
    "order-id-placeholder": "Enter Order ID"
});

order-id-tooltip :string

tooltip to appear when hovering over or focused on order-id input field
Type:
  • string
Since:
  • 1.2016.06.02
Default Value:
  • (empty string)
See:
Examples
Clearent.setProperty("order-id-tooltip","Enter Order ID");
Clearent.payButton({
    "order-id-tooltip": "Enter Order ID"
});

pay-button-parent :string|HTMLElement

The id or element reference of the element that the "Pay Now" button will be instantiated within. The newly created button is added as the last child of the specified element. If omitted, the "Pay Now" button will be instantiated at the location of the Clearent.payButton() method call.
Type:
  • string | HTMLElement
Default Value:
  • null
Examples
Clearent.setProperty("pay-button-parent","paymentDiv");
Clearent.setProperty("pay-button-parent",document.getElementById("payment-div"));
Clearent.payButton({
    "pay-button-parent":"paymentDiv"
});
Clearent.payButton({
    "pay-button-parent":document.getElementById("payment-div")
});

pay-button-text :string

text to appear on the button that launches the payment popup form
Type:
  • string
Default Value:
  • Pay Now
Examples
Clearent.setProperty("pay-button-text","Show Payment Form");
Clearent.payButton({
    "pay-button-text": "Show Payment Form"
});

paylink-cancel-button-text :string

enables the option for the customer to pay with online-check.
Type:
  • string
Since:
  • 1.2018.08.27
Default Value:
  • Cancel
Examples
Clearent.setProperty("paylink-cancel-button-text", "Continue Shopping");
Clearent.payButton({
    "paylink-cancel-button-text": "Continue Shopping"
});

payment-label-ach :string

Label for choosing check payment when ach is enabled
Type:
  • string
Since:
  • 1.2018.07.27
Default Value:
  • Check
See:
Examples
Clearent.setProperty("payment-label-ach", "Checking account");
Clearent.payButton({
    "payment-label-ach": "Checking account"
});

payment-label-credit :string

Label for choosing credit payment when ach is enabled
Type:
  • string
Since:
  • 1.2018.07.27
Default Value:
  • Credit/Debit
See:
Examples
Clearent.setProperty("payment-label-credit", "Pay by Card");
Clearent.payButton({
    "payment-label-credit": "Pay by Card"
});

payment-method-heading-text :string

text to appear above the payment section of the payment popup form, which includes card fields and possibly digital wallet options.
Type:
  • string
Since:
  • 1.2023.09.19
Default Value:
  • "Payment Method"
Examples
Clearent.setProperty("payment-method-heading-text", "Payment");
Clearent.payButton({
    "payment-method-heading-text": "Payment"
});

phone-label :string

text to appear above billing address, phone input field when show-labels is turned on
Type:
  • string
Since:
  • 1.2018.05.04
Default Value:
  • Phone number
Examples
Clearent.setProperty("phone-label","Enter phone number below");
Clearent.payButton({
    "phone-label": "Enter Phone below"
});

phone-missing-error :string

message to show when billing phone is missing and configured as required.
Type:
  • string
Since:
  • 1.2020.04.15
Default Value:
  • "Phone required is missing"
Examples
Clearent.setProperty("phone-missing-error", "Please enter billing phone");
Clearent.payButton({
    "phone-missing-error": "Please enter billing phone"
});

phone-placeholder :string

text to appear in billing address phone input field when phone number value has not yet been entered
Type:
  • string
Default Value:
  • Phone
Examples
Clearent.setProperty("phone-placeholder","Phone code");
Clearent.payButton({
    "phone-placeholder": "Phone number"
});

phone-tooltip :string

tooltip to appear when focused on billing address phone code input field
Type:
  • string
Default Value:
  • (empty string)
Examples
Clearent.setProperty("phone-tooltip","Enter your billing phone number");
Clearent.payButton({
    "phone-tooltip": "Enter your billing phone number"
});

pk :string

public key
Type:
  • string
Default Value:
  • null
Examples
Clearent.setProperty("pk","abcdefg123456");
Clearent.payButton({
    "pk": "abcdefg123456"
});

purchase-order :string

Optional property to set a purchase-order that will be stored with the transaction. This is a searchable field when using Clearent's Virtual Terminal to research transaction data. If purchase-order field is shown, this property is used to pre-populate the field.
Type:
  • string
Since:
  • 1.2016.06.02
Default Value:
  • (null)
See:
Examples
Clearent.setProperty("purchase-order","a12345");
Clearent.payButton({
    "purchase-order": "a12345"
});

purchase-order-label :string

text to appear above Purchase Order input field when show-labels is turned on
Type:
  • string
Since:
  • 1.2018.05.04
Default Value:
  • Purchase Order
See:
Examples
Clearent.setProperty("purchase-order-label","Enter Purchase Order below");
Clearent.payButton({
    "purchase-order-label": "Enter Purchase Order below"
});

purchase-order-missing-error :string

message to show when purchase order is missing and configured as required.
Type:
  • string
Since:
  • 1.2020.04.15
Default Value:
  • "Purchase-order required and is missing"
Examples
Clearent.setProperty("purchase-order-missing-error", "Please enter purchase order");
Clearent.payButton({
    "purchase-order-missing-error": "Please enter purchase order"
});

purchase-order-placeholder :string

default text to appear in purchase-order input field
Type:
  • string
Since:
  • 1.2016.06.02
Default Value:
  • Purchase Order
See:
Examples
Clearent.setProperty("purchase-order-placeholder","Enter Purchase Order");
Clearent.payButton({
    "purchase-order-placeholder": "Enter Purchase Order"
});

purchase-order-tooltip :string

tooltip to appear when hovering over or focused on purchase-order input field
Type:
  • string
Since:
  • 1.2016.06.02
Default Value:
  • (empty string)
See:
Examples
Clearent.setProperty("purchase-order-tooltip","Enter Purchase Order");
Clearent.payButton({
    "purchase-order-tooltip": "Enter Purchase Order"
});

read-only-amount :boolean

determines if amount field can be modified by the user.
Type:
  • boolean
Since:
  • 1.2023.09.19
Default Value:
  • false
Examples
Clearent.setProperty("read-only-amount", true);
Clearent.payButton({
    "read-only-amount": true
});

read-only-sales-tax-amount :boolean

determines if sales-tax-amount field can be modified by the user.
Type:
  • boolean
Since:
  • 1.2023.09.19
Default Value:
  • false
Examples
Clearent.setProperty("read-only-sales-tax-amount", true);
Clearent.payButton({
    "read-only-sales-tax-amount": true
});

read-only-tip-amount :boolean

determines if tip-amount field can be modified by the user.
Type:
  • boolean
Since:
  • 1.2023.09.19
Default Value:
  • false
Examples
Clearent.setProperty("read-only-tip-amount", true);
Clearent.payButton({
    "read-only-tip-amount": true
});

request-type :string

Type of transaction to run; SALE, AUTH or TOKEN-ONLY. AUTH will show as successful payments to the user but will have type:"AUTH" in the transaction response. AUTH must be captured before they drop off to ensure payment to merchant.
Type:
  • string
Default Value:
  • SALE
Examples
Clearent.setProperty("request-type", "AUTH");
Clearent.payButton({
    "request-type": "AUTH"
});

require-ach-account-name :boolean

determines if ach-account-name field is required on payment popup ach-account-name will display automatically; default value of true
Type:
  • boolean
Since:
  • 1.2021.02.25
Default Value:
  • false
See:
  • show-ach-account-name
Examples
Clearent.setProperty("require-ach-account-name", false);
Clearent.payButton({
    "require-ach-account-name": false
});

require-billing-address :boolean

determines if billing address is shown and required on payment popup; if set to true you do not need to set show-billing-address property
Type:
  • boolean
Default Value:
  • false
See:
Examples
Clearent.setProperty("require-billing-address", true);
Clearent.payButton({
    "require-billing-address": true
});

require-billing-zip :boolean

determines if billing zip is shown and required on payment popup; if set to true you do not need to set show-billing-zip property
Type:
  • boolean
Default Value:
  • false
See:
Examples
Clearent.setProperty("require-billing-zip", true);
Clearent.payButton({
    "require-billing-zip": true
});

require-card-inquiry :boolean

determines if card inquiry is performed when creating a token. If true, a card-inquiry fee may apply. If false, no inquiry is performed but card is not guaranteed to be valid and future transactions with token may fail. This applies only to token-only requests. It does not apply to AUTH or SALE with create-token requests.
Type:
  • boolean
Since:
  • 1.2018.06.14
Default Value:
  • true
Examples
Clearent.setProperty("require-card-inquiry", true);
Clearent.payButton({
    "require-card-inquiry": true
});

require-comments :boolean

determines if comments field is shown and required on payment popup; if set to true you do not need to set show-comments property
Type:
  • boolean
Since:
  • 1.2016.06.02
Default Value:
  • false
See:
Examples
Clearent.setProperty("require-comments", true);
Clearent.payButton({
    "require-comments": true
});

require-customer-id :boolean

determines if customer-id field is shown and required on payment popup; if set to true you do not need to set show-customer-id property
Type:
  • boolean
Since:
  • 1.2016.06.02
Default Value:
  • false
See:
Examples
Clearent.setProperty("require-customer-id", true);
Clearent.payButton({
    "require-customer-id": true
});

require-description :boolean

determines if description field is shown and required on payment popup; if set to true you do not need to set show-description property
Type:
  • boolean
Since:
  • 1.2016.06.02
Default Value:
  • false
See:
Examples
Clearent.setProperty("require-description", true);
Clearent.payButton({
    "require-description": true
});

require-dob-year :boolean

determines if dob-year field is shown and required on payment popup; if set to true you do not need to set show-dob-year property
Type:
  • boolean
Since:
  • 1.2021.02.23
Default Value:
  • false
See:
Examples
Clearent.setProperty("require-dob-year", true);
Clearent.payButton({
    "require-dob-year": true
});

require-email-address :boolean

determines if email-address field is shown and required on payment popup; if set to true you do not need to set show-email-address property
Type:
  • boolean
Since:
  • 1.2016.06.02
Default Value:
  • false
See:
Examples
Clearent.setProperty("require-email-address", true);
Clearent.payButton({
    "require-email-address": true
});

require-invoice :boolean

determines if invoice field is shown and required on payment popup; if set to true you do not need to set show-invoice property
Type:
  • boolean
Since:
  • 1.2016.06.02
Default Value:
  • false
See:
Examples
Clearent.setProperty("require-invoice", true);
Clearent.payButton({
    "require-invoice": true
});

require-order-id :boolean

determines if order-id is shown and required on payment popup; if set to true you do not need to set show-order-id property
Type:
  • boolean
Since:
  • 1.2016.06.02
Default Value:
  • false
See:
Examples
Clearent.setProperty("require-order-id", true);
Clearent.payButton({
    "require-order-id": true
});

require-phone :boolean

determines if billing phone number is required. If require-billing-address or show-billing-address are true, the phone number will not be required by default. You must set this field to true to require the customer to enter a billing phone number
Type:
  • boolean
Since:
  • 1.2016.06.02
Default Value:
  • false
See:
Examples
Clearent.setProperty("require-billing-address", true);
Clearent.setProperty("require-phone", true);
Clearent.payButton({
    "require-billing-address": true,
    "require-phone": true
});

require-purchase-order :boolean

determines if purchase-order field is shown and required on payment popup; if set to true you do not need to set show-purchase-order property
Type:
  • boolean
Since:
  • 1.2016.06.02
Default Value:
  • false
See:
Examples
Clearent.setProperty("require-purchase-order", true);
Clearent.payButton({
    "require-purchase-order": true
});

require-sales-tax :boolean

determines if sales-tax-amount field is shown and required on payment popup; if set to true you do not need to set show-sales-tax property
Type:
  • boolean
Since:
  • 1.2017.02.02
Default Value:
  • false
See:
Examples
Clearent.setProperty("require-sales-tax", true);
Clearent.payButton({
    "require-sales-tax": true
});

require-shipping-address :boolean

determines if shipping address is shown and required on payment popup; if set to true you do not need to set show-shipping-address property
Type:
  • boolean
Since:
  • 1.2016.06.02
Default Value:
  • false
See:
Examples
Clearent.setProperty("require-shipping-address", true);
Clearent.payButton({
    "require-shipping-address": true
});

require-shipping-phone :boolean

determines if shipping phone number is required. If require-shipping-address or show-shipping-address are true, the phone number will not be required by default. You must set this field to true to require the customer to enter a shipping phone number
Type:
  • boolean
Since:
  • 1.2016.06.02
Default Value:
  • false
See:
Examples
Clearent.setProperty("require-shipping-address", true);
Clearent.setProperty("require-shipping-phone", true);
Clearent.payButton({
    "require-shipping-address": true,
    "require-shipping-phone": true
});

require-tip-amount :boolean

determines if tip-amount field is shown and required on payment popup; if set to true you do not need to set show-tip-amount property
Type:
  • boolean
Since:
  • 1.2018.05.04
Default Value:
  • false
See:
Examples
Clearent.setProperty("require-tip-amount", true);
Clearent.payButton({
    "require-tip-amount": true
});

sales-tax-amount :string

sale tax amount for transaction; If sales-tax-amount field is shown, this property is used to pre-populate the field.
Type:
  • string
Since:
  • 1.2017.02.02
Examples
Clearent.setProperty("sales-tax-amount","3.51");
Clearent.payButton({
    "sales-tax-amount": "3.51"
});

sales-tax-invalid-error :string

message to show when sales tax amount is invalid.
Type:
  • string
Since:
  • 1.2020.04.15
Default Value:
  • "Sales tax amount is not valid; Please include two decimal places (ex 1.00). Do not include $ symbol."
Examples
Clearent.setProperty("sales-tax-invalid-error", "Please enter valid sales tax amount; ex 2.55");
Clearent.payButton({
    "sales-tax-invalid-error": "Please enter valid sales tax amount; ex 2.55"
});

sales-tax-label :string

text to appear above sales tax amount input field when show-labels is turned on
Type:
  • string
Since:
  • 1.2017.02.02
Default Value:
  • Sales tax
See:
Examples
Clearent.setProperty("sales-tax-label","Enter sales tax amount");
Clearent.payButton({
    "sales-tax-label": "Enter sales tax amount"
});

sales-tax-missing-error :string

message to show when sales-tax is missing and configured as required.
Type:
  • string
Since:
  • 1.2020.04.15
Default Value:
  • "Sales tax amount required and is missing"
Examples
Clearent.setProperty("sales-tax-missing-error", "Please enter sales tax");
Clearent.payButton({
    "sales-tax-missing-error": "Please enter sales tax"
});

sales-tax-placeholder :string

text to appear in sales-tax-amount input field when sales-tax-amount value has not yet been entered.
Type:
  • string
Since:
  • 1.2017.02.02
Default Value:
  • Enter sales tax
See:
Examples
Clearent.setProperty("sales-tax-placeholder","Enter sales tax amount");
Clearent.payButton({
    "sales-tax-placeholder": "Enter sales tax amount"
});

sales-tax-tooltip :string

tooltip to appear when hovering over or focused on sales-tax-amount input field.
Type:
  • string
Since:
  • 1.2017.02.02
Default Value:
  • (empty string)
See:
Examples
Clearent.setProperty("sales-tax-tooltip","Enter sales tax in $xx.xx format");
Clearent.payButton({
    "amount-tooltip": "Enter sales tax in $xx.xx format"
});

save-ach-option-text :string

text to show next to "save this ach account" option checkbox when show-save-card-option is true
Type:
  • string
Default Value:
  • Save this account for future use
See:
Examples
Clearent.setProperty("save-ach-option-text","Save this account");
Clearent.payButton({
    "save-ach-option-text": "Save this account"
});

save-card-option-text :string

text to show next to "save this card" option checkbox when show-save-card-option is true
Type:
  • string
Default Value:
  • Save this card for future use
See:
Examples
Clearent.setProperty("save-card-option-text","Save this card");
Clearent.payButton({
    "save-card-option-text": "Save this card"
});

save-card-zip-missing-error :string

message to show when saving a card and zip code is missing and configured as required.
Type:
  • string
Since:
  • 1.2020.04.15
Default Value:
  • "Zip code is missing"
Examples
Clearent.setProperty("save-card-zip-missing-error", "Please enter a zip code");
Clearent.payButton({
    "save-card-zip-missing-error": "Please enter a zip code"
});

shipping-address :object

Optional property to set the shipping address. If shipping address fields are shown, this property is used to pre-populate the fields.
Type:
  • object
Since:
  • 1.2020.06.17
Default Value:
  • (null)
See:
Examples
Clearent.setProperty("shipping-address",
     {
        "first-name":"John",
        "last-name":"Backus",
        "street":"123 Billing St.",
        "city":"Richmond",
        "state":"MO",
        "zip":"85284",
        "phone":"314-555-1212"
    });
Clearent.payButton({
    "shipping-address":{
        "first-name":"John",
        "last-name":"Backus",
        "street":"123 Billing St.",
        "city":"Richmond",
        "state":"MO",
        "zip":"85284",
        "phone":"314-555-1212"
    }
});

shipping-address-label :string

text to appear above the shipping-address section of the payment form
Type:
  • string
Since:
  • 1.2016.06.02
Default Value:
  • Shipping Address
Examples
Clearent.setProperty("shipping-address-label","Delivery Address");
Clearent.payButton({
    "shipping-address-label": "Delivery Address"
});

shipping-address-missing-error :string

message to show when shipping street address is missing and configured as required.
Type:
  • string
Since:
  • 1.2020.04.15
Default Value:
  • "Shipping address required and street address is missing"
Examples
Clearent.setProperty("shipping-address-missing-error", "Please enter shipping street address");
Clearent.payButton({
    "shipping-address-missing-error": "Please enter shipping street address"
});

shipping-address-placeholder :string

text to appear in shipping address, address input field when address value has not yet been entered
Type:
  • string
Since:
  • 1.2016.06.02
Default Value:
  • Address
Examples
Clearent.setProperty("shipping-address-placeholder","Street name and number");
Clearent.payButton({
    "shipping-address-placeholder": "Street name and number"
});

shipping-address-tooltip :string

tooltip to appear when focused on shipping address, address input field
Type:
  • string
Since:
  • 1.2016.06.02
Default Value:
  • (empty string)
Examples
Clearent.setProperty("shipping-address-tooltip","Enter shipping address");
Clearent.payButton({
    "shipping-address-tooltip": "Enter shipping address"
});

shipping-city-label :string

text to appear above shipping address, city input field when show-labels is turned on
Type:
  • string
Since:
  • 1.2018.05.04
Default Value:
  • City
Examples
Clearent.setProperty("shipping-city-label","Enter city below");
Clearent.payButton({
    "shipping-city-label": "Enter city below"
});

shipping-city-missing-error :string

message to show when shipping city is missing and configured as required.
Type:
  • string
Since:
  • 1.2020.04.15
Default Value:
  • "Shipping address required and city is missing"
Examples
Clearent.setProperty("shipping-city-missing-error", "Please enter shipping city");
Clearent.payButton({
    "shipping-city-missing-error": "Please enter shipping city"
});

shipping-city-placeholder :string

text to appear in shipping address city input field when city value has not yet been entered
Type:
  • string
Since:
  • 1.2016.06.02
Default Value:
  • City
Examples
Clearent.setProperty("shipping-city-placeholder","Enter city");
Clearent.payButton({
    "shipping-city-placeholder": "Enter city"
});

shipping-city-tooltip :string

tooltip to appear when focused on shipping address city input field
Type:
  • string
Since:
  • 1.2016.06.02
Default Value:
  • (empty string)
Examples
Clearent.setProperty("shipping-city-tooltip","Enter city of your shipping address");
Clearent.payButton({
    "shipping-city-tooltip": "Enter city of your shipping address"
});

shipping-first-name-label :string

text to appear above shipping address, first name input field when show-labels is turned on
Type:
  • string
Since:
  • 1.2018.05.04
Default Value:
  • First name
Examples
Clearent.setProperty("shipping-first-name-label","Enter first name below");
Clearent.payButton({
    "shipping-first-name-label": "Enter first name below"
});

shipping-first-name-missing-error :string

message to show when shipping first name is missing and configured as required.
Type:
  • string
Since:
  • 1.2020.04.15
Default Value:
  • "Shipping address required and first name is missing"
Examples
Clearent.setProperty("shipping-first-name-missing-error", "Please enter shipping first name");
Clearent.payButton({
    "shipping-first-name-missing-error": "Please enter shipping first name"
});

shipping-first-name-placeholder :string

text to appear in shipping address first name input field when first name has not yet been entered
Type:
  • string
Since:
  • 1.2016.06.02
Default Value:
  • First name
Examples
Clearent.setProperty("shipping-first-name-placeholder","First name");
Clearent.payButton({
    "shipping-first-name-placeholder": "First name"
});

shipping-first-name-tooltip :string

tooltip to appear when focused on shipping address first name input field
Type:
  • string
Since:
  • 1.2016.06.02
Default Value:
  • (empty string)
Examples
Clearent.setProperty("shipping-first-name-tooltip","Enter first name exactly as it appears on your card");
Clearent.payButton({
    "shipping-first-name-tooltip": "Enter name exactly as it appears on your card"
});

shipping-last-name-label :string

text to appear above shipping address, last name input field when show-labels is turned on
Type:
  • string
Since:
  • 1.2018.05.04
Default Value:
  • Last name
Examples
Clearent.setProperty("shipping-last-name-label","Enter last name below");
Clearent.payButton({
    "shipping-last-name-label": "Enter last name below"
});

shipping-last-name-missing-error :string

message to show when shipping last name is missing and configured as required.
Type:
  • string
Since:
  • 1.2020.04.15
Default Value:
  • "Shipping address required and last name is missing"
Examples
Clearent.setProperty("shipping-last-name-missing-error", "Please enter shipping last name");
Clearent.payButton({
    "shipping-last-name-missing-error": "Please enter shipping last name"
});

shipping-last-name-placeholder :string

text to appear in shipping address last name input field when last name has not yet been entered
Type:
  • string
Since:
  • 1.2016.06.02
Default Value:
  • Last name
Examples
Clearent.setProperty("shipping-last-name-placeholder","Last name");
Clearent.payButton({
    "shipping-last-name-placeholder": "Last name"
});

shipping-last-name-tooltip :string

tooltip to appear when focused on shipping address last name input field
Type:
  • string
Since:
  • 1.2016.06.02
Default Value:
  • (empty string)
Examples
Clearent.setProperty("shipping-last-name-tooltip","Enter last name");
Clearent.payButton({
    "shipping-last-name-tooltip": "Enter last name"
});

shipping-phone-label :string

text to appear above shipping address, phone input field when show-labels is turned on
Type:
  • string
Since:
  • 1.2018.05.04
Default Value:
  • Phone number
Examples
Clearent.setProperty("shipping-phone-label","Enter phone number below");
Clearent.payButton({
    "shipping-phone-label": "Enter Phone below"
});

shipping-phone-missing-error :string

message to show when shipping phone is missing and configured as required.
Type:
  • string
Since:
  • 1.2020.04.15
Default Value:
  • "Shipping phone required and is missing"
Examples
Clearent.setProperty("shipping-phone-missing-error", "Please enter shipping phone");
Clearent.payButton({
    "shipping-phone-missing-error": "Please enter shipping phone"
});

shipping-phone-placeholder :string

text to appear in shipping address phone input field when phone number value has not yet been entered
Type:
  • string
Default Value:
  • Phone
Examples
Clearent.setProperty("shipping-phone-placeholder","Phone code");
Clearent.payButton({
    "shipping-phone-placeholder": "Phone number"
});

shipping-phone-tooltip :string

tooltip to appear when focused on shipping address phone code input field
Type:
  • string
Default Value:
  • (empty string)
Examples
Clearent.setProperty("shipping-phone-tooltip","Enter your shipping phone number");
Clearent.payButton({
    "shipping-phone-tooltip": "Enter your shipping phone number"
});

shipping-state-label :string

text to appear above shipping address, state dropdown field when show-labels is turned on
Type:
  • string
Since:
  • 1.2018.05.04
Default Value:
  • State
Examples
Clearent.setProperty("shipping-state-label","Enter state below");
Clearent.payButton({
    "shipping-state-label": "Enter state below"
});

shipping-state-missing-error :string

message to show when shipping state is missing and configured as required.
Type:
  • string
Since:
  • 1.2020.04.15
Default Value:
  • "Shipping address required and state is missing"
Examples
Clearent.setProperty("shipping-state-missing-error", "Please enter shipping state");
Clearent.payButton({
    "shipping-state-missing-error": "Please enter shipping state"
});

shipping-state-placeholder :string

text to appear in shipping address state selector when state value has not yet been selected
Type:
  • string
Since:
  • 1.2016.06.02
Default Value:
  • State
Examples
Clearent.setProperty("shipping-state-placeholder","Select state");
Clearent.payButton({
    "shipping-state-placeholder": "Select state"
});

shipping-state-tooltip :string

tooltip to appear when focused on shipping address state input field
Type:
  • string
Since:
  • 1.2016.06.02
Default Value:
  • (empty string)
Examples
Clearent.setProperty("shipping-state-tooltip","Select state");
Clearent.payButton({
    "shipping-state-tooltip": "Select state"
});

shipping-street-address-label :string

text to appear above shipping address, street address input field when show-labels is turned on
Type:
  • string
Since:
  • 1.2018.05.04
Default Value:
  • Street address
Examples
Clearent.setProperty("shipping-street-address-label","Enter street address below");
Clearent.payButton({
    "shipping-street-address-label": "Enter street address below"
});

shipping-zip-label :string

text to appear above shipping address, zip input field when show-labels is turned on
Type:
  • string
Since:
  • 1.2018.05.04
Default Value:
  • Zip
Examples
Clearent.setProperty("shipping-zip-label","Enter zip below");
Clearent.payButton({
    "shipping-zip-label": "Enter zip below"
});

shipping-zip-missing-error :string

message to show when shipping zip is missing and configured as required.
Type:
  • string
Since:
  • 1.2020.04.15
Default Value:
  • "Shipping address required and zip is missing"
Examples
Clearent.setProperty("shipping-zip-missing-error", "Please enter shipping zip");
Clearent.payButton({
    "shipping-zip-missing-error": "Please enter shipping zip"
});

shipping-zip-placeholder :string

text to appear in shipping address zip code input field when zip code value has not yet been entered
Type:
  • string
Since:
  • 1.2016.06.02
Default Value:
  • Zip
Examples
Clearent.setProperty("shipping-zip-placeholder","Zip code");
Clearent.payButton({
    "shipping-zip-placeholder": "Zip code"
});

shipping-zip-tooltip :string

tooltip to appear when focused on shipping address zip code input field
Type:
  • string
Since:
  • 1.2016.06.02
Default Value:
  • (empty string)
Examples
Clearent.setProperty("shipping-zip-tooltip","Enter your shipping zip/postal code");
Clearent.payButton({
    "shipping-zip-tooltip": "Enter your shipping zip/postal code"
});

show-ach-check-number :boolean

determines if ach-check-number field is shown on payment popup. by default the value is true
Type:
  • boolean
Since:
  • 1.2021.02.23
Default Value:
  • false
See:
Examples
Clearent.setProperty("show-ach-check-number", false);
Clearent.payButton({
    "show-ach-check-number": false
});

show-address2 :boolean

determines if address2 field is shown on payment popup; default value of false; optional field
Type:
  • boolean
Since:
  • 1.2021.02.25
Default Value:
  • false
Examples
Clearent.setProperty("show-address2", true);
Clearent.payButton({
    "show-address2": true
});

show-apple-pay :boolean

determines if Apple Pay button is displayed on the payment popup form. Note: for Apple Pay button to show, the merchant/integrator must still be registered for Apple Pay for Web.
Type:
  • boolean
Since:
  • 1.2023.09.19
Default Value:
  • true
Examples
Clearent.setProperty("show-apple-pay", false);
Clearent.payButton({
    "show-apple-pay": false
});

show-billing-address :boolean

determines if billing address is shown on payment popup
Type:
  • boolean
Default Value:
  • false
See:
Examples
Clearent.setProperty("show-billing-address", true);
Clearent.payButton({
    "show-billing-address": true
});

show-billing-zip :boolean

determines if billing zip is shown on payment popup
Type:
  • boolean
Default Value:
  • false
See:
Examples
Clearent.setProperty("show-billing-zip", true);
Clearent.payButton({
    "show-billing-zip": true
});

show-card-form-dividers :boolean

adds horizontal rules between sections of the card form.
Type:
  • boolean
Since:
  • 1.2023.09.19
Default Value:
  • false
Examples
Clearent.setProperty("show-card-form-dividers", true);
Clearent.payButton({
    "show-card-form-dividers": true
});

show-comments :boolean

determines if comments field is shown on payment popup
Type:
  • boolean
Since:
  • 1.2016.06.02
Default Value:
  • false
See:
Examples
Clearent.setProperty("show-comments", true);
Clearent.payButton({
    "show-comments": true
});

show-customer-id :boolean

determines if customer-id field is shown on payment popup
Type:
  • boolean
Since:
  • 1.2016.06.02
Default Value:
  • false
See:
Examples
Clearent.setProperty("show-customer-id", true);
Clearent.payButton({
    "show-customer-id": true
});

show-description :boolean

determines if description field is shown on payment popup. Description field is used for card description also and is therefore not available when using show-save-card-option.
Type:
  • boolean
Since:
  • 1.2016.06.02
Default Value:
  • false
See:
Examples
Clearent.setProperty("show-description", true);
Clearent.payButton({
    "show-description": true
});

show-dob-year :boolean

determines if dob-year field is shown on payment popup for ach
Type:
  • boolean
Since:
  • 1.2021.02.23
Default Value:
  • false
See:
Examples
Clearent.setProperty("show-dob-year", true);
Clearent.payButton({
    "show-dob-year": true
});

show-email-address :boolean

determines if email-address field is shown on payment popup
Type:
  • boolean
Since:
  • 1.2016.06.02
Default Value:
  • false
See:
Examples
Clearent.setProperty("show-email-address", true);
Clearent.payButton({
    "show-email-address": true
});

show-email-receipt-option :boolean

determines if "Send a receipt by email" option checkbox is available on the payment popup form
Type:
  • boolean
Since:
  • 1.2023.09.19
Default Value:
  • true
Examples
Clearent.setProperty("show-email-receipt-option", false);
Clearent.payButton({
    "show-email-receipt-option": false
});

show-inline :boolean

Shows the payment form inline instead of as a modal popup form.
Type:
  • boolean
Since:
  • 1.2018.05.15
Default Value:
  • false
Examples
Clearent.setProperty("show-inline","true");
Clearent.payButton({
    "show-inline": "true"
});

show-invoice :boolean

determines if invoice field is shown on payment popup
Type:
  • boolean
Since:
  • 1.2016.06.02
Default Value:
  • false
See:
Examples
Clearent.setProperty("show-invoice", true);
Clearent.payButton({
    "show-invoice": true
});

show-labels :boolean

Shows labels above entry fields.
Type:
  • boolean
Since:
  • 1.2018.05.04
Default Value:
  • false
Examples
Clearent.setProperty("show-labels","true");
Clearent.payButton({
    "show-labels": "true"
});

show-order-id :boolean

determines if order-id is shown on payment popup
Type:
  • boolean
Since:
  • 1.2016.06.02
Default Value:
  • false
See:
Examples
Clearent.setProperty("show-order-id", true);
Clearent.payButton({
    "show-order-id": true
});

show-purchase-order :boolean

determines if purchase-order field is shown on payment popup
Type:
  • boolean
Since:
  • 1.2016.06.02
Default Value:
  • false
See:
Examples
Clearent.setProperty("show-purchase-order", true);
Clearent.payButton({
    "show-purchase-order": true
});

show-sales-tax :boolean

determines if sales-tax-amount field is shown on payment popup
Type:
  • boolean
Since:
  • 1.2017.02.02
Default Value:
  • false
See:
Examples
Clearent.setProperty("show-sales-tax", true);
Clearent.payButton({
    "show-sales-tax": true
});

show-save-card-option :boolean

determines if "save this card" option checkbox is available on the payment popup form
Type:
  • boolean
Default Value:
  • false
See:
Examples
Clearent.setProperty("show-save-card-option", true);
Clearent.payButton({
    "show-save-card-option": true
});

show-shipping-address :boolean

determines if shipping address is shown on payment popup
Type:
  • boolean
Since:
  • 1.2016.06.02
Default Value:
  • false
See:
Examples
Clearent.setProperty("show-shipping-address", true);
Clearent.payButton({
    "show-shipping-address": true
});

show-swipe-option :boolean

shows a user option to swipe card. Card swipe devices must be connected to the user's device as a keyboard emulator. Contact your Clearent representative for supported swipe readers.
Type:
  • boolean
Since:
  • 1.2017.03.31
Default Value:
  • false
See:
Examples
Clearent.setProperty("show-swipe-option",true);
Clearent.payButton({
    "show-swipe-option": true
});

show-tip-amount :boolean

determines if tip-amount field is shown on payment popup
Type:
  • boolean
Since:
  • 1.2018.05.04
Default Value:
  • false
See:
Examples
Clearent.setProperty("show-tip-amount", true);
Clearent.payButton({
    "show-tip-amount": true
});

state-dropdown :boolean

determines if billing/shipping state field is a dropdown of US states (true) or a free-form entry field (false)
Type:
  • boolean
Since:
  • 1.2020.03.02
Default Value:
  • true
Examples
Clearent.setProperty("state-dropdown",false);
Clearent.payButton({
    "state-dropdown": false
});

state-label :string

text to appear above billing address, state dropdown field when show-labels is turned on
Type:
  • string
Since:
  • 1.2018.05.04
Default Value:
  • State
Examples
Clearent.setProperty("state-label","Enter State below");
Clearent.payButton({
    "state-label": "Enter State below"
});

state-missing-error :string

message to show when billing state is missing and configured as required.
Type:
  • string
Since:
  • 1.2020.04.15
Default Value:
  • "Address required and state is missing"
Examples
Clearent.setProperty("state-missing-error", "Please enter billing state");
Clearent.payButton({
    "state-missing-error": "Please enter billing state"
});

state-placeholder :string

text to appear in billing address state selector when state value has not yet been selected
Type:
  • string
Default Value:
  • State
Examples
Clearent.setProperty("state-placeholder","Select state");
Clearent.payButton({
    "state-placeholder": "Select state"
});

state-tooltip :string

tooltip to appear when focused on billing address state input field
Type:
  • string
Default Value:
  • (empty string)
Examples
Clearent.setProperty("state-tooltip","Select state");
Clearent.payButton({
    "state-tooltip": "Select state"
});

submit-pay-button-text :string

text to appear on the payment popup form's submit button; {$} is replaced with $ sign and amount at runtime (if set)
Type:
  • string
Default Value:
  • Pay {$} Now
See:
Examples
Clearent.setProperty("submit-pay-button-text","Make payment of {$}");
Clearent.payButton({
    "submit-pay-button-text": "Make payment of {$}"
});

outputs (assume amount == 22.50):
payment form submit button with text: "Make payment of $22.50"

submit-pay-method-button-text :string

text to appear on the add payment method popup form's submit button. This is used when request-type is token-only
Type:
  • string
Default Value:
  • Save Card
See:
Examples
Clearent.setProperty("submit-pay-method-button-text","Save Payment Method");
Clearent.payButton({
    "submit-pay-method-button-text": "Save Payment Method"
});

success-message :string

text to appear in the popup when transaction is successful.
Type:
  • string
Default Value:
  • Payment was successful.
Examples
Clearent.setProperty("success-message","Payment accepted.");
Clearent.payButton({
    "success-message": "Payment accepted."
});

summary-heading-text :string

text to appear above the required section of the payment popup form, which includes subtotal, sales tax, tip amount, and email address (for receipt).
Type:
  • string
Since:
  • 1.2023.09.19
Default Value:
  • "Payment Summary"
Examples
Clearent.setProperty("summary-heading-text", "Summary");
Clearent.payButton({
    "summary-heading-text": "Summary"
});

swipe-button-text :string

when show-swipe-option is true, a button is displayed to initiate a card swipe. This option sets the text of that button.
Type:
  • string
Since:
  • 1.2017.03.31
Default Value:
  • "Swipe Card"
See:
Examples
Clearent.setProperty("swipe-button-text","Swipe");
Clearent.payButton({
    "swipe-button-text": "Swipe"
});

tip-amount :string

tip amount for transaction; If tip-amount field is shown, this property is used to pre-populate the field.
Type:
  • string
Since:
  • 1.2018.05.04
Examples
Clearent.setProperty("tip-amount","3.51");
Clearent.payButton({
    "tip-amount": "3.51"
});

tip-amount-invalid-error :string

message to show when tip amount is invalid.
Type:
  • string
Since:
  • 1.2020.04.15
Default Value:
  • "Tip amount is not valid; Please include two decimal places (ex 1.00). Do not include $ symbol."
Examples
Clearent.setProperty("tip-amount-invalid-error", "Please enter valid tip amount; ex 2.55");
Clearent.payButton({
    "tip-amount-invalid-error": "Please enter valid tip amount; ex 2.55"
});

tip-amount-label :string

text to appear above tip amount input field when show-labels is turned on
Type:
  • string
Since:
  • 1.2018.05.04
Default Value:
  • Tip
See:
Examples
Clearent.setProperty("tip-amount-label","Enter tip amount below");
Clearent.payButton({
    "tip-amount-label": "Enter tip amount below"
});

tip-amount-missing-error :string

message to show when tip amount is missing and configured as required.
Type:
  • string
Since:
  • 1.2020.04.15
Default Value:
  • "Tip amount is missing"
Examples
Clearent.setProperty("tip-amount-missing-error", "Please enter tip amount");
Clearent.payButton({
    "tip-amount-missing-error": "Please enter tip amount"
});

tip-amount-placeholder :string

text to appear in tip-amount input field when tip-amount value has not yet been entered.
Type:
  • string
Since:
  • 1.2018.05.04
Default Value:
  • Enter tip
See:
Examples
Clearent.setProperty("tip-amount-placeholder","Enter tip amount");
Clearent.payButton({
    "tip-amount-placeholder": "Enter tip amount"
});

tip-amount-tooltip :string

tooltip to appear when hovering over or focused on tip-amount-amount input field.
Type:
  • string
Since:
  • 1.2018.05.04
Default Value:
  • (empty string)
See:
Examples
Clearent.setProperty("tip-amount-tooltip","Enter tip in $xx.xx format");
Clearent.payButton({
    "amount-tooltip": "Enter tip in $xx.xx format"
});

tooltip-mode :string

Determines how tooltips are show; hover = show when mouse hovers a field with a defined tooltip; focus = show when a field with a defined tooltip gets focus; none = tooltips are not shown on any fields even if tooltip is defined for field
Type:
  • string
Since:
  • 1.2018.02.16
Default Value:
  • focus
Examples
Clearent.setProperty("tooltip-mode","hover");
Clearent.payButton({
    "tooltip-mode": "hover"
});

total-amount-label :string

text to appear above total amount calculation when show-labels is turned on and payment type is card and at least two of the following are shown on the payment form: amount, sales tax amount, tip amount.
Type:
  • string
Default Value:
  • Total amount
See:
Examples
Clearent.setProperty("total-amount-label","Total amount");
Clearent.payButton({
    "amount-label": "Total amount"
});

track-format :string

track-format of swiper to be used. This field is required when using card swipes. Contact your Clearent representative for supported swipe readers. Supported formats include: MAGTEK, IDTECH, TRACK2
Type:
  • string
Since:
  • 1.2017.03.31
Default Value:
  • null
See:
Examples
Clearent.setProperty("track-format","MAGTEK");
Clearent.payButton({
    "track-format": "MAGTEK"
});

use-external-terminal :boolean

determines if transaction will be completed with an external terminal device; device must have been previously configured by Clearent.
Type:
  • boolean
Since:
  • 1.2017.05.30
Default Value:
  • false
Examples
Clearent.setProperty("use-external-terminal", true);
Clearent.payButton({
    "use-external-terminal": true
});

use-mobile-reader :boolean

shows mobile reader option so user can optionally complete the transaction using Clearent's mobile app using mobile audio-jack or bluetooth card reader. When set to true, using mobile reader is the default option.
Type:
  • boolean
Since:
  • 1.2019.06.25
Default Value:
  • false
Examples
Clearent.setProperty("use-mobile-reader", true);
Clearent.payButton({
    "use-mobile-reader": true
});

use-terminal-service-fee-setting :boolean

determines if HPP should apply a service fee to the transaction based on the terminal settings
Type:
  • boolean
Since:
  • 1.2021.02.26
Default Value:
  • true
Examples
Clearent.setProperty("use-terminal-service-fee-setting", true);
Clearent.payButton({
    "use-terminal-service-fee-setting": true
});

validate-account :boolean

use to enable or disable validate account for ach
Type:
  • boolean
Since:
  • 1.2020.07.02
Default Value:
  • false
Examples
Clearent.setProperty("validate-account", true);
Clearent.payButton({
    "validate-account": true;
});

zip-label :string

text to appear above billing address, zip input field when show-labels is turned on
Type:
  • string
Since:
  • 1.2018.05.04
Default Value:
  • Zip
Examples
Clearent.setProperty("zip-label","Enter Zip below");
Clearent.payButton({
    "zip-label": "Enter Zip below"
});

zip-missing-error :string

message to show when billing zip is missing and configured as required.
Type:
  • string
Since:
  • 1.2020.04.15
Default Value:
  • "Address required and zip is missing"
Examples
Clearent.setProperty("zip-missing-error", "Please enter billing zip");
Clearent.payButton({
    "zip-missing-error": "Please enter billing zip"
});

zip-placeholder :string

text to appear in billing address zip code input field when zip code value has not yet been entered
Type:
  • string
Default Value:
  • Zip
Examples
Clearent.setProperty("zip-placeholder","Zip code");
Clearent.payButton({
    "zip-placeholder": "Zip code"
});

zip-tooltip :string

tooltip to appear when focused on billing address zip code input field
Type:
  • string
Default Value:
  • (empty string)
Examples
Clearent.setProperty("zip-tooltip","Enter your billing zip/postal code");
Clearent.payButton({
    "zip-tooltip": "Enter your billing zip/postal code"
});

Methods

addToken(token)

Adds a customer saved token for option of "Select saved card".
Parameters:
Name Type Description
token object object containing token properties.
Properties
Name Type Argument Description
token string The value of the card token to use.
cardType string <optional>
 The card type (MasterCard, Visa, etc) of the specified token.
description string <optional>
 The description of the card to display to the user when picking a saved card. ex. "Business travel card". If not provided, the card will appear in the selection as "Card ending in ####" where #### is the last four digits of the saved card.
Example
Clearent.addToken({
         "token":"1111111111111111111111",
         "cardType":"Visa",
         "description":"Business travel card"
});

addTokens(tokens)

Adds customer saved tokens for option of "Select saved card". Convenience method to add multiple tokens at once.
Parameters:
Name Type Description
tokens Array array of token objects.
Since:
  • 1.2019.10.11
See:
Example
Clearent.addToken([
  {"token":"1111111111111111111111", "cardType":"Visa", "description":"Business travel card"},
  {"token":"ach_1100000000019441", "description":"Business checking"}
]);

getProperty(property)

Gets a property of the Clearent HPP popup
Parameters:
Name Type Description
property string The property name to get.
Example
Clearent.getProperty("amount");

payButton(obj)

Creates the payment button (Pay Now) that is used to launch the popup payment form
Parameters:
Name Type Description
obj object (optional) JSON formatted object of properties to set when instantiating the payment button.
Example
// Sandbox URL for testing; use Sandbox MID and TID
<script type="text/javascript" id="clearent-hpp"  src="https://hpp-sb.clearent.net/hpp/{MID}/{TID}"></script>
// Production URL for live transactions; use Production MID and TID
<script type="text/javascript" id="clearent-hpp" src="https://hpp.clearent.net/hpp/{MID}/{TID}"></script>
<script>
// create payment button
Clearent.payButton({
   "amount": "3.50"
});
</script>

refreshPaymentForm()

Runs all the form paint events that normally occur the payment type (ach or card) is changed. If you are updating some of the billing address properties when the user changes payment type, this method will help refresh the form
Since:
  • 1.2020.06.26
See:
Example
Clearent.refreshPaymentForm();

setProperty(property, value)

Sets a property of the Clearent HPP popup
Parameters:
Name Type Description
property string The property name to set.
value string The value of the property being set.
Example
Clearent.setProperty("amount","22.50");

Type Definitions

ClearentOnError(responseRaw, responseJSON)

Callback on payment response; if defined on host this function is called only if the transaction was not successful. The function will receive a raw server response as well as a JSON-formatted response data object.
Parameters:
Name Type Description
responseRaw string Raw string from server.
responseJSON object JSON formatted response data of payment call.
See:
Example
function ClearentOnError(responseRaw,responseJSON){
     console.log("transaction failed");
     console.log(responseRaw);
     console.log(responseJSON);
 }

ClearentOnMobilePopupClosed()

Callback on mobile payment popup closed; if defined on host this function is called whenever the "Complete transaction using mobile application" popup window is closed.
Since:
  • 1.2019.07.31
See:
Example
function ClearentOnMobilePopupClosed(){
     // user closed mobile popup
     // redirect or take any other action needed
 }

ClearentOnPaymentTypeChanged(paymentType)

Callback on user change of payment type (card or ach payment)
Parameters:
Name Type Description
paymentType string card | ach indicating if user clicked pay by "card" or "check"
Since:
  • 1.2020.06.26
See:
  • refreshPaymentForm()
Example
function ClearentOnPaymentTypeChanged(paymentType){
     console.log("paymentType set to : " + paymentType);
     // do some stuff . . .
     Clearent.refreshPaymentForm();
 }

ClearentOnPopupClosed(firstClose)

Callback on payment popup closed; if defined on host this function is called whenever the payment popup is closed.
Parameters:
Name Type Description
firstClose boolean Boolean indicating if this was the first time the popup was closed on this visit to the page.
Since:
  • 1.2016.06.02
See:
Example
function ClearentOnPopupClosed(firstClose){
     console.log("First time closed? : " + firstClose);
 }

ClearentOnPopupOpened(firstOpen)

Callback on payment popup opened; if defined on host this function is called whenever the payment popup is opened.
Parameters:
Name Type Description
firstOpen boolean Boolean indicating if this was the first time the popup was opened on this visit to the page.
Since:
  • 1.2016.06.02
See:
Example
function ClearentOnPopupOpened(firstOpen){
     console.log("First time opened? : " + firstOpen);
 }

ClearentOnSuccess(responseRaw, responseJSON)

Callback on payment response; if defined on host this function is called only if the transaction was successful. The function will receive a raw server response as well as a JSON-formatted response data object.
Parameters:
Name Type Description
responseRaw string Raw string from server.
responseJSON object JSON formatted response data of payment call.
See:
Example
function ClearentOnSuccess(responseRaw,responseJSON){
     console.log("transaction successful");
     // raw response can be sent back to server to verify that
     // response signature matches and ressponse came from Clearent
     console.log(responseRaw);
     console.log(responseJSON);
 }

ClearentValidation(messages)

Callback on payment form validation; if defined on host this function is called for each field validation event with a JavaScript array of validation messages. Array will be empty if field information is valid.
Parameters:
Name Type Description
messages array JavaScript array of validation messages.
Since:
  • 2019.09.24
Example
function ClearentValidation(messages){
   // empty messages array indicates no validation errors
	  console.log("---- validation messages ----");
	  messages.forEach(message => console.log(message))
 }
Clearent

Hosted on GitHub Pages — Theme by orderedlist