@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-inputsWith yarn:
yarn add @highnoteplatform/secure-inputsGenerate 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",
},
});