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.
For more information on deposit request statuses, see [Deposit requests](/docs/dev-docs/deposit-requests).

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

- [Integrate a withdrawal form](/docs/dev-docs/integrate-a-withdrawal-form/)
- [Integrate a reverse withdrawal form](/docs/dev-docs/integrate-a-reverse-withdraw-form/)
- [Hosted deposit API integration](/docs/dev-docs/integrate-a-deposit-form)
- [Customize](/docs/dev-docs/customize-rebilly-cashier/)
- [Reference](/docs/dev-docs/reference-rebilly-cashier/)