Light Box Integration

If you're looking for a low-code solution, you can choose to display all sensitive payment fields in a single light box. Instead of embedding the payment fields inline on your website, they'll show as a light box that appears on top of your page.

First, you need to embed the script tag in your header, and this time variant should be set to lightbox.

<script
	src="https://secure.nmi.com/token/Collect.js"
	data-tokenization-key="your-token-key-here"
	variant="lightbox"
></script>

Then you need to add a button to your page where if clicked, the Collect.js modal appears. Collect.js will use the payButton id to know which element you want to trigger the light box, and ideally this would be the submit button on your page's form.

<button id="payButton">Submit</button>

All the entry and validation of payment data occur within this single box; once the customer enters valid information in all fields, they can submit the light box, which will automatically add the payment_token to your form data and will submit the form for you.