Noiseless Praying Mantis

    @highnoteplatform/secure-inputs
    TypeScript icon, indicating that this package has built-in type declarations

    0.13.0 • Public • Published

    @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.

    Installation

    With npm:

    npm i @highnoteplatform/secure-inputs

    With yarn:

    yarn add @highnoteplatform/secure-inputs

    Generate a client token

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

    See the generatePaymentCardClientToken docs.

    GraphQL query

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

    Input variables

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

    Response

    {
      "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
    <!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

    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",
        },
    });

    Keywords

    none

    Install

    npm i @highnoteplatform/secure-inputs

    Homepage

    highnote.com

    DownloadsWeekly Downloads

    14

    Version

    0.13.0

    License

    MIT

    Unpacked Size

    62 kB

    Total Files

    8

    Last publish

    Collaborators

    • quinnjn-hn
    • august_highnote
    • tundera
    • mborosh-hn
    • highnote-lisa
    • tmossboss