Advanced Integrations

Customize the appearance of your checkout page.

Customization Attributes

Credit Card Attributes
Variable Format Behavior
data-field-ccnumber-selector String (CSS Selector) A CSS selector for the Credit Card Number inline field
Default: "#ccnumber"
data-field-ccnumber-title String A title for the Credit Card Number inline field
data-field-ccnumber-placeholder String Placeholder text for the Credit Card Number inline field
data-field-ccnumber-enable-card-brand-previews String ("true" or "false") Determines whether or not the field will display a graphic depicting the credit card brand inside the field
Default: "false"
data-field-ccexp-selector String (CSS Selector) A CSS selector for the Credit Card Expiration Date inline field
Default: "#ccexp"
data-field-ccexp-title String A title for the Credit Card Expiration Date inline field
data-field-ccexp-placeholder String Placeholder text for the Credit Card Expiration Date inline field
data-field-cvv-display String ("show", "hide", or "required") Whether the CVV field is required ("required"), optional ("show"), or not displayed at all ("hide"). If the CVV field is required, a space for it must be provided on the form. Also supported as data-field-cvv for legacy users
Default: "required"
data-field-cvv-selector String (CSS Selector) A CSS selector for the CVV inline field
Default: "#cvv"
data-field-cvv-title String A title for the CVV inline field
data-field-cvv-placeholder String Placeholder text for the CVV inline field
ACH Attributes
Variable Format Behavior
data-field-checkaccount-selector String (CSS Selector) A CSS selector for Checking Account Number inline field
Default: "#checkaccount"
data-field-checkaccount-title String A title for the Checking Account Number inline field
data-field-checkaccount-placeholder String Placeholder text for the Checking Account Number inline field
data-field-checkaba-selector String (CSS Selector) A CSS selector for the Checking Routing Number inline field
Default: "#checkaba"
data-field-checkaba-title String A title for the Checking Routing Number inline field
data-field-checkaba-placeholder String Placeholder text for the Checking Routing Number inline field
data-field-checktransit-selector String (CSS Selector) A CSS selector for the Check Transit inline field
Default: "#checktransit"
data-field-checktransit-title String A title for the Check Transit inline field
data-field-checktransit-placeholder String Placeholder text for the Check Transit inline field
data-field-checkinstitution-selector String (CSS Selector) A CSS selector for the Check Institution inline field
Default: "#checkinstitution"
data-field-checkinstitution-title String A title for the Check Institution inline field
data-field-checkinstitution-placeholder String Placeholder text for the Check Institution inline field
data-field-checkname-selector String (CSS Selector) A CSS selector for the Checking Account Name inline field
Default: "#checkname"
data-field-checkname-title String A title for the Checking Account Name inline field
data-field-checkname-placeholder String Placeholder text for the Checking Account Name inline field
GooglePay Attributes
Variable Format Behavior
data-field-google-pay-selector String A CSS selector for the Google Pay field.
Default: "#googlepaybutton"
data-field-google-pay-shipping-address-required String ("true" or "false") Determines whether or not Google Pay should capture shipping address information. Shipping information captured this way becomes stored in the payment token.
Default: "false"
data-field-google-pay-shipping-address-parameters-phone-number-required String ("true" or "false") Determines whether or not Google Pay should capture a phone number from the user’s shipping phone number. Phone numbers captured this way become stored in the payment token.
Default: "false"
data-field-google-pay-shipping-address-parameters-allowed-country-codes String (comma delimited list of 2 character country codes) List of allowed countries. Credit cards from outside these countries will not be displayed as acceptable options within the Google Pay payment sheet. Omitting this value allows credit cards from any country.
Default: undefined
data-field-google-pay-billing-address-required String ("true" or "false") Determines whether or not Google Pay should capture billing address information. Billing information captured this way becomes stored in the payment token.
Default: "false"
data-field-google-pay-billing-address-parameters-phone-number-required String ("true" or "false") Determines whether or not Google Pay should capture a phone number from the user’s billing phone number. Phone numbers captured this way become stored in the payment token.
Default: "false"
data-field-google-pay-billing-address-parameters-format String ("MIN" or "FULL") Determines which billing address fields to capture from the user. "MIN" provides "zip", "country", "first_name" and "last_name". "FULL" additionally provides "address1", "address2", "city", "state".
Default: "MIN"
data-field-google-pay-email-required String ("true" or "false") Determines whether or not Google Pay should capture an email address. Email addresses captured this way becomes stored in the payment token.
Default: "false"
data-field-google-pay-button-type String ("short", "long", "book", "buy", "checkout", "donate", "order", "pay", "plain", "subscribe", "short" or "long") Determines the text that appears on the Google Pay button.
Default: "buy"
data-field-google-pay-button-locale String ("en", "ar", "bg", "ca", "cs", "da", "de", "el", "es", "et", "fi", "fr", "hr", "id", "it", "ja", "ko", "ms", "nl", "no", "pl", "pt", "ru", "sk", "sl", "sr", "sv", "th", "tr", "uk", "zh) The language that the button text appears in.
Default: "en" (English)
data-field-google-pay-button-color String ("default", "black", "white") The color to display the Google Pay button. "Default" allows Google to determine the color.
Default: "default"
data-field-google-pay-total-price-status String ("FINAL" or "ESTIMATED") The status of the total price being used.
"FINAL" should be used when the amount is not expected to change.
"ESTIMATED" should be used when the amount might change based on upcoming factors such as sales tax based on billing address.
Default: "FINAL"
ApplePay Attributes
Variable Format Behavior
data-field-apple-pay-selector String (CSS Selector) A CSS selector for the Apple Pay field.
Default: "#applepaybutton"
data-field-apple-pay-shipping-type String ("shipping", "delivery", "storePickup", or "servicePickup") The way purchases will be sent to the customer. For transactions that do not need to be sent to a customer, omit data-field-apple-pay-required-shipping-contact-fields.
Default: "shipping"
data-field-apple-pay-shipping-methods String (JSON array of objects) The shipping information that appears on the payment sheet. Example: '[{"label":"Free Standard Shipping","amount":"0.00","detail":"Arrives in 5-7 days","identifier":"standardShipping"}]'
Default: "[]"
data-field-apple-pay-required-billing-contact-fields String (JSON array of "name" or "postalAddress") When "name" or "postalAddress" is provided, the payment sheet will collect a customer's name or address. These values will be included with the transaction's billing information. Example:'["name","postalAddress"]'
Default: "[]"
data-field-apple-pay-required-shipping-contact-fields String (JSON array of "name" or "postalAddress") When "name" or "postalAddress" is provided, the payment sheet will collect a customer's name or address. These values will be included with the transaction's shipping information. Example:'["name","postalAddress"]'
Default: "[]"
data-field-apple-pay-contact-fields String (JSON array of "phone" or "email") When "phone" or "email" is provided, the payment sheet will collect a customer's phone number or email address. Usage of this data is determined by the data-field-apple-pay-contact-fields-mapped-to value. Example: '["phone","email"]'
Default: "[]"
data-field-apple-pay-contact-fields-mapped-to String ("billing" or "shipping") "billing" causes data collected via the data-field-apple-pay-contact-fields options to be included in a transactions "phone" and "email" values. "shipping" causes them to be included as "shipping_phone", "shipping_email".
Default: "billing"
data-field-apple-pay-line-items String (JSON array of objects) Items that will appear in the Apple Pay payment sheet. Example: [{"label":"Foobar","amount":"3.00"}]
Default: "[]"
data-field-apple-pay-total-label String Text that appears next to the final amount in the Apple Pay payment sheet.
Default: "Total"
data-field-apple-pay-total-type String ("pending" or "final") A value that indicates whether the total is final or pending. When set to "pending" the customer will see "Amount Pending" on the ApplePay checkout form instead of a total amount.
Default: "final"
data-field-apple-pay-type String ("buy", "donate", "plain", "set-up", "book", "check-out", "subscribe", "add-money", "contribute", "order", "reload", "rent", "support", "tip", or "top-up") The text that appears on an Apple Pay button. Some options are only supported by newer versions of iOS and macOS.
Default: "buy"
data-field-apple-pay-style-button-style String ("black", "white", or "white-outline") The appearance of the Apple Pay button.
Default: "black"
data-field-apple-pay-style-height String The height of the Apple Pay button.
Default: "30px"
data-field-apple-pay-style-border-radius String The rounding of the corners on the Apple Pay button.
Default: "4px"
CSS Attributes
For security and compatibility reasons, the styling system allows limited properties.
Variable Format Behavior
data-style-sniffer String ("true" or "false") Whether Collect.js should try to calculate the style of form fields in your current form and use that as a baseline style for the Collect.js fields ("true" to calculate style, "false" to start with unstyled text fields)
Default: "true"
data-custom-css JSON String The CSS rules that will be applied to the fields by default. These override anything provided through the style-sniffer, if used. The rules should be packaged as a JSON-formatted object, containing a key-value pair for each property's name and value. Please see below for a list of the supported CSS properties
data-invalid-css JSON String The CSS rules that will be added to a field when it fails to validate. These override anything provided through the style-sniffer and the custom-css paramater, if used. The rules should be packaged as a JSON-formatted object, containing a key-value pair for each property's name and value. Please see below for a list of the supported CSS properties
data-placeholder-css JSON String The CSS rules that will be added to a field when it's displaying a placeholder. The rules should be packaged as a JSON-formatted object, containing a key-value pair for each property's name and value. Please see below for a list of the supported CSS properties
data-focus-css JSON String The CSS rules that will be added to a field when it has the keyboard focus. The rules should be packaged as a JSON-formatted object, containing a key-value pair for each property's name and value. Please see below for a list of the supported CSS properties
data-valid-css JSON String The CSS rules that will be added to a field when it successfully validates and saves. These override anything provided through the style-sniffer and the custom-css paramater, if used. The rules should be packaged as a JSON-formatted object, containing a key-value pair for each property's name and value. Please see below for a list of the supported CSS properties
data-google-font String Directs Collect.js to load font collections available through Google Fonts. This only makes the fonts available in the fields; you must still provide (either directly or through the style sniffer) styles that specify them. List the font name, followed by a colon and the specific weights or variants needed.
Example: "Open Sans:400,700i"
Styling Limitations
For security and compatibility reasons, all other properties will be ignored.
Type Properites
background background-color
border border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-left-color border-left-style border-left-width border-right-color border-right-style border-right-width border-top-color border-top-left-radius border-top-right-radius border-top-style border-top-width border-width border-style border-radius border-color
font font-family font-kerning font-size font-stretch font-style font-variant-caps font-variant-numeric font-weight
outline outline-color outline-offset outline-style outline-width
padding padding padding-bottom padding-left padding-right padding-top
text text-align text-align-last text-decoration text-decoration-line text-decoration-style text-decoration-color text-decoration-skip-ink text-underline-position text-indent text-rendering text-shadow text-size-adjust text-overflow text-transform
misc bottom box-shadow color cursor direction height letter-spacing line-height margin-top margin-bottom opacity transition vertical-align white-space will-change word-break word-spacing hyphens pointer-events
font font-family font-kerning font-size font-stretch font-style font-variant-caps font-variant-numeric font-weight
Placeholder CSS
Placeholder CSS can only use the following attributes. Any other CSS properties will be ignored.
  • background-color
  • font-family
  • font-kerning
  • font-size
  • font-stretch
  • font-style
  • font-variant-caps
  • font-variant-numeric
  • font-weight
  • word-spacing
  • letter-spacing
  • line-height
  • text-decoration
  • text-indent
  • text-transform
  • transition
  • vertical-align
  • opacity
  • color

Functions

Function Name Parameters Description
configure Object Call this when you’d like to reconfigure Collect.js. Collect.js will try to run this automatically on page load, but you can run it manually to change the configuration at any time. This will draw or re-draw all iframes onto the page.
This method optionally accepts an object with all configuration variables you’re using for Collect.js.Default: "true"
startPaymentRequest Event Call this when you want to save the data in the iframes and get the token value in the callback.
This method accepts an event object as an optional parameter. It will call the provided callback function with a token response and the optional event.
clearInputs Call this when you want to clear whatever the user has entered into any input provided by Collect.js.

JavaScript Based Activation

If you choose to configure Collect.js directly in your JavaScript, you will typically only include the
data-tokenization-key parameter in the script tag, and deploy the other options with a CollectJS.configure()
call.

The CollectJS.configure function also lets you specify a callback function that will execute when the customer submits the payment form and payment info has been successfully stored. The callback takes the place of the default "add the payment token and submit the form" behavior and gets passed a response variable with the Payment Token. It is your responsibility to ensure this is posted to your server.