Choose a version:

PinPad

The PinPad component provides a secure numeric keypad interface for PIN entry and validation. Use it to collect PIN codes, passcodes, or other sensitive numeric input with proper masking and validation.

The component provides a secure numeric input interface specifically designed for PIN entry, with visual feedback that masks entered digits for security. It includes built-in validation for PIN length requirements, supports error states for invalid PINs, and provides haptic feedback on touch-enabled devices to confirm key presses during secure authentication workflows.

PinPad components meets security standards for PIN entry by preventing screenshot capture and display recording, protecting sensitive authentication data during payment authorization and staff access workflows.

Support

Targets (6)

Supported targets

Use cases

Staff authentication: Implement secure PIN verification for staff authentication or manager overrides.
Sensitive operations: Enable passcode entry for refunds, voids, or cash drawer access.
Loyalty verification: Provide secure numeric input for loyalty card PINs or gift card verification.
Time tracking: Create employee clock-in/clock-out interfaces requiring PIN identification.

Anchor to examplesExamples

Anchor to example-validate-a-pin-securelyValidate a PIN securely

Collect and validate PINs securely using a numeric keypad interface. This example demonstrates a PinPad with an onPinSubmit callback that validates entered PINs asynchronously. The validation function receives an array of numbers representing the entered digits and returns a Promise that resolves to PinValidationResult (either "accept" or "reject"). In this example, the validation simulates a 1-second async check against a test PIN sequence [1, 2, 3, 4, 5, 6]. The component masks digits for security, provides haptic feedback, and supports error states for invalid PINs—ideal for payment authorization or staff access workflows.

Validate a PIN securely

const onPinSubmit = (pin: number[]): Promise<PinValidationResult> => {

return new Promise((resolve) => {

setTimeout(() => {

const isPinValid =

pin.length === 6 && pin.every((digit, index) => digit === index + 1);

const result: PinValidationResult = isPinValid ? 'accept' : 'reject';

resolve(result);

}, 1000);

});

};

Examples

Validate a PIN securely
Description
Collect and validate PINs securely using a numeric keypad interface. This example demonstrates a PinPad with an `onPinSubmit` callback that validates entered PINs asynchronously. The validation function receives an array of numbers representing the entered digits and returns a Promise that resolves to `PinValidationResult` (either `"accept"` or `"reject"`). In this example, the validation simulates a 1-second async check against a test PIN sequence [1, 2, 3, 4, 5, 6]. The component masks digits for security, provides haptic feedback, and supports error states for invalid PINs—ideal for payment authorization or staff access workflows.
Default
```
const onPinSubmit = (pin: number[]): Promise<PinValidationResult> => {
  return new Promise((resolve) => {
    setTimeout(() => {
      const isPinValid =
        pin.length === 6 && pin.every((digit, index) => digit === index + 1);
      const result: PinValidationResult = isPinValid ? 'accept' : 'reject';
      resolve(result);
    }, 1000);
  });
};
```

Anchor to propertiesProperties

Configure the following properties on the PinPad component.

Anchor to onSubmit onSubmit (pin: number[]) => Promise<> required: A callback function executed when the PIN is submitted, receiving the PIN as an array of numbers. Must return a Promise that resolves to either 'accept' or 'reject' to indicate validation success or failure.
Anchor to label label string: The content for the prompt displayed on the pin pad that instructs users what to enter.
Anchor to masked masked boolean: Whether the entered PIN should be masked with dots or asterisks to protect privacy and security.
Anchor to maxPinLength maxPinLength: The maximum length of the PIN that users can enter, constraining the number of digits.
Anchor to minPinLength minPinLength: The minimum length of the PIN that users must enter before submission is allowed.
Anchor to onPinEntry onPinEntry (pin: number[]) => void: A callback function executed when a PIN is entered, receiving the PIN as an array of numbers. Use this for real-time feedback or validation during PIN entry.
Anchor to pinPadAction pinPadAction: A call-to-action configuration displayed between the entry view and the keypad, consisting of a label and function that returns the current PIN.

PinLength

Defines the allowed PIN length values that constrain how many digits users can enter. Available lengths: - `4`: A four-digit PIN length, commonly used for basic security codes and quick authentication. - `5`: A five-digit PIN length for moderate security requirements. - `6`: A six-digit PIN length, commonly used for enhanced security codes and verification. - `7`: A seven-digit PIN length for higher security requirements. - `8`: An eight-digit PIN length for strong security and complex authentication scenarios. - `9`: A nine-digit PIN length for very high security requirements. - `10`: A ten-digit PIN length, the maximum supported for highly secure authentication workflows.

4 | 5 | 6 | 7 | 8 | 9 | 10

PinValidationResult

Defines the validation result values that the `onSubmit` callback must return to indicate PIN verification status. Available values: - `accept`: A validation result indicating the PIN is correct and authentication was successful. - `reject`: A validation result indicating the PIN is incorrect and authentication failed.

'accept' | 'reject'

PinPadActionType

Defines the configuration object for action buttons displayed between the PIN entry view and keypad.

label
The label text displayed on the action button.
```
string
```
onPress
A callback function executed when the action button is pressed, returning the current PIN as an array of numbers.
```
() => Promise<number[]>
```

export interface PinPadActionType {
  /**
   * The label text displayed on the action button.
   */
  label: string;
  /**
   * A callback function executed when the action button is pressed, returning the current PIN as an array of numbers.
   */
  onPress: () => Promise<number[]>;
}

Anchor to best-practicesBest practices

Mask sensitive entry: Set masked to true for security-related PIN entry to prevent shoulder-surfing.
Set appropriate constraints: Define minPinLength and maxPinLength based on security needs (4-6 for basic, 6-10 for higher security).
Validate securely on backend: Use onSubmit for server-side verification. Return accept or reject. Implement rate limiting.
Write clear labels: Use direct prompts like "Enter Manager PIN" rather than verbose text.
Use PIN terminology: Always use "PIN" in all capitals.

Anchor to limitationsLimitations

PinPad is designed for numeric PIN entry only—alphanumeric passcodes or complex passwords require different input components.
PIN length is constrained to 4-10 digits—requirements outside this range need alternative authentication methods.
The component provides the keypad interface and basic validation—additional security measures like rate limiting, attempt tracking, or lockout mechanisms must be implemented in your onSubmit callback.

Was this page helpful?