Quick Start

Generate a public API key for your app in NeonPay

As a application administrator, you can generate and revoke public API keys from the Developer Tools page in the NeonPay portal. This public API key is different from the private API key you use to access the NeonPay Charge API.

When starting development, you will need a public API key from NeonPay Sandbox (https://sandbox.neononepay.com/) to develop against the development version of the tokenization library.

For your production script, you will need a public API key from NeonPay (https://app.neononepay.com/)

Sample Script

We strongly recommend that you include fields in your payment form to collect your customer’s first name, last name, and address. Once you have that information collected, you can pass it as part of the tokenData parameter in .createToken() API method to create a more complete payment token.

Quickstart Example
<form id="paymentForm" action="#" method="POST">
    <h2>Payment Form</h2>
    <div id="cardFields"></div>
    <input type="hidden" id="token" value="" />
    <input id="paymentSubmit" type="submit" value="Process Payment" />
    <button id="swipe" type="button" name="button">Swipe</button>
</form>

<script src="https://cdn.sbx.neononepay.com/3.0/neonpay.js"></script>
<script type="text/javascript">
    // Set up the NeonPay fields on your form
    var neonpay = new NeonPay('public_f8564752122b08cc9c20c374562d5cc7', '19', {swipe: true});
    var card = neonpay.createField('card');
	
    (async () => {
        // Check if merchant can process payments first
        const result = await neonpay.canMakePayments();

        if (result) {
            card.mount('#cardFields');
        } else {
            // There was an error and the payment is not possible for this configuration
            document.querySelector('#cardFields').style.display = 'none';
        }
    })();

    var paymentForm = document.getElementById('paymentForm');
    var tokenField = document.getElementById('token');

    // Intercept form submission and retrieve token
    paymentForm.addEventListener('submit', function (event) {
        event.preventDefault();

        var tokenData = {
            first_name: 'Robert',
            middle_name: 'Norman',
            last_name: 'Ross',
            email: 'bob@ross.net',
            phone: '+18888606366',
            address_line_1: '4545 N. Ravenswood Ave.',
            address_line_2: '2nd Floor',
            address_city: 'Chicago',
            address_state: 'IL',
            address_zip: '60640',
            address_country: 'US'
        };

        var token = neonpay.createToken(card, tokenData).then(function(result) {
            // Pass the token to your Charge API call using
            // a hidden input that your form will serialize
            // or to an intermediary API on your server
            if (result.token) {
                tokenField.value = result.token;
            }
        });
    });
</script>

Google Pay Example
<form id="paymentForm" action="#" method="POST">
    <h2>Payment Form</h2>
    <div id="googlePayButton"></div>
    <input type="hidden" id="token" value="" />
    <input id="paymentSubmit" type="submit" value="Process Payment" />
</form>

<script src="https://cdn.sbx.neononepay.com/3.0/neonpay.js"></script>
<script type="text/javascript">
    // Set up the NeonPay fields on your form
    var neonpay = new NeonPay('public_f8564752122b08cc9c20c374562d5cc7', '19', {swipe: true});
    var googlepay = neonpay.createField('googlepay', {price: '25.00'});
	
    (async () => {
        // Check if merchant can process payments first
        const result = await neonpay.canMakePayments();

        if (result) {
            googlepay.mount('#googlePayButton');
        } else {
            // There was an error and the payment is not possible for this configuration
            document.querySelector('#googlePayButton').style.display = 'none';
        }
    })();

    var paymentForm = document.getElementById('paymentForm');
    var tokenField = document.getElementById('token');

    // Intercept form submission and retrieve token
    paymentForm.addEventListener('submit', function (event) {
        event.preventDefault();

        var tokenData = {
            first_name: 'Robert',
            middle_name: 'Norman',
            last_name: 'Ross',
            email: 'bob@ross.net',
            phone: '+18888606366',
            address_line_1: '4545 N. Ravenswood Ave.',
            address_line_2: '2nd Floor',
            address_city: 'Chicago',
            address_state: 'IL',
            address_zip: '60640',
            address_country: 'US'
        };

        var token = neonpay.createToken(googlepay, tokenData).then(function(result) {
            // Pass the token to your Charge API call using
            // a hidden input that your form will serialize
            // or to an intermediary API on your server
            if (result.token) {
                tokenField.value = result.token;
            }
        });
    });
</script>

DAFPay Example
<form id="paymentForm" action="#" method="POST">
    <h2>Payment Form</h2>
    <div id="dafButton"></div>
    <textarea type="hidden" id="token" value=""></textarea>
</form>

<script src="https://cdn.sbx.neononepay.com/3.2/neonpay.js"></script>
<script type="text/javascript">
    // Set up the NeonPay fields on your form
    var neonpay = new NeonPay('public_f8564752122b08cc9c20c374562d5cc7', '19');
    var daf = neonpay.createField('daf', {customerDetail: {firstName: 'John', lastName: 'Doe', amount: 1000.00});
	
    (async () => {
        // Check if merchant can process payments first
        const result = await neonpay.canMakePayments();

        if (result) {
            daf.mount('#dafButton');
        } else {
            // There was an error and the payment is not possible for this configuration
            document.querySelector('#dafButton').style.display = 'none';
        }
    })();

    var paymentForm = document.getElementById('paymentForm');
    var tokenField = document.getElementById('token');

    // Catch the 'dafAuthorized' event and retrieve grant information to call NeonPay's /dafDonations endpoint
    // https://docs.neononepay.com/api/#/DAF%20Donations/post_dafDonations
    // You will receive either a 'workflowSessionId' or a 'grantId' to be passed as part of the request body
    daf.on('dafAuthorized', function (event) {
        document.querySelector('#token').innerHTML = JSON.stringify(event);
    }); 
</script>

Step-by-Step Guide

Include NeonPay.js
<script src="https://cdn.app.neononepay.com/3.0/neonpay.js"></script>

NeonPay.js for Sandbox
<script src="https://cdn.sbx.neononepay.com/3.0/neonpay.js"></script>

Create DOM Elements
<div id="cardFields"></div>

Generate NeonPay Class
var neonpay = new NeonPay(apiKey, merchantId[, options]);

Example With Swiper On
var neonpay = new NeonPay(apiKey, merchantId, {swipe: true});

Example For Multiple Payment Types
var neonpayWithSwiper = new NeonPay(apiKey, merchantId, {swipe: true});
var neonpayAch = new NeonPay(apiKey, merchantId[, options]);

Define Payment Fields
var card = neonpay.createField('card');

Mount NeonPay Fields
(async () => {
    // Check if merchant can process payments first
    const result = await neonpay.canMakePayments();

    if (result) {
        card.mount('#cardFields');
    } else {
        // There was an error and the payment is not possible for this configuration
        // Handle this error state as your application sees fit
        document.querySelector('#cardFields').style.display = 'none';
    }
})();

// Alternatively, you may pass a DOM object reference instead
var container = document.querySelector('#cardFields');
(async () => {
    // Check if merchant can process payments first
    const result = await neonpay.canMakePayments();

    if (result) {
        card.mount(container);
    } else {
        // There was an error and the payment is not possible for this configuration
        // Handle this error state as your application sees fit
        container.style.display = 'none';
    }
})();

Set up Callback
neonpay.createToken(card).then(function(result) {
  // callback methods to handle result.error or result.token
});

Bank Account Form Styling Guide

The bank account forms for Payrix merchants can be customized through CSS. NeonPayJS inserts the fields into your payment form so they can be directly accessed. Here are a few examples of how you can style the form to match your payment form's style.

Customize into a grid layout

By default, the bank account fields are presented as a one column of full-width display blocks.

Utilizing CSS flexbox, the container element that the bank account form is mounted within and the NeonPay__field class can be modified to transform the form into a multi-column form.

Example CSS for a Two Column Grid
#achAccount {
    display: flex;
    flex-wrap: wrap;
}

#achAccount .NeonPay__field {
    flex: 1 0 calc(50% - 10px);
    margin-right: 10px;
}

Change the field order

Use flex order on the child .NeonPay__field classes to rearrange what order the fields appear in.

Example CSS to move email to the top
#achAccount {
    display: flex;
    flex-direction: column;
}

#achAccount div[class*="email"].NeonPay__field {
    order: -1;
}

Style the inputs and error messaging

By default, the form has minimal styling. The form can be styled directly with standard CSS.

Example CSS to style labels and inputs
#achAccount .NeonPay__field label {
    color: #54698d;
	font-size: 0.75rem;
}

#achAccount .NeonPay__field input, 
#achAccount .NeonPay__field select {
    border: 1px solid #54698d;
    border-radius: 15px;
    color: #002d41;
    outline: 0;
}

#achAccount .NeonPay__field.--error label {
    color: #dc143c;
}

#achAccount .NeonPay__field.--error input, 
#achAccount.--error .NeonPay__field select {
    border: 1px solid #dc143c;
    outline: 0;
}

#achAccount .NeonPay__field label:focus-within {
    color: #0074d9;
}

#achAccount .NeonPay__field input:focus, 
#achAccount .NeonPay__field select:focus {
    border: 1px solid #0074d9;
    outline: 0;
}

#achAccount .NeonPay__field .neonpay__bank-error {
    font-weight: bold;
    text-transform: uppercase;
}