forage-js-sdk

forage-js-sdk

Forage Javascript SDK to create iframe input fields

Installation

Ensure that Node.js and npm are installed on your computer before running:

npm install forage-js-sdk

How to use

ForageFrame is a generic class representing a single iFrame inside your application's DOM. These iFrames will be used to securely collect text input from your customer. Each iFrame is composed of a single HTML input field and a "Powered by Forage" logo. ForageFrame objects should be instantiated through the static create method. The arguments to ForageFrame.create are,

• formId - The id of the tag where the iFrame for the input field will be inserted in the page
• frameOption - The type of iFrame you wish to instantiate, one of ebtCardCapture | balanceCheck | paymentCapture. These options correspond to the 3 functions described above.
• environment - either sandbox or prod
• bearerToken - The Oauth token generated by your backend which authenticates your app against the Forage Payments API
• options - An object with additional optional parameters
  • version - The version string for the SDK of format YYYY-MM-DD
  • css - Custom styling for the input field
  • callback: (state) => void - A function which allows you to respond to changes in state of the iFrame. This function is called every time the content of the iFrame input field changes.
  • successColor - hex color code for the input field border when the input is valid
  • errorColor - hex color code for the input field border when the input is not valid
  • placeholder - the placeholder text when there is no content inside the input field

Example EBT Card Capture

import { ForageFrame } from 'forage-js-sdk'

const cardInputFrame = ForageFrame.create(
  'card-capture-field',
  'ebtCardCapture',
  'sandbox',
)

// Card Input field is injected into the element with id card-capture-field and the customer inputs their card number.

cardInputFrame.submitEbtCardCapture(
  'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJhIjo0LCJleHAiOjE2Njg4MDcyNDF9.oQ2LMnhfTKEp-4dIuGuh3lec87_6rhKXfSJGMYMYNPA',
  '1234567',
  async (status: number, response: any) => {
    console.log(response)
  },
  (status: number, errors: any) => {
    console.log(errors)
  }
)

Example Balance Request

import { ForageFrame, Balance } from 'forage-js-sdk'

const balanceCheckFrame = ForageFrame.create(
  'balance-check-field',
  'pinBalanceCheckCapture',
  'sandbox',
)

// Balance Check PIN field is injected into the element with id balance-check-field and the customer inputs their EBT PIN.

balanceCheckFrame.submitPinBalanceCheckCapture(
  'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJhIjo0LCJleHAiOjE2Njg4MDcyNDF9.oQ2LMnhfTKEp-4dIuGuh3lec87_6rhKXfSJGMYMYNPA',
  '1234567',
  '6c0b6061d3',
  'tok_sandbox_9yAmy2SJ8QREz2qxSdcfxB',
  (status: number, response: Balance) => {
    console.log(response)
  },
  (status: number, errors: any) => {
    console.log(errors)
  }
)

Example Capture Request

import { ForageFrame } from 'forage-js-sdk'

const captureFrame = ForageFrame.create(
  'capture-field',
  'pinPaymentCapture',
  'sandbox',
)

// Balance Check PIN field is injected into the element with id balance-check-field and the customer inputs their EBT PIN.

captureFrame.submitPinPaymentCapture(
  'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJhIjo0LCJleHAiOjE2Njg4MDcyNDF9.oQ2LMnhfTKEp-4dIuGuh3lec87_6rhKXfSJGMYMYNPA',
  '1234567',
  '6c0b6061d3',
  'tok_sandbox_9yAmy2SJ8QREz2qxSdcfxB',
  (status: number, response: any) => {
    console.log(response)
  },
  (status: number, errors: any) => {
    console.log(errors)
  }
)

Forage Documentation

• Forage API Reference