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://payform.realtors.org/nar-payment-client.min.js"></script>

Usage

Custom CSS Documentation

Initialize

var paymentTypes

NarPaymentClient.init({
  //Set to 'test' or 'prod'. If nothing is set 'test' is the default.
  mode: 'test',
  //Optional Association ID (used only to get accepted payment types)
  associationId: 1,
  //Div element ID for the card number field
  cardNumberDivId: 'cardNumber',
  //Optional placeholder for the card number input
  cardNumberPlaceholder: 'Enter card number',
  //Optional configurable CSS for the card number input
  //Styling documentation: https://developer.cybersource.com/docs/cybs/en-us/digital-accept-flex-api/developer/all/rest/flex-api/microform-integ-v011/styling-v011.html
  styles: {
    'input': {

    },
    ':focus': { 'color': 'blue' },
    ':disabled': { 'cursor': 'not-allowed' },
    'valid': { 'color': '#3c763d' },
    'invalid': { 'color': '#a94442' }
  },
  //Callback function that will trigger when the user changes the Card Number
  onChange(cardInfo) {
    /*
      Example cardInfo
      {
        "empty": false,
        "valid": false,
        "couldBeValid": true,
        "paymentType": "Visa"
      }
    */
  }
})
  .then(data => {
    //NarPaymentClient 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
  })

Tokenize card data before submitting for authorization

var token
var cardInfo

NarPaymentClient.tokenizeCard({
  expirationMonth: '01',
  expirationYear: '2050'
})
  .then(data => {
    token = data.token
    /*
      At this point the 'Token' parameter can be sent to payment APIs in place of
      'CreditCardNumber', 'CreditCardExpirationDate', and 'CreditCardType'.
      'cardInfo' is also an Object in the response.
      Full Example:
        {
            "cardInfo": {
                "expirationYear": "2023",
                "number": "411111XXXXXX1111",
                "expirationMonth": "01",
                "paymentType": "Visa"
            },
            "token": "..."
        }
     */
  })
  .catch(error => {
    console.log('Error tokenizing CC#', error)
  })

Digital Payments (only for authorized domains)

Apple Pay

Apple Pay Button

Documentation

Show/Hide the button

The NarPaymentClient.isApplePayActive() function will return true/false based on the following conditions.

1. Association ID is sent on initialization and is setup to take Digital Payments.
2. Device and browser support Apple Pay.
3. Domain has been verified with Apple Pay.

Open authorization application

var applePayToken
var tokenInfo

NarPaymentClient.openApplePay('100.25')
  .then(data => {
    applePayToken = data.applePayToken
    tokenInfo = data.tokenInfo
    /*
      At this point the 'ApplePayToken' and 'TokenInfo' parameters can be sent to
      payment APIs in place of 'CreditCardNumber', 'CreditCardExpirationDate', and 'CreditCardType'.
      'cardInfo' is also an Object in the response.
      Full Example:
        {
            "cardInfo": {
                "paymentType": "Master Card",
                "displayName": "MasterCard 0049"
            },
            "applePayToken": "...",
            "tokenInfo": "..."
        }
    */
  })
  .catch(error => {
    console.log('Error tokenizing CC#', error)
  })