NAR Payment Client

Overview

Payment client used to tokenize card data before sending payment.

Installation

Webpack

npm install nar-payment-client --save

import NarPaymentClient from 'nar-payment-client'
//** OR **//
const NarPaymentClient = require('nar-payment-client')

HTML

<script src="https://{TODO}/nar-payment-client.min.js"></script>

Usage

//Storage variables
var paymentTypes
var token
var cardInfo

NarPaymentClient.init({
  mode: 'test', // Set to 'test' or 'prod'. If nothing is set 'test' is the default.
  associationId: 1,
  cardNumberDivId: 'cardNumber',
  cardNumberPlaceholder: 'Enter card number',
  styles: {
    'input': {

    },
    ':focus': { 'color': 'blue' },
    ':disabled': { 'cursor': 'not-allowed' },
    'valid': { 'color': '#3c763d' },
    'invalid': { 'color': '#a94442' }
  }
})
  .then(data => {
    //Form field for CC# is initialized and for is ready for user input

    // 'paymentTypes' is an array of accepted payment types for the association
    // and can also be accessed using 'NarPaymentClient.paymentTypes' once initialized
    paymentTypes = data.paymentTypes
  })

function submitCardData(expMonth, expYear) {
  NarPaymentClient.tokenizeCard({
    expirationMonth: expMonth,
    expirationYear: expYear
  })
    .then(data => {
      token = data.token
      cardInfo = data.cardInfo

      //At this point the 'token' can be sent in place of card info (number and expiration)
    })
    .catch(error => {
      console.log('Error tokenizing CC#', error)
    })
}