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 usersDefault: "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" |
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
|
| font | font-family
font-kerning
font-size
font-stretch
font-style
font-variant-caps
font-variant-numeric
font-weight |
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.
Updated 4 months ago