NMI Collect.js is a JavaScript library from NMI that places hosted card fields on your checkout page. The shopper types the card number, expiry and CVV into fields served by NMI, not by your website. Collect.js then swaps those details for a one-time payment token, and your store sends only that token to the gateway to run the charge.
For a WooCommerce store, this means raw card numbers never pass through your WordPress server or database. That keeps sensitive data off your site and usually makes your PCI compliance work simpler, while the checkout still looks like part of your store rather than a redirect to another page.
How Collect.js works, step by step
The flow is the same whichever plugin you use, as long as it is built on Collect.js:
- The checkout page loads the Collect.js script from NMI, along with your public tokenization key.
- Collect.js draws the card fields as small secure frames inside your checkout form. They are styled to match your page, but the content comes from NMI.
- The shopper enters card details into those fields. Your site’s own code cannot read what is typed.
- On “Place order”, Collect.js sends the details to NMI and gets back a payment token.
- Your checkout submits the token to your server along with the order details.
- Your server calls the NMI API with your private API key and the token to run a sale or authorization.
- NMI returns approved or declined, and WooCommerce updates the order.
The payment token is meant for one use. If you want to charge the same card again later, for a subscription renewal or a returning customer, the card has to be saved to the NMI customer vault, which gives you a reusable reference instead.
Why hosted fields matter for PCI compliance
Every business that accepts cards has to meet the PCI DSS standard. How much work that involves depends heavily on whether card data touches your systems.
| Approach | Where card numbers go | Typical effect on your PCI work |
|---|---|---|
| Plain form fields posted to your server | Through your web server and possibly logs or database | Much larger scope, more controls to document and maintain |
| Hosted fields (Collect.js) | Straight from the browser to NMI | Smaller scope, since your server never sees card data |
| Full redirect to a hosted payment page | Entered on the provider’s page | Smaller scope, but the shopper leaves your checkout |
Hosted fields do not make you PCI exempt. You still need to complete the right self-assessment questionnaire, keep WordPress, plugins and your theme updated, use HTTPS, and protect admin accounts. The exact questionnaire that applies to your setup is something to confirm with your acquiring bank or processor, because they set the requirements for your account.
Because the checkout page still loads the script that draws the fields, the security of that page matters. A compromised plugin or injected script on checkout is a real risk, so keep the number of plugins that run on checkout small and remove ones you do not use.
The keys Collect.js needs
A Collect.js integration uses two different keys from your NMI gateway account, and mixing them up is the most common setup mistake.
- Public tokenization key: loaded in the browser so Collect.js can draw the fields and create tokens. It is safe for it to be visible in the page source.
- Private API key: stored on your server and used to run the actual transaction with the token. Never expose it in the browser, theme files or support tickets.
Both keys are created in your gateway account’s security or API key settings. Menu names differ between NMI’s own portal and rebranded versions from providers, so ask your provider if you cannot find them.
Using Collect.js through PaymentDash
Writing a Collect.js integration yourself means handling the script, token submission, error messages and both WooCommerce checkout types. PaymentDash is a WordPress plugin for WooCommerce stores on NMI that takes card entry through NMI’s hosted Collect.js fields on both the block checkout and the classic checkout, so card numbers never touch the website. You paste your public tokenization key and private API key in the setup assistant, and a built-in guide helps you find them in your gateway.
The same plugin can save cards to the NMI customer vault for repeat purchases and subscriptions, and supports optional 3D Secure 2 if the 3-D Secure service is enabled on your NMI account.
Making the fields look like your store
Hosted fields are frames, so your theme’s CSS does not style what is inside them directly. Collect.js accepts its own style settings, and good plugins pass sensible defaults so the fields match the rest of the form. A few practical tips:
- Keep the field height, border and font size close to your other checkout inputs so the card section does not look bolted on.
- Check the fields on a phone. Small frames can feel cramped if the checkout column is narrow.
- Make sure error messages for an invalid card number or expiry are visible and close to the field.
- Test with dark backgrounds if your theme uses one, so placeholder text stays readable.
Troubleshooting Collect.js on WooCommerce
The card fields are blank or missing
Check that the public tokenization key is entered and belongs to the same account as the private key. Then look at caching and optimization plugins: deferring, combining or delaying JavaScript on checkout often stops the Collect.js script from loading. Exclude the checkout page from those features.
The fields load but “Place order” does nothing
Another plugin’s script error on checkout can stop the token request. Open your browser’s developer console on checkout and look for errors. Disabling plugins one at a time on a staging site usually finds the culprit.
Security headers block the script
If your host or a security plugin sets a strict Content Security Policy, it must allow NMI’s script and frame sources. Ask your host to adjust the policy rather than turning it off.
Payments fail with an invalid token error
Tokens are single use. A double click or a page that resubmits the form can try the same token twice. A well-built plugin prevents duplicate submits, but a theme that alters the checkout button can interfere.
Collect.js and WooCommerce checkout types
WooCommerce has two checkout experiences: the newer block-based checkout and the classic shortcode checkout. They load payment methods differently, so a Collect.js plugin must explicitly support the one your store uses. If you switch from classic to block checkout, test your payment method again before you go live with the change.
Wrapping up
NMI Collect.js gives your WooCommerce store an on-page card form while keeping raw card numbers off your server. Use the right two keys, keep checkout free of script conflicts, confirm your PCI questionnaire with your processor, and test on both desktop and mobile.
If you want Collect.js card fields, saved cards and a payments dashboard without building the integration yourself, see the PaymentDash WooCommerce gateway features or compare plans on the pricing page.
Frequently asked questions
Is NMI Collect.js the same as a hosted payment page?
No. A hosted payment page sends the shopper to another page. Collect.js keeps the shopper on your checkout and places secure NMI fields inside your form.
Does Collect.js store cards for later?
Not by itself. It creates a one-time token. To charge a card again, save it to the NMI customer vault, which your plugin can do with the shopper’s consent.
Does Collect.js work with the WooCommerce block checkout?
It can, but only if your payment plugin supports the block checkout. Check the plugin’s documentation, and test after any checkout change.
