This is an interactive example of a reverse withdrawal form that uses the Cashier JavaScript library.

iframe
# Integrate a reverse withdrawal form (Experimental)

This guide describes how to integrate and embed a customizable, white-label reverse withdrawal 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 form to retrieve a cashier token from a backend endpoint and use that token to mount the Cashier JavaScript library in the frontend.

Use the reverse withdrawal form to display a compact reverse withdrawal option when a customer has pending payout requests.
When a customer completes a reverse withdrawal, pending payout requests are canceled and funds are returned to the customer's account balance.
A [payout request](/docs/dev-docs/payout-requests) is a customer request to withdraw funds.

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 reverse withdrawal 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](#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).

The reverse withdrawal option is available only when the customer has a pending payout total that is greater than zero.
Provide `pendingPayoutTotal` when you [Create a cashier](/catalog/all/cashiers/postcashier), or pass `balances.pendingPayoutTotal` to `RebillyCashier.renderReverseWithdraw()`.

## 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-a-reverse-withdraw-form#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-reverse-withdraw-form#prerequisites).

Provide the currency of the transaction.

Provide the total value of all payout requests that are currently in a pending state.
This value is the maximum possible reverse withdrawal amount.

## Step 2: Set up the form

This section describes the basic setup for mounting the reverse withdrawal form.

For this guide, `index.html` and `reverse-withdraw.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 reverse withdrawal form.

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

Define an empty container element to hold the reverse withdrawal form.
This element is provided to the Cashier library `renderReverseWithdraw` method to mount the form.

Any HTML element may be used to contain the reverse withdrawal 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 reverse withdrawal form on the page.

To handle reverse withdrawal completion, use `RebillyCashier.on()` to listen for the `reverse-withdrawal-completed` event.
The reverse withdrawal form does not support `completeAction`.

### Customize the empty state

When the customer has no pending payout requests, the reverse withdrawal form displays a default empty state message.
To customize this message, add a child element with the `no-pending-withdrawal` slot to the mount element before you call `RebillyCashier.renderReverseWithdraw()`:

```HTML
<div id="reverse-withdraw">
  <section slot="no-pending-withdrawal">
    <h3>No pending withdrawals</h3>
    <p>You do not have any pending payout requests.</p>
  </section>
</div>
```

## Step 3: View the reverse withdrawal form

This section describes how to view the reverse withdrawal 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-a-reverse-withdraw-form#prerequisites).

```bash
node server.js
```

## Related topics

- [Integrate a withdrawal form](/docs/dev-docs/integrate-a-withdraw-form/)
- [Integrate an express deposit form](/docs/dev-docs/integrate-an-express-deposit/)
- [Customize](/docs/dev-docs/customize-rebilly-cashier/)
- [Reference](/docs/dev-docs/reference-rebilly-cashier/)