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/2.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/2.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>

Step-by-Step Guide

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

NeonPay.js for Sandbox
<script src="https://cdn.sbx.neononepay.com/2.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});

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
});