Skip to main content

Documentation Index

Fetch the complete documentation index at: https://bancofcalifornia-preview.mintlify.app/llms.txt

Use this file to discover all available pages before exploring further.

See the advanced HTML example and advanced JavaScript example files for examples. If the simple implementation does not give you everything you need, then you can use the advanced implementation to customize the experience more to your liking. The options available are extensive, and you may use as many or as few as you want. Below is an example of using every variable possible. 
<script
        src="https://gateway.bancedge.com/token/Collect.js"
        data-tokenization-key="your-token-key-here"
        data-variant="inline"
        data-payment-selector="#demoPayButton"
        data-style-sniffer="false"
        data-google-font="Montserrat:400"
        data-validation-callback = "(function (field, valid, message) {console.log(field + ': ' + valid + ' -- ' + message)})"
        data-custom-css='{
            "background-color": "#a0a0ff",
            "color": "#0000ff"
        }'
        data-invalid-css='{
            "background-color":"red",
            "color":"white"
        }'
        data-valid-css='{
            "background-color":"#d0ffd0",
            "color":"black"
        }'
        data-placeholder-css='{
            "background-color":"#687C8D",
            "color":"green"
        }'
        data-focus-css='{
            "background-color":"#202020",
            "color":"yellow"
        }'
        data-timeout-duration = "10000"
        data-timeout-callback = "(function() {console.log('Timeout reached')})"
        data-apple-pay-recurring-mismatch-callback = "(function() {console.log('Apple Pay version needs to be updated')})"
        data-fields-available-callback = "(function() {console.log('Collect.js has added fields to the form')})"
        data-field-ccnumber-selector = '#demoCcnumber'
        data-field-ccnumber-title = 'Card Number'
        data-field-ccnumber-placeholder = '0000 0000 0000 0000'
        data-field-ccexp-selector = '#demoCcexp'
        data-field-ccexp-title = 'Expiration Date'
        data-field-ccexp-placeholder = '00 / 00'
        data-field-cvv-display = 'required'
        data-field-cvv-selector = '#demoCvv'
        data-field-cvv-title = 'CVV Code'
        data-field-cvv-placeholder = '***'
        data-field-checkaccount-selector = '#demoCheckaccount'
        data-field-checkaccount-title = 'Account Number'
        data-field-checkaccount-placeholder = '000000000000'
        data-field-checkaba-selector = '#demoCheckaba'
        data-field-checkaba-title = 'Routing Number'
        data-field-checkaba-placeholder = '000000000'
        data-field-checkname-selector = '#demoCheckname'
        data-field-checkname-title = 'Account Name'
        data-field-checkname-placeholder = 'Customer Name'
        data-field-checktransit-selector = '#demoChecktransit'
        data-field-checktransit-title = 'Check Transit'
        data-field-checktransit-placeholder = '00000'
        data-field-checkinstitution-selector = '#demoCheckinstitution'
        data-field-checkinstitution-title = 'Check Institution'
        data-field-checkinstitution-placeholder = '000'
        data-price="1.00"
        data-currency="USD"
        data-country="US"
        data-field-google-pay-shipping-address-required="true"
        data-field-google-pay-shipping-address-parameters-phone-number-required="true"
        data-field-google-pay-shipping-address-parameters-allowed-country-codes="US,CA"
        data-field-google-pay-billing-address-required="true"
        data-field-google-pay-billing-address-parameters-phone-number-required="true"
        data-field-google-pay-billing-address-parameters-format="MIN"
        data-field-google-pay-email-required="true"
        data-field-google-pay-button-type="buy"
        data-field-google-pay-button-locale="en"
        data-field-google-pay-button-color="default"
        data-field-apple-pay-shipping-type="delivery"
        data-field-apple-pay-shipping-methods='[{"label":"Free Standard Shipping","amount":"0.00","detail":"Arrives in 5-7 days","identifier":"standardShipping"},{"label":"Express Shipping","amount":"10.00","detail":"Arrives in 2-3 days","identifier":"expressShipping"}]'
        data-field-apple-pay-required-billing-contact-fields='["postalAddress","name"]'
        data-field-apple-pay-required-shipping-contact-fields='["postalAddress","name"]'
        data-field-apple-pay-contact-fields='["phone","email"]'
        data-field-apple-pay-contact-fields-mapped-to='shipping'
        data-field-apple-pay-line-items='[{"label":"Foobar","amount":"3.00"},{"label":"Arbitrary Line Item #2","amount":"1.00"}]'
        data-field-apple-pay-total-label='foobar'
        data-field-apple-pay-total-type='pending'
        data-field-apple-pay-type='buy'
        data-field-apple-pay-style-button-style='black'
        data-field-apple-pay-style-height='40px'
        data-field-apple-pay-style-border-radius='4px'
        data-field-apple-pay-is-recurring-transaction="true"
        data-field-apple-pay-recurring-payment-description="A description of the recurring payment to display to the user in the payment sheet."
        data-field-apple-pay-recurring-billing-agreement="A localized billing agreement displayed to the user in the payment sheet prior to the payment authorization."
        data-field-apple-pay-recurring-management-url="https://applepaydemo.apple.com"
        data-field-apple-pay-recurring-token-notification-url="https://applepaydemo.apple.com"
        data-field-apple-pay-recurring-label="Recurring"
        data-field-apple-pay-recurring-amount="4.99"
        data-field-apple-pay-recurring-payment-timing="recurring"
        data-field-apple-pay-recurring-recurring-payment-start-date="2023-08-11T11:20:32.369Z"
        data-field-apple-pay-recurring-recurring-payment-interval-unit="month"
        data-field-apple-pay-recurring-recurring-payment-interval-count="6"
        data-field-apple-pay-recurring-recurring-payment-end-date="2024-08-11T11:20:32.369Z"
></script>

​
Configuration Variables

VariableFormatBehavior
data-tokenization-keyStringAuthenticates the request
data-variantString (“inline” or “lightbox”)Whether to use “inline” or “lightbox” integration (required for inline integration) Default: “lightbox”
data-payment-selectorStringTells Collect.js what class or id value will trigger the form submission Default: “#payButton”
data-style-snifferString (“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-validation-callbackStringA JavaScript function which will be called each time a Collect.js field attempts to validate. It will recieve three paramaters: a string indicating which field was validated (ccnum or checkname, for example), a boolean for whether or not it validated successfully, and a string which may provide more detailed information about why the validation failed. For broadest compatibility, enclose the function in parentheses like in the example above
data-custom-cssJSON StringThe 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-cssJSON StringThe 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-cssJSON StringThe 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-cssJSON StringThe 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-cssJSON StringThe 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-fontStringDirects 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”
data-timeout-durationIntegerWhen form submission is triggered, Collect.js will wait only this long (in milliseconds) for payment data validation and recording to complete. If, by this time, Collect.js is still missing confirmation on vital fields, the data-timeout-callback function will be invoked Default: “0” which disables the timeout
data-timeout-callbackStringA JavaScript function which gets called if data-timeout-duration has passed since we tried to submit the form, but we still haven’t confirmed that enough fields are stored with the token to make a viable payment. This allows for the site to retry submission, or ask the customer to try submission again, if an invalid entry or intermittent connection caused the data storage to fail. For broadest compatibility, enclose the function in parentheses like in the example above Default: an internal function that displays a “Please submit the form again.” alert
data-apple-pay-recurring-mismatch-callbackStringA JavaScript function that executes when the detected iOS version is below 16 or the macOS version is below 13, as these are the minimum versions required for Apple Pay recurring payments to function correctly. Default: an internal function that displays a “Please update your Apple Pay version.” alert
data-fields-available-callbackStringA JavaScript function which gets called once Collect.js has installed the fields onto your page. A typical use case is to wire up event handlers to the fields when they are enterred or left. For broadest compatibility, enclose the function in parentheses like in the example above
data-field-ccnumber-selectorString (CSS Selector)A CSS selector for the Credit Card Number inline field Default: “#ccnumber”
data-field-ccnumber-titleStringA title for the Credit Card Number inline field
data-field-ccnumber-placeholderStringPlaceholder text for the Credit Card Number inline field
data-field-ccnumber-enable-card-brand-previewsString (“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-selectorString (CSS Selector)A CSS selector for the Credit Card Expiration Date inline field Default: “#ccexp”
data-field-ccexp-titleStringA title for the Credit Card Expiration Date inline field
data-field-ccexp-placeholderStringPlaceholder text for the Credit Card Expiration Date inline field
data-field-cvv-displayString (“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-selectorString (CSS Selector)A CSS selector for the CVV inline field Default: “#cvv”
data-field-cvv-titleStringA title for the CVV inline field
data-field-cvv-placeholderStringPlaceholder text for the CVV inline field
data-field-checkaccount-selectorString (CSS Selector)A CSS selector for Checking Account Number inline field Default: “#checkaccount”
data-field-checkaccount-titleStringA title for the Checking Account Number inline field
data-field-checkaccount-placeholderStringPlaceholder text for the Checking Account Number inline field
data-field-checkaba-selectorString (CSS Selector)A CSS selector for the Checking Routing Number inline field Default: “#checkaba”
data-field-checkaba-titleStringA title for the Checking Routing Number inline field
data-field-checkaba-placeholderStringPlaceholder text for the Checking Routing Number inline field
data-field-checkname-selectorString (CSS Selector)A CSS selector for the Checking Account Name inline field Default: “#checkname”
data-field-checkname-titleStringA title for the Checking Account Name inline field
data-field-checkname-placeholderStringPlaceholder text for the Checking Account Name inline field
data-field-checktransit-selectorString (CSS Selector)A CSS selector for the Check Transit inline field Default: “#checktransit”
data-field-checktransit-titleStringA title for the Check Transit inline field
data-field-checktransit-placeholderStringPlaceholder text for the Check Transit inline field
data-field-checkinstitution-selectorString (CSS Selector)A CSS selector for the Check Institution inline field Default: “#checkinstitution”
data-field-checkinstitution-titleStringA title for the Check Institution inline field
data-field-checkinstitution-placeholderStringPlaceholder text for the Check Institution inline field
data-field-google-pay-selectorStringA CSS selector for the Google Pay field. Default: “#googlepaybutton”
data-field-google-pay-shipping-address-requiredString (“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-requiredString (“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-codesString (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-requiredString (“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-requiredString (“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-formatString (“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-requiredString (“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-typeString (“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-localeString (“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-colorString (“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-statusString (“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”
data-field-apple-pay-selectorString (CSS Selector)A CSS selector for the Apple Pay field. Default: “#applepaybutton”
data-field-apple-pay-shipping-typeString (“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-methodsString (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-fieldsString (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-fieldsString (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-fieldsString (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-toString (“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-itemsString (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-labelStringText that appears next to the final amount in the Apple Pay payment sheet. Default: “Total”
data-field-apple-pay-total-typeString (“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-typeString (“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-styleString (“black”, “white”, or “white-outline”)The appearance of the Apple Pay button. Default: “black”
data-field-apple-pay-style-heightStringThe height of the Apple Pay button. Default: “30px”
data-field-apple-pay-style-border-radiusStringThe rounding of the corners on the Apple Pay button. Default: “4px”
data-field-apple-pay-is-recurring-transactionString (“true” or “false”)Marks the Apple Pay transaction as a recurring transaction. Default: “false”
data-field-apple-pay-recurring-payment-descriptionStringA description of the recurring payment to display to the user in the payment sheet. Value of data-field-apple-pay-is-recurring-transaction must be true in order to use. Required for recurring. Example: “Monthly subscription for premium features.” Default: ""
data-field-apple-pay-recurring-billing-agreementStringA localized billing agreement displayed to the user prior to payment authorization. Value of data-field-apple-pay-is-recurring-transaction must be true in order to use. Optional. Example: “By subscribing, you agree to the terms and conditions.” Default: ""
data-field-apple-pay-recurring-labelStringThe label for the recurring payment. Example: “Recurring”. Value of data-field-apple-pay-is-recurring-transaction must be true in order to use.
data-field-apple-pay-recurring-amountString (Decimal)The amount to be charged for the recurring payment. Example: “4.99”. Value of data-field-apple-pay-is-recurring-transaction must be true in order to use.
data-field-apple-pay-recurring-payment-timingStringThe timing of the recurring payment. Example: “recurring”. Value of data-field-apple-pay-is-recurring-transaction must be true in order to use.
data-field-apple-pay-recurring-payment-start-dateString (ISO 8601 Datetime)The start date of the recurring payment. Example: “2023-08-11T11:20:32.369Z”. Value of data-field-apple-pay-is-recurring-transaction must be true in order to use.
data-field-apple-pay-recurring-payment-interval-unitStringThe unit of time for the recurring payment interval. Possible values: “day”, “week”, “month”, “year”. Example: “month”. Value of data-field-apple-pay-is-recurring-transaction must be true in order to use.
data-field-apple-pay-recurring-payment-interval-countIntegerThe number of units per payment interval. Example: 6. Value of data-field-apple-pay-is-recurring-transaction must be true in order to use.
data-field-apple-pay-recurring-payment-end-dateString (ISO 8601 Datetime)The end date of the recurring payment. Example: “2024-08-11T11:20:32.369Z”. If this field is omitted, the recurring transaction will continue until canceled.
data-field-apple-pay-recurring-management-urlStringA URL to the merchant’s management portal where users can manage their subscriptions. Value of data-field-apple-pay-is-recurring-transaction must be true in order to use this field. Required for recurring. Example: “https://example.com/manage-tokens” Default: ""
data-field-apple-pay-recurring-token-notification-urlStringA URL where tokenization events (e.g., token refresh, expiration) are sent. Value of data-field-apple-pay-is-recurring-transaction must be true in order to use this field. Optional. Example: “https://example.com/token-notify” Default: ""
data-priceStringThe final cost that the user will be charged. Default: undefined Required if using Apple Pay
data-countryStringThe country where the transaction is processed. Required if using Google Pay or Apple Pay
data-currencyStringThe currency the transaction will use to process the transaction. Required if using Google Pay or Apple Pay

​
Collect.js Functions

Function NameParametersDescription
configureObjectCall 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.
startPaymentRequestEventCall 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.
clearInputsCall this when you want to clear whatever the user has entered into any input provided by Collect.js.

​
JavaScript Based Activation

You may also choose to configure Collect.js directly in your JavaScript, For this, you will typically only include the data-tokenization-key parameter in the script tag, and deploy the other options with a CollectJS.configure() call. See the Advanced Inline JavaScript Example for a demonstration with the main available options. 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. 
{
	tokenType: "inline",
	token:"3455zJms-7qA2K2-VdVrSu-Rv7WpvPuG7s8",
	initiatedBy: Event,
	card:{
		number: "411111******1111",
		bin: "411111",
        exp: "1028",
        hash: "abcdefghijklmnopqrstuv1234567890",
		type: "visa"
	},
	check:{
		name:null,
		account:null,
		hash:null,
		aba:null,
		transit:null,
		institution:null
	},
	wallet: {
		cardDetails: null,
		cardNetwork: null,
		email: null,
		billingInfo: {
			address1: null,
			address2: null,
			firstName: null,
			lastName: null,
			postalCode: null,
			city: null,
			state: null,
			country: null,
			phone: null

		},
		shippingInfo: {
			address1: null,
			address2: null,
			firstName: null,
			lastName: null,
			postalCode: null,
			city: null,
			state: null,
			country: null,
			phone: null
		}

	}
}

​
Styling Limitations

For security and compatibility reasons, the styling system- whether provided via custom-css, invalid-css, valid-css, focus-css or calculated using the style-sniffer, only supports the following CSS properties:
  • background-color
  • 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
  • bottom
  • box-shadow
  • color
  • cursor
  • direction
  • font-family
  • font-kerning
  • font-size
  • font-stretch
  • font-style
  • font-variant-caps
  • font-variant-numeric
  • font-weight
  • height
  • letter-spacing
  • line-height
  • margin-top
  • margin-bottom
  • opacity
  • outline-color
  • outline-offset
  • outline-style
  • outline-width
  • padding
  • padding-bottom
  • padding-left
  • padding-right
  • padding-top
  • pointer-events
  • 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
  • transition
  • vertical-align
  • white-space
  • will-change
  • word-break
  • word-spacing
  • hyphens
Placeholder CSS can only use the following attributes
  • 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
Any other CSS properties will be ignored.