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. There are three ForageFrame classes that can be instantiated: ForageCardCapture, ForageBalanceCapture, and ForagePaymentCapture. Each constructor takes in the following parameters

• formId - The id of the tag where the iFrame for the input field will be inserted in the page
• environment - either sandbox or prod
• 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 { ForageCardCapture, EbtCard } from 'forage-js-sdk'

const cardInputFrame = new ForageCardCapture(
  'card-capture-field',
  'sandbox',
)

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

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

Example Balance Request

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

const balanceCheckFrame = new ForageBalanceCapture(
  '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.submit(
  'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJhIjo0LCJleHAiOjE2Njg4MDcyNDF9.oQ2LMnhfTKEp-4dIuGuh3lec87_6rhKXfSJGMYMYNPA',
  '1234567',
  '6c0b6061d3',
  (status: number, response: Balance) => {
    console.log(response)
  },
  (status: number, errors: any) => {
    console.log(errors)
  }
)

Example Capture Request

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

const captureFrame = new ForagePaymentCapture(
  'capture-field',
  'sandbox',
)

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

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

Forage Documentation

• Forage API Reference