Clearent Hosted Payment Page

Documentation and examples

Overview Security Considerations Configuration Styling / Branding 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-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-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-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-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-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-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-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-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"
});

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 card-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"
});

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-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-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-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"
});

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"
});

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
var 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-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-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-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", "order-id", "purchase-order".
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-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-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-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-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-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-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"
});

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-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-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
});

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

For Paylink only. Shows the merchant name below the logo and above the header text
Type:
  • string
Since:
  • 1.2019.01.10
Default Value:
  • null
Examples
Clearent.setProperty("merchant-name", "Merchant Name");
Clearent.payButton({
    "merchant-name", "Merchant Name"
});

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-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:
  • Pay by Check
See:
Examples
Clearent.setProperty("payment-label-ach", "Pay by Check");
Clearent.payButton({
    "payment-label-ach": "Pay by Check"
});

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"
});

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-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-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"
});

request-type :string

Type of transaction to run; SALE, AUTH or CARD-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-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-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-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-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-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-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"
});

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-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-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-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-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-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-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-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-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-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-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-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-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-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 card-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."
});

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-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-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"
});

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
});

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-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(obj)

Adds a customer saved token for option of "Select saved card".
Parameters:
Name Type Description
obj 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"
});

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 public key
<script type="text/javascript" id="clearent-hpp" src="https://hpp-sb.clearent.net/js/clearent.js"></script>
// Production URL for live transactions; use Production public key
<script type="text/javascript" id="clearent-hpp" src="https://hpp.clearent.net/js/clearent.js"></script>
<script>
// create payment button
Clearent.payButton({
   "pk": "your public key goes here"
});
</script>

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);
 }

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);
 }
Clearent

Hosted on GitHub Pages — Theme by orderedlist