Transaction Form

Hurdlr's Transaction Form Embedded experience makes it easy for you to direct a user or accountant to a specific transaction for review. This serves as a simple way to have your users or their accountant interact with and update their transactions in the Hurdlr API

1. Initializing the Embedded Experience

To initialize the Hurdlr Embedded experience in your project, follow the instructions on Embedding Hurdlr's white-labelled UI.

2. Render the form of a specific transaction

To render a specific transaction overlay form, you will need to provide an elementId parameter, which is the HTML id of the main <div> where you would like the form to render from. The form will be styled with the CSS property “position: fixed”, so it can be overlayed on top of your existing UI. When your user selects a CTA to view the form, you simply need to invoke the following line of JavaScript:

Hurdlr.renderTransactionForm(elementId, entity, entityId);

You will need to provide an entity parameter to specify the type of the transaction. An entityId is also required. These parameters are described in the following table:

📘

Rendering the form for an accountant

If you're rendering the Transaction Form for an accountant (i.e. you've initialized Hurdlr Embedded for an accountant), you will additionally need to specify the userId for the client that the given transaction belongs to. The numeric userId can be obtained from the accountant users endpoint.

3. Reacting to user actions

After rendering a form, the user can review or edit the transaction as needed. If you’d like to display your own UI before a user opens or after closing a form, you will want to take advantage of the Hurdlr Embedded experience's registerTransactionFormListener functionality. By registering a listener, the provided callback function will be invoked with the data of the rendered transaction and the result of the form submission.

To register a listener, simply add the following line of JS to be ran once after Hurdlr.renderTransactionForm(...):

Hurdlr.registerTransactionFormListener(myTransactionFormCallback);

Whenever a user either opens the form or closes it, myTransactionFormCallback will be invoked with a JSON object as the single argument, containing the following attributes.

Example arguments for a myTransactionFormCallback invocation when rendering an Expense form is shown below.

{
   "type": "Hurdlr.TRANSACTION_FORM_OPEN",
   "data": {
     "id": 1234567,
     "status": "ACTIVE",
     "type": "BUSINESS",
     "date": "2024-01-01T00:00:00.000Z",
     "amount": 10,
     "apiName": "PLAID",
     "apiExpenseId": "12345678",
     ...
  },
  "error": null
}

{
 "type": "Hurdlr.TRANSACTION_FORM_CLOSE",
 "data": {
   "result": "SUCCESS",
     "errors": null,
     "id": "1234567",
     "dataObject": null,
     "didNotInsertBecauseDupe": false,
     "webhook": null
 },
 "error": null
}