---
updatedAt: 2026-09-03T21:54:27.000Z
agentTools:
  projectIndex: https://docs.joinforage.app/llms.txt
---

# Introduction

Add EBT payments to your web application

> 📘 Multi-payment experiences are not supported in online SDK
>
> Use the hosted solution if you are looking to process EBT and other payment methods in a single integration.

You can use the Forage JS SDK to process EBT payments in your web application.

<Image src="https://files.readme.io/9dc0b61-forage_js_mock.png" alt="A desktop checkout screen lists an option to pay with EBT SNAP powered by Forage" align="center" />

## Features

* Native UI component for collecting and tokenizing a customer's EBT Card number (also called the card PAN)
* Native UI component for securely collecting a customer's EBT PIN
* Built-in EBT Card number validation
* Control over the styling of a native EBT checkout experience
* Methods that securely collect and tokenize an EBT Card number, perform a balance check, and capture a payment

## Requirements

* Before you can use the Forage JS SDK, make sure that you have:
  * Met all of the [prerequisites for working with Forage](https://docs.joinforage.app/docs/overview#prerequisites)
  * Signed up for an account. [Contact us](https://www.joinforage.com/contact) if you don't yet have one.
  * [Set up your development environment](https://docs.joinforage.app/reference/set-up)

## Starter code and EBT Element life cycle

For comprehensive instructions, refer to the complete [Forage JS documentation](https://docs.joinforage.app/reference/js-sdk-reference).

The EBT Element lifecycle contains the following steps:

1. Initialize
2. Create
3. Attach event listeners
4. Mount
5. Submit
6. Destroy

### Step 1: Initialize

```javascript
const forage = Forage({
  merchantId: '<merchant-id>',
  sessionToken: '<session_token>',
  customerId: '<unique_id_for_your_customer>',
  appearance: {
    variables: {
      borderRadius: '8px'
    }
  }
})
```

Refer to the [Initialize Forage JS](https://docs.joinforage.app/reference/initialize-forage-js) docs for complete documentation.

### Step 2: Create an EBT Element

To create an EBT Element, invoke the `create()` method on the instance of the Forage object, passing in the `usecase` that corresponds to the target element type.

The following example creates a `​​ForageCardElement` that a customer can use to securely input their EBT Card number:

```javascript
const tokenizeCardElement = forage.create('tokenize_card')
```

### Step 3: Attach event listeners

The following example displays a message if there's an `event.error` on `change`:

```javascript
tokenizeCardElement.on('change', (event) => {
  const explainErrorSpan = document.getElementById('explain-error')
  if (event.error) {
    // show validation error to customer
    explainErrorSpan.textContent = event.error.message
  } else {
    // hide validation error
    explainErrorSpan.textContent = ''
  }
})
```

### Step 4: Mount the EBT Element

Mount the element to the DOM:

```javascript
tokenizeCardElement.mount('card-entry-container')
```

### Step 5: Submit the EBT Element

Call the EBT Element's `submit()` method to securely transmit the customer input to Forage, as in the example below:

```javascript
try {
  const tokenizationResult = await forage.tokenizeCard(
    tokenizeCardElement
  )
  const { ref: paymentMethodRef, type, balance, card } = tokenizationResult
} catch (error) {
  const { httpStatusCode, message, code } = error ?? {}
}
```

### Step 6: Destroy the EBT Element

```javascript
tokenizeCardElement.destroy()
```

## Next steps

* Explore [Forage JS reference docs](https://docs.joinforage.app/reference/js-sdk-reference)

<br />

# Sibling pages

* [Quickstart](https://docs.joinforage.app/docs/forage-js-quickstart.md)