Skip to main content

Reimbursement Widget

The reimbursement widget makes it easy for consumers to save receipts and file claims from anywhere within your portal using non-disruptive workflows.

Accessing the Widget Playground​

Click the button below to access the Widget Playground

Initialize the Widget​

const initializeWidget = async () => {
  const { status } = await window.fdReimbursementWidget.initialize({
    auth: () => Promise.resolve(`${SAML}`),
    htmlTarget: 'test',
  });
  if (status === 'SUCCESS') {
   /**
    * Widget initialization was successful!
    * If showOnInitialize (see below) is not true,
    * you'll likely want to call show() here:
    */
    const { status: showStatus } =  await window.fdReimbursementWidget.show();

    if (showStatus === 'SUCCESS') {
      console.log('iframe has loaded!')
    }
  } else if (status === 'ERROR') {
    console.error('error'!)
  }
};

Call the initialize method on the widget object This method requires an object as an argument with the following properties:

auth (Function) - required

A callback that returns a Promise that resolves with the signed SAML XML

htmlTarget (String) - required

A string that is the id of the HTML element to render the widget into

  • The string must be just the string without the id selector (e.g. 'widget-container' instead of '#widget-container')

options (Object) optional

  • language (String)
    • Optional language option to pass to the initialization method so the widget will render with the correct language
  • loader (Boolean)
    • Optional boolean to pass to the initialization method. If true, the widget will render a loading state until the iframe loads
  • showOnInitialize (Boolean)
    • Optional boolean to pass to the initialization method. If true, the widget will render as soon as the initialization is successful. Otherwise, show will need to be called manually
  • base64Encode (Boolean)
    • Optional boolean to pass to the initialization method. If true, this signifies that the saml passed to the auth method is encoded

If the initialization call is successful, it will return a status object of:

{ status: 'SUCCESS' }

If the initialization call fails, it will return a status object of:

{ status: 'ERROR', error: 'Error initializing widget' }

Render the Widget​

await window.fdReimbursementWidget.show();

If the initialization call returned a success status, call the asynchronous show method on the widget object. This method will render the widget component into the container specified by the htmlTarget property. This method accepts no arguments.

Once the call to show is successful and the iframe has loaded, it will return a status object of:

{
  status: 'SUCCESS';
}

If the call fails, it will return a status object of:

{ status: 'ERROR', errorMessage: 'Target element could not be found' OR 'No token provided' }

The call will fail if the token is not provided or the target element cannot be found.

Unmount the Widget​

window.fdReimbursementWidget.close();

Call the close method on the widget object whenever a user takes an action that should close the widget. This method will unmount the widget component from the DOM. This method accepts no arguments.

If the call to hide is successful, it will return a status object of:

{
  status: 'SUCCESS';
}

If the call fails, it will return a status object of:

{ status: 'ERROR', errorMessage: 'Target element could not be found' }

The call will fail if the target element cannot be found.