Configuration and Setup

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:
  • Card description
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


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


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


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


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.
Type:
  • string
Since:
  • 1.2017.03.31
Default Value:
  • null
See:
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 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