# Deposit form integration This guide describes how to integrate an embedded deposit form into your website using the Rebilly Instruments 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 customer JWT from a backend endpoint and use that JWT to authenticate the customer in the frontend. Use deposit forms to allow customers to deposit funds into their accounts. details summary 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 you already have your IDs and API keys, continue to [Step 1: Set up the server](#step-1-set-up-the-server). If you do not, create a customer and get your IDs and API key in [Set up your environment](/docs/dev-docs/set-up-environment). ## Step 1: Set up the server Set up an Express node app to authenticate the client. 1. Install the required dependencies in your project directory: ```bash npm install express rebilly-js-sdk body-parser --save ``` 2. Declare Express and the Rebilly SDK as dependencies. Configure an Express.js web server to serve static files and parse JSON requests. Provide your secret key, website ID, and organization ID. For more information, see [Prerequisites](/docs/dev-docs/integrate-a-deposit-form#prerequisites). Set up the Rebilly JS SDK, and provide sandbox mode and API key. Define a route for handling HTTP GET requests to the `/deposit` endpoint. For more information, see [Express example](https://expressjs.com/en/starter/hello-world.html). ## Step 2: Configure the endpoint This step describes how to define a basic endpoint for customer authentication. Define a route for handling HTTP POST requests to the `/deposit-request` endpoint. You can use any endpoint name. In this example, it is called `deposit-request`. In the request body, provide a `customerId`. Provide that value along with `mode: "passwordless"` to `rebilly.customerAuthentication.login`. Use the token provided by the passwordless login and exchange it for a JWT that will be used by Rebilly Instruments within the client. In the `scope` object, provide your organization ID. For more information, see [Prerequisites](/docs/dev-docs/integrate-a-deposit-form#prerequisites) In the `permissions` array, provide operation IDs for all actions that will be used in the Rebilly Instruments client. In the `customClaims` object, provide your website ID. For more information, see [Prerequisites](/docs/dev-docs/integrate-a-deposit-form#prerequisites) Create an asynchronous function that creates a deposit request and provides the required data. Update the response object values. Respond with the JWT token that is provided by the token exchange. Start an Express server on port 3000, listen for host and port information from the server, and log messages to the console. ## Step 3: Set up the client This step describes how to set up the client using a Content Delivery Network (CDN). For this guide, `deposit.html` and `deposit.js` must be placed in a directory named `client` in the root folder of the project. Include the Rebilly Instruments library using a CDN: ```HTML https://cdn.rebilly.com/instruments/@latest/core.js ``` The default mounting points are: `rebilly-instruments` and `rebilly-instruments-summary`. To provide custom mounting points, pass a valid CSS class or HTML element to the `RebillyInstrument.mount()` function as a parameter. ## Step 4: Configure the library Gather the `customerId` from `URLSearchParams` of the page hosting. Provide this value to the server endpoint to exchange it for a customer JWT. For demonstration purposes, this tutorial uses a hardcoded `customerId` value in `deposit.js`. Use the customer ID value you created in the [Prerequisites](/docs/dev-docs/integrate-a-deposit-form#prerequisites). In a production environment, you must obtain the `customerId` value from the `URLSearchParams` of the hosting page. Initialize the library and configure the experience. This method returns a `Promise` and accepts a single `configuration` object. For more information, see [RebillyInstrument.mount()](/docs/dev-docs/reference-rebilly-instruments/#rebillyinstrumentsmount). Provide the `apiMode`, `depositRequestId`, and the `JWT` token. For more information, see [Provide purchase data to Rebilly Instruments](/docs/dev-docs/reference-rebilly-instruments#deposit-configuration-properties). ## Step 5: Optional: Include listeners Use the `instrument-ready` and `purchase-completed` to connect to the lifecycle of the library. Indicates when an instrument token is created, and provides access to the instrument response. For more information, see [RebillyInstruments.on('instrument-ready')](/docs/dev-docs/reference-rebilly-instruments#rebillyinstruments.oninstrument-ready). Indicates when a purchase is completed, and provides access to the transaction response. For more information, see [RebillyInstruments.on('purchase-completed')](/docs/dev-docs/reference-rebilly-instruments#rebillyinstruments.onpurchase-completed). ## Step 6: View the form in your browser Run `server.js`. When the server is running, open a browser and navigate to `http://localhost:3000/deposit`. For more information, see [Prerequisites](/docs/dev-docs/integrate-a-deposit-form#prerequisites). ```bash node server.js ``` ## Related topics - [Deposit API integration](/docs/dev-docs/hosted-deposit-integration/) - [Customize Rebilly Instruments](/docs/dev-docs/customize-rebilly-instruments/) - [Examples](/docs/dev-docs/examples-rebilly-instruments/) - [Reference](/docs/dev-docs/reference-rebilly-instruments/)