Quick Start Guide

Accept payments online in four easy steps

This quick setup guide will get Collect.js running on your site in minutes. See our advanced integrations for solution customization options.

Video Tutorial

1. Create an API Key

Collect.js authenticates with a public API key that can only be used to generate payment tokens. Create this in the Merchant Portal under Settings > Security Keys.

2. Add the Collect.js Script Tag to Your Checkout Page

Collect.js is loaded from the gateway with the following in your page header.

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

3. Add Credit Card Fields to Your Form

Details on implementing Apple Pay, Google Pay, and e-check further down this page, but let's start with the basic credit card fields.

Collect.js is looking for specific "id" values on the page to embed its iframes, as well as what button submits the form. These ids can be anything you want, but this example uses the defaults.

<form action="pay.php" type="POST">
	<div id="ccnumber"></div>
	<div id="ccexp"></div>
	<div id="cvv"></div>
	<input id="payButton" type="submit" value="Submit Payment">
</form>

On page load, these divs will each have an iframe embedded as a child element. These iframes are hosted by the gateway and each will contain a single input element. These inputs will be unstyled by default. Click here to see how to customize their CSS. The submit button will maintain your styling and will not have an iframe added, the id simply tells Collect.js what button submits the form relevant to the payment token.

πŸ“˜

Additional Solutions

Light Box offers an alternative pop-up style display for an even easier integration.

Gateway.js allows you to add additional gateway services, such as Payer Authentication (3D Secure) to your implementation.

4. Submit the Payment Token with the Payment API

When the user fills out the embedded fields and submits the form, Collect.js will automatically add the payment_token variable and token value to the form submission, which in this case is being sent to the site's /pay.php endpoint. From there your server should create the full Payment API request for what action you're performing, including the payment_token.

curl -X POST [URL] \
    -H "Content-Type: application/x-www-form-urlencoded" \
    -d "security_key=3456h45k6b4k56h54kj6h34kj6445hj4" \
    -d "type=sale" \
    -d "amount=4.00" \
    -d "payment_token=3455zJms-7qA2K2-VdVrSu-Rv7WpvPuG7s8" \
    -d "first_name=Jane" \
    -d "last_name=Doe" \
    -d "address=123 Main St."

🚧

Tip

For a smoother user experience, disable form submission until you have confirmed that the payment fields are successfully stored, as well as any other pre-transaction checks you perform.

That's it, your server will get a response from the Payment API with the result of your request, and the payment token will be destroyed since it has been used.

This is just a starting point meant to explain the general workflow for using Collect.js, but there is far more you can do to make this your own.

HTML Example File

The following is a functioning Collect.js integration using Apple Pay/Google Pay, custom CSS, product info, and uses callbacks to perform actions when specific events (like all payment fields pass validation)

Download this working sample (162KB ZIP) to see a barebones integration in action.

<html>
  <head>
    <!-- This loads Collect.js from the server -->
    <script
      src="https://secure.nmi.com/token/Collect.js"
      data-tokenization-key="your-token-goes-here"
    ></script>
  </head>
  <body>
    <h1>Payment Component Sample</h1>
    <!-- Create a form that will submit all customer data as well
			 as the Collect.js payment token to another page on your
			 server -->
    <form action="/your-page.php" method="POST">
      <!-- Normally not a visible input to the user, but here
				 for easy testing -->
      <div class="input">
        <span>Amount</span>
        <input type="text" name="amount" value="10.00" />
      </div>
      <!-- Customer name, email, and postal code for AVS verification -->
      <div class="input">
        <span>First Name</span>
        <input type="text" name="firstname" value="Example" />
      </div>
      <div class="input">
        <span>Last Name</span>
        <input type="text" name="lastname" value="User" />
      </div>
      <div class="input">
        <span>Email Address</span>
        <input type="text" name="email" value="[email protected]" />
      </div>
      <div class="input">
        <span>Postal Code</span>
        <input type="text" name="zip" value="12345" />
      </div>
      <!-- Alternate payment methods can let the customer skip
				 the rest of the form, so it's usually a good idea to put
				 these at the top to the customer sees it first -->
      <div class="alternatePyament">
        <div id="applePayButton"></div>
        <div id="googlePayButton"></div>
      </div>
      <!-- Credit card fields -->
      <div class="input">
        <span>Card Number</span>
        <div id="demoCcnumber"></div>
      </div>
      <div class="input">
        <span>Expiration Date</span>
        <div id="demoCcexp"></div>
      </div>
      <div class="input">
        <span>CVV</span>
        <div id="demoCvv"></div>
      </div>
      <!-- ACH fields -->
      <div class="input">
        <span>Name on Account</span>
        <div id="demoCheckname"></div>
      </div>
      <div class="input">
        <span>Account Number</span>
        <div id="demoCheckaccount"></div>
      </div>
      <div class="input">
        <span>Routing Number</span>
        <div id="demoCheckaba"></div>
      </div>
      <!-- Submit the form to your server -->
      <button id="demoPayButton" type="button">Pay</button>
    </form>
    <script>
      // This will load Collect.js and render text fields
      // on page load, but you can call "CollectJS.configure"
      // whenever you want to load the payment form fields
      document.addEventListener("DOMContentLoaded", function () {
        CollectJS.configure({
          paymentSelector: "#demoPayButton",
          variant: "inline",
          googleFont: "Montserrat:400",
          customCss: {
            color: "#0000ff",
            "background-color": "red",
          },
          invalidCss: {
            color: "white",
            "background-color": "red",
          },
          validCss: {
            color: "black",
            "background-color": "#d0ffd0",
          },
          placeholderCss: {
            color: "green",
            "background-color": "#687C8D",
          },
          focusCss: {
            color: "yellow",
            "background-color": "#202020",
          },
          fields: {
            ccnumber: {
              selector: "#demoCcnumber",
              title: "Card Number",
              placeholder: "0000 0000 0000 0000",
            },
            ccexp: {
              selector: "#demoCcexp",
              title: "Card Expiration",
              placeholder: "00 / 00",
            },
            cvv: {
              display: "show",
              selector: "#demoCvv",
              title: "CVV Code",
              placeholder: "***",
            },
            checkaccount: {
              selector: "#demoCheckaccount",
              title: "Account Number",
              placeholder: "0000000000",
            },
            checkaba: {
              selector: "#demoCheckaba",
              title: "Routing Number",
              placeholder: "000000000",
            },
            checkname: {
              selector: "#demoCheckname",
              title: "Name on Checking Account",
              placeholder: "Jane Doe",
            },
            googlePay: {
              selector: ".googlePayButton",
              shippingAddressRequired: true,
              shippingAddressParameters: {
                phoneNumberRequired: true,
                allowedCountryCodes: ["US", "CA"],
              },
              billingAddressRequired: true,
              billingAddressParameters: {
                phoneNumberRequired: true,
                format: "MIN",
              },
              emailRequired: true,
              buttonType: "buy",
              buttonColor: "white",
              buttonLocale: "en",
            },
            applePay: {
              selector: ".applePayButton",
              shippingMethods: [
                {
                  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",
                },
              ],
              shippingType: "delivery",
              requiredBillingContactFields: ["postalAddress", "name"],
              requiredShippingContactFields: ["postalAddress", "name"],
              contactFields: ["phone", "email"],
              contactFieldsMappedTo: "shipping",
              lineItems: [
                {
                  label: "Foobar",
                  amount: "3.00",
                },
                {
                  label: "Arbitrary Line Item #2",
                  amount: "1.00",
                },
              ],
              totalLabel: "foobar",
              totalType: "pending",
              type: "buy",
              style: {
                "button-style": "white-outline",
                height: "50px",
                "border-radius": "0",
              },
            },
          },
          price: "1.00",
          currency: "USD",
          country: "US",
          validationCallback: function (field, status, message) {
            if (status) {
              var message = field + " is now OK: " + message;
            } else {
              var message = field + " is now Invalid: " + message;
            }
            console.log(message);
          },
          timeoutDuration: 10000,
          timeoutCallback: function () {
            console.log(
              "The tokenization didn't respond in the expected timeframe.  This could be due to an invalid or incomplete field or poor connectivity"
            );
          },
          fieldsAvailableCallback: function () {
            console.log("Collect.js loaded the fields onto the form");
          },
          callback: function (response) {
            alert(response.token);
            var input = document.createElement("input");
            input.type = "hidden";
            input.name = "payment_token";
            input.value = response.token;
            var form = document.getElementsByTagName("form")[0];
            form.appendChild(input);
            form.submit();
          },
        });
      });
    </script>
  </body>
</html>