Maintain a Collect.js checkout
Hosted fields, token submission, callbacks and CSP for existing integrations.
Choose the supported integration
The source directs new integrations to the Payment Component and REST API. Collect.js guidance is for existing integrations. A tokenization public key creates tokens; a private server key performs payment operations. Payment Component
Mount fields and submit a token
Load the gateway-hosted script. The default field containers receive hosted iframes. The generated payment_token is submitted to your server and consumed by the payment request; it is not a reusable vault ID. <script src="https://secure.nmi.com/token/Collect.js" data-tokenization-key="YOUR_PUBLIC_KEY" data-variant="inline"></script> <form action="/pay" method="post"> <div id="ccnumber"></div> <div id="ccexp"></div> <div id="cvv"></div> <input id="payButton" type="submit" value="Pay"> </form>
Control lifecycle calls
Method Purpose CollectJS.configure(options) Initialize or reconfigure hosted iframes CollectJS.startPaymentRequest(event) Tokenize entered data and call configured callback CollectJS.clearInputs() Clear the hosted input values Configuration attributes
Apply a page-specific CSP
Allow the script, connection and frame origins required by enabled payment methods. The source lists secure.nmi.com, applepay.cdn-apple.com and pay.google.com. Generate a fresh unpredictable nonce for each page and apply it to inline scripts/styles. Do not copy a static nonce. The source’s quick-start form uses type="POST"; the example here corrects that HTML attribute to method="post". CSP setup alone does not establish PCI compliance.
Use named callbacks with strict CSP
When using strict CSP, the documented blockEval option permits named callback functions rather than unrestricted callback code evaluation. Register the callback globally and pass its name as a string when blockEval is enabled. window.reportValidation = function (field, valid, message) { // Update your own validation UI; do not log payment input. }; CollectJS.configure({ blockEval: 'true', validationCallback: 'reportValidation' });