Clearent JavaScript SDK

Configuration

Overview Security Considerations Configuration Styling / Branding Digital Wallets IDTech VP8300 Examples
Clearent JavaScript SDK is Highly Configurable

Clearent's JavaScript SDK 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

accountNumberMasked :boolean

Determines if Account Number field should be masked when field is not active. If true, when the field has focus you can see the data, when the field loses focus, the data is obfuscated.
Type:
  • boolean
Since:
  • 2020.07.02
Default Value:
  • true
Example
ClearentSDK.init({
    "baseUrl": "https://gateway-sb.clearent.net",
    "pk": "YOUR_PUBLIC_KEY_HERE",
    "accountNumberMasked": false
});

accountNumberPlaceholder :string

text to appear in Account Number input field when Routing Number value has not yet been entered
Type:
  • string
Since:
  • 2020.06.30
Default Value:
  • Account Number
Example
ClearentSDK.init({
    "baseUrl": "https://gateway-sb.clearent.net",
    "pk": "YOUR_PUBLIC_KEY_HERE",
    "accountNumberPlaceholder": "Bank account number"
});

accountTypePlaceholder :string

text to appear in Account Type input field when Account Type has not yet been selected
Type:
  • string
Since:
  • 2020.07.06
Default Value:
  • Account Type
Example
ClearentSDK.init({
    "baseUrl": "https://gateway-sb.clearent.net",
    "pk": "YOUR_PUBLIC_KEY_HERE",
    "accountTypePlaceholder": "Bank Account Type"
});

allowAutoComplete :boolean

Determines if autocomplete is enabled for payment fields. Set to true for cardholder-facing implementation and false for merchant-facing implementation
Type:
  • boolean
Since:
  • 2019.01.11
Default Value:
  • true
Example
ClearentSDK.init({
    "baseUrl": "https://gateway-sb.clearent.net",
    "pk": "YOUR_PUBLIC_KEY_HERE",
    "allowAutoComplete": false
});

allowEmbedded :boolean

determines if javascript-sdk's host page can be embedded in another page
Type:
  • boolean
Since:
  • 2019.10.08
Default Value:
  • true
Example
ClearentSDK.init({
    "baseUrl": "https://gateway-sb.clearent.net",
    "pk": "YOUR_PUBLIC_KEY_HERE",
    "allowEmbedded": false
});

baseUrl :string

Clearent gateway base url. Can be set to sandbox or production url. (required)
Type:
  • string
Since:
  • 2019.01.11
Default Value:
  • null
Example
ClearentSDK.init({
    "baseUrl": "https://gateway-sb.clearent.net",
    "pk": "YOUR_PUBLIC_KEY_HERE"
});

blockMetaKeys :MODES

Determines if meta key combinations (alt or ctrl) are blocked for the hosting page. Some card readers may generate keystrokes that include meta keys even after the card read is complete. This can cause strange behaviors in the browser window (zooming in or opening print dialogs for example). This will block the key metaKey combinations on all pages that contain the Clearent script. Note: enableReader must be set to true also or this setting will have no effect. Certain meta-keys are filtered by the browser first and cannot be blocked such as ctrl-w (close window), ctrl-n (new window), or ctrl-t (new tab)
Type:
  • MODES
Since:
  • 2012.07.28
Default Value:
  • false
See:
Example
ClearentSDK.init({
    "baseUrl": "https://gateway-sb.clearent.net",
    "pk": "YOUR_PUBLIC_KEY_HERE",
    "enableReader": "true",
    "blockMetaKeys": "true"
});

cardFormatted :boolean

Determines if card field should be formatted on entry. Formatting shows the card spaced in groups, similiar to how the card number is displayed on the physical card. Recommended true for cardholder-facing implementations.
Type:
  • boolean
Since:
  • 2019.01.11
Default Value:
  • true
Example
ClearentSDK.init({
    "baseUrl": "https://gateway-sb.clearent.net",
    "pk": "YOUR_PUBLIC_KEY_HERE",
    "cardFormatted": false
});

cardMasked :boolean

Determines if card field should be masked when field is not active. If true, when the field has focus you can see the data, when the field loses focus, the data is obfuscated. Recommended true for cardholder-facing implementations.
Type:
  • boolean
Since:
  • 2019.01.11
Default Value:
  • true
Example
ClearentSDK.init({
    "baseUrl": "https://gateway-sb.clearent.net",
    "pk": "YOUR_PUBLIC_KEY_HERE",
    "cardMasked": false
});

cardPlaceholder :string

text to appear in card input field when card value has not yet been entered
Type:
  • string
Since:
  • 2019.01.11
Default Value:
  • Card number
Example
ClearentSDK.init({
    "baseUrl": "https://gateway-sb.clearent.net",
    "pk": "YOUR_PUBLIC_KEY_HERE",
    "cardPlaceholder": "Enter card number"
});

cardReadCompleteCallback :string

Name of function to call to receive card read complete messages.
Type:
  • string
Since:
  • 2018.02.07
Default Value:
  • ClearentCardReadComplete
See:
Example
ClearentSDK.init({
    "baseUrl": "https://gateway-sb.clearent.net",
    "pk": "YOUR_PUBLIC_KEY_HERE",
    "cardReadCompleteCallback": "myCustomCardReadCompleteHandler"
});

cardReadStartCallback :string

Name of function to call to receive card read start messages.
Type:
  • string
Since:
  • 2018.02.07
Default Value:
  • ClearentCardReadStart
See:
Example
ClearentSDK.init({
    "baseUrl": "https://gateway-sb.clearent.net",
    "pk": "YOUR_PUBLIC_KEY_HERE",
    "cardReadStartCallback": "myCustomCardReadStartHandler"
});

clearFormOnSuccess :boolean

Determines if the form should be cleared on a successful call to getPaymentToken. This may be useful if reusing the form in a back office implementation.
Type:
  • boolean
Since:
  • 2019.07.08
Default Value:
  • false
See:
Example
ClearentSDK.init({
    "baseUrl": "https://gateway-sb.clearent.net",
    "pk": "YOUR_PUBLIC_KEY_HERE",
    "clearFormOnSuccess": true
});

cvcMasked :boolean

Determines if csc/csc field should be masked when field is not active. If true, when the field has focus you can see the data, when the field loses focus, the data is obfuscated. Recommended true for cardholder-facing implementations.
Type:
  • boolean
Since:
  • 2019.01.11
Default Value:
  • true
Example
ClearentSDK.init({
    "baseUrl": "https://gateway-sb.clearent.net",
    "pk": "YOUR_PUBLIC_KEY_HERE",
    "cvcMasked": false
});

cvcPlaceholder :string

text to appear in CVC input field when CVC value has not yet been entered
Type:
  • string
Since:
  • 2019.01.11
Default Value:
  • CSC
Example
ClearentSDK.init({
    "baseUrl": "https://gateway-sb.clearent.net",
    "pk": "YOUR_PUBLIC_KEY_HERE",
    "cvcPlaceholder": "security code"
});

cvcRequired :boolean

determines if user must enter a value for cvc input
Type:
  • boolean
Since:
  • 2019.01.11
Default Value:
  • true
Example
ClearentSDK.init({
    "baseUrl": "https://gateway-sb.clearent.net",
    "pk": "YOUR_PUBLIC_KEY_HERE",
    "cvcRequired": false
});

deviceType :string

Device type of external keyboard-emulation card reader to be used. This field is required when enabling external card reader. Contact your Clearent representative for supported external readers. Supported formats include: IDTECH
Type:
  • string
Since:
  • 2019.01.11
Default Value:
  • null
See:
Example
ClearentSDK.init({
    "baseUrl": "https://gateway-sb.clearent.net",
    "pk": "YOUR_PUBLIC_KEY_HERE",
    "enableReader": "true"
    "deviceType": "IDTECH"
});

enableAch :boolean

enables the option for the customer to pay with online-check.
Type:
  • boolean
Since:
  • 1.2020.06.30
Default Value:
  • false
Example
ClearentSDK.init({
    "baseUrl": "https://gateway-sb.clearent.net",
    "pk": "YOUR_PUBLIC_KEY_HERE",
    "enableAch": true
});

enableReader :boolean

Determines if external readers are support. Creates a "Card Reader" button in the card field to begin reading from external keyboard-emulation card reader. Contact your Clearent representative for supported external readers.
Type:
  • boolean
Since:
  • 2019.01.11
Default Value:
  • false
See:
Example
ClearentSDK.init({
    "baseUrl": "https://gateway-sb.clearent.net",
    "pk": "YOUR_PUBLIC_KEY_HERE",
    "enableReader": "true",
    "deviceType": "IDTECH"
});

entryModeChangeCallback :string

Name of function to call to receive card entry mode change messages.
Type:
  • string
Since:
  • 2018.02.07
Default Value:
  • ClearentEntryModeChange
See:
Example
ClearentSDK.init({
    "baseUrl": "https://gateway-sb.clearent.net",
    "pk": "YOUR_PUBLIC_KEY_HERE",
    "entryModeChangeCallback": "myCustomEntryModeChangeHandler"
});

errorCallback :string

Name of function to call on getPaymentToken() response; if defined on host this function is called if the getPaymentToken was successful.
Type:
  • string
Since:
  • 2019.01.11
Default Value:
  • ClearentTokenError
See:
Example
ClearentSDK.init({
    "baseUrl": "https://gateway-sb.clearent.net",
    "pk": "YOUR_PUBLIC_KEY_HERE",
    "errorCallback": "myCustomErrorHandler"
});

expDateFormatted :boolean

Determines if expiration date field should be formatted on entry. Formatting shows the expiration date spaced in groups, similiar to how the date is displayed on the physical card. Recommended true for cardholder-facing implementations.
Type:
  • boolean
Since:
  • 2019.01.11
Default Value:
  • true
Example
ClearentSDK.init({
    "baseUrl": "https://gateway-sb.clearent.net",
    "pk": "YOUR_PUBLIC_KEY_HERE",
    "expDateFormatted": false
});

expDateMasked :boolean

Determines if expiration date field should be masked when field is not active. If true, when the field has focus you can see the data, when the field loses focus, the data is obfuscated. Recommended true for cardholder-facing implementations.
Type:
  • boolean
Since:
  • 2019.01.11
Default Value:
  • true
Example
ClearentSDK.init({
    "baseUrl": "https://gateway-sb.clearent.net",
    "pk": "YOUR_PUBLIC_KEY_HERE",
    "expDateMasked": false
});

expDatePlaceholder :string

text to appear in expiration date input field when expiration date value has not yet been entered
Type:
  • string
Since:
  • 2019.01.11
Default Value:
  • MMYY
Example
ClearentSDK.init({
    "baseUrl": "https://gateway-sb.clearent.net",
    "pk": "YOUR_PUBLIC_KEY_HERE",
    "expDatePlaceholder": "mm/yy"
});

individualNamePlaceholder :string

text to appear in Individual Name input field when Individual Name has not yet been selected
Type:
  • string
Since:
  • 2020.07.06
Default Value:
  • Name on account
Example
ClearentSDK.init({
    "baseUrl": "https://gateway-sb.clearent.net",
    "pk": "YOUR_PUBLIC_KEY_HERE",
    "individualNamePlaceholder": "Name of account owner"
});

initialMode :string

WARNING: If set to reader (keyboard reader mode), the payment form will be actively listening for keystrokes generated from the card reader. Any keystrokes entered by the user will become part of the card read and could result in errors and retries. Please test to ensure this will work for your specific use case.

Allows you to have the payment form open in manual card entry or keyboard reader mode. Optional modes: manual (default) | reader (ready to read swipe or dip). Has no effect unless enableReader is true.
Type:
  • string
Since:
  • 2020.08.17
Default Value:
  • manual
See:
Example
ClearentSDK.init({
    "baseUrl": "https://gateway-sb.clearent.net",
    "pk": "YOUR_PUBLIC_KEY_HERE",
    "enableReader": "true",
    "deviceType": "IDTECH",
    "initialMode": "reader"
});

paymentFormId :string

ID of DIV element to hold payment form. May be changed from default to avoid conflicts with existing code and page element ids.
Type:
  • string
Since:
  • 2019.07.08
Default Value:
  • payment-form
Example
ClearentSDK.init({
    "baseUrl": "https://gateway-sb.clearent.net",
    "pk": "YOUR_PUBLIC_KEY_HERE",
    "paymentFormId": "clearent-payment-form"
});

paymentTypeCallback :string

Name of function to call on onPaymentTypeChange(); if defined on host this function is called if the payment type is changed. Values are either card or ach. Note this can only be used when ach is enabled.
Type:
  • string
Since:
  • 2020.07.06
Default Value:
  • ClearentOnPaymentTypeChange
Example
ClearentSDK.init({
    "baseUrl": "https://gateway-sb.clearent.net",
    "pk": "YOUR_PUBLIC_KEY_HERE",
    "enableAch": true,
    "paymentTypeCallback": "myCustomPaymentTypeChangeHandler"
});

pk :string

public key (required)
Type:
  • string
Since:
  • 2019.01.11
Default Value:
  • null
Example
ClearentSDK.init({
    "baseUrl": "https://gateway-sb.clearent.net",
    "pk": "YOUR_PUBLIC_KEY_HERE"
});

routingNumberMasked :boolean

Determines if routing number field should be masked when field is not active. If true, when the field has focus you can see the data, when the field loses focus, the data is obfuscated.
Type:
  • boolean
Since:
  • 2020.07.02
Default Value:
  • true
Example
ClearentSDK.init({
    "baseUrl": "https://gateway-sb.clearent.net",
    "pk": "YOUR_PUBLIC_KEY_HERE",
    "routingNumberMasked": false
});

routingNumberPlaceholder :string

text to appear in Routing Number input field when Routing Number value has not yet been entered
Type:
  • string
Since:
  • 2020.06.30
Default Value:
  • Routing Number
Example
ClearentSDK.init({
    "baseUrl": "https://gateway-sb.clearent.net",
    "pk": "YOUR_PUBLIC_KEY_HERE",
    "routingNumberPlaceholder": "Bank Routing Number"
});

showValidationMessages :boolean

Determines if validation messages are displayed below the payment form. If you choose to handle messages elsewhere, set to false and configure validationMessagesCallback.
Type:
  • boolean
Since:
  • 2019.01.11
Default Value:
  • true
See:
  • validationMessagesCallback
Example
ClearentSDK.init({
    "baseUrl": "https://gateway-sb.clearent.net",
    "pk": "YOUR_PUBLIC_KEY_HERE",
    "showValidationMessages": false
});

styles :string

String of styles to be applied to the iframed contents. You can examine the iframe via your browser's developer tools for id's and classes to use for supplementing page styles.
Type:
  • string
Since:
  • 2019.01.11
Default Value:
  • null
Example
ClearentSDK.init({
    "baseUrl": "https://gateway-sb.clearent.net",
    "pk": "YOUR_PUBLIC_KEY_HERE",
    "styles": ".form-control{color: blue;}.form-control:focus{color: purple;}"
});

successCallback :string

Name of function to call on getPaymentToken() response; if defined on host this function is called if the getPaymentToken was successful.
Type:
  • string
Since:
  • 2019.01.11
Default Value:
  • ClearentTokenSuccess
See:
Example
ClearentSDK.init({
    "baseUrl": "https://gateway-sb.clearent.net",
    "pk": "YOUR_PUBLIC_KEY_HERE",
    "successCallback": "myCustomSuccessHandler"
});

validationCallback :string

Name of function to call to receive validation messages.
Type:
  • string
Since:
  • 2019.01.11
Default Value:
  • ClearentValidation
See:
Example
ClearentSDK.init({
    "baseUrl": "https://gateway-sb.clearent.net",
    "pk": "YOUR_PUBLIC_KEY_HERE",
    "validationCallback": "myCustomValidationHandler"
});

Methods

addMetaKeyBlocker()

Blocks meta key combinations (alt or ctrl) for the hosting page. Some card readers may generate keystrokes that include meta keys even after the card read is complete. This can cause strange behaviors in the browser window (zooming in or opening print dialogs for example). This will block the key metaKey combinations from executing in the browser. Note: enableReader must be set to true also or this setting will have no effect. Certain meta-keys are filtered by the browser first and cannot be blocked such as ctrl-w (close window), ctrl-n (new window), or ctrl-t (new tab)
Since:
  • 2012.07.28
See:
Example
<script>
ClearentSDK.addMetaKeyBlocker();
</script>

getPaymentToken()

Gets a paymentToken for gateway transactions. Calls successCallback on success or errorCallback on error.
Since:
  • 2018.01.11
See:
Example
ClearentSDK.getPaymentToken();

init(obj)

Initializes the ClearentSDK and creates the payment entry from.
Parameters:
Name Type Description
obj object JSON formatted object of properties to set when initializing the ClearentSDK.
Since:
  • 2018.01.11
Example
// Sandbox URL for testing
//  use Sandbox public key
<script src="https://gateway-sb.clearent.net/js-sdk/js/clearent-host.js"></script>
<script>
ClearentSDK.init({
    "baseUrl": "https://gateway-sb.clearent.net",
    "pk": "YOUR_SANDBOX_PUBLIC_KEY_HERE",
});
</script>

removeMetaKeyBlocker()

Removes meta-key blocker enabled via blockMetaKeys property or addMetaKeyBlocker method. Useful if you need to re-enable meta-keys after completing the transaction and are still on the same page. Re-enabling this will restore functions such as print (ctrl-p), find (ctrl-f) and others.
Since:
  • 2012.07.28
See:
Example
<script>
ClearentSDK.removeMetaKeyBlocker();
</script>

reset()

Resets the javascript sdk. This will completely destroy the ClearentIframe. Once this method is called you may call Clearent.init again.
Since:
  • 2020.07.13
Example
ClearentSDK.reset();

Type Definitions

ClearentCardReadComplete()

Callback on when the SDK has detected the last character from the USB card reader; this function is called only if defined on host. To remain out of PCI scope, not card data or EMV data is returned in this call.
Since:
  • 2018.02.07
See:
Example
function ClearentCardReadComplete(){
     console.log("Card Read is complete");
 }

ClearentCardReadStart()

Callback on when the SDK has detected the first character from the USB card reader; this function is called only if defined on host.
Since:
  • 2018.02.07
See:
Example
function ClearentCardReadStart(){
     console.log("Card Read has started");
 }

ClearentEntryModeChange(mode)

Callback on entryModeChange; if defined on host this function is called if the entry mode (manual or swipe) is changed.
Parameters:
Name Type Description
mode string manual|emv_kb_reader current mode of the SDK; manual entry of card information or card reader mode for EVM dip/swipe/tap
Since:
  • 2018.02.07
See:
Example
function ClearentEntryModeChange(mode){
     console.log("User set SDK to mode: ", mode);
 }

ClearentOnPaymentTypeChange(paymentType)

Callback on getPaymentToken response; if defined on host this function is called if getPaymentToken was successful. The function will receive a raw server response as well as a JSON-formatted response data object.
Parameters:
Name Type Description
paymentType string changed by payment type change event.
Since:
  • 2020.07.06
Example
function ClearentOnPaymentTypeChange(paymentType) {
     console.log("Payment Type was changed to: " + paymentType);
 }

ClearentTokenError(responseRaw, responseJSON)

Callback on getPaymentToken response; if defined on host this function is called if getPaymentToken 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.
Since:
  • 2018.01.11
See:
Example
function ClearentTokenError(responseRaw, responseJSON){
     console.log("ClearentTokenError");
     console.log(responseRaw);
     console.log(responseJSON);
 }

ClearentTokenSuccess(responseRaw, responseJSON)

Callback on getPaymentToken response; if defined on host this function is called if getPaymentToken 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.
Since:
  • 2018.01.11
See:
Example
function ClearentTokenSuccess(responseRaw,responseJSON){
     console.log("ClearentTokenSuccess");
     console.log(responseRaw);
     console.log(responseJSON);
     // now you can send the token to your server
     // to complete the transaction via mobile-gateway
 }

ClearentValidation(messages)

Callback on payment form validation; if defined on host this function is called for each field validation event with a JavaScript array of validation messages. Array will be empty if field information is valid.
Parameters:
Name Type Description
messages array JavaScript array of validation messages.
Since:
  • 2018.01.11
See:
Example
function ClearentValidation(messages) {
     console.log("ClearentValidation");
     console.log(messages);
     // you can handle these messages and display in your own form
     // empty messages array indicates no validation errors
 }
Clearent

Hosted on GitHub Pages — Theme by orderedlist