npm package: @highnoteplatform/risk-application
Description: Risk application SDK for early detection of fraud.
Author: packages@highnote.com
Latest version: 1.1.2

# @highnoteplatform/risk-application

> **Note:** This library is in a pre-release phase. Prior to the release of
> version `1.0.0`, breaking changes may be introduced.

The Highnote Risk Application SDK allows you to enable risk intelligence
to your account holder applications.

## Usage

### Risk Application SDK Documentation

> **Note:** Read the full documentation [here](https://highnote.com/docs/basics/clientside-and-sdks/risk-application-sdk).

#### Installation

With npm:

```sh
npm i @highnoteplatform/risk-application
```

With yarn:

```sh
yarn add @highnoteplatform/risk-application
```

#### Generate a Risk Application SDK Session token

On your server, generate a risk application sdk session token using the GraphQL API.

<!-- markdownlint-disable MD013 -->

> See the [generateRiskApplicationSDKSessionToken](https://highnote.com/docs/reference/mutation/generateRiskApplicationSDKSessionToken) docs.

<!-- markdownlint-enable MD013 -->

<!-- markdownlint-disable MD036 -->

**GraphQL query**

```graphql
mutation generateRiskApplicationSdkSessionToken {
  generateRiskApplicationSDKSessionToken {
    __typename
    ... on RiskApplicationSDKSessionToken {
      sessionToken
    }
    ... on AccessDeniedError {
      message
    }
    ... on UserError {
      errors {
        errorPath
        code
        description
      }
    }
  }
}
```

**Response**

```json
{
  "data": {
    "generateRiskApplicationSDKSessionToken": {
      "sessionToken": "TOKEN"
    }
  },
  "extensions": {
    "requestId": "example-request-id"
  }
}
```

#### Prepare your HTML

The Risk Application SDK automatically extract element's
name via various DOM attributes like name and id.
To ensure smooth integration follow the guidance found
[here](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete)
Example html below.

#### Account Holder Application

You can initialize the Risk Application SDK by calling
`initializeRiskApplicationSdk`.
This returns a Promise that contains a reference a `clientToken` to be
used with the create account holder mutations. You can either use the
token or invoke the `submit` function returned by the
`initializeRiskApplicationSdk` function.

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Account Holder Application</title>
  </head>
  <body>
    <p>Fill out Account holder application here:</p>
    <div>
      <form autocomplete="on" id="riskApplicationSdkConfig">
        <div>
          <div>
            <label for="firstName">First Name:</label>
            <input name="firstName" type="text" autocomplete="given-name" />
          </div>
          <div>
            <label for="lastName">Last Name:</label>
            <input name="lastName" type="text" autocomplete="family-name" />
          </div>
          <div>
            <label for="line1">Street Address Line 1:</label>
            <input name="line1" type="text" autocomplete="address-line1" />
          </div>
          <div>
            <label for="line2">Street Address Line 2:</label>
            <input name="line2" type="text" autocomplete="address-line2" />
          </div>
          <div>
            <label for="city">City:</label>
            <input name="city" type="text" autocomplete="address-level2" />
          </div>
          <div>
            <label for="state">State:</label>
            <input name="state" type="text" autocomplete="address-level1" />
          </div>
          <div>
            <label for="postal">Postal Code:</label>
            <input name="postal" type="text" autocomplete="postal-code" />
          </div>
          <div>
            <label for="country">Country:</label>
            <input name="country" type="text" autocomplete="country" />
          </div>
          <div>
            <label for="dob">Date of Birth:</label>
            <input type="date" id="dob" autocomplete="bday" />
          </div>
          <div>
            <label for="phone">Phone:</label>
            <input name="phone" type="tel" autocomplete="tel" />
          </div>
          <div>
            <label for="email">Email:</label>
            <input name="email" type="email" autocomplete="email" />
          </div>
        </div>
        <button type="submit"></button>
      </form>
    </div>
  </body>
</html>
```

#### Initialize the library

The clientToken outputted by `initializeRiskApplicationSdk`
must be used to submit the account holder application.

```typescript
import { initializeRiskApplicationSdk } from "@highnoteplatform/risk-application";

function handleRiskApplicationSdkConfigForm(riskSdkReturn: RiskApplicationSdkReturn) {
  return async function handler(event: Event) {
    event.preventDefault();
    // Graphql response
    const graphqlResponse = riskSdkReturn riskSdk.submit();
  };
}


const accountHolderForm = document.querySelector<HTMLElement>(
  "#accountHolderForm"
);

const sdkResponse = await initializeRiskApplicationSdk({
  riskApplicationSdkToken: "token",
  environment: "test",
  form: accountHolderForm,

  onError: (error: RiskApplicationError) => {
    switch (error.name) {
      case "AccessDeniedError":
        // Handle access denied error
        break;
      case "AccountHolderFormMissingRequiredField":
        // Handle account holder form missing required field. Add fields to form,
        // and/or ensure input names match
        break;
      case "RiskApplicationInternalError":
        // Handle initiation issues. Contact Highnote
        break;
      case "USBusinessAccountHolderFormNotSupported":
        // Change form to be person oriented
        break;
      case "UserError":
        // Handle user errors
        break;
      default:
        // Unknown error encountered
        console.log(error);
        break;
    }
  },

  onSuccess: (response: RiskApplicationSdkResponse) => {
    if (response.__typename === "USPersonAccountHolder") {
      alert(`Person created ${response.id}`);
    }
  },
})!;


accountHolderForm.addEventListener(
  "submit",
  handleRiskApplicationSdkConfigForm(sdkResponse)
);
```