<fasten-stitch
    public-id="public_test_123456324234234"
    connect-mode="redirect"
    external-id="user_12345"
    external-state="unique-state-id"
>
</fasten-stitch>
​
public-id
string
required

This must be your API public ID. You can find it in your Fasten Connect Portal.

​
connect-mode
string
default:
"redirect"

Allows you to switch between popup and redirect modes. The default is redirect.

When using redirect mode, the component will redirect the user to the authentication page. On successful authentication, the user will be redirected back to your redirect_url page (configured in the Fasten Connect Portal) with query string parameters.

When using popup mode, the component will open a popup window to authenticate the user. On successful authentication, the popup window will close and the parent window will receive the authentication response via a orgConnectionCallback event.

​
reconnect-org-connection-id
string

(Optional) Useful when the patient connection credentials are invalid (due to expiration or revocation). Providing this reconnect-org-connection-id allows Fasten to reauthenticate the Patient and store their new credentials.

​
external-id
string

(Optional) An Opaque identifier, used to identify the patient in your system. This value will be returned in the response.

​
external-state
string

(Optional) An Opaque identifier, used to uniquely identify in connection request. This value should be unique for each request. This value will be returned in the response.

​
Response

The response content is the same for both redirect and popup modes. However the response delivery mechanism is different.

When connect-mode="redirect", the response will be encoded as query string parameters and sent to the redirect_url page configured in the Fasten Connect Portal.

https://www.example.com/callback?
org_connection_id=1234-1234-1234-1234-1234&
endpoint_id=1234-1234-1234-1234-1234&
portal_id=4567-4567-4567-4567-4567&
brand_id=7890-7890-7890-7890-7890&
external_id=user_12345
external_state="unique-state-id"
​
org_connection_id
string
required

Organization Connection Id is a unique identifier for the connection between the patient and the organization. You must store this value in your system to identify the patient in future API calls.

​
endpoint_id
string
required

Endpoint Id is a unique identifier for the endpoint that the patient has connected to. This value can be used to retrieve metadata about the endpoint (e.g. name, description, endpoint url information, etc.)

​
portal_id
string
required

Portal Id is a unique identifier for the Portal that the patient has connected to. This value can be used to retrieve branding information about the institution

​
brand_id
string
required

Brand Id is a unique identifier for the Brand that the patient has connected to. This value can be used to retrieve branding information about the institution

​
connection_status
string
required

The status of the connection. Possible values are authorized, rejected.

​
platform_type
string
required

An identifier for the EHR type associated with the connected endpoint.

​
external_id
string

(Optional) An Opaque identifier, used to identify the patient in your system. This value will be only be returned if it was previously provided to the stitch html element.

​
external_state
string

(Optional) An Opaque identifier, used to identify the connection request. This value will be only be returned if it was previously provided to the stitch html element.

​
Error Response

Similar to the “Response” section above, when an error occurs during the health system connection an error payload will be provided to you, encoded in the query string parameters or as a browser event.

When connect-mode="redirect", the error response will be encoded as query string parameters and sent to the redirect_url page configured in the Fasten Connect Portal.

https://www.example.com/callback?
error=invalid_request&
error_description=The+request+is+missing+a+required+parameter&
request_id=1234-1234-1234-1234-1234&
external_state="unique-state-id"
​
error
string
required

The error parameter will contain a short string representing the error that occurred.

For errors that occurred on the health system side, the possible values are:

  • invalid_client
  • invalid_grant
  • unauthorized_client
  • unsupported_grant_type
  • invalid_scope

For errors that occurred on the Fasten Health side, the possible values are:

  • fasten_unauthorized_client
  • fasten_invalid_request
  • fasten_server_error
  • fasten_token_exchange
​
error_description
string
required

The error_description parameter can only include ASCII characters, and will be a sentence or two at most describing the circumstance of the error.

​
request_id
string
required

Every error will have a unique request_id. When communicating with the Fasten Health development team, please provide the request_id, as it will make the debugging process much easier.

​
external_state
string

(Optional) An Opaque identifier, used to identify the connection request. This value will be only be returned if it was previously provided to the stitch html element.

​
Javascript API

The stitch Web Component has a Javascript API that can be used to manipulate the modal popup.

​
Methods

​
show()

Shows the modal popup.

  window.addEventListener('DOMContentLoaded',function () {
    //show the modal using the element selector.
    document.querySelector('fasten-stitch').show();
  });

​
hide()

Hide the modal popup.

  window.addEventListener('DOMContentLoaded',function () {
    ...

    //hide the modal using the element selector.
    document.querySelector('fasten-stitch').hide();
  });

​
Events

When in connect-mode="popup" mode, the stitch component will emit the following events:

​
orgConnectionCallback

This event is emitted when the user has successfully authenticated and the popup window has closed.

  window.addEventListener('DOMContentLoaded',function () {
    const el = document.querySelector('fasten-stitch');
    el.addEventListener('orgConnectionCallback', (event) => console.log(event.detail));
  });

​
Styling

Styling the stitch Web Component is possible using CSS. You can target the component using the fasten-stitch tag and select internal elements to apply custom styles.

  <style>
    fasten-stitch > button {
      background-color: green !important
    }
  </style>

The !important flag is required to override the default styles.

Quick Start