---
title: PinPad
description: A component used to authenticate or identify individuals through a standarized number pad.
api_version: 2024-10
api_name: pos-ui-extensions
source_url:
  html: https://shopify.dev/docs/api/pos-ui-extensions/2024-10/components/pinpad
  md: https://shopify.dev/docs/api/pos-ui-extensions/2024-10/components/pinpad.md
---

# Pin​Padcomponent

A component used to authenticate or identify individuals through a standarized number pad.

## PinPad

* onSubmit

  (pin: number\[]) => Promise\<PinValidationResult>

  required

  The function to be called when the PIN is submitted.

* label

  string

  The content for the prompt on the pin pad.

* masked

  boolean

  Whether the entered PIN should be masked.

* maxPinLength

  PinLength

  The maximum length of the PIN.

* minPinLength

  PinLength

  The minimum length of the PIN.

* onPinEntry

  (pin: number\[]) => void

  The function to be called when a PIN is entered.

* pinPadAction

  PinPadActionType

  The call to action between the entry view and the keypad, consisting of a label and function that returns the pin.

### PinLength

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

### PinValidationResult

```ts
'accept' | 'reject'
```

### PinPadActionType

* label

  The label for the action button.

  ```ts
  string
  ```

* onPress

  The function to be called when the action button is pressed.

  ```ts
  () => Promise<number[]>
  ```

```ts
export interface PinPadActionType {
  /**
   * The label for the action button.
   */
  label: string;
  /**
   * The function to be called when the action button is pressed.
   */
  onPress: () => Promise<number[]>;
}
```

### Examples

* #### Validation

  ##### Default

  ```ts
  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);
    });
  };
  ```

## Preview

![](https://shopify.dev/images/templated-apis-screenshots/pos-ui-extensions/2024-10/pin-pad-default.png)

## Validating a PIN Example

This code defines a function onPinSubmit that simulates the validation of a Personal Identification Number (PIN). The function takes an array of numbers as input, representing the PIN entered by a user.

The function returns a Promise that resolves with a PinValidationResult, which can be either 'accept' or 'reject'. The Promise simulates an asynchronous operation using setTimeout with a delay of 1 second.

This code simulates an asynchronous operation using the setTimeout callback. The code checks if the entered PIN matches the sequence \[1, 2, 3, 4, 5, 6]. If the entered PIN matches this sequence, the Promise resolves with 'accept'; otherwise, it resolves with 'reject'.

This function can be used to simulate PIN validation in a system where the correct PIN is \[1, 2, 3, 4, 5, 6].

## Guidelines

* Due to the nature of this component and the intended UX for this type of action, we recommend surfacing this in a full screen modal.

* Please be advised that when utilizing the onSubmit callback, it is your responsibility to manage the navigation to the subsequent screen or dismissal of the modal. The component will only handle rejection of invalid PIN cases.

## Content guidelines

When referring to a personal identification number, refer to it as a PIN, with all capital letters.

Also when writing the PIN title or PinPadAction label:

* Be concise
* Never go over 4 words
* Do not use punctuation
* Start with a capital letter

### Title (Enter PIN)

✅ \[PIN pad title] Enter PIN\
✅ \[PIN pad title] Enter staff PIN\
✅ \[PIN pad title] Create PIN\
❌ \[PIN pad title] Please put in a PIN\
❌ \[PIN pad title] Create a PIN

### PinPadAction (Generate random PIN, Clear)

For PIN Pad actions, the action label should clearly communicate the action.

✅ \[PIN pad action label] Generate random PIN\
❌ \[PIN pad action label] Please create a new random PIN

You can use just \[verb], if it's obvious from the surrounding context what the \[item] is:

✅ \[PIN pad action label] Clear\
❌ \[PIN pad action label] Clear PIN