# Members

See the following table to configure your payment page:

<table data-full-width="true"><thead><tr><th width="227" valign="top">Using this member…</th><th width="247" valign="top">You can…</th><th width="129" valign="top">Type</th><th width="121" valign="top">Default Value</th><th valign="top">Remark</th></tr></thead><tbody><tr><td valign="top"><code>accountNumberMasked</code></td><td valign="top">Decide if the Account Number field should display masked information after the customer exits the field.</td><td valign="top"><code>Boolean</code></td><td valign="top"><code>True</code></td><td valign="top">To unmask the Account Number field when your customer exits this field, set the <code>accountNumberMasked</code> member to <code>False</code>.</td></tr><tr><td valign="top"><code>accountNumberPlaceholder</code></td><td valign="top">Decide the text to display for the Account Number field before your customer provides input.</td><td valign="top"><code>String</code></td><td valign="top"><code>Account Number</code></td><td valign="top">None</td></tr><tr><td valign="top"><code>accountTypePlaceholder</code></td><td valign="top">Decide the text to display for the Account Number field before your customer selects it.</td><td valign="top"><code>String</code></td><td valign="top"><code>Account Type</code></td><td valign="top">None</td></tr><tr><td valign="top"><code>allowAutoComplete</code></td><td valign="top">Decide if the fields in the Payment Details form should autocomplete.</td><td valign="top"><code>Boolean</code></td><td valign="top"><code>True</code></td><td valign="top"><p>To configure the cardholder-facing implementation, set the <code>allowAutoComplete</code> member to <code>True</code>.</p><p>To configure the merchant-facing implementation, set the <code>allowAutoComplete</code> member to <code>False</code>.</p></td></tr><tr><td valign="top"><code>allowEmbedded</code></td><td valign="top">Decide if JavaScript SDK's host page should be embedded in another page.</td><td valign="top"><code>Boolean</code></td><td valign="top"><code>True</code></td><td valign="top">None</td></tr><tr><td valign="top"><code>baseUrl</code></td><td valign="top"><p>Decide if the Xplor Pay Gateway base URL should be set to sandbox or production URL.</p><p></p><p><mark style="background-color:orange;"><strong>Note</strong>:</mark> You must set the <code>baseUrl</code> to sandbox or production URL.</p></td><td valign="top"><code>String</code></td><td valign="top"><code>Null</code></td><td valign="top">None</td></tr><tr><td valign="top"><code>blockMetaKeys</code></td><td valign="top"><p>Decide if meta key combinations (alt or ctrl) should be blocked for the hosting page.</p><p>Some card readers may generate keystrokes that include meta keys even after the card read is complete, causing unnecessary behavior in the browser window.</p></td><td valign="top"><code>Mode</code></td><td valign="top"><code>False</code></td><td valign="top"><p>The <code>blockMetaKeys</code> member allows you to block meta key combinations on all pages containing the Xplor Pay script.</p><p>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).</p></td></tr><tr><td valign="top"><code>cardFormatted</code></td><td valign="top"><p>Decide if the card field should be formatted as the customer enters information in the field.</p><p></p><p><mark style="background-color:orange;"><strong>Note</strong>:</mark> To make this setting effective, set the <code>enableReader</code> member to <code>True</code>.</p></td><td valign="top"><code>Boolean</code></td><td valign="top"><code>True</code></td><td valign="top"><p>The <code>cardFormatted</code> 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.</p><p>To configure the cardholder-facing implementation, set the <code>cardFormatted</code> member to <code>True</code>.</p></td></tr><tr><td valign="top"><code>cardMasked</code></td><td valign="top">Decide if the card field should display masked information after the customer exits the field.</td><td valign="top"><code>Boolean</code></td><td valign="top"><code>True</code></td><td valign="top"><p>To unmask the Card Payment fields when your customer exits fields, set the <code>cardMasked</code> member to <code>False</code>.</p><p>To configure the cardholder-facing implementation, set the <code>cardMasked</code> member to <code>True</code>.</p></td></tr><tr><td valign="top"><code>cardPlaceholder</code></td><td valign="top">Decide the text to display for the card field before your customer provides input.</td><td valign="top"><code>String</code></td><td valign="top"><code>Card Number</code></td><td valign="top">None</td></tr><tr><td valign="top"><code>cardReadCompleteCallback</code></td><td valign="top">Decide the name of the function to call to receive a message after completing the card read.</td><td valign="top"><code>String</code></td><td valign="top"><code>ClearentCardReadComplete</code></td><td valign="top">None</td></tr><tr><td valign="top"><code>cardReadStartCallback</code></td><td valign="top">Decide the name of the function to call to receive a message when starting the card read.</td><td valign="top"><code>String</code></td><td valign="top"><code>ClearentCardReadStart</code></td><td valign="top">None</td></tr><tr><td valign="top"><code>clearFormOnSuccess</code></td><td valign="top">Decide if the Payment Details form should be cleared on a successful call to <code>getPaymentToken()</code>.</td><td valign="top"><code>Boolean</code></td><td valign="top"><code>False</code></td><td valign="top">The <code>clearFormOnSuccess</code> member allows you to clear the form in a back-office implementation.</td></tr><tr><td valign="top"><code>cvcMasked</code></td><td valign="top">Decide if the CSC field should display masked information after the customer exits the field.</td><td valign="top"><code>Boolean</code></td><td valign="top"><code>True</code></td><td valign="top"><p>To unmask the Card Payment fields when your customer exits this field, set the <code>accountNumberMasked</code> member to <code>False</code>.</p><p>To configure the cardholder-facing implementation, set the <code>cvcMasked</code> to <code>True</code>.</p></td></tr><tr><td valign="top"><code>cvcPlaceholder</code></td><td valign="top">Decide the text to display for the CVC field before your customer provides input.</td><td valign="top"><code>String</code></td><td valign="top"><code>CSC</code></td><td valign="top">None</td></tr><tr><td valign="top"><code>cvcRequired</code></td><td valign="top">Decide if the CVC field is mandatory for customer to enter a value.</td><td valign="top"><code>Boolean</code></td><td valign="top"><code>True</code></td><td valign="top">None</td></tr><tr><td valign="top"><code>deviceType</code></td><td valign="top">Decide the device type of external keyboard-emulation card reader.</td><td valign="top"><code>String</code></td><td valign="top"><code>Null</code></td><td valign="top"><p>The <code>deviceType</code> member allows you to add an external card reader.</p><p>JavaScript SDK supports following Card Reader:</p><ul><li>IDTECH</li></ul></td></tr><tr><td valign="top"><code>enableAch</code></td><td valign="top">Decide if the customer should pay with an online check.</td><td valign="top"><code>Boolean</code></td><td valign="top"><code>False</code></td><td valign="top">None</td></tr><tr><td valign="top"><code>enableReader</code></td><td valign="top">Decide if an external card reader should be supported for reading cards.</td><td valign="top"><code>Boolean</code></td><td valign="top"><code>False</code></td><td valign="top"><p>You need to add the Card Reader button to start reading the card details using an external keyboard-emulation card reader.</p><p>JavaScript SDK supports following card reader:</p><ul><li>IDTECH</li></ul></td></tr><tr><td valign="top"><code>entryModeChangeCallback</code></td><td valign="top">Decide the name of the function to call to receive a message when changing the card entry mode.</td><td valign="top"><code>String</code></td><td valign="top"><code>ClearentEntryModeChange</code></td><td valign="top">None</td></tr><tr><td valign="top"><code>errorCallback</code></td><td valign="top">Decide the name of the function to call to receive the <code>getPaymentToken()</code> response.</td><td valign="top"><code>String</code></td><td valign="top"><code>ClearentTokenError</code></td><td valign="top">None</td></tr><tr><td valign="top"><code>expDateFormatted</code></td><td valign="top">Decide if the Expiration Date field should be formatted on entry.</td><td valign="top"><code>Boolean</code></td><td valign="top"><code>True</code></td><td valign="top"><p>The <code>expDateFormatted</code> 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.</p><p>To configure the cardholder-facing implementation, set the <code>expDateFormatted</code> to <code>True</code>.</p></td></tr><tr><td valign="top"><code>expDateMasked</code></td><td valign="top">Decide if the Expiration Date field should be masked when customer exits the field.</td><td valign="top"><code>Boolean</code></td><td valign="top"><code>True</code></td><td valign="top"><p>To unmask the Expiration Date field when your customer exits this field, set the <code>expDateMasked</code> member to <code>False</code>.</p><p>To configure the cardholder-facing implementation, set the <code>expDateMasked</code> to <code>True</code>.</p></td></tr><tr><td valign="top"><code>expDatePlaceholder</code></td><td valign="top">Decide the text to display for the Expiration Date field before your customer provides input.</td><td valign="top"><code>String</code></td><td valign="top"><code>MMYY</code></td><td valign="top">None</td></tr><tr><td valign="top"><code>individualNamePlaceholder</code></td><td valign="top">This member allows you to decide the text to display for the Expiration Date field before your customer selects the field.</td><td valign="top"><code>String</code></td><td valign="top"><code>Name on account</code></td><td valign="top">None</td></tr><tr><td valign="top"><code>initialMode</code></td><td valign="top">Decide if the Payment Details form should open in manual card entry mode or keyboard reader mode.</td><td valign="top"><code>String</code></td><td valign="top"><code>Manual</code></td><td valign="top"><p>You need to set the <code>enableReader</code> member to <code>True</code> before setting the <code>initialMode</code> member.</p><p>When you set the <code>initialMode</code> member to <code>manual</code> or <code>reader</code> mode, the payment form will actively listen for keystrokes generated by the card reader.</p><p>Your customers will see errors and retries if they enter keystrokes that are part of the card read.</p><p>We recommend testing this use case before implementation.</p></td></tr><tr><td valign="top"><code>paymentFormId</code></td><td valign="top">Decide the ID of <code>div</code> element that will hold the Payment Details form.</td><td valign="top"><code>String</code></td><td valign="top"><code>payment-form</code></td><td valign="top">To avoid conflicts with existing code and page element IDs, set the <code>paymentFormId</code> member to a value other than the default.</td></tr><tr><td valign="top"><code>paymentTypeCallback</code></td><td valign="top">Decide the name of the function to call the <code>onPaymentTypeChange()</code>.</td><td valign="top"><code>String</code></td><td valign="top"><code>ClearentOnPaymentTypeChange</code></td><td valign="top"><p>To call the function, set the <code>enableReader</code> member to <code>ACH</code>.</p><p>This function is called when the payment type changes to <code>card</code> or <code>ACH</code>.</p></td></tr><tr><td valign="top"><code>pk</code></td><td valign="top"><p>Public Key</p><p></p><p><mark style="background-color:orange;"><strong>Note</strong>:</mark> You must set the <code>pk</code> member.</p></td><td valign="top"><code>String</code></td><td valign="top"><code>Null</code></td><td valign="top">None</td></tr><tr><td valign="top"><code>routingNumberMasked</code></td><td valign="top">Decide if the Routing Number field should be masked when customer exits the field.</td><td valign="top"><code>Boolean</code></td><td valign="top"><code>True</code></td><td valign="top">To unmask the Routing Number field when your customer exits this field, set the <code>routingNumberMasked</code> member to <code>False</code>.</td></tr><tr><td valign="top"><code>routingNumberPlaceholder</code></td><td valign="top">Decide the text to display for the Routing Number field before your customer provides input.</td><td valign="top"><code>String</code></td><td valign="top"><code>Routing Number</code></td><td valign="top">None</td></tr><tr><td valign="top"><code>showValidationMessages</code></td><td valign="top">Decide if validation messages should be displayed below the payment form.</td><td valign="top"><code>Boolean</code></td><td valign="top"><code>True</code></td><td valign="top">To configure the handling of validation messages elsewhere, set the <code>showValidationMessages</code> member to <code>False</code>.</td></tr><tr><td valign="top"><code>styles</code></td><td valign="top">Decide the style for the framed contents.</td><td valign="top"><code>String</code></td><td valign="top"><code>Null</code></td><td valign="top">You can use the IDs and classes from your browser’s Developer tools to style the frame of the payment page.</td></tr><tr><td valign="top"><code>successCallback</code></td><td valign="top">Decide the name of the function to call to receive the <code>getPaymentToken()</code> response.</td><td valign="top"><code>String</code></td><td valign="top"><code>ClearentTokenSuccess</code></td><td valign="top">This function is called when the <code>getPaymentToken</code> generate successful.</td></tr><tr><td valign="top"><code>validationCallback</code></td><td valign="top">Decide the name of the function to call to receive the validation messages.</td><td valign="top"><code>String</code></td><td valign="top"><code>ClearentValidation</code></td><td valign="top">None</td></tr></tbody></table>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.xplorpay.com/guides/javascript/configure-payment-page/members.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
