# Reference

This topic is a reference for the Rebilly Cashier JavaScript library methods.

## RebillyCashier.render()

Use this method to mount the cashier form to the DOM of your website.
The cashier form displays deposit, withdrawal, and transaction history tabs in a single embedded component.
This method accepts a single `configuration` object and returns the mounted web component element.

```JavaScript
RebillyCashier.render({ cashierToken, mountElement });
```

### Mount configuration

| **Option**  | **Type** | **Description** |
|  --- | --- | --- |
| `cashierToken` | string | **Required.** Cashier token returned from a [Create a cashier](/catalog/all/cashiers/postcashier) request. |
| `mountElement` | Query selector or `HTMLElement` | **Required.** [HTMLElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement) or a [query selector](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector#selectors) for the element into which the cashier form should be placed. |
| `balances` | object | **Optional.** Balance values to display in the cashier form.
Use this option to override values returned by the API.
Supported properties: `balance`, `bonusBalance`, `pendingPayoutTotal`, and `canWithdraw`. |
| `completeAction` | function | **Optional.** Callback that runs when the customer presses **Continue** on a deposit, withdrawal, or reverse withdrawal result screen instead of redirecting to a URL.
The callback receives a type value of `deposit`, `withdrawal`, or `reverse-withdrawal`.
The cashier form displays the reverse withdrawal option when the customer has pending payout requests. |
| `refreshToken` | function | **Optional.** Function that returns a refreshed cashier token when the current token expires. |


### Example

```JavaScript
RebillyCashier.render({
  cashierToken: "TOKEN",
  mountElement: "#cashier-form",
});
```

For more information, see [Integrate a cashier form](/docs/dev-docs/integrate-a-cashier-form/).

### Slots

Add slotted content as child elements of the mounted `rebilly-cashier` web component returned by `RebillyCashier.render()`.

| **Slot name**  | **Description** |
|  --- | --- |
| `withdrawal-complete-action` | Content displayed on the withdrawal form result screen after a successful payout request.
If you provide this slot, it replaces the default **Continue** button. |


```JavaScript
const cashier = RebillyCashier.render({
  cashierToken: "TOKEN",
  mountElement: "#cashier-form",
});

const button = document.createElement("button");
button.type = "button";
button.textContent = "Return to account";
button.setAttribute("slot", "withdrawal-complete-action");
cashier.appendChild(button);
```

## RebillyCashier.renderDeposit()

Use this method to mount a deposit form to the DOM of your website.
Set `express` to `true` to mount the express deposit form, which displays a compact deposit flow with payment instrument selection.
This method accepts a single `configuration` object and returns the mounted web component element.

```JavaScript
RebillyCashier.renderDeposit({ cashierToken, mountElement });
```

### Mount configuration

| **Option**  | **Type** | **Description** |
|  --- | --- | --- |
| `cashierToken` | string | **Required.** Cashier token returned from a [Create a cashier](/catalog/all/cashiers/postcashier) request. |
| `mountElement` | Query selector or `HTMLElement` | **Required.** [HTMLElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement) or a [query selector](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector#selectors) for the element into which the deposit form should be placed. |
| `express` | boolean | Optional.
Set to `true` to mount the express deposit form.
When omitted or set to `false`, the Cashier library mounts the standard deposit form. |
| `completeAction` | function | **Optional.** Callback that runs when the customer presses **Continue** on the deposit result screen or the reverse withdrawal result screen instead of redirecting to a URL.
The callback receives a type value of `deposit` or `reverse-withdrawal`.
The deposit form displays the reverse withdrawal option when the customer has pending payout requests. |
| `refreshToken` | function | Optional callback that runs to refresh the cashier token. |


### Example

Payment methods that are displayed in deposit forms are based on the gateway configuration.
For more information, see [Set up a payment gateway](/docs/settings/set-up-a-gateway).

Standard deposit form:

```JavaScript
RebillyCashier.renderDeposit({
  cashierToken: "TOKEN",
  mountElement: "#deposit-form",
});
```

Express deposit form:

```JavaScript
RebillyCashier.renderDeposit({
  cashierToken: "TOKEN",
  mountElement: "#deposit-form",
  express: true,
});
```

### Slots

The following slots apply to the express deposit form only.
Add slotted content as child elements of the mount element before you call `RebillyCashier.renderDeposit()`.
When the form mounts, the Cashier library moves these elements into the `rebilly-express-deposit` web component.

| **Slot name**  | **Description** |
|  --- | --- |
| `header-action` | Content displayed in the header of the express deposit form.
Use this slot to add navigation or other actions, such as a link to a banking page. |
| `deposit-complete-action` | Content displayed on the deposit result screen after a successful deposit, or on the reverse withdrawal result screen.
If you provide this slot, it replaces the default **Continue** button. |
| `no-methods` | Content displayed when the customer has no saved payment instruments.
If you do not provide this slot, the form displays a default warning message. |


```HTML
<div id="deposit-form">
  <header slot="header-action">
    <button type="button">Banking</button>
  </header>
  <section slot="deposit-complete-action">
    <button type="button">Return to account</button>
  </section>
  <section slot="no-methods">
    <p>Add a payment method to make a deposit.</p>
  </section>
</div>
```

For more information, see [Integrate an express deposit form](/docs/dev-docs/integrate-an-express-deposit/).

## RebillyCashier.renderWithdraw()

Use this method to mount the standard withdrawal form to the DOM of your website.
The standard withdrawal form displays the full payout request flow.
This method accepts a single `configuration` object and returns the mounted web component element.

```JavaScript
RebillyCashier.renderWithdraw({ cashierToken, mountElement });
```

### Mount configuration

| **Option**  | **Type** | **Description** |
|  --- | --- | --- |
| `cashierToken` | string | **Required.** Cashier token.
Returned from the [Create a cashier API operation](/catalog/all/cashiers/postcashier) as `cashierToken`. |
| `mountElement` | Query selector or `HTMLElement` | **Required.** [HTMLElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement) or a [query selector](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector#selectors) for the element into which the withdrawal form must be placed. |
| `balances` | object | **Optional.** Balance values to display in the withdrawal form.
Use this option to override values returned by the API.
Supported properties: `balance`, `bonusBalance`, `pendingPayoutTotal`, and `canWithdraw`. |
| `completeAction` | function | **Optional.** Callback that runs when the customer presses **Continue** on the withdrawal form result screen or the reverse withdrawal form result screen instead of redirecting to a URL.
The callback receives a type value of `withdrawal` or `reverse-withdrawal`.
The withdrawal form displays the reverse withdrawal option when the customer has pending payout requests. |
| `refreshToken` | function | **Optional.** Function that returns a refreshed cashier token when the current token expires. |


### Example

```JavaScript
RebillyCashier.renderWithdraw({
  cashierToken: "TOKEN",
  mountElement: "#withdraw-form",
});
```

For more information, see [Integrate a withdrawal form](/docs/dev-docs/integrate-a-withdrawal-form/).

### Slots

Add slotted content as child elements of the mount element before you call `RebillyCashier.renderWithdraw()`.
When the form mounts, the Cashier library moves these elements into the `rebilly-withdraw-form` web component.

| **Slot name**  | **Description** |
|  --- | --- |
| `withdrawal-complete-action` | Content displayed on the withdrawal form result screen after a successful payout request.
If you provide this slot, it replaces the default **Continue** button. |


```HTML
<div id="withdraw-form">
  <button slot="withdrawal-complete-action" type="button">Return to account</button>
</div>
```

## RebillyCashier.renderReverseWithdraw()

Use this method to mount the reverse withdrawal form to the DOM of your website.
The reverse withdrawal form displays a compact reverse withdrawal option when the customer has pending payout requests.
This method accepts a single `configuration` object and returns the mounted web component element.

```JavaScript
RebillyCashier.renderReverseWithdraw({ cashierToken, mountElement });
```

### Mount configuration

| **Option**  | **Type** | **Description** |
|  --- | --- | --- |
| `cashierToken` | string | **Required.** Cashier token.
Returned from the [Create a cashier API operation](/catalog/all/cashiers/postcashier) as `cashierToken`. |
| `mountElement` | Query selector or `HTMLElement` | **Required.** [HTMLElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement) or a [query selector](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector#selectors) for the element into which the reverse withdrawal form should be placed. |
| `balances` | object | **Optional.** Balance values to display in the reverse withdrawal form.
Use this option to override values returned by the API.
Supported properties: `balance`, `bonusBalance`, `pendingPayoutTotal`, and `canWithdraw`. |
| `refreshToken` | function | **Optional.** Function that returns a refreshed cashier token when the current token expires. |


### Example

```JavaScript
RebillyCashier.renderReverseWithdraw({
  cashierToken: "TOKEN",
  mountElement: "#reverse-withdraw-form",
});
```

This method does not support `completeAction`.
To respond when the customer completes a reverse withdrawal, use the `reverse-withdrawal-completed` event with `RebillyCashier.on()`.
For more information, see [Integrate a reverse withdrawal form](/docs/dev-docs/integrate-a-reverse-withdraw-form/).

### Slots

Add slotted content as child elements of the mount element before you call `RebillyCashier.renderReverseWithdraw()`.
When the form mounts, the Cashier library moves these elements into the `rebilly-reverse-withdraw` web component.

| **Slot name**  | **Description** |
|  --- | --- |
| `no-pending-withdrawal` | Content displayed when the customer has no pending payout requests.
If you do not provide this slot, the form displays a default message. |


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

## RebillyCashier.on()

Use this method to set up communication callbacks that trigger when certain events happen, such as `deposit-completed`, `withdrawal-completed`, and `reverse-withdrawal-completed`.
The `reverse-withdrawal-completed` callback receives an object with `amount` and `currency` properties.
Use these callbacks to respond to Cashier library events and integrate with your application workflow.
This method accepts a message type and a callback function.

```JavaScript
RebillyCashier.on('deposit-completed', (transaction) => {
  console.log('Deposit completed:', transaction);
  // Handle deposit completion event
});

RebillyCashier.on('withdrawal-completed', (payoutRequest) => {
  console.log('Withdrawal completed:', payoutRequest);
  // Handle withdrawal completion event
});

RebillyCashier.on('reverse-withdrawal-completed', (data) => {
  console.log('Reverse withdrawal completed:', data);
  // Handle reverse withdrawal completion event
});
```