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://secure.networkmerchants.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-payment-type="cc"
data-field-cvv-display=”hide"
></script>
| Variable | Format | Behavior |
| data-tokenization-key | String | Authenticates the request |
| data-payment-selector | String | Tells Collect.js what class or id value will trigger the lightbox Default: “#payButton” |
| data-primary-color | String | The HEX value for the color of the submit button in the lightbox Default: “#007BFF” |
| data-theme | String (“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-color | String | The HEX value for the color of the lightbox border Default: “#282828” |
| data-button-text | String | The text that will display on the submit button in the lightbox Default: “Submit Payment” |
| data-payment-type | String (“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-display | String (“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” |
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.
This implementation method allows for additional changes to the look and feel to better match your website’s UI
