{"templateId":"markdown","sharedDataIds":{"sidebar":"sidebar-sidebars.yaml"},"props":{"metadata":{"markdoc":{"tagList":["admonition"]},"redocly_category":"Documentation","type":"markdown"},"seo":{"title":"Rebilly Cashier library reference","description":"Learn about Rebilly Cashier JavaScript library.","siteUrl":"https://www.rebilly.com","image":"/assets/rebillysocial.94fb32fc280c9e84b963c440ec462771d25f4e6fdaaa6c59de41e8135113b46b.db81178d.png","lang":"en-US","keywords":"Developer docs, Rebilly Cashier library."},"dynamicMarkdocComponents":[],"compilationErrors":[],"ast":{"$$mdtype":"Tag","name":"article","attributes":{},"children":[{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"reference","__idx":0},"children":["Reference"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This topic is a reference for the Rebilly Cashier JavaScript library methods."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"rebillycashierrender","__idx":1},"children":["RebillyCashier.render()"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["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 ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["configuration"]}," object and returns the mounted web component element."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"JavaScript","header":{"controls":{"copy":{}}},"source":"RebillyCashier.render({ cashierToken, mountElement });\n","lang":"JavaScript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"mount-configuration","__idx":2},"children":["Mount configuration"]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"width":"150","data-label":"Option"},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Option"]}," "]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Type"},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Type"]}]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Description"},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Description"]}]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["cashierToken"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["string"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Required."]}," Cashier token returned from a ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/catalog/all/cashiers/postcashier"},"children":["Create a cashier"]}," request."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["mountElement"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Query selector or ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["HTMLElement"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Required."]}," ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement"},"children":["HTMLElement"]}," or a ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector#selectors"},"children":["query selector"]}," for the element into which the cashier form should be placed."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["balances"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["object"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Optional."]}," Balance values to display in the cashier form."," ","Use this option to override values returned by the API."," ","Supported properties: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["balance"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["bonusBalance"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["pendingPayoutTotal"]},", and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["canWithdraw"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["completeAction"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["function"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Optional."]}," Callback that runs when the customer presses ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Continue"]}," on a deposit, withdrawal, or reverse withdrawal result screen instead of redirecting to a URL."," ","The callback receives a type value of ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["deposit"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["withdrawal"]},", or ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["reverse-withdrawal"]},"."," ","The cashier form displays the reverse withdrawal option when the customer has pending payout requests."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["refreshToken"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["function"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Optional."]}," Function that returns a refreshed cashier token when the current token expires."]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"example","__idx":3},"children":["Example"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"JavaScript","header":{"controls":{"copy":{}}},"source":"RebillyCashier.render({\n cashierToken: \"TOKEN\",\n mountElement: \"#cashier-form\",\n});\n","lang":"JavaScript"},"children":[]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For more information, see ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/docs/dev-docs/integrate-a-cashier-form/"},"children":["Integrate a cashier form"]},"."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"slots","__idx":4},"children":["Slots"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Add slotted content as child elements of the mounted ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["rebilly-cashier"]}," web component returned by ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["RebillyCashier.render()"]},"."]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"width":"200","data-label":"Slot name"},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Slot name"]}," "]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Description"},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Description"]}]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["withdrawal-complete-action"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Content displayed on the withdrawal form result screen after a successful payout request."," ","If you provide this slot, it replaces the default ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Continue"]}," button."]}]}]}]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"JavaScript","header":{"controls":{"copy":{}}},"source":"const cashier = RebillyCashier.render({\n cashierToken: \"TOKEN\",\n mountElement: \"#cashier-form\",\n});\n\nconst button = document.createElement(\"button\");\nbutton.type = \"button\";\nbutton.textContent = \"Return to account\";\nbutton.setAttribute(\"slot\", \"withdrawal-complete-action\");\ncashier.appendChild(button);\n","lang":"JavaScript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"rebillycashierrenderdeposit","__idx":5},"children":["RebillyCashier.renderDeposit()"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Use this method to mount a deposit form to the DOM of your website."," ","Set ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["express"]}," to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["true"]}," to mount the express deposit form, which displays a compact deposit flow with payment instrument selection."," ","This method accepts a single ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["configuration"]}," object and returns the mounted web component element."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"JavaScript","header":{"controls":{"copy":{}}},"source":"RebillyCashier.renderDeposit({ cashierToken, mountElement });\n","lang":"JavaScript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"mount-configuration-1","__idx":6},"children":["Mount configuration"]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"width":"150","data-label":"Option"},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Option"]}," "]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Type"},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Type"]}]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Description"},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Description"]}]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["cashierToken"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["string"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Required."]}," Cashier token returned from a ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/catalog/all/cashiers/postcashier"},"children":["Create a cashier"]}," request."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["mountElement"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Query selector or ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["HTMLElement"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Required."]}," ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement"},"children":["HTMLElement"]}," or a ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector#selectors"},"children":["query selector"]}," for the element into which the deposit form should be placed."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["express"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["boolean"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Optional."," ","Set to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["true"]}," to mount the express deposit form."," ","When omitted or set to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["false"]},", the Cashier library mounts the standard deposit form."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["completeAction"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["function"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Optional."]}," Callback that runs when the customer presses ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["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 ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["deposit"]}," or ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["reverse-withdrawal"]},"."," ","The deposit form displays the reverse withdrawal option when the customer has pending payout requests."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["refreshToken"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["function"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Optional callback that runs to refresh the cashier token."]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"example-1","__idx":7},"children":["Example"]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Payment methods that are displayed in deposit forms are based on the gateway configuration."," ","For more information, see ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/docs/settings/set-up-a-gateway"},"children":["Set up a payment gateway"]},"."]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Standard deposit form:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"JavaScript","header":{"controls":{"copy":{}}},"source":"RebillyCashier.renderDeposit({\n cashierToken: \"TOKEN\",\n mountElement: \"#deposit-form\",\n});\n","lang":"JavaScript"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Express deposit form:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"JavaScript","header":{"controls":{"copy":{}}},"source":"RebillyCashier.renderDeposit({\n cashierToken: \"TOKEN\",\n mountElement: \"#deposit-form\",\n express: true,\n});\n","lang":"JavaScript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"slots-1","__idx":8},"children":["Slots"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The following slots apply to the express deposit form only."," ","Add slotted content as child elements of the mount element before you call ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["RebillyCashier.renderDeposit()"]},"."," ","When the form mounts, the Cashier library moves these elements into the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["rebilly-express-deposit"]}," web component."]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"width":"200","data-label":"Slot name"},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Slot name"]}," "]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Description"},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Description"]}]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["header-action"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["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."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["deposit-complete-action"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["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 ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Continue"]}," button."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["no-methods"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Content displayed when the customer has no saved payment instruments."," ","If you do not provide this slot, the form displays a default warning message."]}]}]}]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"HTML","header":{"controls":{"copy":{}}},"source":"
\n
\n \n
\n
\n \n
\n
\n

Add a payment method to make a deposit.

\n
\n
\n","lang":"HTML"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For more information, see ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/docs/dev-docs/integrate-an-express-deposit/"},"children":["Integrate an express deposit form"]},"."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"rebillycashierrenderwithdraw","__idx":9},"children":["RebillyCashier.renderWithdraw()"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["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 ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["configuration"]}," object and returns the mounted web component element."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"JavaScript","header":{"controls":{"copy":{}}},"source":"RebillyCashier.renderWithdraw({ cashierToken, mountElement });\n","lang":"JavaScript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"mount-configuration-2","__idx":10},"children":["Mount configuration"]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"width":"150","data-label":"Option"},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Option"]}," "]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Type"},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Type"]}]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Description"},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Description"]}]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["cashierToken"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["string"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Required."]}," Cashier token."," ","Returned from the ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/catalog/all/cashiers/postcashier"},"children":["Create a cashier API operation"]}," as ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["cashierToken"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["mountElement"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Query selector or ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["HTMLElement"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Required."]}," ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement"},"children":["HTMLElement"]}," or a ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector#selectors"},"children":["query selector"]}," for the element into which the withdrawal form must be placed."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["balances"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["object"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Optional."]}," Balance values to display in the withdrawal form."," ","Use this option to override values returned by the API."," ","Supported properties: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["balance"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["bonusBalance"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["pendingPayoutTotal"]},", and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["canWithdraw"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["completeAction"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["function"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Optional."]}," Callback that runs when the customer presses ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["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 ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["withdrawal"]}," or ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["reverse-withdrawal"]},"."," ","The withdrawal form displays the reverse withdrawal option when the customer has pending payout requests."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["refreshToken"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["function"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Optional."]}," Function that returns a refreshed cashier token when the current token expires."]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"example-2","__idx":11},"children":["Example"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"JavaScript","header":{"controls":{"copy":{}}},"source":"RebillyCashier.renderWithdraw({\n cashierToken: \"TOKEN\",\n mountElement: \"#withdraw-form\",\n});\n","lang":"JavaScript"},"children":[]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["For more information, see ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/docs/dev-docs/integrate-a-withdrawal-form/"},"children":["Integrate a withdrawal form"]},"."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"slots-2","__idx":12},"children":["Slots"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Add slotted content as child elements of the mount element before you call ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["RebillyCashier.renderWithdraw()"]},"."," ","When the form mounts, the Cashier library moves these elements into the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["rebilly-withdraw-form"]}," web component."]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"width":"200","data-label":"Slot name"},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Slot name"]}," "]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Description"},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Description"]}]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["withdrawal-complete-action"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Content displayed on the withdrawal form result screen after a successful payout request."," ","If you provide this slot, it replaces the default ",{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Continue"]}," button."]}]}]}]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"HTML","header":{"controls":{"copy":{}}},"source":"
\n \n
\n","lang":"HTML"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"rebillycashierrenderreversewithdraw","__idx":13},"children":["RebillyCashier.renderReverseWithdraw()"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["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 ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["configuration"]}," object and returns the mounted web component element."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"JavaScript","header":{"controls":{"copy":{}}},"source":"RebillyCashier.renderReverseWithdraw({ cashierToken, mountElement });\n","lang":"JavaScript"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"mount-configuration-3","__idx":14},"children":["Mount configuration"]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"width":"150","data-label":"Option"},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Option"]}," "]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Type"},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Type"]}]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Description"},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Description"]}]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["cashierToken"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["string"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Required."]}," Cashier token."," ","Returned from the ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/catalog/all/cashiers/postcashier"},"children":["Create a cashier API operation"]}," as ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["cashierToken"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["mountElement"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Query selector or ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["HTMLElement"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Required."]}," ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement"},"children":["HTMLElement"]}," or a ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector#selectors"},"children":["query selector"]}," for the element into which the reverse withdrawal form should be placed."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["balances"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["object"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Optional."]}," Balance values to display in the reverse withdrawal form."," ","Use this option to override values returned by the API."," ","Supported properties: ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["balance"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["bonusBalance"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["pendingPayoutTotal"]},", and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["canWithdraw"]},"."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["refreshToken"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["function"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Optional."]}," Function that returns a refreshed cashier token when the current token expires."]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"example-3","__idx":15},"children":["Example"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"JavaScript","header":{"controls":{"copy":{}}},"source":"RebillyCashier.renderReverseWithdraw({\n cashierToken: \"TOKEN\",\n mountElement: \"#reverse-withdraw-form\",\n});\n","lang":"JavaScript"},"children":[]},{"$$mdtype":"Tag","name":"Admonition","attributes":{"type":"info"},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["This method does not support ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["completeAction"]},"."," ","To respond when the customer completes a reverse withdrawal, use the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["reverse-withdrawal-completed"]}," event with ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["RebillyCashier.on()"]},"."," ","For more information, see ",{"$$mdtype":"Tag","name":"MarkdownLink","attributes":{"href":"/docs/dev-docs/integrate-a-reverse-withdraw-form/"},"children":["Integrate a reverse withdrawal form"]},"."]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"slots-3","__idx":16},"children":["Slots"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Add slotted content as child elements of the mount element before you call ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["RebillyCashier.renderReverseWithdraw()"]},"."," ","When the form mounts, the Cashier library moves these elements into the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["rebilly-reverse-withdraw"]}," web component."]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"width":"200","data-label":"Slot name"},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Slot name"]}," "]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Description"},"children":[{"$$mdtype":"Tag","name":"strong","attributes":{},"children":["Description"]}]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["no-pending-withdrawal"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Content displayed when the customer has no pending payout requests."," ","If you do not provide this slot, the form displays a default message."]}]}]}]}]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"HTML","header":{"controls":{"copy":{}}},"source":"
\n
\n

No pending withdrawals

\n

You do not have any pending payout requests.

\n
\n
\n","lang":"HTML"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"rebillycashieron","__idx":17},"children":["RebillyCashier.on()"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Use this method to set up communication callbacks that trigger when certain events happen, such as ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["deposit-completed"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["withdrawal-completed"]},", and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["reverse-withdrawal-completed"]},"."," ","The ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["reverse-withdrawal-completed"]}," callback receives an object with ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["amount"]}," and ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["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."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"JavaScript","header":{"controls":{"copy":{}}},"source":"RebillyCashier.on('deposit-completed', (transaction) => {\n console.log('Deposit completed:', transaction);\n // Handle deposit completion event\n});\n\nRebillyCashier.on('withdrawal-completed', (payoutRequest) => {\n console.log('Withdrawal completed:', payoutRequest);\n // Handle withdrawal completion event\n});\n\nRebillyCashier.on('reverse-withdrawal-completed', (data) => {\n console.log('Reverse withdrawal completed:', data);\n // Handle reverse withdrawal completion event\n});\n","lang":"JavaScript"},"children":[]}]},"headings":[{"value":"Reference","id":"reference","depth":1},{"value":"RebillyCashier.render()","id":"rebillycashierrender","depth":2},{"value":"Mount configuration","id":"mount-configuration","depth":3},{"value":"Example","id":"example","depth":3},{"value":"Slots","id":"slots","depth":3},{"value":"RebillyCashier.renderDeposit()","id":"rebillycashierrenderdeposit","depth":2},{"value":"Mount configuration","id":"mount-configuration-1","depth":3},{"value":"Example","id":"example-1","depth":3},{"value":"Slots","id":"slots-1","depth":3},{"value":"RebillyCashier.renderWithdraw()","id":"rebillycashierrenderwithdraw","depth":2},{"value":"Mount configuration","id":"mount-configuration-2","depth":3},{"value":"Example","id":"example-2","depth":3},{"value":"Slots","id":"slots-2","depth":3},{"value":"RebillyCashier.renderReverseWithdraw()","id":"rebillycashierrenderreversewithdraw","depth":2},{"value":"Mount configuration","id":"mount-configuration-3","depth":3},{"value":"Example","id":"example-3","depth":3},{"value":"Slots","id":"slots-3","depth":3},{"value":"RebillyCashier.on()","id":"rebillycashieron","depth":2}],"frontmatter":{"seo":{"title":"Rebilly Cashier library reference","description":"Learn about Rebilly Cashier JavaScript library.","keywords":"Developer docs, Rebilly Cashier library.","lang":"en-US"}},"lastModified":"2026-07-21T15:06:02.000Z","pagePropGetterError":{"message":"","name":""}},"slug":"/docs/dev-docs/reference-rebilly-cashier","userData":{"isAuthenticated":false,"teams":["anonymous"]},"isPublic":true}