Configuration and Setup

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


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


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


address-tooltip :string

tooltip to appear when focused on billing address, address input field
Type:
  • string

Default Value:

  • (empty string)
Examples


amount :string

sale transaction amount
Type:
  • string
Examples


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


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


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


cancel-button-text :string

text to appear on the payment popup form’s cancel button
Type:
  • string

Default Value:

  • Cancel
Examples


card :string

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


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


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:

  • CVC

See:

Examples


card-description-tooltip :string

tooltip to appear when focused on card description input field
Type:
  • string

Default Value:

  • (empty string)
Examples


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


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


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


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


city-tooltip :string

tooltip to appear when focused on billing address city input field
Type:
  • string

Default Value:

  • (empty string)
Examples


close-button-text :string

text to appear on the payment popup form’s close button after successful transaction
Type:
  • string

Default Value:

  • Close
Examples


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


comments-placeholder :string

default text to appear in comments input field
Type:
  • string

Since:

  • 1.2016.06.02

Default Value:

  • Comments

See:

Examples


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


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


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


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


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


cvc-required :boolean

determines if user must enter a value for cvc input
Type:
  • boolean

Default Value:

  • true
Examples


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


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


description-placeholder :string

default text to appear in description input field
Type:
  • string

Since:

  • 1.2016.06.02

Default Value:

  • Description

See:

Examples


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


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


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


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


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


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


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


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


first-name-tooltip :string

tooltip to appear when focused on billing address first name input field
Type:
  • string

Default Value:

  • (empty string)
Examples


heading-text :string

text to appear in the haader section of the payment popup form
Type:
  • string

Default Value:

  • Enter Payment Information
Examples


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


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


invoice-placeholder :string

default text to appear in invoice input field
Type:
  • string

Since:

  • 1.2016.06.02

Default Value:

  • Invoice

See:

Examples


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


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


last-name-tooltip :string

tooltip to appear when focused on billing address last name input field
Type:
  • string

Default Value:

  • (empty string)
Examples


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


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


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


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


pay-button-text :string

text to appear on the button that launches the payment popup form
Type:
  • string

Default Value:

  • Pay Now
Examples


pk :string

public key
Type:
  • string

Default Value:

  • null
Examples


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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


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

See:

Examples


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


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


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


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


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


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


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


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


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


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


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


shipping-state-placeholder :string

text to appear in shipping address state input field when state value has not yet
been entered
Type:
  • string

Since:

  • 1.2016.06.02

Default Value:

  • State
Examples


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


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


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


show-billing-address :boolean

determines if billing address is shown on payment popup
Type:
  • boolean

Default Value:

  • false

See:

Examples


show-comments :boolean

determines if comments field is shown on payment popup
Type:
  • boolean

Since:

  • 1.2016.06.02

Default Value:

  • false

See:

Examples


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


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


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


show-invoice :boolean

determines if invoice field is shown on payment popup
Type:
  • boolean

Since:

  • 1.2016.06.02

Default Value:

  • false

See:

Examples


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


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


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


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


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


state-placeholder :string

text to appear in billing address state input field when state value has not yet
been entered
Type:
  • string

Default Value:

  • State
Examples


state-tooltip :string

tooltip to appear when focused on billing address state input field
Type:
  • string

Default Value:

  • (empty string)
Examples


submit-pay-button-text :string

text to appear on the payment popup form’s submit button; {$} is replaced with
amount at runtime (if set)
Type:
  • string

Default Value:

  • Pay ${$} Now

See:

Examples


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


success-message :string

text to appear in the popup when transaction is successful.
Type:
  • string

Default Value:

  • Payment was successful.
Examples


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


zip-tooltip :string

tooltip to appear when focused on billing address zip code input field
Type:
  • string

Default Value:

  • (empty string)
Examples

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


getProperty(property)

Gets a property of the Clearent HPP popup
Parameters:
Name Type Description
property string The property name to get.
Example


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


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

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


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


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


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