Reference

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

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.

RebillyCashier.render({ cashierToken, mountElement });

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

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

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);

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.

RebillyCashier.renderDeposit({ cashierToken, mountElement });

Standard deposit form:

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

Express deposit form:

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

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.

<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.

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.

RebillyCashier.renderWithdraw({ cashierToken, mountElement });

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

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.

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

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.

RebillyCashier.renderReverseWithdraw({ cashierToken, mountElement });

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

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.

<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>

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.

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
});