nar-payment-client

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.

• Association ID is sent on initialization and is setup to take Digital Payments.
• Device and browser support Apple Pay.
• 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)
  })