LogoLogo
API ReferencesGithubSupport CenterStatus pageBecome a Partner
  • Getting Started
    • Welcome
    • Our Products
  • Integration Process
  • Devices
    • Dejavoo
    • PAX
    • ID TECH
  • Become a Partner
  • Developer Resources
    • Overview
    • Sandbox & Production Environments
  • Testing Integration
    • Test Cards & ACH Accounts
    • Onboarding API Result Codes
    • Transaction Error Generation Data
    • Card Response & Result Codes
      • Card Error Response Codes
      • Card Transaction Result Codes
      • CSC Response Codes
      • AVS Response Codes
      • Duplicate Transaction Settings
    • ACH Request Validation & Return Codes
      • ACH Request Validation Codes
      • ACH Return Codes
  • API Catalog
    • Merchant Onboarding APIs
    • Transaction (Quest) APIs
    • Automated Merchant Onboarding Setup API
    • Reporting API
  • Webhooks
    • Prerequisites
    • Transaction Webhook
    • Onboarding Webhooks
      • Application Status
      • Application Fixes
      • Equipment Tracking & Activation
        • Equipment Tracking
        • Equipment Activation
  • Merchant Onboarding
    • Overview
  • Automated Merchant Onboarding
    • Prerequisites
    • Working with Automated Merchant Onboarding
      • Generating a Merchant Application
      • Completing the Application
      • Modifying Default Merchant Pricing
        • Retrieving Existing Pricing Templates
        • Modifying Pricing Fees & Completing Merchant Application Record
    • Merchant Onboarding Status Webhooks
    • Configuring Automated Merchant Onboarding
  • Merchant Onboarding via Partner Portal
    • Starting New Application
    • Adding Hierarchy & Compensation Details
    • Entering Business Information
    • Entering Profile Details
    • Conducting the Site Survey
    • Configuring Pricing Details
    • Adding Banking Information
    • Adding Equipment
    • Submitting Signature
    • Reviewing & Submitting Application
    • Viewing Application Summary
  • Merchant Onboarding via API
    • Prerequisites
    • Understanding Integration
    • Working with Merchant Onboarding API
      • Creating a Merchant Profile
      • Completing the Merchant Application
        • Gathering Merchant Demographics
        • Configuring Merchant Pricing
        • Ordering and Setting Up Equipment
      • Submitting the Signature
      • Submitting the Application
  • Payment Processing Solutions
    • Overview
    • Cloud EMV
      • Working with Cloud EMV
        • Direct Data Transfer to Clearent's Cloud
        • Payment Authorization Process via Clearent's Quest Payment Gateway
    • JavaScript SDK
      • Prerequisites
        • Browser Support
      • Working with JavaScript SDK
        • Adding the Payment Form
        • Formatting the Payment Form
        • Processing the Payment
        • Using Apple Pay for Web
        • Using Google Pay for Web
        • Using IDTech VP8300
      • Card Validations
        • Card Number Validation
        • Card Expiration Date Validation
        • Card CSC/CVC Validation
      • Configuring with JavaScript SDK
        • Using Members
        • Using Methods
  • Hosted Payments
    • Prerequisites
      • Browser Support
    • Working with Hosted Payments
      • Configuring the Pay Now Button
      • Configuring Payment Page with an Amount Field
      • Configuring Payment Page with an Optional Billing Address and Headline Text
      • Configuring Payment Page with the Save Card Option
      • Configuring the Add Payment Method Button
      • Styling Your Brand on the Payment Page
      • Configuring Apple Pay for Web
      • Configuring Hosted Payment Page Using Members
      • Configuring Hosted Payment Page Using Methods
      • Configuring Hosted Payment Page Using Functions
    • Transaction Responses
      • Successful Transaction Response
      • Successful Transaction Response for a Billing Address
      • Failed Transaction Response
      • Unauthorized Request Response
      • Successful Transaction Response for a Token
      • Successful Token Request Response
    • Response Validations
      • Successful Transaction Response Validation
      • Failed Transaction Response Validation
    • Card Validations
  • Mobile EMV SDK
    • Working with Mobile Card Reader
    • Working with iOS Framework for IDTech VP3300
      • Processing Payments for iOS Applications
        • Pairing the VP3300 Card Reader with Your iOS Phone or Tablet
        • Charging the VP3300 Card Reader
        • Reading the Card Data Using the IDTech VP3300
        • Clearent's iOS Framework for IDTech VP3300 - Pre-requisites
        • Clearent's iOS Framework for IDTech VP3300 - Additional Configuration
        • Adding Clearent's iOS Framework into your iOS Application
        • Setting Up Clearent's iOS Framework for your Objective-C iOS App
        • Starting a Transaction using Clearent's iOS Framework
        • Starting a Connection using Clearent's iOS Framework
        • Starting a Connection using Clearent's iOS Framework
        • Receiving Feedback Messages using Clearent's iOS Framework
    • Working with Android Framework for IDTech VP3300
      • Configuring an Android Framework for your App
      • Additional Configuration to your Android App
      • Generating a Transaction Token for Manual card Entry
      • Disabling Default EMV Configuration for the Card Reader
      • Configuring Experience with Clearent's Android Framework
  • ACH Transaction Integration
    • Integration Methods for the ACH Transactions
    • Processing an ACH Transaction
    • Getting an ACH Transaction
    • Creating an ACH Transaction Token
    • Handling Returns for the ACH Transactions
    • Checking an ACH Transaction Status
    • ACH Transaction Statuses
    • ACH Transaction Return Codes
  • Paylink
    • The Paylink URL
    • Working with the Paylink
      • Setting up the Paylink
      • Configuring the Paylink URL
      • Using the Paylink Settings API
        • Request Parameters
      • Getting the Paylink Settings
      • Applying the Paylink Settings
      • Sending the Paylink SMS
  • Virtual Terminal
    • Working with the Virtual Terminal
      • Accessing Virtual Terminal
      • Adding or Ordering the Equipment
      • Recurring Payments
        • Adding a New Customer
        • Adding a Payment Method
        • Adding a New Payment Plan
        • Viewing the Plans
      • Processing Sales Transaction
      • Processing ACH Transaction
      • Transaction Search
        • Viewing Transactions
        • Viewing Transaction Receipt
        • Printing Transaction Receipt
        • Emailing Transaction Receipt
        • Void a Transaction
        • Refund a Transaction
        • Processing Pending Transactions
      • Open Batches
        • Viewing Batches
      • VT Settings
        • Merchant
        • Terminal
        • External Terminal
        • Address Verification (AVS)
        • Card Security Code (CSC)
        • Hosted Payment Page (HPP)
  • Financial Management
    • Overview
    • Merchant Pricing
  • Merchant Billing & Funding
  • Financial Reporting
  • Disputes Management
    • Understanding Charge Disputes
    • Managing Disputes in Merchant Portal
    • Managing Disputes via API (Coming Soon!)
  • Reporting
    • Overview
  • Reporting Solutions
  • Working with Reporting API
    • Accessing Reports
    • Retrieving Reports
    • Exporting Reports
  • Support Ticketing
    • Overview
    • Benefits of Support Ticketing System
    • Accessing Support in the Portals
    • Working with Support Ticketing via Partner Portal
      • Types of Support Tickets
      • Submitting a Support Ticket via Partner Portal
  • Working with Support Ticketing via Merchant Portal
    • Types of Support Tickets
    • Submitting a Support Ticket via Merchant Portal
  • Partner & Merchant Solutions
    • Overview
    • Accessing the Portals
    • Navigating the User Interface
    • Working with the Partner Portal
      • Monitoring Performance with Dashboards
      • Managing Merchant Applications
      • Managing Merchants
      • Accessing Reports & Managing Subscriptions
        • Accessing Reports
        • Managing Subscriptions
      • Submitting a Support Ticket
  • Working with the Merchant Portal
    • Monitoring Home Page
    • Accessing Batches
    • Managing Transactions
    • Managing Funding Transactions
    • Managing Virtual Terminal
    • Viewing Chargebacks
    • Managing Disputes
    • Managing Statements & Tax Forms
    • Managing Account Settings
    • Managing User Notifications
    • Managing Support Tickets
  • Security Solutions
    • Overview
    • PCI Compliance
    • Tokenization
    • Encryption
    • Advanced Compliance & Security Measures & Programs
Powered by GitBook

Resources

  • Contact
  • Support Site
  • Campus

Terms & Policies

  • Terms
  • Privacy Policy
  • Disclosures
  • Merchant Agreement

Cookies

  • Cookie List
  • Cookies Settings

Site Info

  • Sitemap

© 2025 Clearent, LLC is a registered agent for Central Bank of St. Louis, MO; Citizens Bank, N.A., Providence, RI; and Pathward, N.A., Sioux Falls, SD.

On this page

Was this helpful?

Export as PDF
  1. Payment Processing Solutions
  2. JavaScript SDK
  3. Configuring with JavaScript SDK

Using Members

Refer to the following table to configure your payment page popup:

Using this member…
You can…
Type
Default Value
Remark

accountNumberMasked

Decide if the Account Number field should display masked information after the customer exits the field.

Boolean

True

To unmask the Account Number field when your customer exits this field, set the accountNumberMasked member to False.

accountNumberPlaceholder

Decide the text to display for the Account Number field before your customer provides input.

String

Account Number

None

accountTypePlaceholder

Decide the text to display for the Account Number field before your customer selects it.

String

Account Type

None

allowAutoComplete

Decide if the fields in the Payment Details form should autocomplete.

Boolean

True

To configure the cardholder-facing implementation, set the allowAutoComplete member to True.

To configure the merchant-facing implementation, set the allowAutoComplete member to False.

allowEmbedded

Decide if JavaScript SDK's host page should be embedded in another page.

Boolean

True

None

baseUrl

Decide if the Clearent Gateway base URL should be set to sandbox or production URL.

Note: You must set the baseUrl to sandbox or production URL.

String

Null

None

blockMetaKeys

Decide if meta key combinations (alt or ctrl) should be blocked for the hosting page.

Some card readers may generate keystrokes that include meta keys even after the card read is complete, causing unnecessary behavior in the browser window.

Mode

False

The blockMetaKeys member allows you to block meta key combinations on all pages containing the Clearent script.

This setting blocks certain meta key combinations, except for closing the window (Ctrl + W), opening a new window (Ctrl + N), or opening a new tab (Ctrl + T).

cardFormatted

Decide if the card field should be formatted as the customer enters information in the field.

Note: To make this setting effective, set the enableReader member to True.

Boolean

True

The cardFormatted member allows you to display the text in the Card Payment fields in a format similar to how the information appears on the physical card as the customer enters information.

To configure the cardholder-facing implementation, set the cardFormatted member to True.

cardMasked

Decide if the card field should display masked information after the customer exits the field.

Boolean

True

To unmask the Card Payment fields when your customer exits fields, set the cardMasked member to False.

To configure the cardholder-facing implementation, set the cardMasked member to True.

cardPlaceholder

Decide the text to display for the card field before your customer provides input.

String

Card Number

None

cardReadCompleteCallback

Decide the name of the function to call to receive a message after completing the card read.

String

ClearentCardReadComplete

None

cardReadStartCallback

Decide the name of the function to call to receive a message when starting the card read.

String

ClearentCardReadStart

None

clearFormOnSuccess

Decide if the Payment Details form should be cleared on a successful call to getPaymentToken().

Boolean

False

The clearFormOnSuccess member allows you to clear the form in a back-office implementation.

cvcMasked

Decide if the CSC field should display masked information after the customer exits the field.

Boolean

True

To unmask the Card Payment fields when your customer exits this field, set the accountNumberMasked member to False.

To configure the cardholder-facing implementation, set the cvcMasked to True.

cvcPlaceholder

Decide the text to display for the CVC field before your customer provides input.

String

CSC

None

cvcRequired

Decide if the CVC field is mandatory for customer to enter a value.

Boolean

True

None

deviceType

Decide the device type of external keyboard-emulation card reader.

String

Null

The deviceType member allows you to add an external card reader.

Clearent’s JavaScript SDK supports following Card Reader:

  • IDTECH

enableAch

Decide if the customer should pay with an online check.

Boolean

False

None

enableReader

Decide if an external card reader should be supported for reading cards.

Boolean

False

You need to add the Card Reader button to start reading the card details using an external keyboard-emulation card reader.

Clearent’s JavaScript SDK supports following card reader:

  • IDTECH

entryModeChangeCallback

Decide the name of the function to call to receive a message when changing the card entry mode.

String

ClearentEntryModeChange

None

errorCallback

Decide the name of the function to call to receive the getPaymentToken() response.

String

ClearentTokenError

None

expDateFormatted

Decide if the Expiration Date field should be formatted on entry.

Boolean

True

The expDateFormatted member allows you to display the text in the Expiration Date field in a format similar to how the information appears on the physical card as the customer enters information.

To configure the cardholder-facing implementation, set the expDateFormatted to True.

expDateMasked

Decide if the Expiration Date field should be masked when customer exits the field.

Boolean

True

To unmask the Expiration Date field when your customer exits this field, set the expDateMasked member to False.

To configure the cardholder-facing implementation, set the expDateMasked to True.

expDatePlaceholder

Decide the text to display for the Expiration Date field before your customer provides input.

String

MMYY

None

individualNamePlaceholder

This member allows you to decide the text to display for the Expiration Date field before your customer selects the field.

String

Name on account

None

initialMode

Decide if the Payment Details form should open in manual card entry mode or keyboard reader mode.

String

Manual

You need to set the enableReader member to True before setting the initialMode member.

When you set the initialMode member to manual or reader mode, the payment form will actively listen for keystrokes generated by the card reader.

Your customers will see errors and retries if they enter keystrokes that are part of the card read.

We recommend testing this use case before implementation.

paymentFormId

Decide the ID of div element that will hold the Payment Details form.

String

payment-form

To avoid conflicts with existing code and page element IDs, set the paymentFormId member to a value other than the default.

paymentTypeCallback

Decide the name of the function to call the onPaymentTypeChange().

String

ClearentOnPaymentTypeChange

To call the function, set the enableReader member to ACH.

This function is called when the payment type changes to card or ACH.

pk

Public Key

Note: You must set the pk member.

String

Null

None

routingNumberMasked

Decide if the Routing Number field should be masked when customer exits the field.

Boolean

True

To unmask the Routing Number field when your customer exits this field, set the routingNumberMasked member to False.

routingNumberPlaceholder

Decide the text to display for the Routing Number field before your customer provides input.

String

Routing Number

None

showValidationMessages

Decide if validation messages should be displayed below the payment form.

Boolean

True

To configure the handling of validation messages elsewhere, set the showValidationMessages member to False.

styles

Decide the style for the framed contents.

String

Null

You can use the IDs and classes from your browser’s Developer tools to style the frame of the payment page.

successCallback

Decide the name of the function to call to receive the getPaymentToken() response.

String

ClearentTokenSuccess

This function is called when the getPaymentToken generate successful.

validationCallback

Decide the name of the function to call to receive the validation messages.

String

ClearentValidation

None

PreviousConfiguring with JavaScript SDKNextUsing Methods

Last updated 1 month ago

Was this helpful?