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.
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.
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>
Updated 3 months ago