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.

​
Advanced Lightbox Implementation

See the advanced HTML example and advanced JavaScript example files for examples. If you want to have a little more control over the default behavior, you can pass in additional data elements in the script tag. Here’s an example using all the available variables: 
<script
        src="https://gateway.bancedge.com/token/Collect.js"
        data-tokenization-key="your-token-key-here"
        data-payment-selector=".customPayButton"
        data-primary-color="#ff288d"
        data-theme="bootstrap"
        data-secondary-color="#ffe200"
        data-button-text="Submit the Payment"
        data-instruction-text="Enter Card Information"
        data-payment-type="cc"
        data-field-cvv-display="hide"
        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-payment-selectorStringTells Collect.js what class or id value will trigger the lightbox Default: “#payButton”
data-primary-colorStringThe HEX value for the color of the submit button in the lightbox Default: “#007BFF”
data-themeString (“bootstrap” or “material”)The version of the payment form customers will see. All available themes will use the primary and secondary colors provided. Default: “bootstrap”
data-secondary-colorStringThe HEX value for the color of the lightbox border Default: “#282828”
data-button-textStringThe text that will display on the submit button in the lightbox Default: “Submit Payment”
data-instruction-textStringThe text that will display above the payment fields. Custom text should be short so as not to overlap with other elements in the lightbox. Default: “Please enter payment info”
data-payment-typeString (“cc” or “ck”)Whether the lightbox shows credit card or check fields (“cc” for credit cards or “ck” for checks) Default: “cc”
data-field-cvv-displayString (“show”, “hide”, or “required”)Whether the CVV field is required (“required”), optional (“show”), or not displayed at all (“hide”). Also supported as data-field-cvv for legacy users. Default: “required”
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-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-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 method optionally accepts an object with all configuration variables you’re using for Collect.js.
startPaymentRequestEventCall this to bring up the lightbox with the secure payment form for the customer to fill out. If you are using the “payButton” ID or custom payment selector, this will automatically be called when the customer clicks that element on the page. This method accepts an event object as an optional parameter and will call the provided callback function with a token response and the optional event.
closePaymentRequestCall this to dismiss the lightbox. This replicates the behavior of the user clicking the “close” button inside the lightbox. No card or checking information will be saved.
You may also choose to configure Collect.js directly in your JavaScript, in which case you can do all of the above, and also implement a callback function that will execute when the customer submits the lightbox form. The payment token value will be returned in a “response” variable that you can do whatever you’d like with. 
{
	tokenType:"lightbox",
	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
		}

	}
}
This implementation method allows for additional changes to the look and feel to better match your website’s UI Diagram available on the live BancEdge reference page.