npm package: @highnoteplatform/secure-inputs
Description: Secure input fields for your customer.
Author: packages@highnote.com
Latest version: 1.7.1

# @highnoteplatform/secure-inputs

> **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 Secure Inputs SDK allows you to accept sensitive data from your
customer securely and seamlessly using iframes. This allows you to avoid
sensitive data (like PCI-scoped data) flowing through your servers or
being accessible to scripts running on your page.

## Usage

### Secure Inputs Fields

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

#### Installation

With npm:

```sh
npm i @highnoteplatform/secure-inputs
```

With yarn:

```sh
yarn add @highnoteplatform/secure-inputs
```

#### Generate a client token

On your server, generate a client token using the GraphQL API.

<!-- markdownlint-disable MD013 -->

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

<!-- markdownlint-enable MD013 -->

<!-- markdownlint-disable MD036 -->

**GraphQL query**

```graphql
mutation GeneratePaymentCardClientToken(
  $input: GeneratePaymentCardClientTokenInput!
) {
  generatePaymentCardClientToken(input: $input) {
    ... on ClientToken {
      value
      expirationDate
    }
  }
}
```

**Input variables**

```json
{
  "input": {
    "paymentCardId": "MC43LjE=",
    "permissions": ["SET_PAYMENT_CARD_PIN"]
  }
}
```

**Response**

```json
{
  "data": {
    "generatePaymentCardClientToken": {
      "value": "TOKEN",
      "expirationDate": "2022-02-07T20:04:50.633Z"
    }
  },
  "extensions": {
    "requestId": "example-request-id"
  }
}
```

#### Prepare your HTML

You will need to provide the Secure Inputs with the elements you want to render
iframes into for each use case.

##### PIN

```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>Edit Payment Card PIN</title>
  </head>
  <body>
    <p>Set your new PIN here:</p>
    <div id="pin">
      <!-- An iframe will be injected here -->
    </div>
  </body>
</html>
```

#### Initialize the library

```typescript
import { renderFields } from "@highnoteplatform/secure-inputs";

const { unmount } = await renderFields({
  onSuccess: (element) => {
    // Inform the user on success
  },
  onError: (error) => {
    // Handle errors
  },

  // Specify the individual fields to render data into
  elements: {
    pin: {
      clientToken: "client token from server",
      // This is the same paymentCardId used to generate the token
      paymentCardId: "MC43LjE=",
      selector: "#pin",
    },
});
```

#### Card Tokenization (Card Number Only)

For card tokenization with only the card number (PAN),
you can use the simplified configuration.

```typescript
import { renderFieldsForTokenization } from "@highnoteplatform/secure-inputs";
import type { SecureInputsTokenizationConfig } from "@highnoteplatform/types";

const config: SecureInputsTokenizationConfig = {
  clientToken: "client token from server",
  onSuccess: (paymentMethodToken) => {
    // Handle successful tokenization
    console.log("Tokenized card:", paymentMethodToken);
  },
  onError: (error) => {
    // Handle errors
    console.error("Tokenization failed:", error);
  },
  onReady: () => {
    // Fields are ready for input
    console.log("Secure inputs ready");
  },

  // Only cardNumber is required
  elements: {
    cardNumber: {
      selector: "#card-number",
    },
  },
};

const { submit, unmount } = await renderFieldsForTokenization(config);

// Submit the form when ready
document.getElementById("submit-button")?.addEventListener("click", () => {
  submit();
});
```