This is an interactive example of an express deposit form that uses the Cashier JavaScript library.
To complete the payment flow, enter any 3 digits for the CVC number.

For more test cards, see [Test cards, IBANs, and ACH details](/docs/tutorials/test-payment-cards).

iframe
# Integrate an express deposit form (Experimental)

This guide describes how to integrate and embed a customizable, white-label express deposit form into your website using the Cashier JavaScript library, [Rebilly JS SDK](https://www.npmjs.com/package/rebilly-js-sdk), and [Express JS](https://expressjs.com/en/starter/installing.html).

In this guide, you configure the deposit form to retrieve a cashier token from a backend endpoint and use that token to mount the Cashier JavaScript library in the frontend.

Use deposit forms to allow customers to deposit funds into their accounts.

Download full app

- Prerequisites

  To complete this guide, you must have a website ID, an organization ID, a secret API key, and a customer ID.

  You must also have a payment gateway configured in your Rebilly account.
  For sandbox testing, the `TestProcessor` gateway is pre-configured.

  If your website uses a Content Security Policy (CSP), configure it before you embed the deposit form.
  For more information, see [Configure content security policy](/docs/dev-docs/set-up-environment#configure-content-security-policy).

  If you already have your IDs and API keys, continue to [Step 1: Set up the server](/docs/dev-docs/integrate-a-deposit-form#step-1-set-up-the-server).
  If you do not, view this guide to [Create a customer](/docs/dev-docs/create-a-customer) and get your IDs and API key in [Set up your environment](/docs/dev-docs/set-up-environment).

To display deposit amounts in the cashier form, create a deposit amount strategy.
If not specified, default amounts of `10`, `20`, and `30` are displayed, with an option to enter a custom amount.

For more information, see the [Create a deposit amount strategy API operation](/catalog/all/deposits/postdepositstrategy), or [Create a deposit amount strategy](/docs/settings/deposit-strategies#create-a-deposit-amount-strategy) in the Rebilly UI.

## Step 1: Set up the server

This section describes how to set up your server-side code.
This guide uses an Express node app to authenticate the client.

1. Install the required dependencies in your project directory:

```bash
npm install express rebilly-js-sdk --save
```
2. Initialize Express and the Rebilly SDK.

Provide your secret key, website ID, and organization ID.
For more information, see [Prerequisites](/docs/dev-docs/integrate-an-express-deposit#prerequisites).

Store your secret key in a secrets manager, not in your code.

Set up the Rebilly JS SDK and provide your secret API key.
Set `sandbox` to `true` to test in the sandbox environment.

Define a route for handling HTTP POST requests to the `/create-cashier` endpoint.

For more information, see the [Create a cashier API operation](/catalog/all/cashiers/postcashier) and this [Express example](https://expressjs.com/en/starter/hello-world.html).

Provide the ID of a customer.

For more information, see [Prerequisites](/docs/dev-docs/integrate-a-deposit-form#prerequisites).

Provide the currency of the transaction.

## Step 2: Set up the form

This section describes the basic setup for mounting the express deposit form.

For this guide, `index.html` and `deposit.js` must be placed in a `public` directory in the root of your project.

Include the Cashier JavaScript library using a CDN:

```HTML
https://cdn.rebilly.com/cashier/@latest/main.js
```

Optionally, use Cashier library CSS variables or classes to customize the appearance of the express deposit form.

For more information, see [Customize](/docs/dev-docs/customize-rebilly-cashier/).

Define an empty container element to hold the express deposit form.
This element is provided to the Cashier library `renderDeposit` method to mount the express deposit form.

Any HTML element may be used to contain the deposit form.

Send a request to the `/create-cashier` server endpoint you created in [Step 1: Set up a server](#step-1-set-up-the-server), and use the returned `cashierToken` to mount the express deposit form on the page.

## Step 3: View the deposit form

This section describes how to view the express deposit form in a web browser.

Run `server.js`. When the server is running, open a browser and visit `http://localhost:8080`.

For more information, see [Prerequisites](/docs/dev-docs/integrate-an-express-deposit#prerequisites).

```bash
node server.js
```

## Related topics

- [Hosted deposit API integration](/docs/dev-docs/hosted-deposit-integration/)
- [Customize](/docs/dev-docs/customize-rebilly-cashier/)
- [Reference](/docs/dev-docs/reference-rebilly-cashier/)