Code.js: Simple Inline Implementation

See the Simple Inline Example for a basic web page using this implementation.

While the Inline integration model offers many customizable options, you can also get started quickly with a basic form. First, install the following JavaScript on your payment form page, preferably in the HEAD element:

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

This script assumes that you’ve set up a payment form already. The form can be laid out however you’d like, but there should be block-level elements (div, for example) where the sensitive payment info will be collected. The following IDs are expected to be used in place of standard form inputs:

For Credit Card Payments

- ccnumber (Credit card number)
- ccexp (Credit card expiration date)
- cvv (CVV)

For Electronic Check Payments

- checkname (Checking account name)
- checkaccount (Checking account number)
- checkaba (Routing number)

This is a very basic form that has integrated Inline Collect.js.

<form>
    <input type="text" id="first_name">
    <input type="text" id="last_name">
    <input type="text" id="address">
    <div id="ccnumber"></div>
    <div id="ccexp"></div>
    <div id="cvv"></div>
    <input type="submit" id="payButton">
</form>
                

These elements will have iframes inserted into them, contents of which will be hosted by the gateway. They will be full width text fields and will use the style sniffer to match the rest of your page. The ID values let us know what field is collecting what information from the customer.

In addition to the empty fields, there must be a submit button in the form with an ID of “payButton.” When the customer clicks this to submit the form, Collect.js will collect the data from all inline iframes and submit the form with a new “payment_token” value which is an encrypted version of the payment data.

After this form is submitted to your site, you can submit the data to the gateway via the Direct Post API. For example:

security_key: 3456h45k6b4k56h54kj6h34kj6445hj4
type: sale
amount: 4.00
payment_token: VAWg4P-wCEDUE-W93u6P-FTn78y
first_name: Jane
last_name: Doe
address: 123 Main St.